Develop

.env.development

@@ -2,4 +2,4 @@ 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_VIDEOSDK_HREF=''
+VITE_VIDEOSDK_APP='http://localhost:3000/react-rtc-demo'

.env.production

@@ -2,4 +2,4 @@ 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_VIDEOSDK_HREF=''
+VITE_VIDEOSDK_APP='https://network-class-videosdk-client.pages.dev'

src/entities/room/ui/RoomCard.tsx

@@ -101,8 +101,8 @@ const RoomCard: React.FC<Props> = ({ room }) => {
         <img src={callDisabled} alt="недоступен" />
       )}
       <Access>
-        <JoinButton href={`https://network-class-videosdk-client.pages.dev/?roomId=${room.id}&email=${user?.email}`} />
-        <Tooltip active={tooltipActive}>
+        <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/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,21 +1,11 @@
 import { useAuth0 } from "@auth0/auth0-react";
-import React, { useState } from "react";
+import React from "react";
 import { styled } from "styled-components";
 import avatar from "../../../../public/icons/avatar.svg";
 import CardButton from "../../../shared/ui/cardButton/CardButton";
-
-const Container = styled.div`
-  font-family: var(--font);
-  color: #000;
-  display: flex;
-  width: 100%;
-  padding: 20px;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 10px;
-  background: var(--white, #fff);
-  box-shadow: 0px 0px 4px 0px #e5eaf8;
-`;
+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%;
@@ -69,16 +59,19 @@ const AccessText = styled.a`
   }
 `;
 
