<ion-header [translucent]="true">
<ion-toolbar color="primary">
<ion-title>{{'lang.myProfil' | translate}}</ion-title>
<ion-buttons slot="end">
<ion-button (click)="dismissModal()">
<ion-icon slot="icon-only" name="close-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar>
<ion-segment [value]="currentTool" (ionChange)="initTab($event.detail.value)">
<ion-segment-button value="info">
<ion-label>{{'lang.informations' | translate}}</ion-label>
<ion-icon name="information-circle"></ion-icon>
</ion-segment-button>
<ion-segment-button value="pref">
<ion-label>{{'lang.preferences' | translate}}</ion-label>
<ion-icon name="brush-outline"></ion-icon>
</ion-segment-button>
<ion-segment-button value="deleg">
<ion-label>{{'lang.substitute' | translate}}</ion-label>
<ion-icon name="hand-left-outline"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<form (ngSubmit)="submitProfile()" style="display: contents;" #profileForm="ngForm">
<ion-content>
<ng-container *ngIf="currentTool === 'info'">
<ion-list lines="full" class="ion-no-margin">
<ion-item>
<ion-avatar slot="start" style="cursor: pointer;" (click)="uploadFile.click();">
<img [src]="avatarInfo.picture">
</ion-avatar>
<ion-label color="secondary" position="floating">{{'lang.login' | translate}}</ion-label>
<ion-input name="login" [(ngModel)]="profileInfo.login" readonly required></ion-input>
<input #uploadFile type="file" style="display:none;" (change)="handleFileInput($event.target.files)">
</ion-item>
<ion-item>
<ion-label color="secondary" position="floating">{{'lang.email' | translate}}</ion-label>
<ion-input name="email" [(ngModel)]="profileInfo.email"
pattern="(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$)" [readonly]="authService.authMode !== 'default'" required></ion-input>
</ion-item>
<ion-item>
<ion-label color="secondary" position="floating">{{'lang.firstname' | translate}}</ion-label>
<ion-input name="firstname" [(ngModel)]="profileInfo.firstname" [readonly]="authService.authMode !== 'default'" required></ion-input>
</ion-item>
<ion-item>
<ion-label color="secondary" position="floating">{{'lang.lastname' | translate}}</ion-label>
<ion-input name="lastname" [(ngModel)]="profileInfo.lastname" [readonly]="authService.authMode !== 'default'" required></ion-input>
</ion-item>
<ion-list-header lines="none">
<ion-label color="primary">{{'lang.changePassword' | translate}}</ion-label>
</ion-list-header>
<ion-item>
<ion-label color="secondary" position="stacked">{{'lang.currentPassword' | translate}}</ion-label>
<ion-input name="currentPassword" [(ngModel)]="password.currentPassword"
placeholder="{{'lang.currentPassword' | translate}}"
[type]="hideCurrentPassword ? 'password' : 'text'" [readonly]="authService.authMode !== 'default'"></ion-input>
<ion-button class="showpassButton" slot="end" color="light"
(click)="hideCurrentPassword = !hideCurrentPassword">
<ion-icon slot="icon-only" color="primary"
[name]="hideCurrentPassword ? 'eye-outline' : 'eye-off-outline'"></ion-icon>
</ion-button>
</ion-item>
<ion-item>
<ion-label color="secondary" position="stacked">{{'lang.newPassword' | translate}}</ion-label>
<ion-input name="newPassword" [(ngModel)]="password.newPassword"
placeholder="{{'lang.newPassword' | translate}}" [type]="hideNewPassword ? 'password' : 'text'"
[readonly]="authService.authMode !== 'default'"
(keyup)="checkPasswordValidity(password.newPassword)"></ion-input>
<ion-button class="showpassButton" slot="end" color="light"
(click)="hideNewPassword = !hideNewPassword">
<ion-icon slot="icon-only" color="primary"
[name]="hideNewPassword ? 'eye-outline' : 'eye-off-outline'"></ion-icon>
</ion-button>
</ion-item>
<ion-item>
<ion-label color="secondary" position="stacked">{{'lang.passwordConfirmation' | translate}}
</ion-label>
<ion-input name="passwordConfirmation" [(ngModel)]="password.passwordConfirmation"
placeholder="{{'lang.passwordConfirmation' | translate}}"
[type]="hideNewPasswordConfirm ? 'password' : 'text'"
[readonly]="authService.authMode !== 'default'"></ion-input>
<ion-button class="showpassButton" slot="end" color="light"
(click)="hideNewPasswordConfirm = !hideNewPasswordConfirm">
<ion-icon slot="icon-only" color="primary"
[name]="hideNewPasswordConfirm ? 'eye-outline' : 'eye-off-outline'"></ion-icon>
</ion-button>
</ion-item>
<ion-item lines="none">
<ion-note color="success"
*ngIf="password.passwordConfirmation === password.newPassword && password.newPassword.length > 0 && password.passwordConfirmation.length> 0">
{{'lang.samePassword' | translate}}</ion-note>
<ion-note color="danger" *ngIf="password.passwordConfirmation !== password.newPassword">
{{'lang.passwordNotMatch' | translate}}</ion-note>
</ion-item>
</ion-list>
</ng-container>
<ng-container *ngIf="currentTool === 'pref'">
<ion-list lines="full" class="ion-no-margin">
<ion-item>
<ion-label>{{'lang.receiveNotif' | translate}}</ion-label>
<ion-toggle slot="start" [checked]="preferenceInfo.notifications"
(ionChange)="preferenceInfo.notifications=!preferenceInfo.notifications"></ion-toggle>
</ion-item>
<ion-list>
<ion-item>
<ion-label position="floating" color="secondary">{{'lang.language' | translate}}</ion-label>
<ion-select name="langUser" [(ngModel)]="preferenceInfo.lang">
<ion-select-option *ngFor="let lang of this.profileInfo['availableLanguages']"
[value]="lang">{{'lang.'+lang | translate }}</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<ion-label position="floating" color="secondary">{{'lang.annotationMode' | translate}}
</ion-label>
<ion-select name="writingMode" [(ngModel)]="this.preferenceInfo.writingMode">
<ion-select-option value="direct">{{'lang.free' | translate}}</ion-select-option>
<ion-select-option value="stylus">{{'lang.appleStylus' | translate}} <i
class="fab fa-apple"></i></ion-select-option>
</ion-select>
<ion-note *ngIf="this.preferenceInfo.writingMode === 'stylus'"
[innerHTML]="'lang.freeModeInfo' | translate"></ion-note>
<ion-note *ngIf="this.preferenceInfo.writingMode === 'direct'"
[innerHTML]="'lang.standardModeInfo' | translate"></ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<ion-label position="floating" color="secondary">{{'lang.stylusWidh' | translate}}</ion-label>
<ion-select name="writingSize" [(ngModel)]="this.preferenceInfo.writingSize"
(ionChange)="drawSample()">
<ion-select-option *ngFor='let in of counter(10) ;let i = index' [value]="i+1">{{i+1}}
</ion-select-option>
</ion-select>
<ion-note slot="end"><canvas id="sampleNote" width="100" height="100"></canvas></ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<ion-label position="floating" color="secondary">{{'lang.defaultColor' | translate}}</ion-label>
<ion-select name="writingColor" [(ngModel)]="preferenceInfo.writingColor">
<ion-select-option value="#000000">{{'lang.black' | translate}}</ion-select-option>
<ion-select-option value="#1a75ff">{{'lang.blue' | translate}}</ion-select-option>
<ion-select-option value="#FF0000">{{'lang.red' | translate}}</ion-select-option>
</ion-select>
<ion-note slot="end">
<div style="height: 25px;width: 25px;border-radius: 20px;"
[style.backgroundColor]="this.preferenceInfo.writingColor">
</div>
</ion-note>
</ion-item>
</ion-list>
</ion-list>
</ng-container>
<ng-container *ngIf="currentTool === 'deleg'">
<ion-list *ngIf="authService.user.substitute !== null">
<ion-item>
<ion-input readonly [value]="authService.user.substituteUser"></ion-input>
<ion-button slot="end" color="danger" (click)="deleteSubstitute()">
<ion-icon name="close-outline"></ion-icon>
</ion-button>
</ion-item>
</ion-list>
<ion-list *ngIf="authService.user.substitute === null">
<ion-item>
<ion-searchbar [placeholder]="'lang.chooseSubstitute' | translate" (ionChange)="test($event)"></ion-searchbar>
</ion-item>
</ion-list>
<ion-list *ngIf="authService.user.substitute === null">
<ion-item *ngFor="let user of userList">
<ion-checkbox color="primary" slot="start" [value]="user" (ionChange)="selectSubstitute($event.detail.value)"></ion-checkbox>
<ion-label>{{ user.firstname }} {{ user.lastname }}</ion-label>
<ion-note slot="end">{{ user.email }}</ion-note>
</ion-item>
</ion-list>
<ng-container *ngIf="authService.user.substitute != null && signaturesService.signaturesList.length > 0">
<ion-item lines="none">
<ion-label color="secondary">
{{'lang.signSubstituted' | translate}} :
</ion-label>
</ion-item>
<div style="display: grid;grid-template-columns: repeat(2, 1fr);">
<button type="button" class="signListButton" mat-stroked-button
*ngFor="let signature of signaturesService.signaturesList; let i=index" (click)="toggleSignature(i)"
[class.selected]="signature.substituted">
<img style="width: 190px;"
[src]="sanitizer.bypassSecurityTrustUrl('data:image/png;base64,' + signature.encodedSignature)" />
</button>
</div>
</ng-container>
</ng-container>
</ion-content>
</form>
<ion-footer class="ion-no-border" *ngIf="['info','pref'].indexOf(currentTool) > -1">
<ion-toolbar>
<ion-buttons class="ion-justify-content-center">
<ion-button type="submit" color="primary" (click)="submitProfile()"
[disabled]="allowValidate() || !profileForm.form.valid">
<ion-label>{{'lang.save' | translate}}</ion-label>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-footer>