feat: add interface for list users and add modal

Frontend/quizz-game/src/app/app-routing.module.ts

@@ -4,6 +4,11 @@ import { LoginComponent } from "./login/login.component";
 import {SignInComponent} from "./login/sign-in/sign-in.component";
 import {SignUpComponent} from "./login/sign-up/sign-up.component";
 import {ManageComponent} from "./manage/manage.component";
+import {ListUsersComponent} from "./manage/list-users/list-users.component";
+import {ListQuestionsComponent} from "./manage/list-questions/list-questions.component";
+import {CreateUserComponent} from "./manage/create-user/create-user.component";
+import {CreateQuestionComponent} from "./manage/create-question/create-question.component";
+import {AccountDetailsComponent} from "./manage/account-details/account-details.component";
 
 const routes: Routes = [
   { path: '', redirectTo: 'login', pathMatch: 'full' },
@@ -26,7 +31,36 @@ const routes: Routes = [
       }
     ]
   },
-  { path: ':admin/manage', component: ManageComponent }
+  { path: ':admin/manage',
+    component: ManageComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: 'list-users',
+        pathMatch: 'full'
+      },
+      {
+        path: 'list-users',
+        component: ListUsersComponent
+      },
+      {
+        path: 'list-questions',
+        component: ListQuestionsComponent
+      },
+      {
+        path: 'create-user',
+        component: CreateUserComponent
+      },
+      {
+        path: 'create-question',
+        component: CreateQuestionComponent
+      },
+      {
+        path: 'account-details',
+        component: AccountDetailsComponent
+      }
+    ]
+  }
 
 ];
 

Frontend/quizz-game/src/app/app.module.ts

@@ -6,12 +6,18 @@ import { AppComponent } from './app.component';
 import { SignInComponent } from './login/sign-in/sign-in.component';
 import { SignUpComponent } from './login/sign-up/sign-up.component';
 import { LoginComponent } from './login/login.component';
-import {CommonModule} from "@angular/common";
+import {CommonModule, NgOptimizedImage} from "@angular/common";
 import { FormsModule } from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { ErrorloginComponent } from './login/errorlogin/errorlogin.component';
 import { ManageComponent } from './manage/manage.component';
+import { ListUsersComponent } from './manage/list-users/list-users.component';
+import { ListQuestionsComponent } from './manage/list-questions/list-questions.component';
+import { CreateUserComponent } from './manage/create-user/create-user.component';
+import { CreateQuestionComponent } from './manage/create-question/create-question.component';
+import { AccountDetailsComponent } from './manage/account-details/account-details.component';
+import { AlertAddComponent } from './manage/alert-add/alert-add.component';
 
 
 
@@ -22,7 +28,13 @@ import { ManageComponent } from './manage/manage.component';
     SignUpComponent,
     LoginComponent,
     ErrorloginComponent,
-    ManageComponent
+    ManageComponent,
+    ListUsersComponent,
+    ListQuestionsComponent,
+    CreateUserComponent,
+    CreateQuestionComponent,
+    AccountDetailsComponent,
+    AlertAddComponent
   ],
   imports: [
     BrowserModule,
@@ -30,7 +42,8 @@ import { ManageComponent } from './manage/manage.component';
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    HttpClientModule
+    HttpClientModule,
+    NgOptimizedImage
   ],
   providers: [],
   bootstrap: [AppComponent]

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

 import { Injectable } from '@angular/core';
 import * as CryptoJS from 'crypto-js';
+import {FormControl, FormGroup, Validators} from "@angular/forms";
 
 export enum ErrorLogin {
   PassConfirm ,
@@ -28,4 +29,32 @@ export class LoginService {
     const hash = CryptoJS.SHA256(password);
     return hash.toString(CryptoJS.enc.Base64);
   }
+
+  formDataCreate():FormGroup{
+    return new FormGroup({
+      username: new FormControl(null, {
+        updateOn: 'change',
+        validators: [Validators.required],
+      }),
+      firstname: new FormControl(null, {
+        updateOn: 'change',
+        validators: [Validators.required],
+      }),
+      lastname: new FormControl(null, {
+        updateOn: 'change',
+        validators: [Validators.required],
+      }),
+      email: new FormControl(null, {
+        updateOn: 'change',
+        validators: [Validators.required],
+      }),
+      password: new FormControl(null, {
+        updateOn: 'change',
+        validators: [Validators.required],
+      }),
+      accountType: new FormControl("User", {
+        updateOn: 'change'
+      })
+    });
+  }
 }

