création des 3 pages de profil
This commit is contained in:
MiharyR
parent
ef5dd96747
commit
89e174a28d
25 changed files with 811 additions and 102 deletions
|
|
@ -1 +1,43 @@
|
|||
<p>page-profil-advertiser works!</p>
|
||||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
|
||||
<!-- NavBar -->
|
||||
<app-navbar-advertiser></app-navbar-advertiser>
|
||||
|
||||
<!-- Boite -->
|
||||
<div class="boite">
|
||||
|
||||
<!-- Photo de profil -->
|
||||
<div style="text-align: center">
|
||||
<img [src]="advertiser.profilePictureUrl"
|
||||
onerror="this.onerror=null; this.src='assets/profil.png'">
|
||||
</div>
|
||||
|
||||
<!-- login -->
|
||||
<div class="row myRow">
|
||||
<div class="col-6 myLabel">Login:</div>
|
||||
<div class="col-6 myValue"> {{advertiser.login}} </div>
|
||||
</div>
|
||||
|
||||
<!-- mail -->
|
||||
<div class="row myRow">
|
||||
<div class="col-6 myLabel">Mail:</div>
|
||||
<div class="col-6 myValue"> {{advertiser.mail}} </div>
|
||||
</div>
|
||||
|
||||
<!-- createdAt -->
|
||||
<div class="row myRow">
|
||||
<div class="col-6 myLabel">Date de création:</div>
|
||||
<div class="col-6 myValue">{{advertiser.createdAt | date:'dd/LL/YYYY'}}</div>
|
||||
</div>
|
||||
|
||||
<!-- Modifier profil -->
|
||||
<div class="btnContainer">
|
||||
<button mat-button class="myBtn" (click)="onModifier()">Modifier profil</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
.myContainer {
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
.boite {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 25%;
|
||||
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;
|
||||
}
|
||||
.lightTheme .boite {
|
||||
border-color: black;
|
||||
}
|
||||
.darkTheme .boite {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
margin: 0px 0px 10px 0px;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border: solid 2px black;
|
||||
border-radius: 50%;
|
||||
font-size: xxx-large;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -1,15 +1,56 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {User} from "../../../utils/interfaces/user";
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {PopupUpdateAdvertiserComponent} from "../popup-update-advertiser/popup-update-advertiser.component";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-profil-advertiser',
|
||||
templateUrl: './page-profil-advertiser.component.html',
|
||||
styleUrls: ['./page-profil-advertiser.component.scss']
|
||||
selector: 'app-page-profil-advertiser',
|
||||
templateUrl: './page-profil-advertiser.component.html',
|
||||
styleUrls: ['./page-profil-advertiser.component.scss']
|
||||
})
|
||||
export class PageProfilAdvertiserComponent implements OnInit {
|
||||
export class PageProfilAdvertiserComponent implements OnInit
|
||||
{
|
||||
advertiser: User;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
constructor( public themeService: ThemeService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
public dialog: MatDialog,
|
||||
private snackBar: MatSnackBar ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.advertiser = this.fictitiousDatasService.getAdvertiser();
|
||||
}
|
||||
|
||||
|
||||
onModifier()
|
||||
{
|
||||
const config = {
|
||||
width: '25%',
|
||||
data: { advertiser: this.advertiser }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupUpdateAdvertiserComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe(retour => {
|
||||
|
||||
if((retour === null) || (retour === undefined))
|
||||
{
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
this.snackBar.open( "Opération annulé", "", config);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.advertiser = retour;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,65 @@
|
|||
<p>popup-update-advertiser works!</p>
|
||||
<div class="myContainer">
|
||||
<div class="boite">
|
||||
|
||||
<!-- photo de profil -->
|
||||
<div style="text-align: center">
|
||||
<img [src]="advertiserCopy.profilePictureUrl" onerror="this.onerror=null; this.src='assets/profil.png'"><br>
|
||||
<input title="lien vers image" type="text" [(ngModel)]="advertiserCopy.profilePictureUrl" style="width: 90%">
|
||||
</div>
|
||||
|
||||
<!-- divider -->
|
||||
<br><mat-divider></mat-divider><br>
|
||||
|
||||
<!-- login -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Pseudo</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="advertiserCopy.login">
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- email -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="advertiserCopy.mail">
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
img {
|
||||
margin: 0px 0px 10px 0px;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border: solid 2px black;
|
||||
border-radius: 50%;
|
||||
font-size: xxx-large;
|
||||
}
|
||||
|
|
@ -1,15 +1,109 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {User} from "../../../utils/interfaces/user";
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-update-advertiser',
|
||||
templateUrl: './popup-update-advertiser.component.html',
|
||||
styleUrls: ['./popup-update-advertiser.component.scss']
|
||||
selector: 'app-popup-update-advertiser',
|
||||
templateUrl: './popup-update-advertiser.component.html',
|
||||
styleUrls: ['./popup-update-advertiser.component.scss']
|
||||
})
|
||||
export class PopupUpdateAdvertiserComponent implements OnInit {
|
||||
export class PopupUpdateAdvertiserComponent implements OnInit
|
||||
{
|
||||
advertiserCopy: User;
|
||||
newPassword: string = "";
|
||||
confirmNewPassword: string = "" ;
|
||||
changePassword: boolean = false ;
|
||||
hasError: boolean = false;
|
||||
errorMessage: string = "" ;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
constructor( public dialogRef: MatDialogRef<PopupUpdateAdvertiserComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
const advertiser0 = this.data.advertiser;
|
||||
this.advertiserCopy = {
|
||||
_id: advertiser0._id,
|
||||
login: advertiser0.login,
|
||||
hashPass: advertiser0.hashPass,
|
||||
mail: advertiser0.mail,
|
||||
role: {
|
||||
name: advertiser0.role.name,
|
||||
permission: advertiser0.role.permission,
|
||||
},
|
||||
profilePictureUrl: advertiser0.profilePictureUrl,
|
||||
dateOfBirth: advertiser0.dateOfBirth,
|
||||
gender: advertiser0.gender,
|
||||
interests: [],
|
||||
isActive: advertiser0.isActive,
|
||||
createdAt: advertiser0.createdAt,
|
||||
updatedAt: advertiser0.updatedAt,
|
||||
};
|
||||
for(let interest of advertiser0.interests) this.advertiserCopy.interests.push(interest);
|
||||
}
|
||||
|
||||
|
||||
onValider()
|
||||
{
|
||||
this.checkField();
|
||||
if(!this.hasError)
|
||||
{
|
||||
const data = {
|
||||
user: this.advertiserCopy,
|
||||
newPassword: this.newPassword
|
||||
};
|
||||
|
||||
// VRAI CODE: envoie au back ...
|
||||
|
||||
this.dialogRef.close(this.advertiserCopy);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
checkField()
|
||||
{
|
||||
if(this.advertiserCopy.login.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'login'" ;
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.advertiserCopy.mail.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'email'" ;
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(!this.isValidEmail(this.advertiserCopy.mail)) {
|
||||
this.errorMessage = "Email invalide" ;
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.changePassword) {
|
||||
if (this.newPassword.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'mot de passe'" ;
|
||||
this.hasError = true;
|
||||
} else if (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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
isValidEmail(email)
|
||||
{
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
onEventInputInterests(myInterets: string[])
|
||||
{
|
||||
this.advertiserCopy.interests = myInterets;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,23 @@
|
|||
<nav class="navbar navbar-expand-lg">
|
||||
|
||||
<!-- PolyNotFound -->
|
||||
<a class="navbar-brand" routerLink="/advertiser"> StreamNotFound </a>
|
||||
<a class="navbar-brand" routerLink="/advertiser/manageAds"> StreamNotFound </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>
|
||||
|
||||
<!-- Vide -->
|
||||
<div class="collapse navbar-collapse"></div>
|
||||
<!-- [Recherche] [Mes Playlists] [Historique] -->
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/advertiser/manageAds"> Gestion des annonces </a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/advertiser/manageAds"> Popularité des annonces </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Mon profil -->
|
||||
<img [src]=urlImage
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {ThemeService} from "../../utils/services/theme/theme.service";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-navbar-advertiser',
|
||||
|
|
@ -8,10 +9,9 @@ import {ThemeService} from "../../utils/services/theme/theme.service";
|
|||
})
|
||||
export class NavbarAdvertiserComponent
|
||||
{
|
||||
urlImage: string = "" ;
|
||||
urlImage: string = "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg" ;
|
||||
|
||||
constructor( public themeService: ThemeService ) { }
|
||||
constructor() { }
|
||||
|
||||
onDeconnexion(): void {}
|
||||
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue