KRBL/MinervaFrontend
3
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

add page profile

Browse Source
This commit is contained in:
kuwsh1n
2024-03-09 21:18:58 +03:00
parent c1c2f7cfc5
commit 16a82736a4
9 changed files with 156 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.jsx
View File

@@ -1,30 +1,30 @@
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={{
forms,
setForms
}}>
<div className={classes.main}>
<div className={classes.container}>
<div className={classes.header}>
<NavBar navigate={navigate}/>
</div>
<div className={classes.content}>
<Outlet/>
<UserData.Provider value={{ user, setUser }}>
<FormsData.Provider value={{ forms, setForms }}>
<div className={classes.main}>
<div className={classes.container}>
<div className={classes.header}>
<NavBar navigate={navigate} auth={user} setAuth={setUser}/>
</div>
<div className={classes.content}>
<Outlet/>
</div>
</div>
</div>
</div>
</FormsData.Provider>
</FormsData.Provider>
</UserData.Provider>
)
}

5
src/assets/styles/enterAccount.module.scss
View File

@@ -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%;
// border: 1px solid red;
height: 50%;
display: flex;
justify-content: space-around;
flex-direction: column;

38
src/assets/styles/profile.module.scss
View File

@@ -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;
}
}
}
}

2
src/components/MyInput.jsx
View File

@@ -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>
)
}

6
src/components/NavBar.jsx
View File

@@ -1,9 +1,7 @@
import React, { useState } from "react";
import classes from "../assets/styles/components/navbar.module.scss"
const NavBar = ({navigate}) => {
const [auth, setAuth] = useState(true);
const NavBar = ({navigate, auth, setAuth}) => {
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>

4
src/context/index.js
View File

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

65
src/pages/EnterAccount.jsx
View File

@@ -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={"Номер телефона"} 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%"}} 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%"}}/>
<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%"}} value={surname} change={setSurname}/>
<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 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 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>

47
src/pages/Profile.jsx
View File

@@ -1,11 +1,50 @@
import React, { useState } from "react";
import classes from "../assets/styles/profile.module.scss"
import React, { useState, useContext } from "react";
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>
)

2
src/router/router.js
View File

@@ -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";