Frontend/quizz-game/src/app/login/sign-up/sign-up.component.ts

@@ -16,29 +16,7 @@ export class SignUpComponent{
 
   ngOnInit() {
     this.errorOccured=false;
-    this.formData = new FormGroup({
-      username: new FormControl(null, {
-        updateOn: 'change',
-        validators: [Validators.required],
-      }),
-      firstname: new FormControl(null, {
-        updateOn: 'change',
-        validators: [Validators.required],
-      }),
-      lastname: new FormControl(null, {
-        updateOn: 'change',
-        validators: [Validators.required],
-      }),
-      email: new FormControl(null, {
-        updateOn: 'change',
-        validators: [Validators.required],
-      }),
-      password: new FormControl(null, {
-        updateOn: 'change',
-        validators: [Validators.required],
-      }),
-      accountType: new FormControl(0)
-    });
+    this.formData = this.loginService.formDataCreate();
   }
 
 
@@ -53,6 +31,7 @@ export class SignUpComponent{
       return;
     }
     this.formData.value.password = this.loginService.hashPassword(this.formData.value.password);
+    this.formData.value.accountType=0;
     this.httpClient.post<any>('http://localhost:30992/api/v1/guest/create-account', this.formData.value).subscribe(
       response => {
         console.log(response); // Affiche la réponse du serveur dans la console

Frontend/quizz-game/src/app/manage/account-details/account-details.component.html

+<p>account-details works!</p>

Frontend/quizz-game/src/app/manage/account-details/account-details.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountDetailsComponent } from './account-details.component';
+
+describe('AccountDetailsComponent', () => {
+  let component: AccountDetailsComponent;
+  let fixture: ComponentFixture<AccountDetailsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AccountDetailsComponent]
+    });
+    fixture = TestBed.createComponent(AccountDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/quizz-game/src/app/manage/account-details/account-details.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-account-details',
+  templateUrl: './account-details.component.html',
+  styleUrls: ['./account-details.component.css']
+})
+export class AccountDetailsComponent {
+
+}

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

+<div
+  role="alert"
+  class="rounded-xl border border-gray-100 bg-white p-4 shadow-xl"
+>
+  <div class="flex items-start gap-4">
+    <span class="text-green-600">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="h-6 w-6"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+    </span>
+
+    <div class="flex-1">
+      <strong class="block font-medium text-gray-900"> Ajout d'utilisateur </strong>
+
+      <p class="mt-1 text-sm text-gray-700">
+        L'utilisateur a été ajouté avec succès
+      </p>
+    </div>
+  </div>
+</div>

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertAddComponent } from './alert-add.component';
+
+describe('AlertAddComponent', () => {
+  let component: AlertAddComponent;
+  let fixture: ComponentFixture<AlertAddComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AlertAddComponent]
+    });
+    fixture = TestBed.createComponent(AlertAddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-alert-add',
+  templateUrl: './alert-add.component.html',
+  styleUrls: ['./alert-add.component.css']
+})
+export class AlertAddComponent {
+
+}

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

