fix

Author: Abh1noob

src/app/page.tsx

@@ -1,21 +1,12 @@
-"use client"
-
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
 import { LoginForm } from "@/components/login-form";
 
 export default function HomePage() {
-  const router = useRouter();
-  useEffect(()=>{
-    router.push("/users")
-  
-  })
   return (
     <>
-      <div className="h-screen flex items-center justify-center p-6 md:p-10 bg-black">
-      <div className="w-full max-w-sm">
-        <LoginForm />
-      </div>
+      <div className="flex h-screen items-center justify-center bg-black p-6 md:p-10">
+        <div className="w-full max-w-sm">
+          <LoginForm />
+        </div>
       </div>
     </>
   );

src/components/login-form.tsx

@@ -1,39 +1,44 @@
-"use client"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+"use client";
+import { login } from "@/api/auth";
+import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { useState } from "react"
-import { login } from "@/api/auth"
-import { useRouter } from "next/navigation"
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import { Loader2 } from "lucide-react"; // Import spinner icon
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 export function LoginForm({
   className,
   ...props
 }: React.ComponentPropsWithoutRef<"div">) {
-  const [email,setEmail] = useState<string>("")
+  const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
-  const router = useRouter()
-
+  const [loading, setLoading] = useState<boolean>(false); // Loading state
+  const router = useRouter();
 
   const handleLogin = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
+    setLoading(true); // Set loading to true when login starts
     try {
-        const response = await login(email, password);
-        if(response.status === "success"){
-          router.push("/users")
-        }
+      const response = await login(email, password);
+      if (response.status === "success") {
+        router.push("/users");
+      }
     } catch (err) {
-      throw err
+      console.error("Login failed", err);
+    } finally {
+      setLoading(false); // Reset loading state after login attempt
     }
-};
+  };
+
   return (
     <div className={cn("flex flex-col gap-6", className)} {...props}>
       <Card>
@@ -49,27 +54,40 @@ export function LoginForm({
               <div className="grid gap-2">
                 <Label htmlFor="email">Email</Label>
                 <Input
-                value={email}
+                  value={email}
                   id="email"
                   type="email"
                   placeholder="m@example.com"
                   required
-                  onChange={(e)=>{setEmail(e.target.value)}}
+                  onChange={(e) => setEmail(e.target.value)}
                 />
               </div>
               <div className="grid gap-2">
                 <div className="flex items-center">
                   <Label htmlFor="password">Password</Label>
                 </div>
-                <Input value={password} onChange={(e)=>{setPassword(e.target.value)}} id="password" type="password" required />
+                <Input
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  id="password"
+                  type="password"
+                  required
+                />
               </div>
-              <Button type="submit" className="w-full">
-                Login
+              <Button type="submit" className="w-full" disabled={loading}>
+                {loading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Logging in...
+                  </>
+                ) : (
+                  "Login"
+                )}
               </Button>
             </div>
           </form>
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }