111 lines
3.8 KiB
TypeScript
111 lines
3.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 { Link, useNavigate } from "react-router-dom";
|
||
import { loginUser } from "../../../redux/slices/auth";
|
||
import { cn } from "../../../lib/cn";
|
||
import { setMenuActivePage } from "../../../redux/slices/store";
|
||
import { Balloon } from "../../../assets/icons/auth";
|
||
import { SecondaryButton } from "../../../components/button/SecondaryButton";
|
||
import { googleLogo } from "../../../assets/icons/input";
|
||
|
||
const Login = () => {
|
||
const dispatch = useAppDispatch();
|
||
const navigate = useNavigate();
|
||
|
||
const [username, setUsername] = useState<string>("");
|
||
const [password, setPassword] = useState<string>("");
|
||
const [submitClicked, setSubmitClicked] = useState<boolean>(false);
|
||
|
||
const { status, error, jwt } = useAppSelector((state) => state.auth);
|
||
|
||
|
||
const [err, setErr] = useState<string>("");
|
||
|
||
// После успешного логина
|
||
useEffect(() => {
|
||
dispatch(setMenuActivePage("account"))
|
||
if (jwt) {
|
||
navigate("/home/offices"); // или другая страница после входа
|
||
}
|
||
}, [jwt]);
|
||
|
||
const handleLogin = () => {
|
||
// setErr(err == "" ? "Неверная почта и/или пароль" : "");
|
||
// console.log(123);
|
||
setSubmitClicked(true);
|
||
|
||
if (!username || !password) return;
|
||
|
||
dispatch(loginUser({ username, 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="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" />
|
||
|
||
<div className="flex justify-end mt-[10px]">
|
||
<Link
|
||
to={""}
|
||
className={"text-liquid-brightmain text-[16px] h-[20px] transition-all hover:underline "}>
|
||
Забыли пароль?
|
||
</Link>
|
||
</div>
|
||
|
||
|
||
<div className="mt-[10px]">
|
||
<PrimaryButton
|
||
className="w-full mb-[8px]"
|
||
onClick={handleLogin}
|
||
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/register"}
|
||
className={"text-liquid-brightmain text-[16px] h-[20px] transition-all hover:underline "}>
|
||
Регистрация
|
||
</Link>
|
||
</span>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Login;
|