modification popup-update-user
This commit is contained in:
MiharyR
parent
080a50e2fe
commit
500b32626e
6 changed files with 156 additions and 83 deletions
|
|
@ -1,88 +1,125 @@
|
|||
<div class="myContainer">
|
||||
<div class="boite">
|
||||
|
||||
<!-- photo de profil -->
|
||||
<div style="text-align: center">
|
||||
<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>
|
||||
<!-- Photo de profil -->
|
||||
<div style="text-align: center; font-size: small">
|
||||
<img [src]="userCopy.profilePictureUrl" onerror="this.onerror=null; this.src='assets/profil.png'"><br>
|
||||
<input title="lien vers image"
|
||||
type="text"
|
||||
class="form-control inputUrlImage"
|
||||
style="font-size: small"
|
||||
[(ngModel)]="userCopy.profilePictureUrl">
|
||||
</div><br>
|
||||
|
||||
<!-- divider -->
|
||||
<br><mat-divider></mat-divider><br>
|
||||
<!-- Col gauche & droite -->
|
||||
<div class="row">
|
||||
<ng-template *ngIf="true; then leftCol"></ng-template>
|
||||
<ng-template *ngIf="true; then rightCol"></ng-template>
|
||||
</div>
|
||||
|
||||
<!-- message d'erreur -->
|
||||
<div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
|
||||
<span class="mat-error"><br>{{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>
|
||||
|
||||
|
||||
<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Colonne gauche -->
|
||||
<ng-template #leftCol>
|
||||
<div class="col-6">
|
||||
|
||||
<!-- login -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Pseudo</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="userCopy.login">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- email -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="userCopy.mail">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
<div class="form-group row myRow">
|
||||
<label for="login" class="col-sm-6 col-form-label myLeftLabel">Login:</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control myValue" id="login" [(ngModel)]="userCopy.login">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- dateOfBirth -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Date de naissance</mat-label>
|
||||
<input matInput type="date"
|
||||
[ngModel] ="userCopy.dateOfBirth | date:'yyyy-MM-dd'"
|
||||
(ngModelChange)="userCopy.dateOfBirth = $event">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
<div class="form-group row myRow">
|
||||
<label for="dateOfBirth" class="col-sm-6 col-form-label myLeftLabel">Date de naissance:</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="date"
|
||||
class="form-control myValue"
|
||||
id="dateOfBirth"
|
||||
[ngModel] ="userCopy.dateOfBirth | date:'yyyy-MM-dd'"
|
||||
(ngModelChange)="userCopy.dateOfBirth = $event">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- gender -->
|
||||
<mat-radio-group [(ngModel)]="userCopy.gender">
|
||||
<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-profil
|
||||
[myInterests]="userCopy.interests"
|
||||
(eventEmitter)="onEventInputInterests($event)"></app-input-interests-profil>
|
||||
|
||||
<!-- divider -->
|
||||
<br><mat-divider></mat-divider><br>
|
||||
<!-- sexe -->
|
||||
<div class="myRow" style="text-align: right; margin-right: 15px">
|
||||
<mat-radio-group [(ngModel)]="userCopy.gender">
|
||||
<mat-radio-button value="man"> Homme </mat-radio-button>
|
||||
<mat-radio-button value="woman"> Femme </mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<!-- Modifier mot de passe -->
|
||||
<div style="margin-bottom: 10px">
|
||||
Modifier mot de passe:
|
||||
<mat-checkbox [(ngModel)]="changePassword"></mat-checkbox>
|
||||
<div class="form-group row" style="margin: 10px 0px 10px 0px">
|
||||
<label for="changePassword" class="col-sm-6 col-form-label myLeftLabel">Modifier mot de passe:</label>
|
||||
<div class="col-sm-6">
|
||||
<mat-checkbox id="changePassword" [(ngModel)]="changePassword"></mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- nouveau mot de passe -->
|
||||
<div *ngIf="changePassword">
|
||||
<!-- 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>
|
||||
<!-- Nouveau mot de passe -->
|
||||
<div class="form-group row" style="margin: 10px 0px 10px 0px">
|
||||
<label for="newPassword" class="col-sm-6 col-form-label myLeftLabel"></label>
|
||||
<div class="col-sm-6">
|
||||
<input type="password"
|
||||
class="form-control myValue"
|
||||
id="newPassword"
|
||||
placeholder=" Nouveau mot de passe"
|
||||
[(ngModel)]="newPassword"
|
||||
[disabled]="!changePassword">
|
||||
</div>
|
||||
</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>
|
||||
<!-- Confirmation nouveau mot de passe -->
|
||||
<div class="form-group row" style="margin: 10px 0px 10px 0px">
|
||||
<label for="confimNewPassword" class="col-sm-6 col-form-label myLeftLabel"></label>
|
||||
<div class="col-sm-6">
|
||||
<input type="password"
|
||||
class="form-control myValue"
|
||||
id="confimNewPassword"
|
||||
placeholder=" Confirmation nouveau mot de passe"
|
||||
[(ngModel)]="confirmNewPassword"
|
||||
[disabled]="!changePassword">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
|
||||
<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Colonne droite -->
|
||||
<ng-template #rightCol>
|
||||
<div class="col-6" style="border-left: solid 1px #e6e6e6">
|
||||
|
||||
<!-- interests -->
|
||||
<div class="form-group row myRow">
|
||||
<label for="interests" class="col-sm-3 col-form-label myLeftLabel">Centres d'intérêt:</label>
|
||||
<div class="col-sm-9">
|
||||
<app-input-interests-profil
|
||||
id="interests"
|
||||
[myInterests]="userCopy.interests"
|
||||
(eventEmitter)="onEventInputInterests($event)"></app-input-interests-profil>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
|
|||
Reference in a new issue