170 lines
6.9 KiB
TypeScript
170 lines
6.9 KiB
TypeScript
import { useState, useEffect } from 'react';
|
||
import { PrimaryButton } from '../../../components/button/PrimaryButton';
|
||
import { Input } from '../../../components/input/Input';
|
||
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { registerUser } from '../../../redux/slices/auth';
|
||
// import { cn } from "../../../lib/cn";
|
||
import { setMenuActivePage } from '../../../redux/slices/store';
|
||
import { Balloon } from '../../../assets/icons/auth';
|
||
import { Link } from 'react-router-dom';
|
||
import { SecondaryButton } from '../../../components/button/SecondaryButton';
|
||
import { Checkbox } from '../../../components/checkbox/Checkbox';
|
||
import { googleLogo } from '../../../assets/icons/input';
|
||
|
||
const Register = () => {
|
||
const dispatch = useAppDispatch();
|
||
const navigate = useNavigate();
|
||
|
||
const [username, setUsername] = useState<string>('');
|
||
const [email, setEmail] = useState<string>('');
|
||
const [password, setPassword] = useState<string>('');
|
||
const [confirmPassword, setConfirmPassword] = useState<string>('');
|
||
const [submitClicked, setSubmitClicked] = useState<boolean>(false);
|
||
|
||
const { status, jwt } = useAppSelector((state) => state.auth);
|
||
|
||
// После успешной регистрации — переход в систему
|
||
|
||
useEffect(() => {
|
||
dispatch(setMenuActivePage('account'));
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (jwt) {
|
||
navigate('/home/account');
|
||
}
|
||
console.log(submitClicked);
|
||
}, [jwt]);
|
||
|
||
const handleRegister = () => {
|
||
setSubmitClicked(true);
|
||
|
||
if (!username || !email || !password || !confirmPassword) return;
|
||
if (password !== confirmPassword) return;
|
||
|
||
dispatch(registerUser({ username, email, password }));
|
||
};
|
||
|
||
return (
|
||
<div className="h-svh w-svw fixed pointer-events-none top-0 left-0 flex items-center justify-center">
|
||
<div className="grid gap-[80px] grid-cols-[400px,384px] box-border relative ">
|
||
<div className="flex items-center justify-center ">
|
||
<img src={Balloon} />
|
||
</div>
|
||
<div className=" relative pointer-events-auto">
|
||
<div>
|
||
<div className="text-[40px] text-liquid-white font-bold h-[50px]">
|
||
Добро пожаловать
|
||
</div>
|
||
<div className="text-[18px] text-liquid-light font-bold h-[23px]">
|
||
Регистрация
|
||
</div>
|
||
</div>
|
||
|
||
<Input
|
||
name="email"
|
||
autocomplete="email"
|
||
className="mt-[10px]"
|
||
type="email"
|
||
label="Почта"
|
||
onChange={(v) => {
|
||
setEmail(v);
|
||
}}
|
||
placeholder="example@gmail.com"
|
||
/>
|
||
<Input
|
||
name="login"
|
||
autocomplete="login"
|
||
className="mt-[10px]"
|
||
type="text"
|
||
label="Логин пользователя"
|
||
onChange={(v) => {
|
||
setUsername(v);
|
||
}}
|
||
placeholder="login"
|
||
/>
|
||
<Input
|
||
name="password"
|
||
autocomplete="password"
|
||
className="mt-[10px]"
|
||
type="password"
|
||
label="Пароль"
|
||
onChange={(v) => {
|
||
setPassword(v);
|
||
}}
|
||
placeholder="abCD1234"
|
||
/>
|
||
<Input
|
||
name="confirm-password"
|
||
autocomplete="confirm-password"
|
||
className="mt-[10px]"
|
||
type="password"
|
||
label="Повторите пароль"
|
||
onChange={(v) => {
|
||
setConfirmPassword(v);
|
||
}}
|
||
placeholder="abCD1234"
|
||
/>
|
||
|
||
<div className=" flex items-center mt-[10px] h-[24px]">
|
||
<Checkbox
|
||
onChange={(value: boolean) => {
|
||
value;
|
||
}}
|
||
className="p-0 w-fit m-[2.75px]"
|
||
size="md"
|
||
color="secondary"
|
||
variant="default"
|
||
/>
|
||
<span className="text-[14px] font-medium text-liquid-light h-[18px] ml-[10px]">
|
||
Я принимаю{' '}
|
||
<Link to={'/home'} className={' underline'}>
|
||
политику конфиденциальности
|
||
</Link>
|
||
</span>
|
||
</div>
|
||
|
||
<div className="mt-[10px]">
|
||
<PrimaryButton
|
||
className="w-full mb-[8px]"
|
||
onClick={() => handleRegister()}
|
||
text={
|
||
status === 'loading'
|
||
? 'Регистрация...'
|
||
: 'Регистрация'
|
||
}
|
||
disabled={status === 'loading'}
|
||
/>
|
||
<SecondaryButton className="w-full" onClick={() => {}}>
|
||
<div className="flex items-center">
|
||
<img
|
||
src={googleLogo}
|
||
className="h-[24px] w-[24px] mr-[15px]"
|
||
/>
|
||
Регистрация с Google
|
||
</div>
|
||
</SecondaryButton>
|
||
</div>
|
||
|
||
<div className="flex justify-center mt-[10px]">
|
||
<span>
|
||
Уже есть аккаунт?{' '}
|
||
<Link
|
||
to={'/home/login'}
|
||
className={
|
||
'text-liquid-brightmain text-[16px] h-[20px] transition-all hover:underline '
|
||
}
|
||
>
|
||
Авторизация
|
||
</Link>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Register;
|