Develop

.env.development

@@ -1,4 +1,5 @@
 VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com"
 VITE_AUTH0_CLIENT_ID="BOU97TMrp85ftAnrXSLTiYYiuifp9jfz"
 VITE_API='https://network-class-server.ru'
-VITE_WS_API='wss://network-class-server.ru'
+VITE_WS_API='wss://network-class-server.ru'
+VITE_VIDEOSDK_APP='http://localhost:3000/react-rtc-demo'

.env.production

@@ -1,4 +1,5 @@
 VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com"
 VITE_AUTH0_CLIENT_ID="fOB3CWsgCnNLI5q7OMWe9DfWaAXOme2o"
 VITE_API='https://network-class-server.ru'
-VITE_WS_API='wss://network-class-server.ru'
+VITE_WS_API='wss://network-class-server.ru'
+VITE_VIDEOSDK_APP='https://network-class-videosdk-client.pages.dev'

package.json

@@ -15,6 +15,7 @@
     "@types/lodash": "^4.14.196",
     "@types/react-webcam": "^3.0.0",
     "axios": "^1.4.0",
+    "classnames": "^2.3.2",
     "dotenv": "^16.3.1",
     "jest": "^29.5.0",
     "lib-jitsi-meet": "^1.0.6",

src/app/App.tsx

@@ -4,20 +4,19 @@ import "./index.css";
 
 import Join from "../pages/Join/Join";
 import Lobby from "../pages/Lobby/Lobby";
-import LobbyAccess from "../pages/Lobby/LobbyAccess";
-import LobbyMy from "../pages/Lobby/LobbyMy";
 import JoinCall from "../pages/JoinCall/JoinCall";
 import CallPage from "../pages/CallPage/CallPage";
 import CallPageUI from "../pages/CallPageCustomUI/CallPage";
 import Loader from "../shared/ui/loader/Loader";
 import { useAuth0 } from "@auth0/auth0-react";
+import Profile from "../pages/Profile/Profile";
 
 const App: React.FC = () => {
   const { loginWithRedirect, isAuthenticated, isLoading } = useAuth0();
 
   useEffect(() => {
     if (!isAuthenticated && !isLoading) {
-      loginWithRedirect(); 
+      loginWithRedirect();
     }
   }, [isLoading]);
 
@@ -29,11 +28,10 @@ const App: React.FC = () => {
         <Routes>
           <Route path="/" element={<Join />} />
           <Route path="/lobby" element={<Lobby />} />
-          <Route path="/lobby/access" element={<LobbyAccess />} />
-          <Route path="/lobby/my" element={<LobbyMy />} />
           <Route path="/joinlesson/:id" element={<JoinCall />} />
           <Route path="/lesson/:id" element={<CallPage />} />
-          <Route path="/lesson-ui" element={<CallPageUI/>} />
+          <Route path="/lesson-ui" element={<CallPageUI />} />
+          <Route path="/profile" element={<Profile />} />
         </Routes>
       )}
     </>

src/app/index.css

@@ -60,6 +60,11 @@ input::-ms-clear {
   display: none;
 }
 
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 button {
   cursor: pointer;
 }

src/entities/room/api/models.ts

@@ -7,4 +7,4 @@ export interface IRoom {
     isActive: boolean,
     owner_email: string,
     owner_fullname: string
-}
+}

src/entities/room/ui/JoinButton.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 const Path = styled.path``;
 
-const Button = styled.button`
+const Button = styled.a`
   font-family: var(--font);
   font-size: 18px;
   font-style: normal;
