Restyle login page

inventory/src/pages/Login.tsx

@@ -4,24 +4,26 @@ import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
-  CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { toast } from 'sonner';
 import config from '../config';
+import { Loader2, Box } from 'lucide-react';
 
 const isDev = process.env.NODE_ENV === 'development';
 
 export function Login() {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
 
-  const handleLogin = async () => {
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
     try {
       const url = isDev ? "/auth-inv/login" : `${config.authUrl}/login`;
       console.log('Making login request:', {
@@ -56,6 +58,7 @@ export function Login() {
       
       sessionStorage.setItem('token', data.token);
       sessionStorage.setItem('isLoggedIn', 'true');
+      toast.success('Successfully logged in');
       navigate('/');
     } catch (error) {
       console.error('Login error:', error);
@@ -64,45 +67,64 @@ export function Login() {
           ? error.message
           : 'An unexpected error occurred',
       );
+    } finally {
+      setIsLoading(false);
     }
   };
 
   return (
-    <div className="flex items-center justify-center h-screen">
+    <div className="min-h-screen bg-gradient-to-b from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-800 antialiased">
-      <Card className="w-[350px]">
+      <div className="relative w-full h-16 bg-primary flex items-center px-6">
-        <CardHeader>
+        <div className="flex items-center text-lg font-medium text-white">
-          <CardTitle>Login</CardTitle>
+          <Box className="mr-2 h-6 w-6" />
-          <CardDescription>Enter your credentials to access the inventory.</CardDescription>
+          Inventory Manager
-        </CardHeader>
+        </div>
-        <CardContent>
+      </div>
-          <form>
+      <div className="container relative flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center">
-            <div className="grid w-full items-center gap-4">
+        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-              <div className="flex flex-col space-y-1.5">
+          <Card className="border-none shadow-xl">
-                <Label htmlFor="username">Username</Label>
+            <CardHeader className="space-y-1">
-                <Input
+              <div className="flex items-center justify-center mb-2">
-                  id="username"
+                <Box className="h-10 w-10 text-primary" />
-                  placeholder="Enter your username"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                />
               </div>
-              <div className="flex flex-col space-y-1.5">
+              <CardTitle className="text-2xl text-center">Log in to continue</CardTitle>
-                <Label htmlFor="password">Password</Label>
+            </CardHeader>
-                <Input
+            <CardContent>
-                  id="password"
+              <form onSubmit={handleLogin}>
-                  type="password"
+                <div className="grid gap-4">
-                  placeholder="Enter your password"
+                  <div className="grid gap-2">
-                  value={password}
+                    <Input
-                  onChange={(e) => setPassword(e.target.value)}
+                      id="username"
-                />
+                      placeholder="Username"
-              </div>
+                      value={username}
-            </div>
+                      onChange={(e) => setUsername(e.target.value)}
-          </form>
+                      disabled={isLoading}
-        </CardContent>
+                      className="w-full"
-        <CardFooter className="flex justify-between">
+                    />
-          <Button onClick={handleLogin}>Login</Button>
+                  </div>
-        </CardFooter>
+                  <div className="grid gap-2">
-      </Card>
+                    <Input
+                      id="password"
+                      type="password"
+                      placeholder="Password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      disabled={isLoading}
+                      className="w-full"
+                    />
+                  </div>
+                  <Button className="w-full" type="submit" disabled={isLoading}>
+                    {isLoading && (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    )}
+                    Sign In
+                  </Button>
+                </div>
+              </form>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
     </div>
   );
 }