From af8b347173b19da6e01471c1acbca10c8f0cb885 Mon Sep 17 00:00:00 2001
From: LandaMm <qwer.009771@gmail.com>
Date: Wed, 21 May 2025 19:27:08 +0200
Subject: [PATCH] feat: finished login page

---
 web/src/pages/Login/index.tsx | 200 ++++++++++++++++++++++++++--------
 1 file changed, 152 insertions(+), 48 deletions(-)

diff --git a/web/src/pages/Login/index.tsx b/web/src/pages/Login/index.tsx
index 8ad6bfb..56d94c0 100644
--- a/web/src/pages/Login/index.tsx
+++ b/web/src/pages/Login/index.tsx
@@ -1,68 +1,172 @@
 import { Card, CardContent } from "@/components/ui/card";
-import { Mail, Lock, LogIn } from "lucide-react";
+import { Mail, Lock } from "lucide-react";
 import { Link } from "react-router-dom";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+
 import overlay from "@/assets/overlay.jpg";
+import { useForm, type SubmitHandler } from "react-hook-form";
+import { useCallback, useState } from "react";
+
+interface LoginForm {
+  email: string;
+  password: string;
+}
 
 export default function LoginPage() {
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginForm>();
+
+  const [isLoading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+
+  const onSubmit: SubmitHandler<LoginForm> = useCallback(
+    async (data) => {
+      console.log({ data });
+
+      setLoading(true);
+      setError("");
+      setSuccess("");
+
+      try {
+        const response = await fetch("/api/v1/login", {
+          method: "POST",
+          body: JSON.stringify({
+            email: data.email,
+            password: data.password,
+          }),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (response.status != 200) {
+          const json = await response.json();
+          const text = json.error || "Unexpected error happened";
+          setError(
+            `Failed to create an account. ${
+              text[0].toUpperCase() + text.slice(1)
+            }`
+          );
+        } else {
+          setSuccess("You have successfully logged in");
+          reset();
+        }
+      } catch (err) {
+        console.log(err);
+        setError("Failed to create account. Unexpected error happened");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [reset]
+  );
+
   return (
     <div
-      className="relative min-h-screen bg-cover bg-center"
-      style={{ backgroundImage: overlay }}
+      className="relative min-h-screen bg-cover bg-center bg-white"
+      style={{ backgroundImage: `url(${overlay})` }}
     >
-      <div className="absolute inset-0 bg-black bg-opacity-60"></div>
+      <div className="relative z-10 flex items-center justify-center min-h-screen">
+        <Card className="sm:w-96 sm:min-w-96 sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/90 backdrop-blur-md">
+          <div className="flex flex-col items-center pt-16 sm:pt-0">
+            <img
+              src="/icon.png"
+              alt="icon"
+              className="w-16 h-16 mb-4 mt-2 sm:mt-6"
+            />
 
-      <div className="relative z-10 flex items-center justify-center min-h-screen p-4">
-        <Card className="w-full max-w-md sm:max-w-full sm:h-full sm:rounded-none p-6 shadow-lg bg-white/90 backdrop-blur-md">
-          <div className="flex flex-col items-center">
-            <LogIn className="w-8 h-8 text-gray-700 mb-4" />
-            <h2 className="text-2xl font-bold mb-6 text-gray-800">Login</h2>
+            <div className="px-4 sm:mt-4 mt-8">
+              <h2 className="text-2xl font-bold text-gray-800 text-left w-full">
+                Sign In
+              </h2>
+              <h4 className="text-base mb-3 text-gray-400 text-left">
+                Enter your credentials to access home services and tools.
+              </h4>
+            </div>
 
+            {/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
             <CardContent className="w-full space-y-4">
-              <div>
-                <label
-                  htmlFor="email"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  Email
-                </label>
-                <div className="relative">
-                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="you@example.com"
-                    className="pl-10"
-                  />
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <div className="mb-4">
+                  <div className="relative">
+                    <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                    <Input
+                      id="email"
+                      type="email"
+                      placeholder="Email Address"
+                      className="pl-10"
+                      {...register("email", {
+                        required: true,
+                        pattern: {
+                          value: /\S+@\S+\.\S+/,
+                          message: "Invalid email",
+                        },
+                      })}
+                      aria-invalid={errors.email ? "true" : "false"}
+                    />
+                  </div>
+                  {!!errors.email && (
+                    <p className="text-red-500">
+                      {errors.email.message ?? "Email is required"}
+                    </p>
+                  )}
                 </div>
-              </div>
 
-              <div>
-                <label
-                  htmlFor="password"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  Password
-                </label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                  <Input
-                    id="password"
-                    type="password"
-                    placeholder="••••••••"
-                    className="pl-10"
-                  />
+                <div className="mb-4">
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                    <Input
+                      id="password"
+                      type="password"
+                      placeholder="Password"
+                      className="pl-10"
+                      {...register("password", {
+                        required: true,
+                      })}
+                      aria-invalid={errors.password ? "true" : "false"}
+                    />
+                  </div>
+                  {!!errors.password && (
+                    <p className="text-red-500">
+                      {errors.password.message ?? "Password is required"}
+                    </p>
+                  )}
                 </div>
-              </div>
 
-              <Button className="w-full mt-2">Log In</Button>
-              <div className="text-sm text-center text-gray-600">
-                Don’t have an account?{" "}
-                <Link to="/register" className="text-blue-600 hover:underline">
-                  Register
-                </Link>
-              </div>
+                {success.length > 0 && (
+                  <div className="border border-green-400 p-2 rounded bg-green-200 text-sm">
+                    {success}
+                  </div>
+                )}
+
+                {error.length > 0 && (
+                  <div className="border border-red-400 p-2 rounded bg-red-200 text-sm">
+                    {error}
+                  </div>
+                )}
+
+                <Button
+                  className="w-full mt-2 mb-4"
+                  type="submit"
+                  loading={isLoading}
+                >
+                  Log In
+                </Button>
+                <div className="text-sm text-center text-gray-600">
+                  Don't have an account?{" "}
+                  <Link
+                    to="/register"
+                    className="text-blue-600 hover:underline"
+                  >
+                    Register
+                  </Link>
+                </div>
+              </form>
             </CardContent>
           </div>
         </Card>