-const UserCard: React.FC = () => {
-  const [isEmailConfirmed, setIsEmailConfirmed] = useState(false);
+const UserCard: React.FC = observer(() => {
   const { user } = useAuth0();
 
   const sendAccess = () => {
-    setIsEmailConfirmed(true);
+    profileFormState.confirmEmail();
+  };
+
+  const openForm = () => {
+    profileFormState.openEditForm();
   };
 
   return (
-    <Container>
+    <ProfileFormLayout>
       <User>
         <Avatar src={avatar && user?.picture} />
         <Info>
@@ -87,7 +80,7 @@ const UserCard: React.FC = () => {
             <EmailText>{user?.email}</EmailText>
             {!user?.email_verified ? (
               <AccessEmail>
-                {isEmailConfirmed ? (
+                {profileFormState.isEmailConfirmed ? (
                   <div style={{ color: "var(--green, #5bc259)" }}>
                     На вашу почту выслано письмо с подтверждением
                   </div>
@@ -103,9 +96,9 @@ const UserCard: React.FC = () => {
           </Email>
         </Info>
       </User>
-      <CardButton>Изменить</CardButton>
-    </Container>
+      <CardButton onClick={openForm}>Изменить</CardButton>
+    </ProfileFormLayout>
   );
-};
+});
 
 export default UserCard;

src/features/Copy/ui/CopyLink.tsx

@@ -28,7 +28,7 @@ export const CopyLink: React.FC = () => {
   }
 
   return (
-    <Tooltip active={tooltipActive}>
+    <Tooltip active={tooltipActive} message="Ссылка скопирована!">
       <Button onClick={copyLink}>
         <svg
           width="18"

src/features/createRoom/model/index.ts

@@ -1,11 +1,11 @@
 import { IUser } from "../../../shared/api/models";
-import { AddUserThunk } from "../../../entities/user/api/addUser";
 
 export const CreateThunk = (event: any, title: string, isPublic: boolean, user: IUser) => {
     event.preventDefault();
-    AddUserThunk(user?.name, 'test', user?.email);
     const API = String(import.meta.env.VITE_API);
 
+    console.log(user?.email);
+
     const newRoom = {
         title: title,
         url: 'https://network-class.pages.dev/joinlesson/1',

src/features/editUser/index.ts

@@ -0,0 +1 @@
+export { EditUserForm } from "./ui/EditUserForm";

src/features/editUser/ui/EditUserForm.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import styles from "./styles.module.css";
+import ProfileFormLayout from "../../../widgets/layout/ProfileFormLayout";
+import { useAuth0 } from "@auth0/auth0-react";
+import avatarDefault from "../../../../public/icons/avatar.svg";
+import FormButton from "../../../shared/ui/formButton/FormButton";
+import profileFormState from "../../../pages/Profile/store/profileFormState";
+import { observer } from "mobx-react-lite";
+
+const Form = styled.form`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    left: -2px;
+    right: -2px;
+    border-radius: 12px;
+    background: linear-gradient(
+      223deg,
+      rgba(255, 178, 64, 0.9) 0%,
+      rgba(216, 97, 196, 0.9) 50.52%,
+      rgba(23, 94, 241, 0.9) 100%
+    );
+    z-index: -1;
+  }
+`;
+
+export const EditUserForm: React.FC = observer(() => {
+  const { user } = useAuth0();
+  const [avatar, setAvatar] = useState(user?.picture || avatarDefault);
+  const [name, setName] = useState(user?.name);
+
+  const sendAccess = () => {
+    profileFormState.confirmEmail();
+  };
+
+  const saveChanges = () => {
+    profileFormState.closeEditForm();
+  };
+
+  const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files[0]) {
+      setAvatar(URL.createObjectURL(event.target.files[0]));
+    }
+  };
+
+  return (
+    <ProfileFormLayout>
+      <Form
+        action=""
+        autoComplete="off"
+        method="post"
+        encType="multipart/form-data"
+        onSubmit={saveChanges}
+      >
+        <div className={styles.user}>
+          <div className={styles.avatar}>
+            <img
+              src={avatar}
+              alt=""
+              style={{ width: "100%", height: "100%", borderRadius: "7px" }}
+            />
+            <input
+              className={styles.inputAvatar}
+              type="file"
+              title=" "
+              onChange={onImageChange}
+            />
+          </div>
+          <div className={styles.info}>
+            <input
+              className={styles.name}
+              type="text"
+              value={name}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setName(e.target.value)
+              }
+              autoFocus
+            />
+            <div className={styles.email}>
+              <div className={styles.emailText}>{user?.email}</div>
+              {!user?.email_verified ? (
+                <a className={styles.accessEmail}>
+                  {profileFormState.isEmailConfirmed ? (
+                    <div style={{ color: "var(--green, #5bc259)" }}>
+                      На вашу почту выслано письмо с подтверждением
+                    </div>
+                  ) : (
+                    <a className={styles.accessText} onClick={sendAccess}>
+                      Подтвердите почту
+                    </a>
+                  )}
+                </a>
+              ) : (
+                ""
+              )}
+            </div>
+          </div>
+        </div>
+        <FormButton>Сохранить</FormButton>
+      </Form>
+    </ProfileFormLayout>
+  );
+});

src/features/editUser/ui/styles.module.css

@@ -0,0 +1,71 @@
+.user {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.avatar {
+  width: 86px;
+  height: 86px;
+  border-radius: 10px;
+  border: 2px dashed #175ef1;
+  position: relative;
+}
+
+.inputAvatar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: transparent;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::file-selector-button {
+    display: none;
+  }
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.name {
+  width: 100%;
+  font-size: 22px;
+  font-weight: 500;
+}
+
+.email {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.emailText {
+  font-size: 20px;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.accessEmail {
+  font-size: 20px;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.accessText {
+  color: var(--red, #f95a39);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}

src/pages/Join/Join.tsx

@@ -9,15 +9,24 @@ import { EnterClassForm } from "../../features/EnterClass/index.ts";
 import FunctionsList from "../../widgets/FunctionsList/FunctionsList.tsx";
 import functions from "../../widgets/FunctionsList/functionsObject.tsx";
 import ProfilePanel from "../../widgets/ProfilePanel/ProfilePanel.tsx"
+import { useAuth0 } from "@auth0/auth0-react";
+import { useAddUser } from "../../entities/user/api/useAddUser.ts";
 
 const Join: React.FC = () => {
+  const { isAuthenticated, user } = useAuth0();
+
+  if (isAuthenticated) {
+    useAddUser(user?.name, 'test', user?.email);
+  }
 
   return (
     <div className={styles.Join}>
       <div className={styles.leftSide}>
         <header className={styles.header}>
-          <img src={logo} alt="Логотип" />
-          <div className={styles.titleApp}>Сетевой учебный класс</div>
+          <div className={styles.logo}>
+            <img src={logo} alt="Логотип" />
+            <div className={styles.titleApp}>Сетевой учебный класс</div>
+          </div>
           <ProfilePanel />
         </header>
         <main className={styles.main}>