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
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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue