127 lines
4.8 KiB
TypeScript
127 lines
4.8 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");
|
||
}
|
||
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;
|