formatting
This commit is contained in:
Виталий Лавшонок
@@ -1,126 +1,169 @@
|
||||
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 { 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";
|
||||
|
||||
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 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 [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);
|
||||
const { status, jwt } = useAppSelector((state) => state.auth);
|
||||
|
||||
// После успешной регистрации — переход в систему
|
||||
// После успешной регистрации — переход в систему
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(setMenuActivePage("account"))
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
dispatch(setMenuActivePage('account'));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (jwt) {
|
||||
navigate("/home");
|
||||
}
|
||||
console.log(submitClicked);
|
||||
}, [jwt]);
|
||||
useEffect(() => {
|
||||
if (jwt) {
|
||||
navigate('/home');
|
||||
}
|
||||
console.log(submitClicked);
|
||||
}, [jwt]);
|
||||
|
||||
const handleRegister = () => {
|
||||
setSubmitClicked(true);
|
||||
const handleRegister = () => {
|
||||
setSubmitClicked(true);
|
||||
|
||||
if (!username || !email || !password || !confirmPassword) return;
|
||||
if (password !== confirmPassword) return;
|
||||
if (!username || !email || !password || !confirmPassword) return;
|
||||
if (password !== confirmPassword) return;
|
||||
|
||||
dispatch(registerUser({ username, email, password }));
|
||||
};
|
||||
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]">
|
||||
Добро пожаловать
|
||||
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 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;
|
||||
|
||||
Reference in New Issue
Block a user