add page login/register
This commit is contained in:
kuwsh1n
parent
986ce3a725
commit
c1c2f7cfc5
13
src/App.jsx
13
src/App.jsx
@ -1,13 +1,12 @@
|
||||
import React, { useState } from "react";
|
||||
import { RouterProvider, Routes } from "react-router-dom";
|
||||
import {FormsData} from "./context";
|
||||
import router from "./router/router"
|
||||
import { Outlet, useNavigate } from "react-router-dom";
|
||||
import { FormsData } 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 navigate = useNavigate();
|
||||
const [forms, setForms] = useState([])
|
||||
|
||||
return (
|
||||
@ -18,12 +17,10 @@ const App = () => {
|
||||
<div className={classes.main}>
|
||||
<div className={classes.container}>
|
||||
<div className={classes.header}>
|
||||
<NavBar/>
|
||||
<NavBar navigate={navigate}/>
|
||||
</div>
|
||||
<div className={classes.content}>
|
||||
<Routes>
|
||||
<RouterProvider router={router}/>
|
||||
</Routes>
|
||||
<Outlet/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
103
src/assets/styles/enterAccount.module.scss
Normal file
103
src/assets/styles/enterAccount.module.scss
Normal file
@ -0,0 +1,103 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
ul {
|
||||
li {
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
a {
|
||||
text-align: center;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// box-shadow: 0 3px 5px 1px rgb(200, 200, 200);
|
||||
border: 1px solid rgb(220, 220, 220);
|
||||
border-top: none;
|
||||
&__wrapper {
|
||||
padding: 2%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&__login {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&__header {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
h3 {
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
text-align: center;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
}
|
||||
&__body {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
}
|
||||
&__footer {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
}
|
||||
}
|
||||
&__register {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&__header {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
h3 {
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
}
|
||||
&__body {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
padding-bottom: 5px;
|
||||
&__fio {
|
||||
height: 15%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
&__footer {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
src/assets/styles/profile.module.scss
Normal file
7
src/assets/styles/profile.module.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.main {
|
||||
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import classes from "../assets/styles/components/navbar.module.scss"
|
||||
|
||||
const NavBar = () => {
|
||||
const NavBar = ({navigate}) => {
|
||||
const [auth, setAuth] = useState(true);
|
||||
|
||||
return (
|
||||
@ -10,18 +10,18 @@ const NavBar = () => {
|
||||
<div className={classes.menu}>
|
||||
{auth ?
|
||||
<div className={classes.menu__authorized}>
|
||||
<span>Главная</span>
|
||||
<span>Мои формы</span>
|
||||
<span onClick={() => navigate("/")}>Главная</span>
|
||||
<span onClick={() => navigate("/forms")}>Мои формы</span>
|
||||
</div> :
|
||||
<div></div>}
|
||||
</div>
|
||||
<div className={classes.profile}>
|
||||
{auth ?
|
||||
<div className={classes.profile__authorized}>
|
||||
<span>Профиль</span>
|
||||
<span onClick={() => navigate("/profile")}>Профиль</span>
|
||||
</div> :
|
||||
<div className={classes.profile__nonAuthorized}>
|
||||
<span>Вход <i class="fa-solid fa-arrow-right-to-bracket"></i></span>
|
||||
<span onClick={() => navigate("/enter")}>Вход <i class="fa-solid fa-arrow-right-to-bracket"></i></span>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import App from './App.jsx';
|
||||
import { RouterProvider } from 'react-router-dom';
|
||||
import router from "./router/router.js"
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
|
||||
root.render(
|
||||
<BrowserRouter>
|
||||
<App/>
|
||||
</BrowserRouter>
|
||||
<RouterProvider router={router}/>
|
||||
);
|
||||
62
src/pages/EnterAccount.jsx
Normal file
62
src/pages/EnterAccount.jsx
Normal file
@ -0,0 +1,62 @@
|
||||
import React, { useState } from "react";
|
||||
import classes from "../assets/styles/enterAccount.module.scss";
|
||||
import MyInput from "../components/MyInput.jsx";
|
||||
import MyButton from "../components/MyButton.jsx";
|
||||
|
||||
const EnterAccount = ({navigate}) => {
|
||||
const [enter, setEnter] = useState("login");
|
||||
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.tabs}>
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item" onClick={() => setEnter("login")}>
|
||||
<a className={enter === "login" ? "nav-link active" : "nav-link"} aria-current="page">Авторизация</a>
|
||||
</li>
|
||||
<li class="nav-item" onClick={() => setEnter("register")}>
|
||||
<a className={enter === "register" ? "nav-link active" : "nav-link"}>Регитрация</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={classes.content}>
|
||||
<div className={classes.content__wrapper}>
|
||||
{enter === 'login' ? <div className={classes.content__wrapper__login}>
|
||||
<div className={classes.content__wrapper__login__header}>
|
||||
<h3>Войти в аккаунт</h3>
|
||||
</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%"}}/>
|
||||
</div>
|
||||
<div className={classes.content__wrapper__login__footer}>
|
||||
<MyButton text={"Войти"} otherStyle={{height: "60%", width: "20%"}}/>
|
||||
</div>
|
||||
</div> :
|
||||
<div className={classes.content__wrapper__register}>
|
||||
<div className={classes.content__wrapper__register__header}>
|
||||
<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%"}}/>
|
||||
<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%"}}/>
|
||||
</div>
|
||||
<MyInput placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}}/>
|
||||
<MyInput placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}}/>
|
||||
</div>
|
||||
<div className={classes.content__wrapper__register__footer}>
|
||||
<MyButton text={"Создать"} otherStyle={{height: "100%", width: "20%"}}/>
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default EnterAccount;
|
||||
14
src/pages/Profile.jsx
Normal file
14
src/pages/Profile.jsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React, { useState } from "react";
|
||||
import classes from "../assets/styles/profile.module.scss"
|
||||
|
||||
const Profile = ({navigate}) => {
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<div className={classes.wrapper}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Profile;
|
||||
@ -1,22 +1,39 @@
|
||||
import React from 'react';
|
||||
import { createBrowserRouter } from "react-router-dom";
|
||||
import Forms from '../pages/Forms.jsx';
|
||||
import EnterAccount from "../pages/EnterAccount.jsx"
|
||||
import NewForm from '../pages/NewForm.jsx';
|
||||
import Home from "../pages/Home.jsx";
|
||||
import App from "../App.jsx";
|
||||
import Profile from "../pages/Profile.jsx";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <Home/>,
|
||||
},
|
||||
{
|
||||
path: "/forms",
|
||||
element: <Forms/>,
|
||||
},
|
||||
{
|
||||
path: '/forms/edit/',
|
||||
element: <NewForm/>
|
||||
element: <App/>,
|
||||
children: [
|
||||
{
|
||||
path: "/",
|
||||
element: <Home/>,
|
||||
},
|
||||
{
|
||||
path: "/forms",
|
||||
element: <Forms/>,
|
||||
},
|
||||
{
|
||||
path: '/forms/edit/',
|
||||
element: <NewForm/>
|
||||
},
|
||||
{
|
||||
path: '/enter',
|
||||
element: <EnterAccount/>
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
element: <Profile/>
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
]);
|
||||
|
||||
export default router
|
||||
Loading…
Reference in New Issue
Block a user