Improve login page

frontend/src/hooks/api/useLogin.ts

@@ -0,0 +1,13 @@
+import { useMutation } from '@tanstack/react-query';
+import { login } from '../../api/auth.api';
+import { setToken } from '../../utils/credentials';
+
+export function useLogin() {
+    return useMutation({
+        mutationFn: async ({ name, password }: { name: string; password: string }) => {
+            const token = await login(name, password);
+            setToken(token);
+            return token;
+        },
+    });
+}

frontend/src/pages/Login/Login.tsx

@@ -1,50 +1,87 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
-import { login } from '../../api/auth.api';
+import { useLogin } from '../../hooks/api/useLogin';
 import { Input } from '../../components/ui/input';
 import { Button } from '../../components/ui/button';
-import { setToken } from '../../utils/credentials';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '../../components/ui/card';
+import { LogIn, TriangleAlert } from 'lucide-react';
+import { Spinner } from '../../components/ui/spinner';
 
 const Login = () => {
     const [name, setName] = useState('');
     const [password, setPassword] = useState('');
-    const [error, setError] = useState<string | null>(null);
     const navigate = useNavigate();
+    const { mutate, isPending, error: mutationError } = useLogin();
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
-        setError(null);
+        mutate(
-        try {
+            { name, password },
-            const token = await login(name, password);
+            {
-            setToken(token);
+                onSuccess: () => {
-            navigate('/');
+                    navigate('/');
-        } catch {
+                },
-            setError('Invalid credentials');
+            }
-        }
+        );
     };
 
     return (
         <div className="max-w-md mx-auto mt-20">
-            <h1 className="text-2xl font-semibold mb-4">Sign in</h1>
+            <Card>
-            <form onSubmit={handleSubmit} className="space-y-4">
+                <CardHeader>
-                <div>
+                    <CardTitle>Sign in</CardTitle>
-                    <label className="block text-sm mb-1">Name</label>
+                    <CardDescription>Enter your credentials to access your account</CardDescription>
-                    <Input value={name} onChange={(e) => setName(e.target.value)} required />
+                </CardHeader>
-                </div>
+                <CardContent>
-                <div>
+                    <form id="login-form" onSubmit={handleSubmit} className="space-y-4">
-                    <label className="block text-sm mb-1">Password</label>
+                        <div>
-                    <Input
+                            <label className="block text-sm mb-1">Name</label>
-                        type="password"
+                            <Input
-                        value={password}
+                                value={name}
-                        onChange={(e) => setPassword(e.target.value)}
+                                onChange={(e) => setName(e.target.value)}
-                        required
+                                required
-                    />
+                            />
-                </div>
+                        </div>
-                {error && <p className="text-sm text-destructive">{error}</p>}
+                        <div>
-                <div>
+                            <label className="block text-sm mb-1">Password</label>
-                    <Button type="submit">Sign in</Button>
+                            <Input
-                </div>
+                                type="password"
-            </form>
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                required
+                            />
+                        </div>
+                        {mutationError && (
+                            <div className="flex items-center gap-2 text-destructive mt-2">
+                                <TriangleAlert size={16} />
+                                <p className="text-sm text-destructive">Invalid credentials</p>
+                            </div>
+                        )}
+                    </form>
+                </CardContent>
+                <CardFooter>
+                    <Button type="submit" form="login-form" className="w-full" disabled={isPending}>
+                        {isPending ? (
+                            <>
+                                <Spinner />
+                                <span>Signing In...</span>
+                            </>
+                        ) : (
+                            <>
+                                <LogIn />
+                                <span>Sign In</span>
+                            </>
+                        )}
+                    </Button>
+                </CardFooter>
+            </Card>
         </div>
     );
 };