feat: pseudo login

src/components/ui/Input.module.scss

@@ -1,5 +1,5 @@
 @reference "../../index.scss";
 
 .input_field {
-  @apply w-full rounded-[4rem] border border-gray-300 bg-white p-2 leading-8 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
+  @apply w-full rounded-[4rem] border bg-white p-2 leading-8 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
 }

src/components/ui/Input.tsx

@@ -10,6 +10,10 @@ const input = tv({
       center: "text-center",
       left: "text-left",
     },
+    "border-error": {
+      true: "border-red-500 placeholder:text-red-500",
+      false: "border-gray-300",
+    },
   },
   defaultVariants: {
     "text-align": "left",
@@ -21,7 +25,7 @@ interface InputProps {
   placeholder?: string;
   textAlign?: "center" | "left";
   error?: string;
-  ref: Ref<HTMLInputElement> | null;
+  textRef?: Ref<HTMLInputElement> | null;
 }
 
 const Input: FunctionComponent<InputProps> = ({
@@ -29,17 +33,21 @@ const Input: FunctionComponent<InputProps> = ({
   placeholder = "",
   textAlign,
   error = "",
-  ref = null,
+  textRef = null,
 }: InputProps) => {
   return (
     <div class="flex w-full flex-col items-center gap-1">
       <input
         type={isPassword ? "password" : "text"}
-        class={input({ "text-align": textAlign })}
+        class={input({ "text-align": textAlign, "border-error": error !== "" })}
         placeholder={placeholder}
-        ref={ref}
+        ref={textRef}
       />
-      <p class={cn("invisible h-10 w-[80%] text-center text-sm break-words text-red-500", { visible: error !== "" })}>
+      <p
+        class={cn("invisible h-10 w-[80%] text-center text-[0.7rem] break-words text-red-500", {
+          visible: error !== "",
+        })}
+      >
         {error}
       </p>
     </div>

src/pages/login.tsx

@@ -5,28 +5,52 @@ import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
+import "preact/debug";
+import { useRef, useState } from "preact/hooks";
 import classes from "./login.module.scss";
+
+const testUser = {
+  login: "test",
+  password: "test",
+};
 const LoginPage: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
-  return (
+  const loginRef = useRef<HTMLInputElement | null>(null);
+  const passwordRef = useRef<HTMLInputElement | null>(null);
+  const [loginError, setLoginError] = useState("");
+  const [passwordError, setPasswordError] = useState("");
+  const login = async () => {
+    if (!loginRef.current || !passwordRef.current) return;
+    setLoginError("");
+    setPasswordError("");
+    if (!loginRef.current.value.length || !passwordRef.current.value.length) {
+      if (!loginRef.current.value.length) setLoginError("Введите логин");
+      if (!passwordRef.current.value.length) setPasswordError("Введите пароль");
+      return;
+    }
+    if (loginRef.current.value !== testUser.login || passwordRef.current.value !== testUser.password) {
+      setLoginError("Неправильный логин или пароль");
+      return;
+    }
+    isLoggedIn.value = true;
+    localStorage.setItem("loggedIn", "true");
+    route("/profile/tasks", true);
+  };
+  if (isLoggedIn.value) route("/profile/tasks", true);
+  return !isLoggedIn.value ? (
     <div class={classes.login_container}>
       <div class={classes.login_card}>
         <p class={classes.login_card_name}>Антихвост</p>
-        <Input placeholder="Логин" textAlign="center" />
-        <Input isPassword placeholder="Пароль" textAlign="center" />
-        <Button
-          color="secondary"
-          onClick={() => {
-            isLoggedIn.value = true;
-            localStorage.setItem("loggedIn", "true");
-            route("/profile/tasks", true);
-          }}
-        >
+        <Input placeholder="Логин" textAlign="center" textRef={loginRef} error={loginError} />
+        <Input isPassword placeholder="Пароль" textAlign="center" textRef={passwordRef} error={passwordError} />
+        <Button color="secondary" onClick={login}>
           Войти
         </Button>
       </div>
     </div>
+  ) : (
+    <p>Redirecting...</p>
   );
 };