125 lines
4.7 KiB
HTML
125 lines
4.7 KiB
HTML
<div class="myContainer">
|
|
|
|
<!-- Photo de profil -->
|
|
<div style="text-align: center; font-size: small">
|
|
<img [src]="userCopy.profileImageUrl" 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.profileImageUrl">
|
|
</div><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 -->
|
|
<div class="form-group row myRow">
|
|
<label for="login" class="col-sm-6 col-form-label myLeftLabel">Pseudo:</label>
|
|
<div class="col-sm-6">
|
|
<input type="text" class="form-control myValue" id="login" [(ngModel)]="userCopy.login">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- dateOfBirth -->
|
|
<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>
|
|
|
|
<!-- 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 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 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>
|
|
|
|
<!-- 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>
|
|
</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>
|