feat: form hook

src/pages/login.tsx

@@ -6,7 +6,9 @@ import { useAppContext } from "@/providers/AuthProvider";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
 import "preact/debug";
-import { useRef, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import { ILoginForm } from "./login.dto";
 import classes from "./login.module.scss";
 
 const testUser = {
@@ -16,37 +18,54 @@ const testUser = {
 const LoginPage: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
-  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("Неправильный логин или пароль");
+  const login: SubmitHandler<ILoginForm> = async (data) => {
+    console.log(data);
+    if (data.login !== testUser.login || data.password !== testUser.password) {
+      setError("login", { message: "Неверный" }); //TODO: не показывает ошибку
       return;
     }
     isLoggedIn.value = true;
     localStorage.setItem("loggedIn", "true");
     route("/profile/tasks", true);
   };
+  const { control, handleSubmit, formState, setError } = useForm({
+    defaultValues: {
+      login: "",
+      password: "",
+    },
+    mode: "onChange",
+  });
   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" textRef={loginRef} error={loginError} />
-        <Input isPassword placeholder="Пароль" textAlign="center" textRef={passwordRef} error={passwordError} />
-        <Button color="secondary" onClick={login}>
-          Войти
-        </Button>
+        <form onSubmit={handleSubmit((data) => login(data))}>
+          <Controller
+            name="login"
+            control={control}
+            rules={{
+              required: "Введите логин",
+            }}
+            render={({ field }) => (
+              <Input placeholder="Логин" textAlign="center" error={formState.errors.login?.message} {...field} />
+            )}
+          />
+          <Controller
+            name="password"
+            control={control}
+            rules={{
+              required: "Введите пароль",
+            }}
+            render={({ field }) => (
+              <Input placeholder="Пароль" textAlign="center" type="password" error={passwordError} {...field} />
+            )}
+          />
+          <Button type="submit" color="secondary" className="w-full">
+            Войти
+          </Button>
+        </form>
       </div>
     </div>
   ) : (