login
This commit is contained in:
Виталий Лавшонок
@@ -1,204 +1,109 @@
|
||||
// import React from "react";
|
||||
// import { Button } from "../../components/button/Button";
|
||||
// import { Checkbox } from "../../components/checkbox/Checkbox";
|
||||
// import { Input } from "../../components/input/Input";
|
||||
// import { useDispatch, useSelector } from "react-redux";
|
||||
// import { useNavigate } from "react-router-dom";
|
||||
// import {
|
||||
// setEmail,
|
||||
// setUsername,
|
||||
// setPassword,
|
||||
// registerUser,
|
||||
// } from "../../redux/slices/user";
|
||||
// import { cn } from "../../lib/cn";
|
||||
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";
|
||||
|
||||
const Register = () => {
|
||||
// const dispatch = useDispatch();
|
||||
// const navigate = useNavigate();
|
||||
const dispatch = useAppDispatch();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// const [inputUsername, setInputUsername] = React.useState<string>("");
|
||||
// const [inputEmail, setInputEmail] = React.useState<string>("");
|
||||
// const [inputPassword, setInputPassword] = React.useState<string>("");
|
||||
// const [inputRepeatPassword, setInputRepeatPassword] =
|
||||
// React.useState<string>("");
|
||||
// const [inputChecked, setInputChecked] = React.useState<boolean>(false);
|
||||
// const [inputClickRegister, setInputClickRegister] =
|
||||
// React.useState<boolean>(false);
|
||||
const [username, setUsername] = useState<string>("");
|
||||
const [email, setEmail] = useState<string>("");
|
||||
const [password, setPassword] = useState<string>("");
|
||||
const [submitClicked, setSubmitClicked] = useState<boolean>(false);
|
||||
|
||||
// const changeEmail = (s: string) => {
|
||||
// setInputEmail(s);
|
||||
// dispatch(setEmail(s));
|
||||
// };
|
||||
// const changeUsername = (s: string) => {
|
||||
// setInputUsername(s);
|
||||
// dispatch(setUsername(s));
|
||||
// };
|
||||
// const changePassword = (s: string) => {
|
||||
// setInputPassword(s);
|
||||
// dispatch(setPassword(s));
|
||||
// };
|
||||
const { status, error, jwt } = useAppSelector((state) => state.auth);
|
||||
|
||||
// const { username, email } = useSelector((state: any) => state.user);
|
||||
// После успешной регистрации
|
||||
useEffect(() => {
|
||||
if (jwt) {
|
||||
navigate("/home/offices"); // или на любую страницу после логина
|
||||
}
|
||||
}, [jwt]);
|
||||
|
||||
// const isAuthorized = useSelector((state: any) => state.user.isAuthorized);
|
||||
const handleRegister = () => {
|
||||
setSubmitClicked(true);
|
||||
|
||||
// React.useEffect(() => {
|
||||
// if (isAuthorized) navigate("/home/offices");
|
||||
// }, [isAuthorized]);
|
||||
if (!username || !email || !password) return;
|
||||
|
||||
// const clickNavigateLogin = () => {
|
||||
// navigate("/auth/login");
|
||||
// };
|
||||
|
||||
// const completeRegister = () => {
|
||||
// setInputClickRegister(true);
|
||||
// if (
|
||||
// inputChecked == false ||
|
||||
// inputEmail == "" ||
|
||||
// inputUsername == "" ||
|
||||
// inputPassword == "" ||
|
||||
// inputRepeatPassword == "" ||
|
||||
// inputPassword != inputRepeatPassword
|
||||
// )
|
||||
// return;
|
||||
// setInputClickRegister(false);
|
||||
// dispatch(registerUser());
|
||||
// if (isAuthorized) navigate("/home");
|
||||
// };
|
||||
dispatch(registerUser({ username, email, password }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full w-full bg-default-100 flex items-center justify-center">
|
||||
<div className=" bg-layout-background w-[25rem] rounded-[15px] box-border p-[25px] relative">
|
||||
<div className="text-content-1 w-full h-[3.125rem] text-[28px] font-bold text-center">
|
||||
Регистрация аккаунта
|
||||
<div className="bg-layout-background w-[25rem] rounded-[15px] box-border p-[25px] relative">
|
||||
<div className="text-content-1 w-full text-[28px] font-bold text-center">
|
||||
Регистрация
|
||||
</div>
|
||||
<div className="text-content-1 w-full h-[3.4375rem] text-[12px] text-center mt-[15px]">
|
||||
Для начала работы вам необходимо создать аккаунт. Заполните поля ниже
|
||||
и нажмите кнопку продолжить
|
||||
<div className="text-content-1 w-full text-[12px] text-center mt-[15px]">
|
||||
Для создания аккаунта заполните поля ниже и нажмите кнопку "Зарегистрироваться"
|
||||
</div>
|
||||
|
||||
{/* <div>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
|
||||
inputClickRegister && inputUsername == "" && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
<div className="mt-[15px] flex flex-col gap-4">
|
||||
{/* Username */}
|
||||
<div className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all overflow-hidden",
|
||||
submitClicked && !username && "h-[21px]"
|
||||
)}>
|
||||
Поле не может быть пустым
|
||||
</div>
|
||||
<Input
|
||||
required
|
||||
label="Логин"
|
||||
radius="sm"
|
||||
className="w-[22rem]"
|
||||
onChange={changeUsername}
|
||||
defaultState={username}
|
||||
required
|
||||
onChange={(val) => setUsername(val)}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
|
||||
inputClickRegister && inputEmail == "" && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
|
||||
{/* Email */}
|
||||
<div className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all overflow-hidden",
|
||||
submitClicked && !email && "h-[21px]"
|
||||
)}>
|
||||
Поле не может быть пустым
|
||||
</div>
|
||||
<Input
|
||||
required
|
||||
label="Почта"
|
||||
label="Email"
|
||||
type="email"
|
||||
radius="sm"
|
||||
className="w-[22rem]"
|
||||
onChange={changeEmail}
|
||||
defaultState={email}
|
||||
required
|
||||
onChange={(val) => setEmail(val)}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
|
||||
inputClickRegister && inputPassword == "" && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
|
||||
{/* Password */}
|
||||
<div className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all overflow-hidden",
|
||||
submitClicked && !password && "h-[21px]"
|
||||
)}>
|
||||
Поле не может быть пустым
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all overflow-hidden",
|
||||
inputClickRegister &&
|
||||
inputRepeatPassword != inputPassword &&
|
||||
"h-[21px]"
|
||||
)}
|
||||
>
|
||||
Пароли не совпадают
|
||||
</div>
|
||||
<Input
|
||||
required
|
||||
label="Пароль"
|
||||
type="password"
|
||||
radius="sm"
|
||||
className="w-[22rem]"
|
||||
onChange={changePassword}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
|
||||
inputClickRegister && inputRepeatPassword == "" && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
Поле не может быть пустым
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all overflow-hidden",
|
||||
inputClickRegister &&
|
||||
inputRepeatPassword != inputPassword &&
|
||||
"h-[21px]"
|
||||
)}
|
||||
>
|
||||
Пароли не совпадают
|
||||
</div>
|
||||
<Input
|
||||
required
|
||||
label="Повторите пароль"
|
||||
type="password"
|
||||
radius="sm"
|
||||
className="w-[22rem]"
|
||||
onChange={setInputRepeatPassword}
|
||||
onChange={(val) => setPassword(val)}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all overflow-hidden mt-[20px]",
|
||||
inputClickRegister && inputChecked == false && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
Это обязательное поле
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Checkbox
|
||||
className="z-10"
|
||||
onChange={(state: boolean) => {
|
||||
setInputChecked(state);
|
||||
}}
|
||||
/>
|
||||
<div className="text-[10px] absolute top-0 left-[35px] text-content-1">
|
||||
Согласен с Условиями обслуживания и Политикой конфиденциальности
|
||||
</div>
|
||||
</div>
|
||||
{/* Ошибка от сервера */}
|
||||
{status === "failed" && error && (
|
||||
<div className="text-[14px] text-danger font-medium">{error}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full mb-[8px] mt-[20px]"
|
||||
size="lg"
|
||||
onClick={completeRegister}
|
||||
text="Зарегистрироваться"
|
||||
/>
|
||||
<Button
|
||||
variant="bordered"
|
||||
color="default"
|
||||
className="w-full mb-[25px]"
|
||||
size="lg"
|
||||
onClick={clickNavigateLogin}
|
||||
text="Вернуться ко входу"
|
||||
/> */}
|
||||
<div className="w-[calc(100%-50px)] absolute bottom-0">
|
||||
<PrimaryButton
|
||||
className="w-full mb-[8px]"
|
||||
onClick={handleRegister}
|
||||
text={status === "loading" ? "Регистрация..." : "Зарегистрироваться"}
|
||||
disabled={status === "loading"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user