Update May 12 by Elvis

app/admin/login/page.tsx

@@ -2,33 +2,39 @@
 
 import { useState } from "react";
 import { Lock } from "lucide-react";
-import { useAdmin } from "@/contexts/AdminContext";
+import { useAuth } from "@/contexts/AuthContext";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ApiError } from "@/lib/api";
 import { toast } from "sonner";
 import { useRouter } from "next/navigation";
 
 export default function AdminLogin() {
-  const { login, isAdmin } = useAdmin();
-  const route = useRouter();
+  const { login } = useAuth();
+  const router = useRouter();
+  const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
-    setTimeout(() => {
-      const ok = login(password);
-      setLoading(false);
-      if (ok) {
-        toast.success("Connexion réussie");
-        route.push("/admin");
-      } else {
-        toast.error("Mot de passe incorrect");
+    try {
+      const profile = await login(email, password);
+      if (profile.role !== "admin") {
+        toast.error("Accès refusé : rôle administrateur requis");
+        return;
       }
-    }, 300);
+      toast.success("Connexion réussie");
+      router.push("/admin");
+    } catch (err) {
+      const msg = err instanceof ApiError ? err.message : "Identifiants incorrects";
+      toast.error(msg);
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
@@ -43,6 +49,17 @@ export default function AdminLogin() {
         </CardHeader>
         <CardContent>
           <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                autoFocus
+              />
+            </div>
             <div className="space-y-2">
               <Label htmlFor="password">Mot de passe</Label>
               <Input
@@ -52,9 +69,7 @@ export default function AdminLogin() {
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="••••••••"
                 required
-                autoFocus
               />
-              <p className="text-xs text-muted-foreground">Démo : <span className="font-mono">admin123</span></p>
             </div>
             <Button type="submit" className="w-full p-6" disabled={loading}>
               {loading ? "Connexion..." : "Se connecter"}
@@ -64,4 +79,4 @@ export default function AdminLogin() {
       </Card>
     </div>
   );
-};
+}