correct user settings manager (and password reset)

src/components/widgets/AccessWidget.tsx

@@ -1,43 +1,74 @@
-import { Card, CardContent, CardHeader } from '@/components/ui/Card';
-import { Lock } from "lucide-react";
+import React from 'react';
+import { Loader, Lock, KeyRound } from "lucide-react";
+import { useNavigate } from "react-router-dom"; // Assurez-vous d'utiliser react-router
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import StatusBadge from '../ui/StatusBadge';
+import type { User } from '@/types/User';
 
-export function AccessWidget() {
+interface AccessWidgetProps {
+    user: User | null;
+    isLoading: boolean;
+    error: string | null;
+}
+
+export const AccessWidget: React.FC<AccessWidgetProps> = ({
+    user,
+    isLoading,
+    error,
+}) => {
+    // Hook de navigation
+    const navigate = useNavigate();
 
     return (
-        <Card>
-            <CardHeader className="p-6 border-slate-100">
-                <h2 className="text-lg font-semibold text-slate-900 border-slate-100 flex items-center"><Lock className="w-5 h-5 mr-2 text-slate-400"></Lock>Sécurité de l'accès</h2>
-            </CardHeader>
-
-            <CardContent className="space-y-6">
-                {/* MFA Status */}
-                <div className="flex items-center justify-between">
-                    <div>
-                        <p className="text-sm font-medium text-slate-900">Authentification à double facteur (MFA)</p>
-                        <p className="text-xs text-slate-500 mt-1">Exigée par les politiques de sécurité GISE</p>
+        <Card className="flex flex-col h-full">
+            <div className="p-6 border-b border-slate-300/30 dark:border-slate-700/30">
+                <h2 className="text-lg font-black text-slate-900 dark:text-slate-100 flex items-center gap-3">
+                    <div className="p-2 rounded-xl bg-[#e8e8e8] dark:bg-[#1e293b] shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]">
+                        <Lock className="w-5 h-5 text-blue-600 dark:text-blue-500" />
                     </div>
-                    <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
-                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5"></span>
-                        Actif
-                    </span>
-                </div>
+                    Sécurité de l'accès
+                </h2>
+            </div>
 
-                <div className="pt-4 border-t border-slate-100">
-                    <button className="text-sm font-medium text-blue-900 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition-colors duration-200 border border-blue-100">
-                        Générer de nouveaux codes de secours
-                    </button>
+            {isLoading && !error && (
+                <div className="p-8 flex justify-center items-center flex-1">
+                    <Loader className="w-6 h-6 animate-spin text-blue-600" />
                 </div>
+            )}
 
-                {/* Mot de passe */}
-                <div className="pt-4 border-t border-slate-100">
-                    <p className="text-sm font-medium text-slate-900 mb-2">Mot de passe institutionnel</p>
-                    <p className="text-xs text-slate-500 mb-4">Dernière modification : Il y a 43 jours</p>
-                    <button className="text-sm font-medium text-slate-700 hover:text-slate-900 bg-white hover:bg-slate-50 border border-slate-300 px-4 py-2 rounded-lg transition-colors duration-200 shadow-sm">
-                        Modifier le mot de passe
-                    </button>
+            {!isLoading && !error && (
+                <div className="p-6 space-y-8 flex-1">
+                    
+                    {/* MFA */}
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <p className="text-sm font-bold text-slate-900 dark:text-slate-200">Authentification (MFA)</p>
+                            <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mt-1">Exigée par GISE</p>
+                        </div>
+                        <StatusBadge status={user?.mfa_enabled ? "Actif" : "Hors Ligne"} />
+                    </div>
+
+                    {/* MOT DE PASSE (Lien vers la sous-page) */}
+                    <div className="pt-8 border-t border-slate-300/30 dark:border-slate-700/30">
+                        <p className="text-sm font-bold text-slate-900 dark:text-slate-200 mb-1">Mot de passe institutionnel</p>
+                        <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-5">Dernière modification : Il y a 43 jours</p>
+                        
+                        <Button 
+                            variant="primary" 
+                            size="sm"
+                            // Navigation vers votre route dédiée
+                            onClick={() => navigate('/settings/security/password')} 
+                            leftIcon={<KeyRound className="w-4 h-4" />}
+                            className="w-full sm:w-auto"
+                        >
+                            Modifier le mot de passe
+                        </Button>
+                    </div>
                 </div>
-            </CardContent>
+            )}
         </Card>
     );
 }
+
 export default AccessWidget;