@@ -30,15 +30,13 @@ const Button = styled.button`
 `;
 
 interface Props {
-  href: number,
+  href: string,
 }
 
 const JoinButton: React.FC<Props> = ({ href }) => {
   return (
     <Button
-      onClick={() => {
-        location.href = `/joinlesson/${href}`;
-      }}
+      href={`${href}`}
     >
       <p>Подключиться</p>
       <svg

src/entities/room/ui/RoomCard.tsx

@@ -13,7 +13,6 @@ const Container = styled.div`
   display: flex;
   width: calc(100% - 20px);
   padding: 24px;
-  justify-content: space-between;
   align-items: center;
 
   border-radius: 10px;
@@ -24,13 +23,13 @@ const Container = styled.div`
 
 const Info = styled.div`
   display: flex;
-  width: 329px;
-  justify-content: space-between;
+  width: 392px;
+  gap: 24px;
   align-items: center;
 `;
 
 const Title = styled.h3`
-  width: 259px;
+  width: 100%;
   font-family: var(--font);
   font-size: 20px;
   font-style: normal;
@@ -41,7 +40,7 @@ const Title = styled.h3`
 `;
 
 const Teacher = styled.h4`
-  min-width: 251px;
+  min-width: 360px;
   font-family: var(--font);
   font-size: 18px;
   font-style: normal;
@@ -56,6 +55,7 @@ const Access = styled.div`
   width: 229px;
   justify-content: space-between;
   align-items: center;
+  margin-left: 129px;
 `;
 
 let Path = styled.path``;
@@ -100,9 +100,9 @@ const RoomCard: React.FC<Props> = ({ room }) => {
       ) : (
         <img src={callDisabled} alt="недоступен" />
       )}
-      <Access style={room.owner_fullname === user?.name ? {width: "249px"} : {}} >
-        <JoinButton href={room.id} />
-        <Tooltip active={tooltipActive}>
+      <Access>
+        <JoinButton href={`${import.meta.env.VITE_VIDEOSDK_APP}/?roomId=${room.id}&email=${user?.email}`} />
+        <Tooltip active={tooltipActive} message="Ссылка скопирована!">
           <Button onClick={copyLink}>
             <svg
               width="18"

src/entities/user/api/models.ts

@@ -1,5 +1,5 @@
 export interface IUser {
     full_name: string,
     photo_url: string,
-    enail: string
+    email: string
 }

src/entities/user/api/useAddUser.ts

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+
+export const useAddUser = (fullname: any, photo_url: string, email: any) => {
+    const API = String(import.meta.env.VITE_API);
+    const [user, setUser] = useState({});
+
+    const newUser = {
+        full_name: fullname,
+        photo_url: photo_url,
+        email: email
+    }
+
+    async function createUser() {
+      await fetch(`${API}/users`, {
+        method : 'POST',
+        headers: {
+          'Content-type': 'application/json',
+        },
+        body : JSON.stringify(newUser),
+      })
+      .then(response => response.text())
+      .then(response => {
+          response = JSON.parse(response);
+          console.log(response);
+          setUser(response);
+      })
+    }
+
+    useEffect(() => {
+      createUser();
+    }, [])
+
+  return user;
+}

src/entities/user/ui/UserCard.tsx

@@ -1,9 +1,104 @@
-import React from 'react'
+import { useAuth0 } from "@auth0/auth0-react";
+import React from "react";
+import { styled } from "styled-components";
+import avatar from "../../../../public/icons/avatar.svg";
+import CardButton from "../../../shared/ui/cardButton/CardButton";
+import ProfileFormLayout from "../../../widgets/layout/ProfileFormLayout";
+import profileFormState from "../../../pages/Profile/store/profileFormState";
+import { observer } from "mobx-react-lite";
+
+const User = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+`;
+
+const Avatar = styled.img`
+  width: 86px;
+  height: 86px;
+  border-radius: 10px;
+`;
+
+const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+`;
+
+const Name = styled.div`
+  font-size: 22px;
+  font-weight: 500;
+`;
+
+const Email = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+
+const EmailText = styled.div`
+  font-size: 20px;
+  font-weight: 300;
+  line-height: normal;
+`;
+
+const AccessEmail = styled.a`
+  font-size: 20px;
+  font-weight: 300;
+  line-height: normal;
+`;
+
+const AccessText = styled.a`
+  color: var(--red, #f95a39);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;
+
+const UserCard: React.FC = observer(() => {
+  const { user } = useAuth0();
+
+  const sendAccess = () => {
+    profileFormState.confirmEmail();
+  };
+
+  const openForm = () => {
+    profileFormState.openEditForm();
+  };
 
-const UserCard: React.FC= () => {
   return (
-    <div>UserCard</div>
-  )
-}
+    <ProfileFormLayout>
+      <User>
+        <Avatar src={avatar && user?.picture} />
+        <Info>
+          <Name>{user?.name}</Name>
+          <Email>
+            <EmailText>{user?.email}</EmailText>
+            {!user?.email_verified ? (
+              <AccessEmail>
+                {profileFormState.isEmailConfirmed ? (
+                  <div style={{ color: "var(--green, #5bc259)" }}>
+                    На вашу почту выслано письмо с подтверждением
+                  </div>
+                ) : (
+                  <AccessText onClick={sendAccess}>
+                    Подтвердите почту
+                  </AccessText>
+                )}
+              </AccessEmail>
+            ) : (
+              ""
+            )}
+          </Email>
+        </Info>
+      </User>
+      <CardButton onClick={openForm}>Изменить</CardButton>
+    </ProfileFormLayout>
+  );
+});
 
-export default UserCard
+export default UserCard;