From 7acce35ec099cc92fc2aa62c4721a2aa702c56cc Mon Sep 17 00:00:00 2001
From: Alix JEUDI--LEMOINE <alix.jeudi--lemoine@etu.uca.fr>
Date: Thu, 5 Jun 2025 23:57:20 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20user=20management:=20improv?=
 =?UTF-8?q?ed=20user=20interface=20with=20notifications,=20confirmation=20?=
 =?UTF-8?q?modal=20for=20deletion,=20and=20integration=20of=20a=20service?=
 =?UTF-8?q?=20to=20load=20and=20delete=20users.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/users/users.component.html | 45 +++++++++++++++-
 src/app/components/users/users.component.ts   | 53 +++++++++++++------
 src/app/model/UserDTO.ts                      |  5 ++
 src/app/services/users.service.ts             | 25 +++++++++
 4 files changed, 112 insertions(+), 16 deletions(-)
 create mode 100644 src/app/model/UserDTO.ts
 create mode 100644 src/app/services/users.service.ts

diff --git a/src/app/components/users/users.component.html b/src/app/components/users/users.component.html
index a274c46..e6e2ed0 100644
--- a/src/app/components/users/users.component.html
+++ b/src/app/components/users/users.component.html
@@ -1,24 +1,67 @@
 <div class="container mx-auto px-4 py-8">
-  <h1 class="text-3xl font-bold mb-8">Gestion des utilisateurs</h1>
+  <h1 class="text-3xl font-bold mb-8 dark:text-white">Gestion des utilisateurs</h1>
+
+  <!-- Message de notification -->
+  <div *ngIf="message" 
+       [class]="messageType === 'success' ? 'bg-green-100 border-green-400 text-green-700' : 'bg-red-100 border-red-400 text-red-700'"
+       class="px-4 py-3 rounded relative mb-4 border" 
+       role="alert">
+    <span class="block sm:inline">{{ message }}</span>
+  </div>
 
   <div class="bg-white rounded-lg shadow overflow-hidden">
     <table class="min-w-full divide-y divide-gray-200">
       <thead class="bg-gray-50">
         <tr>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
           <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom d'utilisateur</th>
           <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
         </tr>
       </thead>
       <tbody class="bg-white divide-y divide-gray-200">
         <tr *ngFor="let user of users">
+          <td class="px-6 py-4 whitespace-nowrap">{{ user.uid }}</td>
           <td class="px-6 py-4 whitespace-nowrap">{{ user.username }}</td>
           <td class="px-6 py-4 whitespace-nowrap">
             <span [class]="user.is_admin ? 'text-green-600' : 'text-gray-600'">
               {{ user.is_admin ? 'Administrateur' : 'Utilisateur' }}
             </span>
           </td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <button (click)="openDeleteModal(user)"
+                    class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50" [disabled]="user.is_admin">
+              Supprimer
+            </button>
+          </td>
         </tr>
       </tbody>
     </table>
   </div>
+
+  <!-- Modal de confirmation -->
+  <div *ngIf="showConfirmModal" 
+       class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
+    <div class="relative p-5 border w-96 shadow-lg rounded-md bg-white">
+      <div class="mt-3 text-center">
+        <h3 class="text-lg leading-6 font-medium text-gray-900">Confirmer la suppression</h3>
+        <div class="mt-2 px-7 py-3">
+          <p class="text-sm text-gray-500">
+            Êtes-vous sûr de vouloir supprimer l'utilisateur <span class="font-semibold">{{ userToDelete?.username }}</span> ?
+            Cette action est irréversible.
+          </p>
+        </div>
+        <div class="flex justify-center space-x-4 mt-4">
+          <button (click)="closeModal()"
+                  class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">
+            Annuler
+          </button>
+          <button (click)="confirmDelete()"
+                  class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">
+            Confirmer
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </div> 
\ No newline at end of file
diff --git a/src/app/components/users/users.component.ts b/src/app/components/users/users.component.ts
index 0d5285a..5bcd96a 100644
--- a/src/app/components/users/users.component.ts
+++ b/src/app/components/users/users.component.ts
@@ -1,13 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
-import { environment } from '../../../environment';
-
-interface User {
-  _id: string;
-  username: string;
-  is_admin: boolean;
-}
+import { UsersService } from '../../services/users.service';
+import { UserDTO } from '../../model/UserDTO';
 
 @Component({
   selector: 'app-users',
@@ -16,22 +10,51 @@ interface User {
   imports: [CommonModule]
 })
 export class UsersComponent implements OnInit {
-  users: User[] = [];
+  users: UserDTO[] = [];
+  message: string = '';
+  messageType: 'success' | 'error' = 'success';
+  showConfirmModal: boolean = false;
+  userToDelete: UserDTO | null = null;
 
-  constructor(private http: HttpClient) {}
+  constructor(private usersService: UsersService) {}
 
   ngOnInit(): void {
     this.loadUsers();
   }
 
   private loadUsers(): void {
-    this.http.get<User[]>(`${environment.apiURL}/admin/users`).subscribe(
-      users => {
+    this.usersService.loadUsers().subscribe(
+      (users: UserDTO[]) => {
         this.users = users;
-      },
-      error => {
-        console.error('Erreur lors du chargement des utilisateurs:', error);
       }
     );
   }
+
+  openDeleteModal(user: UserDTO): void {
+    this.userToDelete = user;
+    this.showConfirmModal = true;
+  }
+
+  closeModal(): void {
+    this.showConfirmModal = false;
+    this.userToDelete = null;
+  }
+
+  confirmDelete(): void {
+    if (this.userToDelete) {
+      this.usersService.deleteUser(this.userToDelete.uid).subscribe({
+        next: (response) => {
+          this.message = response.message;
+          this.messageType = 'success';
+          this.loadUsers();
+          this.closeModal();
+        },
+        error: (error) => {
+          this.message = error.detail || "Une erreur est survenue";
+          this.messageType = 'error';
+          this.closeModal();
+        }
+      });
+    }
+  }
 } 
\ No newline at end of file
diff --git a/src/app/model/UserDTO.ts b/src/app/model/UserDTO.ts
new file mode 100644
index 0000000..03aeaa5
--- /dev/null
+++ b/src/app/model/UserDTO.ts
@@ -0,0 +1,5 @@
+export interface UserDTO {
+    uid: string;
+    username: string;
+    is_admin: boolean;
+}
\ No newline at end of file
diff --git a/src/app/services/users.service.ts b/src/app/services/users.service.ts
new file mode 100644
index 0000000..7695152
--- /dev/null
+++ b/src/app/services/users.service.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { environment } from '../../environment';
+import { HttpClient } from '@angular/common/http';
+import { AuthService } from './auth.service';
+import { Observable } from 'rxjs';
+import { UserDTO } from '../model/UserDTO';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UsersService {
+  constructor(private http: HttpClient, private authService: AuthService) {}
+
+  public loadUsers(): Observable<UserDTO[]> {
+    return this.http.get<UserDTO[]>(`${environment.apiURL}/admin/users`, {
+      headers: this.authService.getAuthHeaders(),
+    });
+  }
+
+  public deleteUser(uid: string): Observable<{message: string}> {
+    return this.http.delete<{message: string}>(`${environment.apiURL}/admin/user/${uid}`, {
+      headers: this.authService.getAuthHeaders(),
+    });
+  }
+}