frontend avec données fictif prêt

frontend/src/app/admin/userList/page-user-list/page-user-list.component.html

@@ -3,20 +3,28 @@
     <app-navbar pour="admin"></app-navbar>
 
 
-    <div>
-
     <div class="btnContainer">
         <button mat-button class="btnAjouter" (click)="onAdd()">
             <mat-icon>add_circle</mat-icon> Ajouter un utilisateur
         </button>
     </div>
 
-        <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+
+    <div style="text-align: center">
+        <mat-form-field appearance="standard" class="filtre">
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Riri" #input>
+        </mat-form-field>
+    </div>
+
+
+    <table *ngIf="(dataSource !== undefined) && (dataSource !== null) && (dataSource.data.length !== 0)"
+           mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
 
         <!-- Pseudo Column -->
-            <ng-container matColumnDef="login">
+        <ng-container matColumnDef="nickname">
             <th mat-header-cell *matHeaderCellDef mat-sort-header>Pseudo</th>
-                <td mat-cell *matCellDef="let person">{{person.login}}</td>
+            <td mat-cell *matCellDef="let person">{{person.nickname}}</td>
         </ng-container>
 
         <!-- Email Column -->
@@ -28,10 +36,7 @@
         <!-- Role Column -->
         <ng-container matColumnDef="role">
             <th mat-header-cell *matHeaderCellDef mat-sort-header>Rôle</th>
-                <td mat-cell *matCellDef="let person">
+            <td mat-cell *matCellDef="let person">{{person.role}}</td>
-                    <span *ngIf="person.role === 'user'">utilisateur</span>
-                    <span *ngIf="person.role === 'admin'">admin</span>
-                </td>
         </ng-container>
 
         <!-- Actions Column -->
@@ -51,13 +56,12 @@
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
 
+
     <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]"
                    showFirstLastButtons
                    aria-label="Select page of periodic elements"
                    class="mat-elevation-z8"></mat-paginator>
 
-    </div>
-
 
 </div>
 <br><br>

frontend/src/app/admin/userList/page-user-list/page-user-list.component.scss

@@ -11,3 +11,8 @@ mat-paginator, table {
 .btnAjouter {
   border: solid 1px black;
 }
+
+.filtre {
+  text-align: center;
+  width: 33%;
+}

frontend/src/app/admin/userList/page-user-list/page-user-list.component.ts

@@ -1,14 +1,13 @@
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
 import {MatTableDataSource} from "@angular/material/table";
-import {Person} from "../../../common/interfaces/Person";
 import {FictitiousDatasService} from "../../../common/services/fictitiousDatas/fictitious-datas.service";
 import {MatSort} from "@angular/material/sort";
 import {MatPaginator} from "@angular/material/paginator";
 import {MatDialog} from "@angular/material/dialog";
 import {PopupCreatePersonComponent} from "../popup-create-person/popup-create-person.component";
 import {MatSnackBar} from "@angular/material/snack-bar";
-import {PopupUpdateProfilComponent} from "../../../common/components/profil/popup-update-profil/popup-update-profil.component";
+import {PopupUpdatePersonAdminComponent} from "../popup-update-person-admin/popup-update-person-admin.component";
-import {PopupDeletePersonComponent} from "../popup-delete-person/popup-delete-person.component";
+import {PopupDeleteProfilComponent} from "../../../common/components/popup-delete-profil/popup-delete-profil.component";
 
 
 
@@ -19,33 +18,40 @@ import {PopupDeletePersonComponent} from "../popup-delete-person/popup-delete-pe
 })
 export class PageUserListComponent implements AfterViewInit
 {
-    displayedColumns: string[] = [ "login", "email", "role", "actions" ];
+    displayedColumns: string[] = [ "nickname", "email", "role", "actions" ];
-    dataSource: MatTableDataSource<Person>;
+    dataSource: MatTableDataSource<any> = new MatTableDataSource<any>();
     @ViewChild(MatSort) sort: MatSort;
     @ViewChild(MatPaginator) paginator: MatPaginator;
     configSnackBar = { duration: 2000, panelClass: "custom-class" };
 
 
-
     constructor( private fictitiousDatasService: FictitiousDatasService,
                  public dialog: MatDialog,
                  private snackBar: MatSnackBar) { }
 
 
-
     ngAfterViewInit(): void
     {
         // Faux code
-        const tabPerson = this.fictitiousDatasService.getTabPerson(5);
+        let tabPerson = this.fictitiousDatasService.getTabPerson(5);
 
         // Vrai code ...
-
+        tabPerson = tabPerson.map( person => {
+            if(!person.is_admin) return Object.assign(person, {role: "utilisateur"});
+            else return Object.assign(person, {role: "admin"});
+        });
         this.dataSource = new MatTableDataSource(tabPerson);
         this.dataSource.sort = this.sort;
         this.dataSource.paginator = this.paginator;
     }
 
 
+    applyFilter(event: Event)
+    {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.dataSource.filter = filterValue.trim().toLowerCase();
+    }
+
 
     // Appuie sur le bouton "add"
     onAdd(): void
@@ -62,24 +68,22 @@ export class PageUserListComponent implements AfterViewInit
                 else {
                     this.dataSource.data.push(person);
                     this.dataSource.data = this.dataSource.data;
-                    this.dataSource = this.dataSource
+                    this.dataSource = this.dataSource;
                     this.snackBar.open( "L'utilisateur a bien été créé ✔", "", this.configSnackBar);
                 }
-
             });
     }
 
 
