Update: Add frontend

This commit is contained in:
Yûki VACHOT 2021-12-08 08:36:27 +01:00
parent be5bfa1fb5
commit 3d3b5fc51e
76 changed files with 17761 additions and 1 deletions

View file

@ -0,0 +1,99 @@
<!-- Login -->
<div *ngIf="pour === 'login'">
<nav class="navbar navbar-expand-lg">
<!-- FlaskAled -->
<a class="navbar-brand" routerLink=""> FlaskAled </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Rien -->
<div class="collapse navbar-collapse"></div>
<!-- S'inscrire -->
<button mat-button class="btnDeconnexion" routerLink="/register">
S'inscrire
</button>
</nav>
</div>
<!-- --------------------------------------------------------------------------------------------------------- -->
<!-- Register -->
<div *ngIf="pour === 'register'">
<nav class="navbar navbar-expand-lg">
<!-- FlaskAled -->
<a class="navbar-brand" routerLink=""> FlaskAled </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Rien -->
<div class="collapse navbar-collapse"></div>
</nav>
</div>
<!-- --------------------------------------------------------------------------------------------------------- -->
<!-- User -->
<div *ngIf="pour === 'user'">
<nav class="navbar navbar-expand-lg">
<!-- FlaskAled -->
<a class="navbar-brand" routerLink="/user"> FlaskAled </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Rien -->
<div class="collapse navbar-collapse"></div>
<!-- Deconnexion -->
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
Deconnexion
</button>
</nav>
</div>
<!-- --------------------------------------------------------------------------------------------------------- -->
<!-- Admin -->
<div *ngIf="pour === 'admin'">
<nav class="navbar navbar-expand-lg">
<!-- FlaskAled -->
<a class="navbar-brand" routerLink="/admin/userList"> FlaskAled </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- [userList] [myProfil] -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active monLi">
<a class="nav-link" routerLink="/admin/userList">Liste des utillisateurs</a>
</li>
<li class="nav-item active monLi">
<a class="nav-link" routerLink="/admin/myProfil">Mon profil</a>
</li>
</ul>
</div>
<!-- Deconnexion -->
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
Deconnexion
</button>
</nav>
</div>

View file

@ -0,0 +1,59 @@
.navbar {
background-color: black;
height: 60px;
font-size: medium;
color: white;
}
.navbar-expand-lg {
border-bottom: solid;
border-color: white;
border-bottom-width: 2px;
}
// PolyNotFound
.navbar-brand {
font-family: cursive;
font-weight: bold;
font-size: x-large;
margin-left: 15px;
color: white;
}
// Recherche, Mes Playlists, Historique
.nav-link {
color: white;
}
.nav-link:hover {
color: grey;
}
// Bonton deconnexion
.btnDeconnexion {
font-size: medium;
margin: 0px 10px 0px 10px
}
.btnDeconnexion:hover {
color: grey;
}
.monLi {
margin: 0px 10px 0px 10px;
}
img {
border: solid 2px white;
border-radius: 50px;
margin: 0px 10px 0px 15px;
width: 40px;
height: 40px;
}
img:hover {
cursor: pointer;
}

View file

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

View file

@ -0,0 +1,18 @@
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit
{
@Input() pour = "login";
constructor() { }
ngOnInit(): void {}
onDeconnexion(): void {}
}

View file

@ -0,0 +1,38 @@
<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>

View file

@ -0,0 +1,45 @@
.myContainer {
max-width: 100vw;
height: 100vh;
overflow-x: hidden;
}
.boite {
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 10vh;
border: solid 3px;
border-radius: 10px;
padding: 20px 40px 20px 40px;
background-color: #ffffff;
text-align: center;
box-shadow: 10px 5px 5px black;
}
.myRow {
margin: 15px 0px 15px 0px;
}
.myLabel {
text-align: right;
padding: 0px 5px 0px 0px;
margin: 0px;
font-weight: bold;
}
.myValue {
text-align: left;
padding: 0px 0px 0px 5px;
margin: 0px;
}
.btnContainer {
text-align: center;
margin-top: 40px;
}
.myBtn {
border: solid 1px black;
background-color: white;
}

View file

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

View file

@ -0,0 +1,78 @@
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 {Router} from "@angular/router";
@Component({
selector: 'app-page-profil',
templateUrl: './page-profil.component.html',
styleUrls: ['./page-profil.component.scss']
})
export class PageProfilComponent implements OnInit
{
person: Person = {
id: "",
login: "",
email: "",
hashPass: "",
role: "user",
};
from: string = "" ;
constructor( 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" ;
}
// Vrai code ...
}
// Appuie sur le bouton modifier
onModifier(): void
{
const config = {
width: '25%',
data: { person: this.person }
};
this.dialog
.open(PopupUpdateProfilComponent, config)
.afterClosed()
.subscribe(retour => this.onModifierCallback(retour));
}
// 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;
}
}
}

View file

@ -0,0 +1,55 @@
<div class="myContainer">
<div class="boite">
<h3>Modifier</h3>
<!-- divider -->
<br><mat-divider></mat-divider><br>
<!-- login -->
<mat-form-field appearance="fill">
<mat-label>Pseudo</mat-label>
<input matInput type="text" [(ngModel)]="personCopy.login">
</mat-form-field><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>

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

View file

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

View file

@ -0,0 +1,104 @@
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";
@Component({
selector: 'app-popup-update-profil',
templateUrl: './popup-update-profil.component.html',
styleUrls: ['./popup-update-profil.component.scss']
})
export class PopupUpdateProfilComponent implements OnInit
{
personCopy: Person;
newPassword: string = "";
confirmNewPassword: string = "" ;
changePassword: boolean = false ;
hasError: boolean = false;
errorMessage: string = "" ;
constructor( public dialogRef: MatDialogRef<PopupUpdateProfilComponent>,
@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,
login: person.login,
email: person.email,
hashPass: person.hashPass,
role: person.role
};
}
// Appuie sur le bouton "valider"
onValider(): void
{
this.checkField();
if(!this.hasError)
{
if(this.changePassword) this.personCopy.hashPass = 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.login.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;
}
}
}

View file

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

View file

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

View file

@ -0,0 +1,15 @@
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CheckEmailService
{
isValidEmail(email: string): boolean
{
let re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
}

View file

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

View file

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

View file

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

View file

@ -0,0 +1,19 @@
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class HashageService
{
// Fonction de hashage (faible)
run(input: string): string
{
let hash = 0;
for (let i = 0; i < input.length; i++) {
let ch = input.charCodeAt(i);
hash = ((hash << 5) - hash) + ch;
hash = hash & hash;
}
return hash.toString();
}
}

View file

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

View file

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