add components register and login
This commit is contained in:
Tatiana Nikolaeva
parent
d7734cb68a
commit
9a3f05ef60
7 changed files with 303 additions and 2 deletions
|
|
@ -1,17 +1,19 @@
|
|||
import './App.css'
|
||||
import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
|
||||
import {BrowserRouter, Route, Routes} from "react-router-dom";
|
||||
import {SurveyCreateAndEditingPage} from "./pages/SurveyCreateAndEditingPage/SurveyCreateAndEditingPage.tsx";
|
||||
import Survey from "./components/Survey/Survey.tsx";
|
||||
import SettingSurvey from "./components/SettingSurvey/SettingSurvey.tsx";
|
||||
import {MySurveysPage} from "./pages/MySurveysPage/MySurveysPage.tsx";
|
||||
import {Results} from "./components/Results/Results.tsx";
|
||||
import {MySurveyList} from "./components/MySurveyList/MySurveyList.tsx";
|
||||
import LoginForm from "./components/LoginForm/LoginForm.tsx";
|
||||
import AuthForm from "./pages/AuthForm/AuthForm.tsx";
|
||||
|
||||
const App = () => {
|
||||
return(
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/survey/create/questions" replace />} />
|
||||
<Route path="/" element={<LoginForm />} />
|
||||
|
||||
<Route path="survey/create" element={<SurveyCreateAndEditingPage />}>
|
||||
<Route path="questions" element={<Survey />} />
|
||||
|
|
@ -27,6 +29,10 @@ const App = () => {
|
|||
<Route path="settings" element={<SettingSurvey />} />
|
||||
<Route path="results" element={<Results />} />
|
||||
</Route>
|
||||
|
||||
<Route path="*" element={<AuthForm />} />
|
||||
<Route path="/login" element={<AuthForm />} />
|
||||
<Route path="/register" element={<AuthForm />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
|
|
|||
85
SurveyFrontend/src/components/LoginForm/LoginForm.module.css
Normal file
85
SurveyFrontend/src/components/LoginForm/LoginForm.module.css
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
.loginContainer{
|
||||
width: 31%;
|
||||
background-color: #FFFFFF;
|
||||
padding: 42.5px 65px;
|
||||
margin: auto;
|
||||
border-radius: 43px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title{
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
line-height: 88%;
|
||||
padding: 0;
|
||||
margin-bottom: 80px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.form{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 80px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.input {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 88%;
|
||||
color: #000000; /* Цвет текста по умолчанию */
|
||||
outline: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* Нижняя граница с прозрачностью */
|
||||
padding: 5px 0;
|
||||
opacity: 1; /* Установите opacity в 1 для input, а для placeholder используйте opacity */
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 88%;
|
||||
color: #000000;
|
||||
opacity: 0.2; /* Прозрачность placeholder */
|
||||
}
|
||||
|
||||
.input:focus::placeholder {
|
||||
opacity: 0; /* Убираем placeholder при фокусе */
|
||||
}
|
||||
|
||||
/* Отключаем стиль для input, когда в нём есть данные */
|
||||
.input:not(:placeholder-shown) {
|
||||
color: black;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-bottom: 1px solid black; /* Чёрная граница при фокусе */
|
||||
}
|
||||
|
||||
.signIn{
|
||||
margin: auto;
|
||||
padding: 26.5px 67px;
|
||||
width: fit-content;
|
||||
border-radius: 24px;
|
||||
background-color: #3788D6;
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 120%;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.recommendation{
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.recommendationLink{
|
||||
color: #3788D6;
|
||||
margin-left: 5px;
|
||||
}
|
||||
39
SurveyFrontend/src/components/LoginForm/LoginForm.tsx
Normal file
39
SurveyFrontend/src/components/LoginForm/LoginForm.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { Link } from "react-router-dom";
|
||||
import styles from './LoginForm.module.css';
|
||||
import { useState } from 'react';
|
||||
|
||||
const RegisterForm = () => {
|
||||
const [focused, setFocused] = useState({
|
||||
email: false,
|
||||
password: false
|
||||
});
|
||||
return (
|
||||
<div className={styles.loginContainer}>
|
||||
<h2 className={styles.title}>С возвращением!</h2>
|
||||
<form className={styles.form}>
|
||||
<input
|
||||
className={`${styles.input} ${styles.email}`}
|
||||
type={'email'}
|
||||
placeholder='Почта'
|
||||
onFocus={() => setFocused({ ...focused, email: true })}
|
||||
onBlur={() => setFocused({ ...focused, email: false })}
|
||||
style={{ color: focused.email ? 'black' : 'inherit' }}
|
||||
/>
|
||||
<input
|
||||
className={`${styles.input} ${styles.password}`}
|
||||
type='password'
|
||||
placeholder='Пароль'
|
||||
onFocus={() => setFocused({ ...focused, password: true })}
|
||||
onBlur={() => setFocused({ ...focused, password: false })}
|
||||
style={{ color: focused.password ? 'black' : 'inherit' }}
|
||||
/>
|
||||
<button className={styles.signIn}>Войти</button>
|
||||
</form>
|
||||
<p className={styles.recommendation}>Еще не с нами?
|
||||
<Link className={styles.recommendationLink} to='/register'>Зарегистрируйтесь!</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RegisterForm;
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
.registerContainer{
|
||||
width: 31%;
|
||||
background-color: #FFFFFF;
|
||||
padding: 94px 80px;
|
||||
margin: auto;
|
||||
border-radius: 43px;
|
||||
}
|
||||
|
||||
.title{
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
line-height: 88%;
|
||||
padding: 0;
|
||||
margin-bottom: 80px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.form{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 80px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.input {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 88%;
|
||||
color: #000000; /* Цвет текста по умолчанию */
|
||||
outline: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* Нижняя граница с прозрачностью */
|
||||
padding: 5px 0;
|
||||
opacity: 1; /* Установите opacity в 1 для input, а для placeholder используйте opacity */
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 88%;
|
||||
color: #000000;
|
||||
opacity: 0.2; /* Прозрачность placeholder */
|
||||
}
|
||||
|
||||
.input:focus::placeholder {
|
||||
opacity: 0; /* Убираем placeholder при фокусе */
|
||||
}
|
||||
|
||||
/* Отключаем стиль для input, когда в нём есть данные */
|
||||
.input:not(:placeholder-shown) {
|
||||
color: black;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-bottom: 1px solid black; /* Чёрная граница при фокусе */
|
||||
}
|
||||
|
||||
.signUp{
|
||||
margin: auto;
|
||||
padding: 25.5px 16px;
|
||||
width: fit-content;
|
||||
border-radius: 24px;
|
||||
background-color: #3788D6;
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 120%;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.recommendation{
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.recommendationLink{
|
||||
color: #3788D6;
|
||||
margin-left: 5px;
|
||||
}
|
||||
57
SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx
Normal file
57
SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import { Link } from "react-router-dom";
|
||||
import styles from './RegisterForm.module.css';
|
||||
import { useState } from 'react';
|
||||
|
||||
const RegisterForm = () => {
|
||||
const [focused, setFocused] = useState({
|
||||
name: false,
|
||||
surname: false,
|
||||
email: false,
|
||||
password: false
|
||||
});
|
||||
return (
|
||||
<div className={styles.registerContainer}>
|
||||
<h2 className={styles.title}>Регистрация</h2>
|
||||
<form className={styles.form}>
|
||||
<input
|
||||
className={`${styles.input} ${styles.name}`}
|
||||
type={'text'}
|
||||
placeholder='Имя'
|
||||
onFocus={() => setFocused({ ...focused, name: true })}
|
||||
onBlur={() => setFocused({ ...focused, name: false })}
|
||||
style={{ color: focused.name ? 'black' : 'inherit' }}
|
||||
/>
|
||||
<input
|
||||
className={`${styles.input} ${styles.surname}`}
|
||||
type={'text'}
|
||||
placeholder='Фамилия'
|
||||
onFocus={() => setFocused({ ...focused, surname: true })}
|
||||
onBlur={() => setFocused({ ...focused, surname: false })}
|
||||
style={{ color: focused.surname ? 'black' : 'inherit' }}
|
||||
/>
|
||||
<input
|
||||
className={`${styles.input} ${styles.email}`}
|
||||
type={'email'}
|
||||
placeholder='Почта'
|
||||
onFocus={() => setFocused({ ...focused, email: true })}
|
||||
onBlur={() => setFocused({ ...focused, email: false })}
|
||||
style={{ color: focused.email ? 'black' : 'inherit' }}
|
||||
/>
|
||||
<input
|
||||
className={`${styles.input} ${styles.password}`}
|
||||
type='password'
|
||||
placeholder='Пароль'
|
||||
onFocus={() => setFocused({ ...focused, password: true })}
|
||||
onBlur={() => setFocused({ ...focused, password: false })}
|
||||
style={{ color: focused.password ? 'black' : 'inherit' }}
|
||||
/>
|
||||
<button className={styles.signUp}>Зарегистрироваться</button>
|
||||
</form>
|
||||
<p className={styles.recommendation}>Уже с нами?
|
||||
<Link className={styles.recommendationLink} to='/login'>Войдите!</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RegisterForm;
|
||||
12
SurveyFrontend/src/pages/AuthForm/AuthForm.module.css
Normal file
12
SurveyFrontend/src/pages/AuthForm/AuthForm.module.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
.page{
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #F6F6F6;
|
||||
padding: 61.5px 0;
|
||||
}
|
||||
|
||||
.pageLogin{
|
||||
width: 100%;
|
||||
background-color: #F6F6F6;
|
||||
padding: 157px 0;
|
||||
}
|
||||
18
SurveyFrontend/src/pages/AuthForm/AuthForm.tsx
Normal file
18
SurveyFrontend/src/pages/AuthForm/AuthForm.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import styles from './AuthForm.module.css';
|
||||
import LoginForm from "../../components/LoginForm/LoginForm.tsx";
|
||||
import RegisterForm from "../../components/RegisterForm/RegisterForm.tsx";
|
||||
import {useLocation} from "react-router-dom";
|
||||
|
||||
|
||||
const AuthForm = () => {
|
||||
const location = useLocation();
|
||||
const isLogin = location.pathname === '/login';
|
||||
|
||||
return (
|
||||
<div className={`${isLogin ? styles.pageLogin : styles.page}`}>
|
||||
{isLogin ? <LoginForm /> : <RegisterForm/>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AuthForm;
|
||||
Loading…
Add table
Add a link
Reference in a new issue