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

connexion avec le back (non testé)

Browse source
This commit is contained in:
MiharyR 2022-01-13 14:46:01 +01:00
parent 22f6d316b4
commit 6b9a6d7c73
14 changed files with 215 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@
<div class="btnContainer">
<button mat-button class="btnAjouter" (click)="onAdd()">
<button mat-button class="btnAjouter" (click)="onCreate()">
<mat-icon>add_circle</mat-icon> Ajouter un utilisateur
</button>
</div>

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

@ -1,6 +1,5 @@
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {MatTableDataSource} from "@angular/material/table";
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";
@ -8,6 +7,7 @@ import {PopupCreatePersonComponent} from "../popup-create-person/popup-create-pe
import {MatSnackBar} from "@angular/material/snack-bar";
import {PopupUpdatePersonAdminComponent} from "../popup-update-person-admin/popup-update-person-admin.component";
import {PopupDeleteProfilComponent} from "../../../common/components/popup-delete-profil/popup-delete-profil.component";
import {MessageService} from "../../../common/services/message/message.service";
@ -25,24 +25,34 @@ export class PageUserListComponent implements AfterViewInit
configSnackBar = { duration: 2000, panelClass: "custom-class" };
constructor( private fictitiousDatasService: FictitiousDatasService,
constructor( private messageService: MessageService,
public dialog: MatDialog,
private snackBar: MatSnackBar) { }
ngAfterViewInit(): void
{
// Faux code
let tabPerson = this.fictitiousDatasService.getTabPerson(5);
this.messageService
.get('users?order_by=nickname')
.subscribe(retour => this.ngAfterViewInitCallback(retour), err => this.ngAfterViewInitCallback(err));
}
// 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;
ngAfterViewInitCallback(retour: any): void
{
if(retour.status !== "success") {
console.log(retour);
}
else {
let tabPerson: { id: number, email: string, nickname: string, is_admin: boolean }[] = retour.data;
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;
}
}
@ -53,20 +63,21 @@ export class PageUserListComponent implements AfterViewInit
}
// Appuie sur le bouton "add"
onAdd(): void
// Appuie sur le bouton "create"
onCreate(): void
{
const config = { width: '50%' };
this.dialog
.open(PopupCreatePersonComponent, config)
.afterClosed()
.subscribe( person => {
.subscribe( retour => {
if((person === null) || (person === undefined)) {
if((retour === null) || (retour === undefined))
{
this.snackBar.open( "Opération annulée", "", this.configSnackBar);
}
else {
this.dataSource.data.push(person);
this.dataSource.data.push(retour.data);
this.dataSource.data = this.dataSource.data;
this.dataSource = this.dataSource;
this.snackBar.open( "L'utilisateur a bien été créé ✔", "", this.configSnackBar);
@ -85,17 +96,18 @@ export class PageUserListComponent implements AfterViewInit
this.dialog
.open(PopupUpdatePersonAdminComponent, config)
.afterClosed()
.subscribe( personUpdated => {
.subscribe( retour => {
if((personUpdated === null) || (personUpdated === undefined)) {
this.snackBar.open( "Opération annulée", "", this.configSnackBar);
if((retour === null) || (retour === undefined))
{
this.snackBar.open("Opération annulée", "", this.configSnackBar);
}
else {
const index = this.dataSource.data.findIndex( elt => (elt.id === personToUpdate.id));
this.dataSource.data.splice(index, 1, personUpdated);
this.dataSource.data.splice(index, 1, retour.data);
this.dataSource.data = this.dataSource.data;
this.dataSource = this.dataSource;
this.snackBar.open( "L'utilisateur a bien été modifié ✔", "", this.configSnackBar);
this.snackBar.open("L'utilisateur a bien été modifié ✔", "", this.configSnackBar);
}
});
@ -115,19 +127,23 @@ export class PageUserListComponent implements AfterViewInit
this.dialog
.open(PopupDeleteProfilComponent, config)
.afterClosed()
.subscribe( personUpdated => {
.subscribe( retour => {
if((personUpdated === null) || (personUpdated === undefined)) {
this.snackBar.open( "Opération annulée", "", this.configSnackBar);
if((retour === null) || (retour === undefined))
{
this.snackBar.open("Opération annulée", "", this.configSnackBar);
}
else if(retour.status === "error")
{
this.snackBar.open(retour.message, "", this.configSnackBar);
}
else {
const index = this.dataSource.data.findIndex( elt => (elt.id === personToDelete.id));
this.dataSource.data.splice(index, 1);
this.dataSource.data = this.dataSource.data;
this.dataSource = this.dataSource;
this.snackBar.open( "L'utilisateur a bien été supprimé ✔", "", this.configSnackBar);
this.snackBar.open("L'utilisateur a bien été supprimé ✔", "", this.configSnackBar);
}
});
}

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

@ -52,13 +52,19 @@ export class PopupCreatePersonComponent
// Callback de 'onValider'
onValiderCallback(retour: any)
{
if(retour.status === 'error')
if(retour.status === 'success')
{
this.dialogRef.close(retour);
}
else if(retour.status === 'error')
{
console.log(retour);
this.dialogRef.close(null);
this.errorMessage = retour.message;
this.hasError = true;
}
else {
this.dialogRef.close(this.person);
console.log(retour);
this.dialogRef.close(null);
}
}

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

@ -66,7 +66,7 @@
</div>
<!-- Deconnexion -->
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/login">
Deconnexion
</button>
@ -100,7 +100,7 @@
</div>
<!-- Deconnexion -->
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/login">
Deconnexion
</button>

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

@ -1,4 +1,5 @@
import {Component, Input, OnInit} from '@angular/core';
import {ProfilService} from "../../services/profil/profil.service";
@Component({
selector: 'app-navbar',
@ -9,9 +10,14 @@ export class NavbarComponent implements OnInit
{
@Input() pour = "login";
constructor() { }
constructor(private profilService: ProfilService) { }
ngOnInit(): void {}
onDeconnexion(): void {}
onDeconnexion(): void
{
this.profilService.setId(-1);
this.profilService.setIsAdmin(false);
}
}

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

@ -23,8 +23,8 @@
<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>
<span *ngIf="this.from === 'user'">utilisateur</span>
<span *ngIf="this.from === 'admin'">admin</span>
</div>
<!-- boutons -->

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

@ -2,9 +2,11 @@ import { Component, OnInit } from '@angular/core';
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 {Router} from "@angular/router";
import {PopupDeleteProfilComponent} from "../popup-delete-profil/popup-delete-profil.component";
import {MessageService} from "../../services/message/message.service";
import {HttpParams} from "@angular/common/http";
import {ProfilService} from "../../services/profil/profil.service";
@ -19,31 +21,42 @@ export class PageProfilComponent implements OnInit
id: "",
nickname: "",
email: "",
hash_pass: "",
is_admin: false,
};
from: string = "" ;
configSnackbar = { duration: 3000, panelClass: "custom-class" };
constructor( public dialog: MatDialog,
constructor( private messageService: MessageService,
private profilService: ProfilService,
public dialog: MatDialog,
private snackBar: MatSnackBar,
private fictitiousDatasService: FictitiousDatasService,
private router: Router ) { }
ngOnInit(): void
{
// faux code
if(this.router.url.startsWith("/user")) {
this.person = this.fictitiousDatasService.getUser();
this.from = "user" ;
}
else if(this.router.url.startsWith("/admin")){
this.person = this.fictitiousDatasService.getAdmin();
this.from = "admin" ;
}
if(this.router.url.startsWith("/user")) this.from = "user" ;
else if(this.router.url.startsWith("/admin")) this.from = "admin" ;
// Vrai code ...
let params = new HttpParams()
params = params.set("order", "");
params = params.set("id", this.profilService.getId());
this.messageService
.get("user", params)
.subscribe(ret => this.ngOnInitCallback(ret), err => this.ngOnInitCallback(err));
}
// Callback de ngOnInit
ngOnInitCallback(retour: any): void
{
if(retour.status !== "success") {
console.log(retour);
}
else {
this.person = retour.data[0];
}
}
@ -64,15 +77,8 @@ export class PageProfilComponent implements OnInit
// Callback de onModifier
onModifierCallback(retour: any): void
{
if((retour === null) || (retour === undefined))
{
const config = { duration: 1000, panelClass: "custom-class" };
this.snackBar.open( "Opération annulé", "", config);
}
else
{
this.person = retour;
}
if((retour === null) || (retour === undefined)) this.snackBar.open( "Opération annulé", "", this.configSnackbar);
else if(retour.status === "success") this.person = retour.data;
}
@ -96,15 +102,9 @@ export class PageProfilComponent implements OnInit
// 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");
}
if((retour === null) || (retour === undefined)) this.snackBar.open( "Opération annulé", "", this.configSnackbar);
else if(retour.status === "error") this.snackBar.open(retour.message, "", this.configSnackbar);
else if(retour.status === "success") this.router.navigateByUrl("/login");
}
}

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

@ -1,5 +1,7 @@
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {MessageService} from "../../services/message/message.service";
import {HttpParams} from "@angular/common/http";
@ -10,19 +12,58 @@ import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
})
export class PopupDeleteProfilComponent implements OnInit
{
id: number;
me: boolean = false; // on se supprime soi-même
email: string = "";
constructor( public dialogRef: MatDialogRef<PopupDeleteProfilComponent>,
constructor( private messageService: MessageService,
public dialogRef: MatDialogRef<PopupDeleteProfilComponent>,
@Inject(MAT_DIALOG_DATA) public data: any ) { }
ngOnInit(): void {
this.id = this.data.id;
this.me = this.data.me;
this.email = this.data.email;
}
onValider(): void {
this.dialogRef.close(true);
// Appuie sur 'valider'
onValider(): void
{
if(this.me)
{
this.messageService
.delete("user/delete")
.subscribe(ret => this.onValiderCallback(ret), err => this.onValiderCallback(err));
}
else {
let params = new HttpParams();
params = params.set("id", this.id);
this.messageService
.delete("admin/delete", params)
.subscribe(ret => this.onValiderCallback(ret), err => this.onValiderCallback(err));
}
}
// Callback de onValider
onValiderCallback(retour: any): void
{
if(retour.status === "success")
{
this.dialogRef.close(retour);
}
else if(retour.status === "error")
{
console.log(retour);
this.dialogRef.close(retour);
}
else {
console.log(retour);
this.dialogRef.close(null);
}
}
}

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

@ -1,7 +1,7 @@
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {CheckEmailService} from "../../services/checkEmail/check-email.service";
import {HashageService} from "../../services/hashage/hashage.service";
import {MessageService} from "../../services/message/message.service";
@ -20,10 +20,10 @@ export class PopupUpdateProfilComponent implements OnInit
errorMessage: string = "" ;
constructor( public dialogRef: MatDialogRef<PopupUpdateProfilComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private checkEmailService: CheckEmailService,
private hashageService: HashageService ) { }
constructor( private checkEmailService: CheckEmailService,
private messageService: MessageService,
public dialogRef: MatDialogRef<PopupUpdateProfilComponent>,
@Inject(MAT_DIALOG_DATA) public data: any ) { }
ngOnInit(): void
@ -33,7 +33,6 @@ export class PopupUpdateProfilComponent implements OnInit
id: person.id,
nickname: person.nickname,
email: person.email,
hash_pass: person.hash_pass,
is_admin: person.is_admin
};
}
@ -45,13 +44,14 @@ export class PopupUpdateProfilComponent implements OnInit
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"});
let data: any = {nickname: this.personCopy.nickname};
if(this.changePassword) data = {
nickname: this.personCopy.nickname,
password: this.newPassword
};
this.messageService
.put("user/update", data)
.subscribe(ret => this.onValiderCallback(ret), err => this.onValiderCallback(err));
}
}
@ -59,14 +59,19 @@ export class PopupUpdateProfilComponent implements OnInit
// Callback de 'onValider'
onValiderCallback(retour: any)
{
if(retour.status === 'error')
if(retour.status === "success")
{
this.dialogRef.close(retour);
}
else if(retour.status === "error")
{
console.log(retour);
this.dialogRef.close(null);
this.errorMessage = retour.message;
this.hasError = true;
}
else
{
this.dialogRef.close(this.personCopy);
else {
console.log(retour);
this.dialogRef.close(null);
}
}

2
frontend/src/app/common/services/message/message.service.ts
View file

@ -29,7 +29,7 @@ export class MessageService
return this.http.put<any>(urlComplete, data, {withCredentials: true});
}
delete(url: string): Observable<any>
delete(url: string, params:HttpParams = new HttpParams()): Observable<any>
{
const urlComplete = environment.debutUrl + url ;
return this.http.delete<any>(urlComplete,{withCredentials: true});

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

@ -6,10 +6,16 @@ import { Injectable } from '@angular/core';
export class ProfilService
{
getId(): number | null
constructor()
{
this.setId(-1);
this.setIsAdmin(false);
}
getId(): number
{
let idString = localStorage.getItem('id');
if(idString === null) return null;
if(idString === null) return -1;
else return parseInt(idString);
}

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

@ -43,16 +43,16 @@ export class PageLoginComponent
// Callback de "onSeConnecter"
onSeConnecterCallback(retour: any): void
{
console.log(retour);
if(retour.status !== "success")
{
console.log(retour);
this.errorMessage = retour.message;
this.hasError = true;
}
else {
this.profilService.setId(retour.data.id);
this.profilService.setIsAdmin(retour.data.is_admin)
if(!retour.data.is_admin) this.router.navigateByUrl('admin/userList');
if(retour.data.is_admin) this.router.navigateByUrl('admin/userList');
else this.router.navigateByUrl('user/userList');
}
}

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

@ -4,6 +4,7 @@ import {Router} from "@angular/router";
import {CheckEmailService} from "../../common/services/checkEmail/check-email.service";
import {MatDialog} from "@angular/material/dialog";
import {PopupConfirmRegisterComponent} from "../popup-confirm-register/popup-confirm-register.component";
import {MessageService} from "../../common/services/message/message.service";
@ -27,8 +28,8 @@ export class PageRegisterComponent
errorMessage: string = "";
constructor( private hashageService: HashageService,
private checkEmailService: CheckEmailService,
constructor( private checkEmailService: CheckEmailService,
private messageService: MessageService,
private router: Router,
public dialog: MatDialog ) { }
@ -39,18 +40,14 @@ export class PageRegisterComponent
this.checkField();
if(!this.hasError)
{
this.person.hash_pass = this.hashageService.run(this.password);
// FAUX CODE
const retour = { status: "succes", data: {} };
this.onValiderCallback(retour);
// VRAI CODE
/*
const data = {
email: this.person.email,
nickname: this.person.nickname,
is_admin: false
};
this.messageService
.sendMessage('register', this.user)
.subscribe(retour => this.onValiderCallback(retour));
*/
.post('register', data)
.subscribe( retour => this.onValiderCallback(retour), err => this.onValiderCallback(err));
}
}
@ -58,16 +55,17 @@ export class PageRegisterComponent
// Callback de "onValider"
onValiderCallback(retour: any): void
{
if(retour.status === "error")
if(retour.status !== "success")
{
console.log(retour);
this.errorMessage = retour.message;
this.hasError = true;
}
else
{
else {
this.dialog
.open(PopupConfirmRegisterComponent, {})
.afterClosed()
.subscribe(retour => this.router.navigateByUrl("/"));
.subscribe(retour => this.router.navigateByUrl("/login"));
}
}

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

@ -2,8 +2,7 @@ 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";
import {MessageService} from "../../common/services/message/message.service";
@ -15,33 +14,41 @@ import {MatDialog} from "@angular/material/dialog";
export class PageRegistryComponent implements AfterViewInit
{
displayedColumns: string[] = [ "nickname", "email", "role" ];
dataSource: MatTableDataSource<any>;
dataSource: MatTableDataSource<any> = new MatTableDataSource<any>();
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor( private fictitiousDatasService: FictitiousDatasService,
public dialog: MatDialog ) { }
constructor( private messageService: MessageService ) { }
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;
this.messageService
.get('users?order_by=nickname')
.subscribe(retour => this.ngAfterViewInitCallback(retour), err => this.ngAfterViewInitCallback(err));
}
applyFilter(event: Event)
ngAfterViewInitCallback(retour: any): void
{
if(retour.status !== "success") {
console.log(retour);
}
else {
let tabPerson: { id: number, email: string, nickname: string, is_admin: boolean }[] = retour.data;
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): void
{
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();