Add delete user and alert

add customize alert for all action

Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.html

@@ -21,10 +21,10 @@
     </span>
 
     <div class="flex-1">
-      <strong class="block font-medium text-gray-900"> Ajout d'utilisateur </strong>
+      <strong class="block font-medium text-gray-900"> {{ alertTitle }} </strong>
 
       <p class="mt-1 text-sm text-gray-700">
-        L'utilisateur a été ajouté avec succès
+        {{ alertDescription }}
       </p>
     </div>
   </div>

Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.ts

-import { Component } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-alert-add',
   templateUrl: './alert-add.component.html',
   styleUrls: ['./alert-add.component.css']
 })
-export class AlertAddComponent {
+export class AlertAddComponent implements OnInit {
+  alertTitle!: string;
+  alertDescription!: string;
+  @Input() typeAlert!: string;
 
+  ngOnInit() {
+    if(this.typeAlert === "add_success"){
+      this.alertTitle="Ajout d'utilisateur";
+      this.alertDescription="L'utilisateur a été ajouté avec succès";
+    }else if(this.typeAlert === "edit_success"){
+      this.alertTitle="Modification d'utilisateur";
+      this.alertDescription="L'utilisateur a été modifié avec succès"
+    }else{
+      // delete success
+      this.alertTitle="Suppression d'utilisateur";
+      this.alertDescription="L'utilisateur a été supprimé avec succèes"
+    }
+  }
 }

Frontend/quizz-game/src/app/manage/create-user/create-user.component.html

 <div
-  class="overflow-x-hidden overflow-y-auto fixed top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center h-modal sm:h-full">
+  class="w-full">
   <div class="relative w-full max-w-2xl px-4 h-full md:h-auto">
     <!-- Modal content -->
     <div class="bg-white rounded-lg shadow relative">

Frontend/quizz-game/src/app/manage/create-user/create-user.component.ts

@@ -29,13 +29,13 @@ export class CreateUserComponent implements OnInit {
     this.errorOccured = false;
     this.manageService.addUser(this.formData).subscribe(() => {
       console.log("add user success");
-      this.closeModal.emit('success');
+      this.closeModal.emit('add_success');
     }, error => {
       console.log("error add user:", error);
       this.errorOccured = true;
+      this.closeModal.emit('error')
       if (error.error && error.error.message === "USER_EXIST") {
         this.loginService.actualError = ErrorLogin.UserNameExist;
-        this.closeModal.emit('error')
       }
     });
   }

Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.html

-<p>delete-item works!</p>
+<div class="w-full ">
+  <div class="relative w-full max-w-2xl px-4 h-full md:h-auto">
+
+    <div class="flex flex-col p-5 rounded-lg shadow bg-white">
+      <div class="flex">
+        <div>
+          <svg class="w-6 h-6 fill-current text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M0 0h24v24H0V0z" fill="none"/>
+            <path d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"/>
+          </svg>
+        </div>
+
+        <div class="ml-3">
+          <h2 class="font-semibold text-gray-800">Suppression d'un utilisateur</h2>
+          <p class="mt-2 text-sm text-gray-600 leading-relaxed">Êtes vous sûr de supprimer l'utilisateur
+            "{{username}}"?</p>
+        </div>
+      </div>
+
+      <div class="flex items-center mt-3">
+        <button class="flex-1 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm font-medium rounded-md"
+                (click)="closeModalInterface()">
+          Annuler
+        </button>
+
+        <button class="flex-1 px-4 py-2 ml-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-md"
+                (click)="deleteUser()">
+          Supprimer
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+

Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.ts

-import { Component } from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {User} from "../list-users/user-model";
+import {HttpClient} from "@angular/common/http";
+import {LoginService} from "../../login/login.service";
+import {ManageService} from "../manage.service";
+import {error} from "@angular/compiler-cli/src/transformers/util";
 
 @Component({
   selector: 'app-delete-item',
@@ -6,5 +11,23 @@ import { Component } from '@angular/core';
   styleUrls: ['./delete-item.component.css']
 })
 export class DeleteItemComponent {
+  @Input() username!: string
+  @Output() closeModal: EventEmitter<string> = new EventEmitter<string>();
 
+  constructor(private httpClient: HttpClient, private loginService: LoginService, private manageService: ManageService) {
+  }
+
+  deleteUser(){
+    if(this.username){
+      this.manageService.deleteUser(this.username).subscribe(()=>{
+        this.closeModal.emit("delete_success")
+      }, error=>{
+        console.log("error delete user:", error);
+        this.closeModal.emit('error')
+      })
+    }
+  }
+  closeModalInterface(){
+    this.closeModal.emit(undefined);
+  }
 }

Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.html

 <div
-  class="overflow-x-hidden overflow-y-auto fixed top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center h-modal sm:h-full">
+  class="w-full">
   <div class="relative w-full max-w-2xl px-4 h-full md:h-auto">
     <!-- Modal content -->
     <div class="bg-white rounded-lg shadow relative">

Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.ts

@@ -44,25 +44,11 @@ export class EditUserComponent implements OnInit {
     console.log("edit user before:" ,userEditedInfo.accountType)
     this.manageService.updateUser(this.user.username, userEditedInfo.username, userEditedInfo.firstname, userEditedInfo.lastname, userEditedInfo.email, userEditedInfo.accountType, this.formData.value.passwordConfirm).subscribe(()=>{
       console.log("edit user success");
-      this.closeModal.emit('success');
+      this.closeModal.emit('edit_success');
     },error=>{
       console.log("error:", error);
       this.closeModal.emit('error')
     });
-    /*
-    this.manageService.addUser(this.formData).subscribe(() => {
-      console.log("add user success");
-      this.closeModal.emit('success');
-    }, error => {
-      console.log("error add user:", error);
-      this.errorOccured = true;
-      if (error.error && error.error.message === "USER_EXIST") {
-        this.loginService.actualError = ErrorLogin.UserNameExist;
-        this.closeModal.emit('error')
-      }
-    });
-
-     */
   }
 
   closeModalInterface() {

Frontend/quizz-game/src/app/manage/list-users/list-users.component.html

 <div class="absolute top-5 left-0 right-0 flex items-center justify-center h-16">
-  <app-alert-add *ngIf="addSuccess"></app-alert-add>
+  <app-alert-add *ngIf="addSuccess" [typeAlert]="alertSuccess"></app-alert-add>
   <app-errorlogin *ngIf="errorOccured"></app-errorlogin>
 </div>
 
@@ -102,16 +102,17 @@
                         d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
                         clip-rule="evenodd"></path>
                 </svg>
-                Edit user
+                Modifier
               </button>
               <button type="button" data-modal-toggle="delete-user-modal"
+                      (click)="deleteUser(user)"
                       class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center">
                 <svg class="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                   <path fill-rule="evenodd"
                         d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                         clip-rule="evenodd"></path>
                 </svg>
-                Delete user
+                Supprimer
               </button>
             </td>
           </tr>
@@ -121,9 +122,19 @@
     </div>
   </div>
 </div>
-<div *ngIf="modalUser" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50">
-  <app-create-user *ngIf="!userEdited" (closeModal)="closeModal($event)"></app-create-user>
-  <app-edit-user *ngIf="userEdited" [user]="userEdited" (closeModal)="closeModal($event)"></app-edit-user>
+<div *ngIf="modalUser" class="fixed inset-0 flex items-center justify-center z-50">
+  <div class="fixed inset-0 bg-black opacity-50"></div>
+  <app-create-user (closeModal)="closeModal($event)"></app-create-user>
 </div>
+<div *ngIf="userEdited" class="fixed inset-0 flex items-center justify-center z-50">
+  <div class="fixed inset-0 bg-black opacity-50"></div>
+  <app-edit-user [user]="userEdited" (closeModal)="closeModal($event)"></app-edit-user>
+</div>
+
+<div *ngIf="alertDelete" class="fixed inset-0 flex items-center justify-center z-50">
+  <div class="fixed inset-0 bg-black opacity-50"></div>
+  <app-delete-item [username]="userDeleted" (closeModal)="closeModal($event)"></app-delete-item>
+</div>
+
 
 

Frontend/quizz-game/src/app/manage/list-users/list-users.component.ts

@@ -11,11 +11,15 @@ import {Subscription} from "rxjs";
 export class ListUsersComponent implements OnInit, OnDestroy {
   myUsername!:string;
   modalUser=false;
+  alertDelete=false;
+  alertSuccess!:string;
+
   errorOccured!:boolean;
   addSuccess!:boolean;
   users!: User[]
   loading!:boolean;
-  userEdited!: User;
+  userEdited!: any;
+  userDeleted!: string;
   private usersSub!: Subscription;
 
 
@@ -51,22 +55,26 @@ export class ListUsersComponent implements OnInit, OnDestroy {
     this.modalUser=true;
   }
 
+  deleteUser(user: User){
+    this.userDeleted=user.username;
+    this.alertDelete=true;
+  }
+
   closeModal(value: string){
     this.modalUser=false;
-    console.log(this.users);
-    if(value === "success") {
+    this.userEdited=null;
+    this.alertDelete=false;
+    if(value !== "error"){
+      this.alertSuccess=value;
       this.addSuccess=true;
       setTimeout(() => {
         this.addSuccess = false;
       }, 5000);
-
-    }else if(value === "error"){
+    }else{
       this.errorOccured=true;
       setTimeout(() => {
         this.errorOccured = false;
       }, 5000);
-    }else{
-      return;
     }
   }
 

Frontend/quizz-game/src/app/manage/manage.service.ts

@@ -175,5 +175,23 @@ export class ManageService {
     );
   }
 
+  deleteUser(username: string) {
+    const body = { username: username };
+    return this.httpClient
+      .request('delete',
+        `http://localhost:30992/api/v1/admin/${this.username}/delete-user-account`,
+        {body: body}
+      )
+      .pipe(switchMap(() => {
+          return this.users;
+        }),
+        take(1),
+        tap((users) => {
+          this._users.next(users.filter((u) => u.username !== username));
+        })
+      );
+
+  }
+
 
 }