yvachot/FlaskALED
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend avec données fictif prêt

Browse source
This commit is contained in:
MiharyR 2022-01-05 20:37:31 +01:00
parent 0348c30044
commit 4cc9058887
41 changed files with 697 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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">
<span *ngIf="person.role === 'user'">utilisateur</span>
<span *ngIf="person.role === 'admin'">admin</span>
</td>
<td mat-cell *matCellDef="let person">{{person.role}}</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>

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

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

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

@ -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 {PopupDeletePersonComponent} from "../popup-delete-person/popup-delete-person.component";
import {PopupUpdatePersonAdminComponent} from "../popup-update-person-admin/popup-update-person-admin.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" ];
dataSource: MatTableDataSource<Person>;
displayedColumns: string[] = [ "nickname", "email", "role", "actions" ];
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 => {

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

@ -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.role">
<mat-radio-button value="user" checked>Utilisateur &nbsp;</mat-radio-button>
<mat-radio-button value="admin">Admin</mat-radio-button>
<mat-radio-group aria-labelledby="label-radio-group" [(ngModel)]="person.is_admin">
<mat-radio-button [value]="false" checked>Utilisateur &nbsp;</mat-radio-button>
<mat-radio-button [value]="true">Admin</mat-radio-button>
</mat-radio-group><br><br>
<mat-divider style="margin-bottom: 10px"></mat-divider>

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

@ -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: "",
role: "user"
hash_pass: "",
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;
}

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

@ -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>

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

@ -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 ) { }
}

68
frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.html Normal file
View file

@ -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>

0
frontend/src/app/common/components/profil/popup-update-profil/popup-update-profil.component.scss → frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.scss
View file

25
frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.spec.ts Normal file
View file

@ -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();
});
});

116
frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.ts Normal file
View file

@ -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;
}
}
}

7
frontend/src/app/app-routing.module.ts
View file

@ -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 },

14
frontend/src/app/app.module.ts
View file

@ -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 { PopupUpdateProfilComponent } from './common/components/profil/popup-update-profil/popup-update-profil.component';
import { PageProfilComponent } from './common/components/page-profil/page-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
],

15
frontend/src/app/common/components/navbar/navbar.component.html
View file

@ -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 -->
<div class="collapse navbar-collapse"></div>
<!-- [userList] [myProfil] -->
<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="/">

1
frontend/src/app/common/components/navbar/navbar.component.ts
View file

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

53
frontend/src/app/common/components/page-profil/page-profil.component.html Normal file
View file

@ -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>

0
frontend/src/app/common/components/profil/page-profil/page-profil.component.scss → frontend/src/app/common/components/page-profil/page-profil.component.scss
View file

0
frontend/src/app/common/components/profil/page-profil/page-profil.component.spec.ts → frontend/src/app/common/components/page-profil/page-profil.component.spec.ts
View file

44
frontend/src/app/common/components/profil/page-profil/page-profil.component.ts → frontend/src/app/common/components/page-profil/page-profil.component.ts
View file

@ -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: "",
role: "user",
hash_pass: "",
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");
}
}
}

14
frontend/src/app/common/components/popup-delete-profil/popup-delete-profil.component.html Normal file
View file

@ -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>

0
frontend/src/app/admin/userList/popup-delete-person/popup-delete-person.component.scss → frontend/src/app/common/components/popup-delete-profil/popup-delete-profil.component.scss
View file

12
frontend/src/app/admin/userList/popup-delete-person/popup-delete-person.component.spec.ts → frontend/src/app/common/components/popup-delete-profil/popup-delete-profil.component.spec.ts
View file

@ -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', () => {
let component: PopupDeletePersonComponent;
let fixture: ComponentFixture<PopupDeletePersonComponent>;
describe('PopupDeleteProfilComponent', () => {
let component: PopupDeleteProfilComponent;
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();
});

28
frontend/src/app/common/components/popup-delete-profil/popup-delete-profil.component.ts Normal file
View file

@ -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);
}
}

4
frontend/src/app/common/components/profil/popup-update-profil/popup-update-profil.component.html → frontend/src/app/common/components/popup-update-profil/popup-update-profil.component.html
View file

@ -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 -->

37
frontend/src/app/common/components/popup-update-profil/popup-update-profil.component.scss Normal file
View file

@ -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;
}

0
frontend/src/app/common/components/profil/popup-update-profil/popup-update-profil.component.spec.ts → frontend/src/app/common/components/popup-update-profil/popup-update-profil.component.spec.ts
View file

17
frontend/src/app/common/components/profil/popup-update-profil/popup-update-profil.component.ts → frontend/src/app/common/components/popup-update-profil/popup-update-profil.component.ts
View file

@ -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 {HashageService} from "../../../services/hashage/hashage.service";
import {CheckEmailService} from "../../services/checkEmail/check-email.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,
role: person.role
hash_pass: person.hash_pass,
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;
}

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

@ -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>

9
frontend/src/app/common/interfaces/Person.ts
View file

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

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

@ -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",
role: "user",
hash_pass: "blablabla",
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",
role: "admin",
hash_pass: "blablabla",
is_admin: true,
}
}
getTabPerson(n: number): Person[]
getTabPerson(n: number)
{
let tab: Person[] = [];
let tab = [];
for(let i=0 ; i<n ; i++)
{

16
frontend/src/app/common/services/profil/profil.service.spec.ts Normal file
View file

@ -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();
});
});

9
frontend/src/app/common/services/profil/profil.service.ts Normal file
View file

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

2
frontend/src/app/login/page-login/page-login.component.html
View file

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

4
frontend/src/app/login/page-login/page-login.component.ts
View file

@ -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);
/*

4
frontend/src/app/register/page-register/page-register.component.html
View file

@ -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 -->

11
frontend/src/app/register/page-register/page-register.component.ts
View file

@ -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;
}

4
frontend/src/app/user/commentary.txt → frontend/src/app/user/myProfil/commentary.txt
View file

@ -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".

45
frontend/src/app/user/page-registry/page-registry.component.html Normal file
View file

@ -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>

9
frontend/src/app/user/page-registry/page-registry.component.scss Normal file
View file

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

25
frontend/src/app/user/page-registry/page-registry.component.spec.ts Normal file
View file

@ -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();
});
});

50
frontend/src/app/user/page-registry/page-registry.component.ts Normal file
View file

@ -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();
}
}