Merge pull request 'Feat/account sets' (#44) from feat/account-sets into dev

Reviewed-on: maximus/aegis#44

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+

pnpm-lock.yaml

@@ -1038,8 +1038,8 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  nanoid@3.3.16:
+  nanoid@3.3.18:
-    resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
+    resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
@@ -2202,7 +2202,7 @@ snapshots:
 
   ms@2.1.3: {}
 
-  nanoid@3.3.16: {}
+  nanoid@3.3.18: {}
 
   natural-compare@1.4.0: {}
 
@@ -2249,7 +2249,7 @@ snapshots:
 
   postcss@8.5.25:
     dependencies:
-      nanoid: 3.3.16
+      nanoid: 3.3.18
       picocolors: 1.1.1
       source-map-js: 1.2.1
 

src/App.tsx

@@ -14,6 +14,7 @@ import Analytics from '@/pages/trustcenter/Analytics';
 import Backups from '@/pages/trustcenter/Backups';
 import NewTicket from '@/pages/servicedesk/NewTicket';
 import TicketDetail from '@/pages/servicedesk/TicketDetail';
+import UpdatePasswordPage from './pages/accountsettings/UpdatePasswordPage';
 
 function App() {
   const [isAuthenticated, setIsAuthenticated] = useState(pb.authStore.isValid);
@@ -63,6 +64,7 @@ function App() {
         <Route path="/backups" element={<Backups />} />
         <Route path="/support/new" element={<NewTicket />} />
         <Route path="/support/tickets/:ticketId" element={<TicketDetail />} />
+        <Route path="/settings/security/password" element={<UpdatePasswordPage />} />
 
         {/* Sécurité : Si l'URL n'existe pas, on redirige vers le dashboard */}
         <Route path="*" element={<Navigate to="/dashboard" replace />} />

src/components/ui/Badge.tsx

@@ -6,7 +6,7 @@ interface BadgeProps {
     name: string
 }
 
-export const StatusBadge: React.FC<BadgeProps> = ({ className, name }) => {
+export const Badge: React.FC<BadgeProps> = ({ className, name }) => {
 
     return (
         <div
@@ -20,4 +20,4 @@ export const StatusBadge: React.FC<BadgeProps> = ({ className, name }) => {
     );
 };
 
-export default StatusBadge;
+export default Badge;

src/components/ui/Card.tsx

@@ -43,7 +43,7 @@ export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<
       ref={ref}
       className={cn(
         // Séparation discrète (bordure fine plutôt qu'ombre inset, pour rester léger)
-        "px-6 py-5 flex flex-col space-y-1.5 border-b border-black/5 dark:border-white/5 transition-all duration-300 ease-in-out",
+        "px-6 py-5 flex flex-col space-y-1.5 border-black/5 dark:border-white/5 transition-all duration-300",
         className
       )}
       {...props}

src/components/ui/Input.tsx

@@ -57,7 +57,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
               "bg-[#e8e8e8] dark:bg-[#1e293b]",
               "text-slate-800 dark:text-slate-100 font-medium placeholder:text-slate-400 dark:placeholder:text-slate-500",
               
-              // 🎯 Utilisation directe de tes constantes Neumorphic creusées
+              // Utilisation directe de tes constantes Neumorphic creusées
               NEUMORPHISM.insetLight,
               NEUMORPHISM.insetDark,
 

src/components/widgets/AccessWidget.tsx

@@ -1,43 +1,74 @@
-import { Card, CardContent, CardHeader } from '@/components/ui/Card';
+import React from 'react';
-import { Lock } from "lucide-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>
+        <Card className="flex flex-col h-full">
-            <CardHeader className="p-6 border-slate-100">
+            <div className="p-6 border-b border-slate-300/30 dark:border-slate-700/30">
-                <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>
+                <h2 className="text-lg font-black text-slate-900 dark:text-slate-100 flex items-center gap-3">
-            </CardHeader>
+                    <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" />
-            <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>
                     </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">
+                    Sécurité de l'accès
-                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5"></span>
+                </h2>
-                        Actif
+            </div>
-                    </span>
-                </div>
 
-                <div className="pt-4 border-t border-slate-100">
+            {isLoading && !error && (
-                    <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">
+                <div className="p-8 flex justify-center items-center flex-1">
-                        Générer de nouveaux codes de secours
+                    <Loader className="w-6 h-6 animate-spin text-blue-600" />
-                    </button>
                 </div>
+            )}
 
-                {/* Mot de passe */}
+            {!isLoading && !error && (
-                <div className="pt-4 border-t border-slate-100">
+                <div className="p-6 space-y-8 flex-1">
-                    <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>
+                    {/* MFA */}
-                    <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">
+                    <div className="flex items-center justify-between">
-                        Modifier le mot de passe
+                        <div>
-                    </button>
+                            <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;

src/components/widgets/BackupWidget.tsx

@@ -17,8 +17,8 @@ export default function BackupWidget({ onClick }: BackupWidgetProps) {
         <Badge className="max-w-fit min-w-fit" name="PRA Immuable">
         </Badge>
       </CardHeader>
-      <CardContent className="p-6">
+      <CardContent className="p-6 flex flex-col h-full">
-        <Card variant='digged' className="bg-slate-50 rounded-lg p-4 border border-slate-100 mb-4">
+        <Card variant="flat" className="rounded-lg p-4 border border-slate-100 mb-4">
           <p className="text-sm text-slate-500 mb-1">Dernier snapshot système</p>
           <p className="text-slate-900 font-medium">Aujourd'hui à 03:00 AM</p>
         </Card>

src/components/widgets/InformationWidget.tsx

@@ -1,14 +1,14 @@
 import { Card, CardContent, CardHeader } from '@/components/ui/Card';
 import type { Company } from '@/types/Company';
-import type { User } from '@/types/user';
+import type { User } from '@/types/User';
 import { Loader } from '@/components/ui/Loader';
 import { Building } from "lucide-react";
 
 interface InformationWidgetProps {
-    user: User;
+    user: User | null;
-    company: Company;
+    company: Company | null;
     isLoading: boolean;
-    error: string;
+    error: string | null;
 }
 
 function setVipBadge(vip_level: string | undefined) {
@@ -37,9 +37,9 @@ export const InformationWidget: React.FC<InformationWidgetProps> = ({
                 </h2>
             </CardHeader>
 
-            <CardContent>
+            {isLoading && !error && <Loader />}
-                {isLoading && !error && <Loader />}
+            {!isLoading && !error && (
-                {!isLoading && !error && (
+                <CardContent>
                     <dl className="space-y-4 text-sm">
                         <div>
                             <dt className="text-slate-500 font-medium">Entité Légale</dt>
@@ -58,8 +58,8 @@ export const InformationWidget: React.FC<InformationWidgetProps> = ({
                             </dd>
                         </div>
                     </dl>
-                )}
+                </CardContent>
-            </CardContent>
+            )}
         </Card>
     );
 }

src/components/widgets/ServicesWidget.tsx

@@ -30,10 +30,10 @@ export default function ServicesWidget() {
           ))}
         </div>
 
-        <Button size="lg" onClick={() => navigate('/evolution-infrastructure')}>
+        <Button className ="text-green-600" size="lg" onClick={() => navigate('/evolution-infrastructure')}>
-          Demander une évolution du parc
+          Mise à niveau du Parc
         </Button>
-
+ 
       </CardContent>
     </Card>
   );

src/components/widgets/SupportCtaWidget.tsx

@@ -8,14 +8,14 @@ export const SupportCtaWidget: React.FC = () => {
 
   return (
     <Card>
-      <CardContent className="p-6">
+      <CardContent className="p-6 rounded-xl">
         <h3 className="text-lg font-semibold mb-2">Centre de Support</h3>
-        <p className="text-blue-900 text-sm mb-4 leading-relaxed">
+        <p className="text-sm mb-4 leading-relaxed">
           Déclarez un incident critique ou demandez une évolution de votre infrastructure.
         </p>
-        <Button 
+        <Button
           onClick={() => navigate('/support')}
-          className="w-full text-blue-900"
+          className= "text-rose-500 w-full"
         >
           Ouvrir un ticket sécurisé
         </Button>

src/components/widgets/SupportFooterWidget.tsx

@@ -16,7 +16,7 @@ export const SupportFooterWidget: React.FC<SupportFooterWidgetProps> = ({
   const navigate = useNavigate();
 
   return (
-    <div className="mt-12 bg-slate-900 text-slate-300 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-sm">
+    <div className="mt-12 bg-slate-500 text-slate-300 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-sm">
       <div>
         <h4 className="text-sm font-bold text-white">{title}</h4>
         <p className="text-xs text-slate-400 mt-0.5">

src/hooks/useDocumentDownload.ts

@@ -33,8 +33,7 @@ export function useDocumentDownload() {
             link.click();
             document.body.removeChild(link);
 
-        } catch (err) {
+        } catch {
-            console.error("Erreur lors du téléchargement sécurisé :", err);
             setError("Accès refusé au coffre-fort documentaire.");
         } finally {
             setIsDownloading(false);

src/hooks/useTickets.ts

@@ -15,8 +15,7 @@ export const useTickets = () => {
         sort: '-created', // Du plus récent au plus ancien
       });
       setTickets(records);
-    } catch (err) {
+    } catch {
-      console.error("Erreur lors de la récupération des tickets :", err);
       setError("Impossible de charger l'historique de vos requêtes.");
     } finally {
       setIsLoading(false);

src/hooks/useUserInformations.ts

@@ -1,6 +1,6 @@
 import { pb } from "@/services/pocketbase";
 import type { Company } from "@/types/Company";
-import type { User } from "@/types/user";
+import type { User } from "@/types/User";
 import { useEffect, useState } from "react";
 
 export const useUserInformations = () => {

src/pages/AccountSettings.tsx

@@ -15,7 +15,11 @@ export default function AccountSettings() {
           description="Gestion de la sécurité et informations contractuelles" />
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
           {/* Colonne 1 : Sécurité */}
-          <AccessWidget />
+          <AccessWidget
+            user={user}
+            isLoading={isLoading}
+            error={error}
+          />
           {/* Colonne 2 : Organisation & Contrat */}
           <InformationWidget
             user={user}

src/pages/ServiceDesk.tsx

@@ -15,7 +15,7 @@ export default function ServiceDesk() {
           title="Centre de Support (Service Desk)"
           description="Canal de communication sécurisé avec vos experts GISE."
         >
-          <Button onClick={() => navigate('/support/new')}>
+          <Button className= "text-rose-500" onClick={() => navigate('/support/new')}>
             Ouvrir un ticket sécurisé
           </Button>
         </PageHeader>

src/pages/accountsettings/UpdatePasswordPage.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { KeyRound, AlertCircle, ShieldCheck } from "lucide-react";
+import { Card } from '@/components/ui/Card';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { pb } from '@/services/pocketbase';
+import BackButton from '@/components/ui/BackButton';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
+
+export default function UpdatePasswordPage() {
+    const navigate = useNavigate();
+
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [feedback, setFeedback] = useState<{ type: 'error' | 'success', message: string } | null>(null);
+
+    const [formData, setFormData] = useState({
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+    });
+
+    const handlePasswordChange = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsUpdating(true);
+        setFeedback(null);
+
+        if (formData.newPassword !== formData.confirmPassword) {
+            setFeedback({ type: 'error', message: "Les nouveaux mots de passe ne correspondent pas." });
+            setIsUpdating(false);
+            return;
+        }
+
+        if (formData.newPassword.length < 8) {
+            setFeedback({ type: 'error', message: "Le mot de passe doit contenir au moins 8 caractères minimum." });
+            setIsUpdating(false);
+            return;
+        }
+
+        try {
+            const userId = pb.authStore.model?.id;
+            if (!userId) throw new Error("Non authentifié.");
+
+            await pb.collection("users").update(userId, {
+                oldPassword: formData.oldPassword,
+                password: formData.newPassword,
+                passwordConfirm: formData.confirmPassword,
+            });
+
+            setFeedback({ type: 'success', message: "Votre mot de passe a été modifié avec succès." });
+            setFormData({ oldPassword: '', newPassword: '', confirmPassword: '' });
+
+            // Retour automatique après 2.5 secondes
+            setTimeout(() => navigate(-1), 2500);
+
+        } catch {
+            setFeedback({ type: 'error', message: "Ancien mot de passe incorrect ou erreur réseau." });
+        } finally {
+            setIsUpdating(false);
+        }
+    };
+    return (
+        <div className="max-w-4xl mx-auto py-8 px-4 space-y-6">
+
+            {/* BOUTON DE RETOUR EXTRAIT */}
+            <BackButton to="/account" label="Retour aux paramètres" />
+
+            {/* LE FORMULAIRE */}
+            <Card className="p-8 sm:p-10">
+                <div className="flex items-center gap-4 mb-8 pb-6 border-b border-slate-300/30 dark:border-slate-700/30">
+                    <div className="p-4 rounded-2xl bg-[#e8e8e8] dark:bg-[#1e293b] shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]">
+                        <KeyRound className="w-8 h-8 text-slate-700 dark:text-slate-200" />
+                    </div>
+                    <div>
+                        <h1 className="text-2xl font-black text-slate-800 dark:text-slate-100 tracking-tight">
+                            Renouvellement du mot de passe
+                        </h1>
+                        <p className="text-slate-500 dark:text-slate-400 font-medium mt-1">
+                            Veuillez choisir un mot de passe fort et unique pour sécuriser votre accès AEGIS.
+                        </p>
+                    </div>
+                </div>
+
+                <form onSubmit={handlePasswordChange} className="space-y-6">
+                    <div className="space-y-2">
+                        <Input
+                            label="Mot de passe actuel"
+                            type="password"
+                            required
+                            placeholder="••••••••"
+                            value={formData.oldPassword}
+                            onChange={(e) => setFormData({ ...formData, oldPassword: e.target.value })}
+                        />
+                    </div>
+
+                    <div className="grid sm:grid-cols-2 gap-6 pt-4">
+                        <Input
+                            label="Nouveau mot de passe"
+                            type="password"
+                            required
+                            placeholder="••••••••"
+                            value={formData.newPassword}
+                            onChange={(e) => setFormData({ ...formData, newPassword: e.target.value })}
+                        />
+                        <Input
+                            label="Confirmez le nouveau mot de passe"
+                            type="password"
+                            required
+                            placeholder="••••••••"
+                            value={formData.confirmPassword}
+                            onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
+                        />
+                    </div>
+
+                    {/* Zone de Feedback */}
+                    {feedback && (
+                        <div className={`p-4 mt-4 rounded-xl flex items-center gap-3 text-sm font-bold ${feedback.type === 'error'
+                            ? `bg-rose-50/50 dark:bg-rose-950/20 text-rose-600 dark:text-rose-400 ${NEUMORPHISM.insetLight} ${NEUMORPHISM.insetDark}`
+                            : `bg-emerald-50/50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400 ${NEUMORPHISM.insetLight} ${NEUMORPHISM.insetDark}`
+                            }`}>
+                            {feedback.type === 'error' ? <AlertCircle className="w-5 h-5 shrink-0" /> : <ShieldCheck className="w-5 h-5 shrink-0" />}
+                            {feedback.message}
+                            {feedback.type === 'success' && <span className="ml-auto font-normal text-xs animate-pulse">Redirection...</span>}
+                        </div>
+                    )}
+
+                    <div className="pt-6 flex justify-center">
+                        <Button
+                            type="submit"
+                            variant="primary"
+                            size="lg"
+                            isLoading={isUpdating}
+                            disabled={!formData.oldPassword || !formData.newPassword || !formData.confirmPassword}
+                        >
+                            Valider le nouveau mot de passe
+                        </Button>
+                    </div>
+                </form>
+            </Card>
+        </div>
+    );
+}

vite.config.ts

@@ -11,20 +11,20 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      '@': path.resolve(import.meta.dirname, './src'),
-      '@components': path.resolve(__dirname, './src/components'),
+      '@components': path.resolve(import.meta.dirname, './src/components'),
-      '@ui': path.resolve(__dirname, './src/components/ui'),
+      '@ui': path.resolve(import.meta.dirname, './src/components/ui'),
-      '@common': path.resolve(__dirname, './src/components/common'),
+      '@common': path.resolve(import.meta.dirname, './src/components/common'),
-      '@pages': path.resolve(__dirname, './src/pages'),
+      '@pages': path.resolve(import.meta.dirname, './src/pages'),
-      '@hooks': path.resolve(__dirname, './src/hooks'),
+      '@hooks': path.resolve(import.meta.dirname, './src/hooks'),
-      '@layouts': path.resolve(__dirname, './src/layouts'),
+      '@layouts': path.resolve(import.meta.dirname, './src/layouts'),
-      '@features': path.resolve(__dirname, './src/features'),
+      '@features': path.resolve(import.meta.dirname, './src/features'),
-      '@services': path.resolve(__dirname, './src/services'),
+      '@services': path.resolve(import.meta.dirname, './src/services'),
-      '@utils': path.resolve(__dirname, './src/utils'),
+      '@utils': path.resolve(import.meta.dirname, './src/utils'),
-      '@assets': path.resolve(__dirname, './src/assets'),
+      '@assets': path.resolve(import.meta.dirname, './src/assets'),
-      '@data': path.resolve(__dirname, './src/data'),
+      '@data': path.resolve(import.meta.dirname, './src/data'),
-      '@widgets': path.resolve(__dirname, './src/components/widgets'),
+      '@widgets': path.resolve(import.meta.dirname, './src/components/widgets'),
-      '@styles': path.resolve(__dirname, './src/styles'),
+      '@styles': path.resolve(import.meta.dirname, './src/styles'),
     }
   }
 })