-
     // Appuie sur le bouton "edit"
-    onUpdate(personToUpdate: Person): void
+    onUpdate(personToUpdate: any): void
     {
         const config = {
             width: '50%',
             data: { person: personToUpdate }
         };
         this.dialog
-            .open(PopupUpdateProfilComponent, config)
+            .open(PopupUpdatePersonAdminComponent, config)
             .afterClosed()
             .subscribe( personUpdated => {
 
@@ -98,15 +102,18 @@ export class PageUserListComponent implements AfterViewInit
     }
 
 
-
     // Appuie sur le bouton "delete"
-    onDelete(personToDelete: Person): void
+    onDelete(personToDelete: any): void
     {
         const config = {
-            data: { person: personToDelete }
+            data: {
+                id: personToDelete.id,
+                email: personToDelete.email,
+                me: false,
+            }
         };
         this.dialog
-            .open(PopupDeletePersonComponent, config)
+            .open(PopupDeleteProfilComponent, config)
             .afterClosed()
             .subscribe( personUpdated => {
 

frontend/src/app/admin/userList/popup-create-person/popup-create-person.component.html

@@ -4,10 +4,10 @@
 
     <mat-divider style="margin: 20px 0px 20px 0px"></mat-divider>
 
-    <!-- login -->
+    <!-- nickname -->
     <mat-form-field appearance="fill">
         <mat-label>Pseudo</mat-label>
-        <input matInput type="text" [(ngModel)]="person.login" required>
+        <input matInput type="text" [(ngModel)]="person.nickname" required>
     </mat-form-field><br>
 
     <!-- email -->
@@ -29,10 +29,9 @@
     </mat-form-field><br>
 
     <!-- role -->
-    <label id="label-radio-group">Rôle: &nbsp;</label>
+    <mat-radio-group aria-labelledby="label-radio-group" [(ngModel)]="person.is_admin">
-    <mat-radio-group aria-labelledby="label-radio-group" [(ngModel)]="person.role">
+        <mat-radio-button [value]="false" checked>Utilisateur &nbsp;</mat-radio-button>
-        <mat-radio-button value="user" checked>Utilisateur &nbsp;</mat-radio-button>
+        <mat-radio-button [value]="true">Admin</mat-radio-button>
-        <mat-radio-button value="admin">Admin</mat-radio-button>
     </mat-radio-group><br><br>
 
     <mat-divider style="margin-bottom: 10px"></mat-divider>

frontend/src/app/admin/userList/popup-create-person/popup-create-person.component.ts

@@ -2,7 +2,6 @@ import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {CheckEmailService} from "../../../common/services/checkEmail/check-email.service";
 import {HashageService} from "../../../common/services/hashage/hashage.service";
-import {Person} from "../../../common/interfaces/Person";
 
 
 
@@ -13,12 +12,12 @@ import {Person} from "../../../common/interfaces/Person";
 })
 export class PopupCreatePersonComponent
 {
-    person: Person = {
+    person = {
         id: "",
-        login: "",
+        nickname: "",
         email: "",
-        hashPass: "",
+        hash_pass: "",
-        role: "user"
+        is_admin: false,
     };
     password: string = "";
     confirmPassword: string = "" ;
@@ -39,7 +38,7 @@ export class PopupCreatePersonComponent
         this.checkField();
         if(!this.hasError)
         {
-            if(this.changePassword) this.person.hashPass = this.hashageService.run(this.password);
+            if(this.changePassword) this.person.hash_pass = this.hashageService.run(this.password);
             const data = { user: this.person };
 
             // ...
@@ -67,7 +66,7 @@ export class PopupCreatePersonComponent
     // Check les champs saisis par l'utilisateur
     checkField(): void
     {
-        if(this.person.login.length === 0) {
+        if(this.person.nickname.length === 0) {
             this.errorMessage = "Veuillez remplir le champ 'pseudo'.";
             this.hasError = true;
         }

frontend/src/app/admin/userList/popup-delete-person/popup-delete-person.component.html

@@ -1,8 +0,0 @@
-<mat-dialog-content class="mat-typography">
-    Êtes-vous sûr de vouloir supprimer <i>{{data.person.login}}</i> ?
-</mat-dialog-content>
-
-<mat-dialog-actions align="end">
-    <button mat-button (click)="dialogRef.close()">Annuler</button>
-    <button mat-button (click)="dialogRef.close(true)" cdkFocusInitial>Valider</button>
-</mat-dialog-actions>

frontend/src/app/admin/userList/popup-delete-person/popup-delete-person.component.ts

@@ -1,17 +0,0 @@
-import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-
-
-
-@Component({
-  selector: 'app-popup-delete-person',
-  templateUrl: './popup-delete-person.component.html',
-  styleUrls: ['./popup-delete-person.component.scss']
-})
-export class PopupDeletePersonComponent
-{
-
-    constructor( public dialogRef: MatDialogRef<PopupDeletePersonComponent>,
-                 @Inject(MAT_DIALOG_DATA) public data: any ) { }
-
-}

frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.html

@@ -0,0 +1,68 @@
+<div class="myContainer">
+    <div class="boite">
+
+        <h3>Modifier</h3>
+
+        <!-- divider -->
+        <br><mat-divider></mat-divider><br>
+
+        <!-- nickname -->
+        <mat-form-field appearance="fill">
+            <mat-label>Pseudo</mat-label>
+            <input matInput type="text" [(ngModel)]="personCopy.nickname" required>
+        </mat-form-field><br>
+
+        <!-- divider -->
+        <mat-divider></mat-divider><br>
+
+        <!-- role -->
+        <mat-radio-group [(ngModel)]="personCopy.is_admin">
+            <mat-radio-button [value]="false"
+                              [checked]="!personCopy.is_admin"
+                              (click)="personCopy.role = 'utilisateur'">Utilisateur</mat-radio-button> &nbsp;
+            <mat-radio-button [value]="true"
+                              [checked]="personCopy.is_admin"
+                              (click)="personCopy.role = 'admin'">Admin</mat-radio-button>
+        </mat-radio-group><br><br>
+
+        <!-- divider -->
+        <mat-divider></mat-divider><br>
+
+        <!-- Modifier mot de passe -->
+        <div>
+            Modifier mot de passe:
+            <mat-checkbox [(ngModel)]="changePassword"></mat-checkbox>
+        </div>
+
+        <!-- nouveau mot de passe -->
+        <div *ngIf="changePassword" style="margin-top: 10px">
+            <!-- Nouveau mot de passe -->
+            <mat-form-field appearance="fill">
+                <mat-label>Nouveau mot de passe</mat-label>
+                <input matInput type="password" [(ngModel)]="newPassword">
+            </mat-form-field>
+            <br>
+            <!-- Confirmation npuveau mot de passe -->
+            <mat-form-field appearance="fill">
+                <mat-label>Confirmation nouveau mot de passe</mat-label>
+                <input matInput type="password" [(ngModel)]="confirmNewPassword">
+            </mat-form-field>
+        </div>
+        <div *ngIf="!changePassword"><br></div>
+
+        <!-- divider -->
+        <mat-divider></mat-divider><br>
+
+        <!-- message d'erreur -->
+        <div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
+            <span class="mat-error">{{errorMessage}}</span>
+        </div>
+
+        <!-- boutons -->
+        <div style="width: 100%; text-align: right">
+            <button mat-button (click)="this.dialogRef.close(null)"> Annuler </button>
+            <button mat-button (click)="onValider()"> Enregistrer </button>
+        </div>
+
+    </div>
+</div>

frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopupUpdatePersonAdminComponent } from './popup-update-person-admin.component';
+
+describe('PopupUpdatePersonAdminComponent', () => {
+  let component: PopupUpdatePersonAdminComponent;
+  let fixture: ComponentFixture<PopupUpdatePersonAdminComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PopupUpdatePersonAdminComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopupUpdatePersonAdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.ts

@@ -0,0 +1,116 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {CheckEmailService} from "../../../common/services/checkEmail/check-email.service";
+import {HashageService} from "../../../common/services/hashage/hashage.service";
+
+
+
+@Component({
+  selector: 'app-popup-update-person-admin',
+  templateUrl: './popup-update-person-admin.component.html',
+  styleUrls: ['./popup-update-person-admin.component.scss']
+})
+export class PopupUpdatePersonAdminComponent implements OnInit
+{
+    personCopy: any = {
+        id: "",
+        nickname: "",
+        email: "",
+        hash_pass: "",
+        is_admin: true,
+        role: "utilisateur"
+    };
+    newPassword: string = "";
+    confirmNewPassword: string = "" ;
+    changePassword: boolean = false ;
+    hasError: boolean = false;
+    errorMessage: string = "" ;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupUpdatePersonAdminComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data: any,
+                 private checkEmailService: CheckEmailService,
+                 private hashageService: HashageService ) { }
+
+
+    ngOnInit(): void
+    {
+        const person = this.data.person;
+        this.personCopy = {
+            id: person.id,
+            nickname: person.nickname,
+            email: person.email,
+            hash_pass: person.hash_pass,
+            is_admin: person.is_admin,
+            role: person.role,
+        };
+        console.log("ngOnInit")
+        console.log(this.personCopy);
+    }
+
+
+    // Appuie sur le bouton "valider"
+    onValider(): void
+    {
+        console.log("onValider")
+        console.log(this.personCopy);
+
+        this.checkField();
+        if(!this.hasError)
+        {
+            if(this.changePassword) this.personCopy.hash_pass = this.hashageService.run(this.newPassword);
+            const data = { user: this.personCopy };
+
+            // ...
+
+            // Faux code
+            this.onValiderCallback({ status: "success"});
+        }
+    }
+
+
+    // Callback de 'onValider'
+    onValiderCallback(retour: any)
+    {
+        if(retour.status === 'error')
+        {
+            console.log(retour);
+            this.dialogRef.close(null);
+        }
+        else
+        {
+            this.dialogRef.close(this.personCopy);
+        }
+    }
+
+
+    // Check les champs saisis par l'utilisateur
+    checkField(): void
+    {
+        if(this.personCopy.nickname.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'pseudo'" ;
+            this.hasError = true;
+        }
+        else if(this.personCopy.email.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'email'" ;
+            this.hasError = true;
+        }
+        else if(!this.checkEmailService.isValidEmail(this.personCopy.email)) {
+            this.errorMessage = "Email invalide" ;
+            this.hasError = true;
+        }
+        else if((this.changePassword) && (this.newPassword.length === 0)) {
+            this.errorMessage = "Veuillez remplir le champ 'mot de passe'";
+            this.hasError = true;
+        }
+        else if((this.changePassword) && (this.newPassword !== this.confirmNewPassword)) {
+            this.errorMessage = "Le mot de passe est différent de sa confirmation";
+            this.hasError = true;
+        }
+        else {
+            this.errorMessage = "" ;
+            this.hasError = false;
+        }
+    }
+
+}

frontend/src/app/app-routing.module.ts

@@ -2,8 +2,9 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {PageLoginComponent} from "./login/page-login/page-login.component";
 import {PageRegisterComponent} from "./register/page-register/page-register.component";
-import {PageProfilComponent} from "./common/components/profil/page-profil/page-profil.component";
+import {PageProfilComponent} from "./common/components/page-profil/page-profil.component";
 import {PageUserListComponent} from "./admin/userList/page-user-list/page-user-list.component";
+import {PageRegistryComponent} from "./user/page-registry/page-registry.component";
 
 const routes: Routes = [
 
@@ -12,7 +13,9 @@ const routes: Routes = [
 
     { path: "register", component: PageRegisterComponent },
 
-    { path: "user", component: PageProfilComponent },
+    { path: "user", component: PageRegistryComponent },
+    { path: "user/registry", component: PageRegistryComponent },
+    { path: "user/myProfil", component: PageProfilComponent },
 
     { path: "admin", component: PageUserListComponent },
     { path: "admin/userList", component: PageUserListComponent },

frontend/src/app/app.module.ts

@@ -11,8 +11,8 @@ import {MatInputModule} from "@angular/material/input";
 import {PageLoginComponent} from "./login/page-login/page-login.component";
 import { NavbarComponent } from './common/components/navbar/navbar.component';
 import {MatButtonModule} from "@angular/material/button";
-import { PageProfilComponent } from './common/components/profil/page-profil/page-profil.component';
+import { PageProfilComponent } from './common/components/page-profil/page-profil.component';
-import { PopupUpdateProfilComponent } from './common/components/profil/popup-update-profil/popup-update-profil.component';
+import { PopupUpdateProfilComponent } from './common/components/popup-update-profil/popup-update-profil.component';
 import {MatDividerModule} from "@angular/material/divider";
 import {MatCheckboxModule} from "@angular/material/checkbox";
 import {MatDialogModule} from "@angular/material/dialog";
@@ -22,9 +22,12 @@ import { PopupCreatePersonComponent } from './admin/userList/popup-create-person
 import {MatTableModule} from "@angular/material/table";
 import {MatPaginatorModule} from "@angular/material/paginator";
 import { PopupConfirmRegisterComponent } from './register/popup-confirm-register/popup-confirm-register.component';
-import { PopupDeletePersonComponent } from './admin/userList/popup-delete-person/popup-delete-person.component';
 import {MatIconModule} from "@angular/material/icon";
 import {MatRadioModule} from "@angular/material/radio";
+import { PageRegistryComponent } from './user/page-registry/page-registry.component';
+import { PopupDeleteProfilComponent } from './common/components/popup-delete-profil/popup-delete-profil.component';
+import {MatSortModule} from "@angular/material/sort";
+import { PopupUpdatePersonAdminComponent } from './admin/userList/popup-update-person-admin/popup-update-person-admin.component';
 
 
 
@@ -39,7 +42,9 @@ import {MatRadioModule} from "@angular/material/radio";
     PageUserListComponent,
     PopupCreatePersonComponent,
     PopupConfirmRegisterComponent,
-    PopupDeletePersonComponent
+    PageRegistryComponent,
+    PopupDeleteProfilComponent,
+    PopupUpdatePersonAdminComponent
   ],
     imports: [
         BrowserModule,
@@ -55,6 +60,7 @@ import {MatRadioModule} from "@angular/material/radio";
         MatSnackBarModule,
         MatTableModule,
         MatPaginatorModule,
+        MatSortModule,
         MatIconModule,
         MatRadioModule
     ],

frontend/src/app/common/components/navbar/navbar.component.html

@@ -1,5 +1,5 @@
 <!-- Login -->
-<div *ngIf="pour === 'login'">
+<div *ngIf="pour === 'nickname'">
     <nav class="navbar navbar-expand-lg">
 
         <!-- FlaskAled -->
@@ -53,8 +53,17 @@
             <span class="navbar-toggler-icon"></span>
         </button>
 
-        <!-- Rien -->
+        <!-- [userList] [myProfil] -->
-        <div class="collapse navbar-collapse"></div>
+        <div class="collapse navbar-collapse">
+            <ul class="navbar-nav">
+                <li class="nav-item active monLi">
+                    <a class="nav-link" routerLink="/user/registry">Annuaire</a>
+                </li>
+                <li class="nav-item active monLi">
+                    <a class="nav-link" routerLink="/user/myProfil">Mon profil</a>
+                </li>
+            </ul>
+        </div>
 
         <!-- Deconnexion -->
         <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">

frontend/src/app/common/components/navbar/navbar.component.ts

@@ -14,5 +14,4 @@ export class NavbarComponent implements OnInit
     ngOnInit(): void {}
 
     onDeconnexion(): void {}
-
 }

frontend/src/app/common/components/page-profil/page-profil.component.html

@@ -0,0 +1,53 @@
+<div class="myContainer">
+
+    <!-- NavBar -->
+    <app-navbar [pour]="from"></app-navbar>
+
+
+    <!-- Boite -->
+    <div class="boite">
+
+        <!-- nickname -->
+        <div class="row myRow">
+            <div class="col-6 myLabel">Pseudo:</div>
+            <div class="col-6 myValue"> {{person.nickname}} </div>
+        </div>
+
+        <!-- email -->
+        <div class="row myRow">
+            <div class="col-6 myLabel">Mail:</div>
+            <div class="col-6 myValue"> {{person.email}} </div>
+        </div>
+
+        <!-- role -->
+        <div class="row myRow">
+            <div class="col-6 myLabel">Rôle:</div>
+            <div class="col-6 myValue">
+                <span *ngIf="!person.is_admin">utilisateur</span>
+                <span *ngIf="person.is_admin">admin</span>
+        </div>
+
+        <!-- boutons -->
+        <div class="row">
+            <!-- bouton modifier -->
+            <div class="col-6">
+                <div class="btnContainer">
+                    <button mat-button class="myBtn" (click)="onModifier()">
+                        <mat-icon>edit</mat-icon> Modifier compte <mat-icon>edit</mat-icon>
+                    </button>
+                </div>
+            </div>
+            <!-- bouton supprimer -->
+            <div class="col-6">
+                <div class="btnContainer">
+                    <button mat-button class="myBtn" (click)="onSupprimer()">
+                        <mat-icon>delete</mat-icon> Supprimer compte <mat-icon>delete</mat-icon>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+
+</div>

frontend/src/app/common/components/page-profil/page-profil.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import {Person} from "../../../interfaces/Person";
 import {MatDialog} from "@angular/material/dialog";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {PopupUpdateProfilComponent} from "../popup-update-profil/popup-update-profil.component";
-import {FictitiousDatasService} from "../../../services/fictitiousDatas/fictitious-datas.service";
+import {FictitiousDatasService} from "../../services/fictitiousDatas/fictitious-datas.service";
 import {Router} from "@angular/router";
+import {PopupDeleteProfilComponent} from "../popup-delete-profil/popup-delete-profil.component";
 
 
 
@@ -15,12 +15,12 @@ import {Router} from "@angular/router";
 })
 export class PageProfilComponent implements OnInit
 {
-    person: Person = {
+    person = {
         id: "",
-        login: "",
+        nickname: "",
         email: "",
-        hashPass: "",
+        hash_pass: "",
-        role: "user",
+        is_admin: false,
     };
     from: string = "" ;
 
@@ -75,4 +75,36 @@ export class PageProfilComponent implements OnInit
         }
     }
 
+
+    // Appuie sur le bouton supprimer
+    onSupprimer(): void
+    {
+        const config = {
+            data: {
+                id: this.person.id,
+                email: this.person.email,
+                me: true,
+            }
+        };
+        this.dialog
+            .open(PopupDeleteProfilComponent, config)
+            .afterClosed()
+            .subscribe(retour => this.onSupprimerCallback(retour));
+    }
+
+
+    // Callback de onSupprimer
+    onSupprimerCallback(retour: any): void
+    {
+        if((retour === null) || (retour === undefined))
+        {
+            const config = { duration: 1000, panelClass: "custom-class" };
+            this.snackBar.open( "Opération annulé", "", config);
+        }
+        else
+        {
+            this.router.navigateByUrl("/login");
+        }
+    }
+
 }

frontend/src/app/common/components/popup-delete-profil/popup-delete-profil.component.html

@@ -0,0 +1,14 @@
+<mat-dialog-content class="mat-typography" *ngIf="me">
+    Êtes-vous sûr de vouloir supprimer votre compte ?
+</mat-dialog-content>
+
+
+<mat-dialog-content class="mat-typography" *ngIf="!me">
+    Êtes-vous sûr de vouloir supprimer <i>{{email}}</i> ?
+</mat-dialog-content>
+
+
+<mat-dialog-actions align="end">
+    <button mat-button (click)="dialogRef.close();">Annuler</button>
+    <button mat-button (click)="onValider()" cdkFocusInitial>Valider</button>
+</mat-dialog-actions>

frontend/src/app/common/components/popup-delete-profil/popup-delete-profil.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PopupDeletePersonComponent } from './popup-delete-person.component';
+import { PopupDeleteProfilComponent } from './popup-delete-profil.component';
 
-describe('PopupDeletePersonComponent', () => {
+describe('PopupDeleteProfilComponent', () => {
-  let component: PopupDeletePersonComponent;
+  let component: PopupDeleteProfilComponent;
-  let fixture: ComponentFixture<PopupDeletePersonComponent>;
+  let fixture: ComponentFixture<PopupDeleteProfilComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PopupDeletePersonComponent ]
+      declarations: [ PopupDeleteProfilComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PopupDeletePersonComponent);
+    fixture = TestBed.createComponent(PopupDeleteProfilComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

frontend/src/app/common/components/popup-delete-profil/popup-delete-profil.component.ts

@@ -0,0 +1,28 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+
+
+
+@Component({
+  selector: 'app-popup-delete-profil',
+  templateUrl: './popup-delete-profil.component.html',
+  styleUrls: ['./popup-delete-profil.component.scss']
+})
+export class PopupDeleteProfilComponent implements OnInit
+{
+    me: boolean = false; // on se supprime soi-même
+    email: string = "";
+
+    constructor( public dialogRef: MatDialogRef<PopupDeleteProfilComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data: any ) { }
+
+    ngOnInit(): void {
+        this.me = this.data.me;
+        this.email = this.data.email;
+    }
+
+    onValider(): void {
+        this.dialogRef.close(true);
+    }
+
+}

frontend/src/app/common/components/popup-update-profil/popup-update-profil.component.html

@@ -6,10 +6,10 @@
         <!-- divider -->
         <br><mat-divider></mat-divider><br>
 
-        <!-- login -->
+        <!-- nickname -->
         <mat-form-field appearance="fill">
             <mat-label>Pseudo</mat-label>
-            <input matInput type="text" [(ngModel)]="personCopy.login">
+            <input matInput type="text" [(ngModel)]="personCopy.nickname" required>
         </mat-form-field><br>
 
         <!-- divider -->

frontend/src/app/common/components/popup-update-profil/popup-update-profil.component.scss

@@ -0,0 +1,37 @@
+.boite {
+  font-size: small;
+}
+
+h3 {
+  text-align: center;
+}
+
+button {
+  font-size: small;
+}
+
+img {
+  margin: 0px 0px 10px 0px;
+  width: 5vw;
+  height: 5vw;
+  border: solid 2px black;
+  border-radius: 50%;
+  font-size: xxx-large;
+}
+
+// -------------------------------------------------------------------------
+
+// aura
+::ng-deep .mat-checkbox-ripple .mat-ripple-element {
+  background-color: grey !important;
+}
+
+// contenu coche
+::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
+  background-color: black !important;
+}
+
+// indeterminate
+::ng-deep .mat-checkbox .mat-checkbox-frame {
+  background-color: white !important;
+}

frontend/src/app/common/components/popup-update-profil/popup-update-profil.component.ts

@@ -1,8 +1,7 @@
 import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {Person} from "../../../interfaces/Person";
+import {CheckEmailService} from "../../services/checkEmail/check-email.service";
-import {CheckEmailService} from "../../../services/checkEmail/check-email.service";
+import {HashageService} from "../../services/hashage/hashage.service";
-import {HashageService} from "../../../services/hashage/hashage.service";
 
 
 
@@ -13,7 +12,7 @@ import {HashageService} from "../../../services/hashage/hashage.service";
 })
 export class PopupUpdateProfilComponent implements OnInit
 {
-    personCopy: Person;
+    personCopy: any;
     newPassword: string = "";
     confirmNewPassword: string = "" ;
     changePassword: boolean = false ;
@@ -32,10 +31,10 @@ export class PopupUpdateProfilComponent implements OnInit
         const person = this.data.person;
         this.personCopy = {
             id: person.id,
-            login: person.login,
+            nickname: person.nickname,
             email: person.email,
-            hashPass: person.hashPass,
+            hash_pass: person.hash_pass,
-            role: person.role
+            is_admin: person.is_admin
         };
     }
 
@@ -46,7 +45,7 @@ export class PopupUpdateProfilComponent implements OnInit
         this.checkField();
         if(!this.hasError)
         {
-            if(this.changePassword) this.personCopy.hashPass = this.hashageService.run(this.newPassword);
+            if(this.changePassword) this.personCopy.hash_pass = this.hashageService.run(this.newPassword);
             const data = { user: this.personCopy };
 
             // ...
@@ -75,7 +74,7 @@ export class PopupUpdateProfilComponent implements OnInit
     // Check les champs saisis par l'utilisateur
     checkField(): void
     {
-        if(this.personCopy.login.length === 0) {
+        if(this.personCopy.nickname.length === 0) {
             this.errorMessage = "Veuillez remplir le champ 'pseudo'" ;
             this.hasError = true;
         }

frontend/src/app/common/components/profil/page-profil/page-profil.component.html

@@ -1,38 +0,0 @@
-<div class="myContainer">
-
-    <!-- NavBar -->
-    <app-navbar [pour]="from"></app-navbar>
-
-
-    <!-- Boite -->
-    <div class="boite">
-
-        <!-- login -->
-        <div class="row myRow">
-            <div class="col-6 myLabel">Pseudo:</div>
-            <div class="col-6 myValue"> {{person.login}} </div>
-        </div>
-
-        <!-- email -->
-        <div class="row myRow">
-            <div class="col-6 myLabel">Mail:</div>
-            <div class="col-6 myValue"> {{person.email}} </div>
-        </div>
-
-        <!-- role -->
-        <div class="row myRow">
-            <div class="col-6 myLabel">Rôle:</div>
-            <div class="col-6 myValue">
-                <span *ngIf="person.role === 'user'">utilisateur</span>
-                <span *ngIf="person.role === 'admin'">admin</span>
-        </div>
-
-        <!-- Modifier profil -->
-        <div class="btnContainer">
-            <button mat-button class="myBtn" (click)="onModifier()">Modifier profil</button>
-        </div>
-
-    </div>
-
-
-</div>

frontend/src/app/common/interfaces/Person.ts

@@ -1,9 +0,0 @@
-// user or admin
-export interface Person
-{
-    id: string,
-    login: string,
-    email: string,
-    hashPass: string,
-    role: string,
-}

frontend/src/app/common/services/fictitiousDatas/fictitious-datas.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import {Person} from "../../interfaces/Person";
+
 
 @Injectable({
   providedIn: 'root'
@@ -7,33 +7,33 @@ import {Person} from "../../interfaces/Person";
 export class FictitiousDatasService
 {
 
-    getUser(): Person
+    getUser()
     {
         const id = (Math.floor(Math.random()*100000)).toString()
         return {
             id: id,
-            login: "Riri"+id,
+            nickname: "Riri"+id,
             email: "riri"+id+"@gmail.com",
-            hashPass: "blablabla",
+            hash_pass: "blablabla",
-            role: "user",
+            is_admin: false,
         }
     }
 
-    getAdmin(): Person
+    getAdmin()
     {
         const id = (Math.floor(Math.random()*100000)).toString()
         return {
             id: id,
-            login: "Fifi"+id,
+            nickname: "Fifi"+id,
             email: "fifi"+id+"@gmail.com",
-            hashPass: "blablabla",
+            hash_pass: "blablabla",
-            role: "admin",
+            is_admin: true,
         }
     }
 
-    getTabPerson(n: number): Person[]
+    getTabPerson(n: number)
     {
-        let tab: Person[] = [];
+        let tab = [];
 
         for(let i=0 ; i<n ; i++)
         {

frontend/src/app/common/services/profil/profil.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProfilService } from './profil.service';
+
+describe('ProfilService', () => {
+  let service: ProfilService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ProfilService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/common/services/profil/profil.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProfilService {
+
+  constructor() { }
+}

frontend/src/app/login/page-login/page-login.component.html

@@ -3,7 +3,7 @@
 
 
         <!-- NavBar -->
-        <app-navbar pour="login"></app-navbar>
+        <app-navbar pour="nickname"></app-navbar>
 
 
         <!--contenu -->

frontend/src/app/login/page-login/page-login.component.ts

@@ -6,7 +6,7 @@ import {HashageService} from "../../common/services/hashage/hashage.service";
 
 
 @Component({
-  selector: 'app-page-login',
+  selector: 'app-page-nickname',
   templateUrl: './page-login.component.html',
   styleUrls: ['./page-login.component.scss']
 })
@@ -31,7 +31,7 @@ export class PageLoginComponent
         {
             let data = {
                 email: this.email,
-                hashPass: this.hashageService.run(this.password)
+                hash_pass: this.hashageService.run(this.password)
             };
             console.log(data);
             /*

frontend/src/app/register/page-register/page-register.component.html

@@ -8,10 +8,10 @@
     <!-- contenu -->
     <div class="boite">
 
-        <!-- login -->
+        <!-- nickname -->
         <mat-form-field appearance="fill">
             <mat-label>Pseudo</mat-label>
-            <input matInput type="text" [(ngModel)]="person.login" required>
+            <input matInput type="text" [(ngModel)]="person.nickname" required>
         </mat-form-field><br>
 
         <!-- email -->

frontend/src/app/register/page-register/page-register.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import {Person} from "../../common/interfaces/Person";
 import {HashageService} from "../../common/services/hashage/hashage.service";
 import {Router} from "@angular/router";
 import {CheckEmailService} from "../../common/services/checkEmail/check-email.service";
@@ -15,11 +14,11 @@ import {PopupConfirmRegisterComponent} from "../popup-confirm-register/popup-con
 })
 export class PageRegisterComponent
 {
-    person: Person = {
+    person = {
         id: "",
-        login: "",
+        nickname: "",
         email: "",
-        hashPass: "",
+        hash_pass: "",
         role: "user"
     };
     password: string = "";
@@ -40,7 +39,7 @@ export class PageRegisterComponent
         this.checkField();
         if(!this.hasError)
         {
-            this.person.hashPass = this.hashageService.run(this.password);
+            this.person.hash_pass = this.hashageService.run(this.password);
 
             // FAUX CODE
             const retour = { status: "succes", data: {} };
@@ -76,7 +75,7 @@ export class PageRegisterComponent
     // Check les champs saisis par l'utilisateur
     checkField(): void
     {
-        if(this.person.login.length === 0) {
+        if(this.person.nickname.length === 0) {
             this.errorMessage = "Veuillez remplir le champ 'pseudo'.";
             this.hasError = true;
         }

frontend/src/app/user/myProfil/commentary.txt

@@ -1,7 +1,7 @@
-La partie utilisateur est composé uniquement d'une page contenant:
+La page "admin/myProfil" contient:
     - les informations de l'utilisateur (composant "page-profil")
     - un bouton "modifier profil" pour modifier les informations de l'utilisateur (composant "popup-update-profil")
 
-Cette page est la même que la page "Mon Profil" de la partie admin.
+Cette page est la même que la page de la partie admin.
 
 Ainsi, on a rangé cette page dans le dossier "common/components/profil".

frontend/src/app/user/page-registry/page-registry.component.html

@@ -0,0 +1,45 @@
+<div>
+
+    <app-navbar pour="user"></app-navbar><br><br>
+
+
+    <div style="text-align: center">
+        <mat-form-field appearance="standard" class="filtre">
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Riri" #input>
+        </mat-form-field>
+    </div>
+
+
+    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+
+        <!-- Pseudo Column -->
+        <ng-container matColumnDef="nickname">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Pseudo</th>
+            <td mat-cell *matCellDef="let person">{{person.nickname}}</td>
+        </ng-container>
+
+        <!-- Email Column -->
+        <ng-container matColumnDef="email">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
+            <td mat-cell *matCellDef="let person">{{person.email}}</td>
+        </ng-container>
+
+        <!-- Role Column -->
+        <ng-container matColumnDef="role">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Rôle</th>
+            <td mat-cell *matCellDef="let person">{{person.role}}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+
+
+    <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]"
+                   showFirstLastButtons
+                   aria-label="Select page of periodic elements"
+                   class="mat-elevation-z8"></mat-paginator>
+
+</div>
+<br><br>

frontend/src/app/user/page-registry/page-registry.component.scss

@@ -0,0 +1,9 @@
+mat-paginator, table {
+  width: 80%;
+  margin: auto 10%;
+}
+
+.filtre {
+  text-align: center;
+  width: 33%;
+}

frontend/src/app/user/page-registry/page-registry.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageRegistryComponent } from './page-registry.component';
+
+describe('RegistryComponent', () => {
+  let component: PageRegistryComponent;
+  let fixture: ComponentFixture<PageRegistryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageRegistryComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageRegistryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/user/page-registry/page-registry.component.ts

@@ -0,0 +1,50 @@
+import {AfterViewInit, Component, ViewChild} from '@angular/core';
+import {MatTableDataSource} from "@angular/material/table";
+import {MatSort} from "@angular/material/sort";
+import {MatPaginator} from "@angular/material/paginator";
+import {FictitiousDatasService} from "../../common/services/fictitiousDatas/fictitious-datas.service";
+import {MatDialog} from "@angular/material/dialog";
+
+
+
+@Component({
+  selector: 'app-page-registry',
+  templateUrl: './page-registry.component.html',
+  styleUrls: ['./page-registry.component.scss']
+})
+export class PageRegistryComponent implements AfterViewInit
+{
+    displayedColumns: string[] = [ "nickname", "email", "role" ];
+    dataSource: MatTableDataSource<any>;
+    @ViewChild(MatSort) sort: MatSort;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
+
+
+    constructor( private fictitiousDatasService: FictitiousDatasService,
+                 public dialog: MatDialog ) { }
+
+
+    ngAfterViewInit(): void
+    {
+        // Faux code
+        let tabPerson = this.fictitiousDatasService.getTabPerson(5);
+
+        // Vrai code ...
+
+        tabPerson = tabPerson.map( person => {
+            if(!person.is_admin) return Object.assign(person, {role: "utilisateur"});
+            else return Object.assign(person, {role: "admin"});
+        });
+        this.dataSource = new MatTableDataSource(tabPerson);
+        this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
+    }
+
+
+    applyFilter(event: Event)
+    {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.dataSource.filter = filterValue.trim().toLowerCase();
+    }
+
+}