+<p>create-question works!</p>

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateQuestionComponent } from './create-question.component';
+
+describe('CreateQuestionComponent', () => {
+  let component: CreateQuestionComponent;
+  let fixture: ComponentFixture<CreateQuestionComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CreateQuestionComponent]
+    });
+    fixture = TestBed.createComponent(CreateQuestionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-create-question',
+  templateUrl: './create-question.component.html',
+  styleUrls: ['./create-question.component.css']
+})
+export class CreateQuestionComponent {
+
+}

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">
+  <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">
+      <!-- Modal header -->
+      <div class="flex items-start justify-between p-5 border-b rounded-t">
+        <h3 class="text-xl font-semibold">
+          Ajouter un utilisateur
+        </h3>
+        <button type="button"
+                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  clip-rule="evenodd"></path>
+          </svg>
+        </button>
+      </div>
+      <!-- Modal body -->
+      <form [formGroup]="formData"
+            enctype="multipart/form-data"
+            (submit)="addUser($event)">
+        <div class="p-6 space-y-6">
+
+          <div class="grid grid-cols-6 gap-6">
+            <div class="col-span-6 sm:col-span-3">
+              <label for="first-name" class="text-sm font-medium text-gray-900 block mb-2">Prénom</label>
+              <input type="text" id="first-name" formControlName="firstname"
+                     class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
+                     placeholder="John">
+            </div>
+            <div class="col-span-6 sm:col-span-3">
+              <label for="lastname" class="text-sm font-medium text-gray-900 block mb-2">Nom de famille</label>
+              <input type="text" id="lastname" formControlName="lastname"
+                     class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
+                     placeholder="Doe">
+            </div>
+            <div class="col-span-6 sm:col-span-3">
+              <label for="email" class="text-sm font-medium text-gray-900 block mb-2">Email</label>
+              <input type="email" id="email" formControlName="email"
+                     class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
+                     placeholder="example@company.com">
+            </div>
+            <div class="col-span-6 sm:col-span-3">
+              <label for="username" class="text-sm font-medium text-gray-900 block mb-2">Nom d'utilisateur</label>
+              <input type="text" id="username" formControlName="username"
+                     class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
+                     placeholder="johndoe74">
+            </div>
+            <div class="col-span-6 sm:col-span-3">
+              <label for="password" class="text-sm font-medium text-gray-900 block mb-2">Mot de passe</label>
+              <input type="password" id="password" formControlName="password"
+                     class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
+                     placeholder="***********">
+            </div>
+            <div class="col-span-6 sm:col-span-3">
+              <label for="user" class="text-sm font-medium text-gray-900 block mb-2">Type</label>
+              <label for="user" class="mr-2">Utilisateur</label>
+              <input type="radio" id="user" formControlName="accountType" value="User" class="mr-4">
+              <label for="admin" class="mr-2">Administrateur</label>
+              <input type="radio" id="admin" formControlName="accountType" value="Admin" class="mr-4">
+            </div>
+          </div>
+        </div>
+
+        <!-- Modal footer -->
+        <div class="items-center p-6 border-t border-gray-200 rounded-b">
+          <button
+            class="text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+            type="submit">Ajouter un utilisateur
+          </button>
+        </div>
+      </form>
+
+    </div>
+  </div>
+</div>

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateUserComponent } from './create-user.component';
+
+describe('CreateUserComponent', () => {
+  let component: CreateUserComponent;
+  let fixture: ComponentFixture<CreateUserComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CreateUserComponent]
+    });
+    fixture = TestBed.createComponent(CreateUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {FormControl, FormGroup, Validators} from "@angular/forms";
+import {ErrorLogin, LoginService} from "../../login/login.service";
+import {HttpClient} from "@angular/common/http";
+import {ManageService} from "../manage.service";
+
+@Component({
+  selector: 'app-create-user',
+  templateUrl: './create-user.component.html',
+  styleUrls: ['./create-user.component.css']
+})
+export class CreateUserComponent implements OnInit{
+  formData!: FormGroup;
+  errorOccured!: boolean;
+  selectedRadio!:string;
+  @Output() closeModal: EventEmitter<void> = new EventEmitter<void>();
+
+  constructor(private httpClient: HttpClient, private loginService: LoginService, private manageService: ManageService) {
+  }
+
+  ngOnInit() {
+    this.errorOccured=false;
+    this.formData = this.loginService.formDataCreate();
+  }
+
+  addUser(event: Event) {
+    event.preventDefault();
+    this.errorOccured=false;
+    this.formData.value.password = this.loginService.hashPassword(this.formData.value.password);
+    if(this.formData.value.accountType === "User")
+      this.formData.value.accountType = 0;
+    else
+      this.formData.value.accountType = 1;
+    this.httpClient.post<any>('http://localhost:30992/api/v1/admin/'+this.manageService.username+'/create-user-account', this.formData.value).subscribe(
+      response => {
+        console.log(response); // Affiche la réponse du serveur dans la console
+        // Effectuer une action en fonction de la réponse du serveur ici
+      },
+      error => {
+        this.errorOccured=true;
+        if(error.error.message === "USER_EXIST"){
+          this.loginService.actualError=ErrorLogin.UserNameExist;
+        }
+      }
+    );
+  }
+
+
+}