diff --git a/src/App.jsx b/src/App.jsx index efb6383..0bca5ca 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -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 ( - -
-
-
- -
-
- + + +
+
+
+ +
+
+ +
-
- + + ) } diff --git a/src/assets/styles/enterAccount.module.scss b/src/assets/styles/enterAccount.module.scss index 70e9026..2bf26ad 100644 --- a/src/assets/styles/enterAccount.module.scss +++ b/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%; - // border: 1px solid red; + height: 50%; display: flex; justify-content: space-around; flex-direction: column; diff --git a/src/assets/styles/profile.module.scss b/src/assets/styles/profile.module.scss index d1c7750..e69a0be 100644 --- a/src/assets/styles/profile.module.scss +++ b/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; + } + } + } } \ No newline at end of file diff --git a/src/components/MyInput.jsx b/src/components/MyInput.jsx index 4a7368e..7135cfa 100644 --- a/src/components/MyInput.jsx +++ b/src/components/MyInput.jsx @@ -4,7 +4,7 @@ import classes from "../assets/styles/components/myInput.module.scss" const MyInput = (props) => { return (
- + props.change(e.target.value)} value={props.value}/>
) } diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index bdb82ce..1f67d59 100644 --- a/src/components/NavBar.jsx +++ b/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 [auth, setAuth] = useState(true); - +const NavBar = ({navigate, auth, setAuth}) => { return (
@@ -18,7 +16,7 @@ const NavBar = ({navigate}) => {
{auth ?
- navigate("/profile")}>Профиль + navigate("/profile")}>Профиль ({auth.name})
:
navigate("/enter")}>Вход diff --git a/src/context/index.js b/src/context/index.js index 8e03303..65f7989 100644 --- a/src/context/index.js +++ b/src/context/index.js @@ -1,3 +1,5 @@ import { createContext } from "react"; -export const FormsData = createContext([]) \ No newline at end of file +export const FormsData = createContext([]); + +export const UserData = createContext(false); \ No newline at end of file diff --git a/src/pages/EnterAccount.jsx b/src/pages/EnterAccount.jsx index e5f2b60..2d939f8 100644 --- a/src/pages/EnterAccount.jsx +++ b/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 (
@@ -27,10 +68,10 @@ const EnterAccount = ({navigate}) => {
- +
- +
:
@@ -38,18 +79,18 @@ const EnterAccount = ({navigate}) => {

Зарегестрировать учетную запись

- - + +
- - - + + +
- - + +
- + createUser()}/>
}
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx index 401d8e1..e4e189c 100644 --- a/src/pages/Profile.jsx +++ b/src/pages/Profile.jsx @@ -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 (
- +
+
+
+

Ваши данные

+ Редактировать : + Сохранить + } + backgroundColor={edit ? "rgb(200, 200, 200)" : ""} + click={() => setEdit(!edit)}/> +
+
+ {Object.keys(user).map(key => key !== "password" ?
+
+ {key} + +
+
:
)} +
+
+
) diff --git a/src/router/router.js b/src/router/router.js index 2ff7e8c..a3ce383 100644 --- a/src/router/router.js +++ b/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";