diff --git a/Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.html b/Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.html
index 3c83561f845cfdc074fcb2a61b5697aeb4fb858b..f5d81d195380a75e28bddb6e4aa2dbc8c0110820 100644
--- a/Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.html
+++ b/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>
diff --git a/Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.ts b/Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.ts
index ed9dd8f3c38ccc67929021aa60df76efbd679c89..2568014f6261796b8c13d307bb634577586fb642 100644
--- a/Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.ts
+++ b/Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.ts
@@ -1,10 +1,26 @@
-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"
+ }
+ }
}
diff --git a/Frontend/quizz-game/src/app/manage/create-user/create-user.component.html b/Frontend/quizz-game/src/app/manage/create-user/create-user.component.html
index 545886811415a8031ac8ba1d13e376e47644389f..efe1a37dc290776069d8801c0c20624c9b4e58bb 100644
--- a/Frontend/quizz-game/src/app/manage/create-user/create-user.component.html
+++ b/Frontend/quizz-game/src/app/manage/create-user/create-user.component.html
@@ -1,5 +1,5 @@
<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">
diff --git a/Frontend/quizz-game/src/app/manage/create-user/create-user.component.ts b/Frontend/quizz-game/src/app/manage/create-user/create-user.component.ts
index 86401d47b8589e22aa5604ae6ff199a16c25de05..b20852da13e8ce55e08bf92efbe150a883098ed3 100644
--- a/Frontend/quizz-game/src/app/manage/create-user/create-user.component.ts
+++ b/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')
}
});
}
diff --git a/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.html b/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.html
index ed6eaaff111b38eae5456c57c64a26204a3ddcda..ad45f1cd2d2928c974e81272be35a5d682412c5e 100644
--- a/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.html
+++ b/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.html
@@ -1 +1,34 @@
-<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>
+
diff --git a/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.ts b/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.ts
index 1cf9fa594d898cfac1bc648b6c8e9fc6bac25d45..c82c7bc47695a43b9bedd03b70bea1186d413b35 100644
--- a/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.ts
+++ b/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.ts
@@ -1,4 +1,9 @@
-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);
+ }
}
diff --git a/Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.html b/Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.html
index 3349221582c20534358a7537d07767cd11aba62f..c45c0f44e319950bdcd5cca308a02e639047df1e 100644
--- a/Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.html
+++ b/Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.html
@@ -1,5 +1,5 @@
<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">
diff --git a/Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.ts b/Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.ts
index e32a2eaf4361ea021b600050435bc64cfee2d782..ff0fb03f3334a8c151d412fcc3caf755f00db6cf 100644
--- a/Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.ts
+++ b/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() {
diff --git a/Frontend/quizz-game/src/app/manage/list-users/list-users.component.html b/Frontend/quizz-game/src/app/manage/list-users/list-users.component.html
index 19a6b69d692decbcec151199f93db1e6df434ce3..a584a820f12dca733879dd208b076dc9ca2f812e 100644
--- a/Frontend/quizz-game/src/app/manage/list-users/list-users.component.html
+++ b/Frontend/quizz-game/src/app/manage/list-users/list-users.component.html
@@ -1,5 +1,5 @@
<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>
+
diff --git a/Frontend/quizz-game/src/app/manage/list-users/list-users.component.ts b/Frontend/quizz-game/src/app/manage/list-users/list-users.component.ts
index 90a12de5508d50deffa8903bf035440bd3ec0c55..f0a0b24c5bf05221bc6b970fd6cf384caa4e7294 100644
--- a/Frontend/quizz-game/src/app/manage/list-users/list-users.component.ts
+++ b/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;
}
}
diff --git a/Frontend/quizz-game/src/app/manage/manage.service.ts b/Frontend/quizz-game/src/app/manage/manage.service.ts
index eb16718becf891ea6863bf02edd8dd25357d8275..8da1a9e4f284844c034cd107088a97ca3fdbbb76 100644
--- a/Frontend/quizz-game/src/app/manage/manage.service.ts
+++ b/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));
+ })
+ );
+
+ }
+
}