feat: fixed login

src/components/ui/Button.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent } from "preact";
+import { HTMLProps } from "preact/compat";
 import { tv } from "tailwind-variants";
 import classes from "./Button.module.scss";
 const button = tv({
@@ -12,11 +13,9 @@ const button = tv({
   },
 });
 
-interface ButtonProps {
+interface ButtonProps extends HTMLProps<HTMLButtonElement> {
   color?: "primary" | "secondary" | "red";
-  onClick?: () => void;
   className?: string;
-  type?: "button" | "submit";
 }
 
 const Button: FunctionComponent<ButtonProps> = ({
@@ -33,4 +32,6 @@ const Button: FunctionComponent<ButtonProps> = ({
   );
 };
 
+Button.displayName = "AHButton";
+
 export default Button;

src/pages/login.tsx

@@ -6,7 +6,6 @@ import { useAppContext } from "@/providers/AuthProvider";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
 import "preact/debug";
-import { useState } from "preact/hooks";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { ILoginForm } from "./login.dto";
 import classes from "./login.module.scss";
@@ -18,17 +17,6 @@ const testUser = {
 const LoginPage: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
-  const [passwordError, setPasswordError] = useState("");
-  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: "",
@@ -36,12 +24,23 @@ const LoginPage: FunctionComponent = () => {
     },
     mode: "onChange",
   });
+  const login: SubmitHandler<ILoginForm> = async (data) => {
+    console.log(data);
+    if (data.login !== testUser.login || data.password !== testUser.password) {
+      setError("login", { message: "Неверный логин или пароль" });
+      setError("password", { message: "Неверный логин или пароль" });
+      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>
-        <form onSubmit={handleSubmit((data) => login(data))}>
+        <form onSubmit={handleSubmit(login)}>
           <Controller
             name="login"
             control={control}
@@ -59,7 +58,13 @@ const LoginPage: FunctionComponent = () => {
               required: "Введите пароль",
             }}
             render={({ field }) => (
-              <Input placeholder="Пароль" textAlign="center" type="password" error={passwordError} {...field} />
+              <Input
+                placeholder="Пароль"
+                textAlign="center"
+                type="password"
+                error={formState.errors.password?.message}
+                {...field}
+              />
             )}
           />
           <Button type="submit" color="secondary" className="w-full">