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
|
|
@ -28,9 +28,7 @@
|
|||
<!-- dateOfBirth -->
|
||||
<div class="row myRow">
|
||||
<div class="col-6 myLabel">Date de naissance:</div>
|
||||
<div class="col-6 myValue">
|
||||
{{ user.dateOfBirth | date:'dd/LL/YYYY' }}
|
||||
</div>
|
||||
<div class="col-6 myValue">{{ user.dateOfBirth | date:'dd/LL/YYYY' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- gender -->
|
||||
|
|
@ -53,9 +51,7 @@
|
|||
<!-- createdAt -->
|
||||
<div class="row myRow">
|
||||
<div class="col-6 myLabel">Date de création:</div>
|
||||
<div class="col-6 myValue">
|
||||
{{ user.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</div>
|
||||
<div class="col-6 myValue">{{ user.createdAt | date:'dd/LL/YYYY' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Modifier profil -->
|
||||
|
|
|
|||
|
|
@ -3,13 +3,15 @@ import {ThemeService} from "../../../utils/services/theme/theme.service";
|
|||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {User} from "../../../utils/interfaces/user";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {PopupUpdateUserComponent} from "../popup-update-user/popup-update-user.component";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {PopupUpdateUserComponent} from "../popup-update-user/popup-update-user.component";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-profil-user',
|
||||
templateUrl: './page-profil-user.component.html',
|
||||
styleUrls: ['./page-profil-user.component.scss']
|
||||
selector: 'app-page-profil-user',
|
||||
templateUrl: './page-profil-user.component.html',
|
||||
styleUrls: ['./page-profil-user.component.scss']
|
||||
})
|
||||
export class PageProfilUserComponent implements OnInit
|
||||
{
|
||||
|
|
@ -50,4 +52,5 @@ export class PageProfilUserComponent implements OnInit
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,14 @@
|
|||
<div class="myContainer">
|
||||
|
||||
|
||||
<div class="boite">
|
||||
|
||||
<!-- profil login mail dateOfBirth gender interets -->
|
||||
|
||||
<!-- photo de profil -->
|
||||
<div style="text-align: center">
|
||||
<img [src]="userCopy.profilePictureUrl"
|
||||
onerror="this.onerror=null; this.src='assets/profil.png'">
|
||||
<br>
|
||||
<input matInput type="text" [(ngModel)]="userCopy.profilePictureUrl">
|
||||
<img [src]="userCopy.profilePictureUrl" onerror="this.onerror=null; this.src='assets/profil.png'"><br>
|
||||
<input title="lien vers image" type="text" [(ngModel)]="userCopy.profilePictureUrl" style="width: 90%">
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- divider -->
|
||||
<br><mat-divider></mat-divider><br>
|
||||
|
||||
<!-- login -->
|
||||
<mat-form-field appearance="fill">
|
||||
|
|
@ -31,27 +27,32 @@
|
|||
<!-- dateOfBirth -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Date de naissance</mat-label>
|
||||
<input matInput type="date" [(ngModel)]="userCopy.mail">
|
||||
<input matInput type="date"
|
||||
[ngModel] ="userCopy.dateOfBirth | date:'yyyy-MM-dd'"
|
||||
(ngModelChange)="userCopy.dateOfBirth = $event">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- gender -->
|
||||
<mat-radio-group [(ngModel)]="userCopy.gender">
|
||||
<mat-radio-button value="man"> Homme </mat-radio-button>
|
||||
<mat-radio-button value="man"> Homme </mat-radio-button>
|
||||
<mat-radio-button value="woman"> Femme </mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<br><br>
|
||||
|
||||
<!-- interets -->
|
||||
<app-input-interests [myInterests]="userCopy.interests" (eventEmitter)="onEventInputInterests($event)"></app-input-interests>
|
||||
|
||||
<!-- divider -->
|
||||
<br><mat-divider></mat-divider><br>
|
||||
|
||||
<!-- Modifier mot de passe -->
|
||||
Modifier mot de passe:
|
||||
<mat-checkbox [(ngModel)]="changePassword"></mat-checkbox>
|
||||
<br>
|
||||
<div style="margin-bottom: 10px">
|
||||
Modifier mot de passe:
|
||||
<mat-checkbox [(ngModel)]="changePassword"></mat-checkbox>
|
||||
</div>
|
||||
|
||||
<!-- Nouveau mot de passe -->
|
||||
<!-- nouveau mot de passe -->
|
||||
<div *ngIf="changePassword">
|
||||
<!-- Nouveau mot de passe -->
|
||||
<mat-form-field appearance="fill">
|
||||
|
|
@ -65,16 +66,20 @@
|
|||
<input matInput type="password" [(ngModel)]="confirmNewPassword">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<br>
|
||||
<div *ngIf="!changePassword"><br></div>
|
||||
|
||||
<!-- Bouton valider -->
|
||||
<div style="width: 100%; text-align: center">
|
||||
<button mat-button (click)="onValider()"> Enregistrer </button>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Message d'erreur -->
|
||||
<div *ngIf="hasError" style="text-align: center; margin-top: 10px;">
|
||||
<span class="mat-error"> {{errorMessage}} </span>
|
||||
<!-- 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>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import {User} from "../../../utils/interfaces/user";
|
|||
export class PopupUpdateUserComponent implements OnInit
|
||||
{
|
||||
userCopy: User;
|
||||
newPassword: string;
|
||||
newPassword: string = "";
|
||||
confirmNewPassword: string = "" ;
|
||||
changePassword: boolean = false ;
|
||||
hasError: boolean = false;
|
||||
|
|
@ -52,11 +52,14 @@ export class PopupUpdateUserComponent implements OnInit
|
|||
this.checkField();
|
||||
if(!this.hasError)
|
||||
{
|
||||
const retour = {
|
||||
const data = {
|
||||
user: this.userCopy,
|
||||
newPassword: this.newPassword
|
||||
};
|
||||
this.dialogRef.close(retour);
|
||||
|
||||
// VRAI CODE: envoie au back ...
|
||||
|
||||
this.dialogRef.close(this.userCopy);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +1,17 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {ThemeService} from "../../utils/services/theme/theme.service";
|
||||
import {Router} from "@angular/router";
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-navbar-user',
|
||||
templateUrl: './navbar-user.component.html',
|
||||
styleUrls: ['./navbar-user.component.scss']
|
||||
})
|
||||
export class NavbarUserComponent implements OnInit
|
||||
export class NavbarUserComponent
|
||||
{
|
||||
urlImage: string = "" ;
|
||||
urlImage: string = "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg" ;
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
private router: Router) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
if(this.router.url.startsWith("/user")) {
|
||||
this.urlImage = "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg";
|
||||
}
|
||||
else if(this.router.url.startsWith("/advertiser")) {
|
||||
this.urlImage = "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg" ;
|
||||
}
|
||||
else if(this.router.url.startsWith("/admin")) {
|
||||
this.urlImage = "https://www.reference-gaming.com/assets/media/product/41195/figurine-pop-duck-tales-n-309-loulou.jpg?format=product-cover-large&k=1519639530" ;
|
||||
}
|
||||
}
|
||||
|
||||
onDeconnexion(): void {
|
||||
|
||||
}
|
||||
constructor() { }
|
||||
|
||||
onDeconnexion(): void {}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue