layout auth page

src/views/home/auth/Login.tsx

@@ -2,11 +2,12 @@ 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 { 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";
 
 const Login = () => {
   const dispatch = useAppDispatch();
@@ -18,6 +19,9 @@ const Login = () => {
 
   const { status, error, jwt } = useAppSelector((state) => state.auth);
 
+
+  const [err, setErr] = useState<string>("");
+
   // После успешного логина
   useEffect(() => {
     dispatch(setMenuActivePage("account"))
@@ -27,6 +31,8 @@ const Login = () => {
   }, [jwt]);
 
   const handleLogin = () => {
+    setErr(err == "" ? "Неверная почта и/или пароль" : "");
+    console.log(123);
     setSubmitClicked(true);
 
     if (!username || !password) return;
@@ -39,67 +45,60 @@ const Login = () => {
   };
 
   return (
-    <div className="h-full w-full flex items-center justify-center">
-      <div className="bg-layout-background grid gap-[80px] grid-cols-[400px,400px]  box-border relative ">
-        <div className="flex items-center justify-center">
+    <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">
-          <div className="text-content-1 w-full text-[28px] font-bold text-center">
-            Вход в аккаунт
-          </div>
-          <div className="text-content-1 w-full text-[12px] text-center mt-[15px]">
-            Для начала работы войдите в аккаунт. Заполните поля ниже и нажмите "Войти".
-          </div>
-
-          <div className="mt-[15px] flex flex-col gap-4">
-            <div className={cn(
-              "text-[14px] text-danger font-medium  transition-all overflow-hidden",
-              submitClicked && !username && "h-[21px]"
-            )}>
-              Поле не может быть пустым
+        <div className=" relative pointer-events-auto">
+          <div>
+            <div className="text-[40px] text-liquid-white font-bold h-[50px]">
+              С возвращением
             </div>
-            <Input
-              label="Логин"
-              radius="sm"
-              className="w-full"
-              required
-              onChange={(val) => setUsername(val)}
-            />
-
-            <div className={cn(
-              "text-[14px] text-danger font-medium transition-all overflow-hidden",
-              submitClicked && !password && "h-[21px]"
-            )}>
-              Поле не может быть пустым
+            <div className="text-[18px] text-liquid-light font-bold h-[23px]">
+              Вход в аккаунт
             </div>
-            <Input
-              label="Пароль"
-              type="password"
-              radius="sm"
-              className="w-hull"
-              required
-              onChange={(val) => setPassword(val)}
-            />
-
-            {status === "failed" && error && (
-              <div className="text-[14px] text-danger font-medium">{error}</div>
-            )}
           </div>
 
-          <div className="w-[calc(100%-50px)]">
+
+          <Input className="mt-[10px]" type="email" label="Почта" onChange={(v) => { }} placeholder="example@gmail.com" error={err}/>
+          <Input className="mt-[10px]" type="password" label="Пароль" onChange={(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" ? "Вход..." : "Войти"}
+              text={status === "loading" ? "Вход..." : "Вход"}
               disabled={status === "loading"}
             />
-            <PrimaryButton
-              className="w-full mb-[25px]"
+            <SecondaryButton
+              className="w-full"
               onClick={navigateToRegister}
-              text="Зарегистрироваться"
+              text="Войти с Google  "
             />
           </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>