From eb12afe763f107a9dc45e2b71dabbf8d901e8e78 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Wed, 23 Apr 2025 13:47:16 +0300
Subject: [PATCH] feat: fixed login

---
 src/components/ui/Button.tsx |  7 ++++---
 src/pages/login.tsx          | 33 +++++++++++++++++++--------------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 3ab1198..0a2436c 100644
--- a/src/components/ui/Button.tsx
+++ b/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;
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 18319a1..09cacb8 100644
--- a/src/pages/login.tsx
+++ b/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">