feat: implement password change functionality and improve UI for password management

README.md

@@ -132,17 +132,22 @@ Ouvrir [http://localhost:3000](http://localhost:3000)
 ### Avec Docker
 
 1Run le container :
-   ```bash
-   docker compose up -d
-   ```
+
+```bash
+docker compose up -d
+```
+
 Créer un Super Administrateur à l'intérieur du container :
-   ```bash
-   docker exec -it <container_id> sh
-   ```
-   Puis exécuter (pensez à modifier le nom d'utilisateur et le mot de passe si nécessaire) :
-   ```bash
-   node scripts/create-super-admin.js
-   ```
+
+```bash
+docker exec -it <container_id> sh
+```
+
+Puis exécuter (pensez à modifier le nom d'utilisateur et le mot de passe si nécessaire) :
+
+```bash
+node scripts/create-super-admin.js
+```
 
 ## Contribution
 

app/admin/page.tsx

@@ -69,6 +69,9 @@ export default function AdminPage() {
     id: string;
     name: string;
   } | null>(null);
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [changeNewPassword, setChangeNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
 
   useEffect(() => {
     if (status === 'loading') return;
@@ -185,6 +188,8 @@ export default function AdminPage() {
   };
 
   const handleDelete = async (id: string) => {
+    // Reject the hour entry then delete
+    await handleValidate(id, 'REJECTED');
     await fetch(`/api/hours/${id}`, {
       method: 'DELETE',
     });
@@ -232,6 +237,28 @@ export default function AdminPage() {
     fetchHours();
   };
 
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (changeNewPassword !== confirmPassword) {
+      toast.error('Les mots de passe ne correspondent pas');
+      return;
+    }
+    const res = await fetch('/api/auth/change-password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ currentPassword, newPassword: changeNewPassword }),
+    });
+    if (res.ok) {
+      toast.success('Mot de passe changé avec succès');
+      setCurrentPassword('');
+      setChangeNewPassword('');
+      setConfirmPassword('');
+    } else {
+      const data = await res.json();
+      toast.error(data.error || 'Erreur lors du changement de mot de passe');
+    }
+  };
+
   if (status === 'loading') return <div>Chargement...</div>;
 
   const isSuperAdmin = session?.user?.role === 'SUPER_ADMIN';
@@ -347,7 +374,7 @@ export default function AdminPage() {
                           variant="destructive"
                           disabled={hour.userId === session?.user?.id}
                         >
-                          Supprimer
+                          Rejeter
                         </Button>
                       </>
                     )}
@@ -401,6 +428,48 @@ export default function AdminPage() {
           </div>
         </CardContent>
       </Card>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Changer mot de passe</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleChangePassword} className="space-y-4">
+            <div>
+              <Label htmlFor="currentPassword">Mot de passe actuel</Label>
+              <Input
+                id="currentPassword"
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="changeNewPassword">Nouveau mot de passe</Label>
+              <Input
+                id="changeNewPassword"
+                type="password"
+                value={changeNewPassword}
+                onChange={(e) => setChangeNewPassword(e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="confirmPassword">
+                Confirmer nouveau mot de passe
+              </Label>
+              <Input
+                id="confirmPassword"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+              />
+            </div>
+            <Button type="submit">Changer mot de passe</Button>
+          </form>
+        </CardContent>
+      </Card>
       {isSuperAdmin && (
         <Card className="mb-4">
           <CardHeader>

app/api/auth/change-password/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '../../../../lib/auth';
+import { prisma } from '../../../../lib/prisma';
+import bcrypt from 'bcryptjs';
+
+export async function POST(request: NextRequest) {
+  const { currentPassword, newPassword } = await request.json();
+
+  const session = await getServerSession(authOptions);
+  if (!session) {
+    return NextResponse.json({ error: 'Non authentifié' }, { status: 401 });
+  }
+
+  const user = await prisma.user.findUnique({
+    where: { id: session.user.id },
+  });
+
+  if (!user) {
+    return NextResponse.json(
+      { error: 'Utilisateur non trouvé' },
+      { status: 404 },
+    );
+  }
+
+  const isValid = await bcrypt.compare(currentPassword, user.password);
+  if (!isValid) {
+    return NextResponse.json(
+      { error: 'Mot de passe actuel incorrect' },
+      { status: 400 },
+    );
+  }
+
+  const hashedPassword = await bcrypt.hash(newPassword, 10);
+  await prisma.user.update({
+    where: { id: session.user.id },
+    data: { password: hashedPassword },
+  });
+
+  return NextResponse.json({ message: 'Mot de passe changé avec succès' });
+}

app/dashboard/page.tsx

@@ -22,6 +22,7 @@ import {
 } from '../../components/ui/card';
 import { DatePicker } from '../../components/ui/date-picker';
 import { format } from 'date-fns';
+import { toast } from 'sonner';
 
 interface Hour {
   id: number;
@@ -41,6 +42,9 @@ export default function DashboardPage() {
   const [reason, setReason] = useState('');
   const [hoursInput, setHoursInput] = useState('');
   const [minutesInput, setMinutesInput] = useState('');
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
 
   useEffect(() => {
     if (status === 'loading') return;
@@ -72,7 +76,11 @@ export default function DashboardPage() {
     const res = await fetch('/api/hours', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ date: dateString, duration: totalMinutes, reason }),
+      body: JSON.stringify({
+        date: dateString,
+        duration: totalMinutes,
+        reason,
+      }),
     });
     if (res.ok) {
       setDate(undefined);
@@ -80,6 +88,9 @@ export default function DashboardPage() {
       setMinutesInput('');
       setReason('');
       fetchHours();
+      toast.success('Heure ajoutée avec succès');
+    } else {
+      toast.error("Erreur lors de l'ajout de l'heure");
     }
   };
 
@@ -92,6 +103,28 @@ export default function DashboardPage() {
     fetchHours();
   };
 
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (newPassword !== confirmPassword) {
+      toast.error('Les mots de passe ne correspondent pas');
+      return;
+    }
+    const res = await fetch('/api/auth/change-password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ currentPassword, newPassword }),
+    });
+    if (res.ok) {
+      toast.success('Mot de passe changé avec succès');
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+    } else {
+      const data = await res.json();
+      toast.error(data.error || 'Erreur lors du changement de mot de passe');
+    }
+  };
+
   if (status === 'loading') return <div>Chargement...</div>;
 
   const isAdmin =
@@ -167,7 +200,7 @@ export default function DashboardPage() {
           </CardContent>
         </Card>
       )}
-      <Card>
+      <Card className="mb-4">
         <CardHeader>
           <CardTitle>Liste des heures</CardTitle>
         </CardHeader>
@@ -215,6 +248,50 @@ export default function DashboardPage() {
           </Table>
         </CardContent>
       </Card>
+      {isMember && (
+        <Card className="mb-4">
+          <CardHeader>
+            <CardTitle>Changer mot de passe</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleChangePassword} className="space-y-4">
+              <div>
+                <Label htmlFor="currentPassword">Mot de passe actuel</Label>
+                <Input
+                  id="currentPassword"
+                  type="password"
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  required
+                />
+              </div>
+              <div>
+                <Label htmlFor="newPassword">Nouveau mot de passe</Label>
+                <Input
+                  id="newPassword"
+                  type="password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  required
+                />
+              </div>
+              <div>
+                <Label htmlFor="confirmPassword">
+                  Confirmer nouveau mot de passe
+                </Label>
+                <Input
+                  id="confirmPassword"
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  required
+                />
+              </div>
+              <Button type="submit">Changer mot de passe</Button>
+            </form>
+          </CardContent>
+        </Card>
+      )}
       <div className="mt-4">
         <h2 className="text-xl font-bold">Totaux</h2>
         <div className="flex space-x-4">

components/Header.tsx

@@ -41,10 +41,7 @@ export default function Header() {
             <span className="text-gray-900 dark:text-white">
               {session.user.email} ({session.user.role})
             </span>
-            <Button
-                onClick={() => signOut()}
-                variant="destructive"
-            >
+            <Button onClick={() => signOut()} variant="destructive">
               Déconnexion
             </Button>
           </div>