add page profile

src/App.jsx

@@ -1,23 +1,22 @@
 import React, { useState } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
-import { FormsData } from "./context";
+import { FormsData, UserData } from "./context";
 import classes from "./assets/styles/app.module.scss"
 import NavBar from "./components/NavBar.jsx";
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 const App = () => {
     const navigate = useNavigate();
-    const [forms, setForms] = useState([])
+    const [forms, setForms] = useState([]);
+    const [user, setUser] = useState(false);
 
     return (
-        <FormsData.Provider value={{
+        <UserData.Provider value={{ user, setUser }}>
-            forms,
+            <FormsData.Provider value={{ forms, setForms }}>
-            setForms
-        }}>
                 <div className={classes.main}>
                     <div className={classes.container}>
                         <div className={classes.header}>
-                        <NavBar navigate={navigate}/>                   
+                            <NavBar navigate={navigate} auth={user} setAuth={setUser}/>                   
                         </div>
                         <div className={classes.content}>
                             <Outlet/>
@@ -25,6 +24,7 @@ const App = () => {
                     </div>
                 </div>
             </FormsData.Provider>  
+        </UserData.Provider>      
     )
 }
 

src/assets/styles/enterAccount.module.scss

@@ -40,7 +40,7 @@
             height: 100%;
             &__header {
                 width: 100%;
-                height: 20%;
+                height: 30%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -54,8 +54,7 @@
             }
             &__body {
                 width: 100%;
-                height: 60%;
+                height: 50%;
-                // border: 1px solid red;
                 display: flex;
                 justify-content: space-around;
                 flex-direction: column;

src/assets/styles/profile.module.scss

@@ -1,7 +1,41 @@
 .main {
-
+    width: 100%;
+    height: 100%;
 }
 
 .wrapper {
-    
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.profile {
+    width: 70%;
+    height: 70%;
+    box-shadow: 0 0 5px 1px rgb(200, 200, 200);
+    padding: 1.5%;
+    &__wrapper {
+        &__header {
+            width: 100%;
+            height: 15%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+            h3 {
+                font-size: 25px;
+                font-family: "Montserrat", sans-serif;
+                color: rgb(100, 100, 100);
+            }
+        }
+        &__body {
+            width: 100%;
+            height: 85%;
+            &__item {
+                padding: 5px;
+            }
+        }
+    }
 }

src/components/MyInput.jsx

@@ -4,7 +4,7 @@ import classes from "../assets/styles/components/myInput.module.scss"
 const MyInput = (props) => {
     return (
         <div className={classes.main} style={{...props.otherMainStyle}}>
-            <input type="text" placeholder={props.placeholder} style={{...props.otherInputStyle}}/>
+            <input type={props.type} placeholder={props.placeholder} style={{...props.otherInputStyle}} onChange={(e) => props.change(e.target.value)} value={props.value}/>
         </div>
     )
 }

src/components/NavBar.jsx

@@ -1,9 +1,7 @@
 import React, { useState } from "react";
 import classes from "../assets/styles/components/navbar.module.scss"
 
-const NavBar = ({navigate}) => {
+const NavBar = ({navigate, auth, setAuth}) => {
-    const [auth, setAuth] = useState(true);
-
     return (
         <div className={classes.main}>
             <div className={classes.wrapper}>
@@ -18,7 +16,7 @@ const NavBar = ({navigate}) => {
                 <div className={classes.profile}>
                     {auth ? 
                     <div className={classes.profile__authorized}>
-                        <span onClick={() => navigate("/profile")}>Профиль</span>
+                        <span onClick={() => navigate("/profile")}>Профиль ({auth.name})</span>
                     </div> : 
                     <div className={classes.profile__nonAuthorized}>
                         <span onClick={() => navigate("/enter")}>Вход <i class="fa-solid fa-arrow-right-to-bracket"></i></span>       

src/context/index.js

@@ -1,3 +1,5 @@
 import { createContext } from "react";
 
-export const FormsData = createContext([])
+export const FormsData = createContext([]);
+
+export const UserData = createContext(false);

src/pages/EnterAccount.jsx

@@ -1,10 +1,51 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
+import { useNavigate } from "react-router-dom";
 import classes from "../assets/styles/enterAccount.module.scss";
 import MyInput from "../components/MyInput.jsx";
 import MyButton from "../components/MyButton.jsx";
+import { UserData } from "../context";
 
-const EnterAccount = ({navigate}) => {
+const EnterAccount = () => {
     const [enter, setEnter] = useState("login");
+    const navigate = useNavigate();
+
+    const [email, setEmail] = useState("");
+    const [phone, setPhone] = useState("");
+    const [name, setName] = useState("");
+    const [surname, setSurname] = useState("");
+    const [patronymic, setPatronymic] = useState("");
+    const [password, setPassword] = useState("");
+    const [repiedPassword, setRepiedPassword] = useState("");
+
+    const {user, setUser} = useContext(UserData);
+
+    function cleanState() {
+        setEmail();
+        setPhone();
+        setName();
+        setSurname();
+        setPatronymic();
+        setPassword();
+        setRepiedPassword();
+    }
+
+    function createUser() {
+        if (password === repiedPassword) {
+            setUser({
+                email: email,
+                phone: phone,
+                name: name,
+                surname: surname,
+                patronymic: patronymic,
+                password: password
+            })
+            cleanState();
+            navigate("/");
+        }
+        else {
+            console.log('Error')
+        }    
+    };
 
     return (
         <div className={classes.main}>
@@ -27,10 +68,10 @@ const EnterAccount = ({navigate}) => {
                             </div>
                             <div className={classes.content__wrapper__login__body}>
                                 <MyInput placeholder={"Email"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}}/>
-                                <MyInput placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}}/>
+                                <MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}}/>
                             </div>
                             <div className={classes.content__wrapper__login__footer}>
-                                <MyButton text={"Войти"} otherStyle={{height: "60%", width: "20%"}}/>
+                                <MyButton text={"Войти"} otherStyle={{height: "50%", width: "20%"}}/>
                             </div>
                         </div> : 
                         <div className={classes.content__wrapper__register}>
@@ -38,18 +79,18 @@ const EnterAccount = ({navigate}) => {
                                 <h3>Зарегестрировать учетную запись</h3>
                             </div>
                             <div className={classes.content__wrapper__register__body}>
-                                <MyInput placeholder={"Email"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}}/>
+                                <MyInput placeholder={"Email"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={email} change={setEmail}/>
-                                <MyInput placeholder={"Номер телефона"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}}/>
+                                <MyInput placeholder={"Номер телефона"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={phone} change={setPhone}/>
                                 <div className={classes.content__wrapper__register__body__fio}>
-                                    <MyInput placeholder={"Имя"} otherMainStyle={{width: "32%", height: "100%"}} otherInputStyle={{width: "100%"}}/>
+                                    <MyInput placeholder={"Имя"} otherMainStyle={{width: "32%", height: "100%"}} otherInputStyle={{width: "100%"}} value={name} change={setName}/>
-                                    <MyInput placeholder={"Фамилия"} otherMainStyle={{width: "32%", height: "100%"}} otherInputStyle={{width: "100%"}}/>
+                                    <MyInput placeholder={"Фамилия"} otherMainStyle={{width: "32%", height: "100%"}} otherInputStyle={{width: "100%"}} value={surname} change={setSurname}/>
-                                    <MyInput placeholder={"Отчество (при наличии)"} otherMainStyle={{width: "32%", height: "100%"}} otherInputStyle={{width: "100%"}}/>
+                                    <MyInput placeholder={"Отчество (при наличии)"} otherMainStyle={{width: "32%", height: "100%"}} otherInputStyle={{width: "100%"}} value={patronymic} change={setPatronymic}/>
                                 </div>                                
-                                <MyInput placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}}/>
+                                <MyInput type={'password'} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
-                                <MyInput placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}}/>
+                                <MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/>
                             </div>
                             <div className={classes.content__wrapper__register__footer}>
-                                <MyButton text={"Создать"} otherStyle={{height: "100%", width: "20%"}}/>
+                                <MyButton text={"Создать"} otherStyle={{height: "100%", width: "20%"}} click={() => createUser()}/>
                             </div>
                         </div>}
                     </div>

src/pages/Profile.jsx

@@ -1,11 +1,50 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
-import classes from "../assets/styles/profile.module.scss"
+import classes from "../assets/styles/profile.module.scss";
+import MyButton from "../components/MyButton.jsx";
+import { UserData } from "../context";
+
+const Profile = () => {
+    const [edit, setEdit] = useState(true);
+    const {user, setUser} = useContext(UserData);
+
+    const [email, setEmail] = useState("");
+    const [phone, setPhone] = useState("");
+    const [name, setName] = useState("");
+    const [surname, setSurname] = useState("");
+    const [patronymic, setPatronymic] = useState("");
 
-const Profile = ({navigate}) => {
     return (
         <div className={classes.main}>
             <div className={classes.wrapper}>
-                
+                <div className={classes.profile}>
+                    <div className={classes.profile__wrapper}>
+                        <div className={classes.profile__wrapper__header}>
+                            <h3>Ваши данные</h3>
+                            <MyButton 
+                                text={
+                                    edit ? 
+                                    <span>Редактировать <i class="fa-solid fa-pen"></i></span> : 
+                                    <span>Сохранить <i class="fa-solid fa-floppy-disk"></i></span>
+                                } 
+                                backgroundColor={edit ? "rgb(200, 200, 200)" : ""}
+                                click={() => setEdit(!edit)}/>
+                        </div>
+                        <div className={classes.profile__wrapper__body}>
+                            {Object.keys(user).map(key => key !== "password" ? <div className={classes.profile__wrapper__body__item}>
+                                <div class="input-group mb-3">
+                                    <span class="input-group-text">{key}</span>
+                                    <input 
+                                        type="text" 
+                                        class="form-control shadow-none" 
+                                        value={user[key]} 
+                                        pattern={key === "email" ? "+[7-8]{1}[0-9]{3} [0-9]{3}-[0-9]{2}-[0-9]{2}" : ""} 
+                                        disabled={edit} 
+                                        required={key !== "patronymic" ? true : false}/>
+                                </div>
+                            </div> : <div></div>)}
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     )

src/router/router.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createBrowserRouter } from "react-router-dom";
 import Forms from '../pages/Forms.jsx';
-import EnterAccount from "../pages/EnterAccount.jsx"
+import EnterAccount from "../pages/EnterAccount.jsx";
 import NewForm from '../pages/NewForm.jsx';
 import Home from "../pages/Home.jsx";
 import App from "../App.jsx";