Update page.tsx

app/auth/login/page.tsx

@@ -9,17 +9,19 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
 
 export default function LoginPage() {
   const [username, setUsername] = useState(""); 
   const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
 
   async function handleLogin(e: React.FormEvent) {
     e.preventDefault();
-    setError("");
+    setIsLoading(true);
 
+    try {
       const res = await fetchData(`${process.env.NEXT_PUBLIC_API_URL}/auth/login`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -31,7 +33,20 @@ export default function LoginPage() {
         router.push("/dashboard");
       } else {
         const data = await res.json();
-      setError(data.error || "Invalid credentials");
+        const errorMessage = data.error || "Invalid credentials";
+        
+        // Show toast notification for failed login
+        toast.error("Login Failed", {
+          description: errorMessage,
+        });
+      }
+    } catch (error) {
+      // Handle network errors or other exceptions
+      toast.error("Login Error", {
+        description: "An error occurred while trying to log in. Please try again.",
+      });
+    } finally {
+      setIsLoading(false);
     }
   }
 
@@ -43,12 +58,10 @@ export default function LoginPage() {
           <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Please sign in to your account</p>
         </div>
 
-        {error && <p className="text-red-500 text-sm text-center">{error}</p>} {/* ✅ Display login errors */}
-
         <form className="mt-8 space-y-6" onSubmit={handleLogin}>
           <div className="space-y-4">
             <div>
-              <Label htmlFor="username">Username</Label> {/* ✅ Changed Email to Username */}
+              <Label htmlFor="username">Username</Label>
               <Input
                 id="username"
                 name="username"
@@ -75,9 +88,8 @@ export default function LoginPage() {
             </div>
           </div>
 
-
+          <Button type="submit" className="w-full" disabled={isLoading}>
-          <Button type="submit" className="w-full">
+            {isLoading ? "Signing in..." : "Sign in"}
-            Sign in
           </Button>
         </form>