Something went wrong on our end
-
Alex ORLUC authoredAlex ORLUC authored
profile.component.html 16.01 KiB
<nav class="sidebar" *ngIf="this.signaturesService.showProfile">
<div class="main-header">
<header class="profile-header">
<div class="user" style="color: #F99830">
{{'lang.myProfil' | translate}}
</div>
<div class="avatarProfile"
[ngStyle]="{'background': 'url(' + this.profileInfo.picture + ') no-repeat scroll center center / cover'}"
(tap)="uploadFile.click();">
</div>
<input #uploadFile type="file" style="display:none;" (change)="handleFileInput($event.target.files)">
</header>
</div>
<div class="nav">
<form (ngSubmit)="submitProfile()" #profileForm="ngForm">
<mat-tab-group #tabProfile (selectedTabChange)="initProfileTab($event);"
(swipeleft)="siwtchToleft(tabProfile)" (swiperight)="siwtchToRight(tabProfile)">
<mat-tab label="{{'lang.informations' | translate}}">
<div class="profile-content">
<mat-form-field class="input-row">
<input name="login" matInput placeholder="{{'lang.login' | translate}}" type="text"
[(ngModel)]="profileInfo.login" (keyup)="newLogin.login=newLogin.login.toLowerCase()"
disabled required>
</mat-form-field>
<mat-form-field class="input-row">
<input name="email" matInput placeholder="{{'lang.email' | translate}}" type="mail"
[(ngModel)]="profileInfo.email" (keyup)="newLogin.mail=newLogin.mail.toLowerCase()"
required>
</mat-form-field>
<mat-form-field class="input-row">
<input name="firstname" matInput placeholder="{{'lang.firstname' | translate}}" [(ngModel)]="profileInfo.firstname"
required>
</mat-form-field>
<mat-form-field class="input-row">
<input name="nom" matInput placeholder="{{'lang.lastname' | translate}}" [(ngModel)]="profileInfo.lastname" required>
</mat-form-field>
<mat-accordion>
<mat-expansion-panel (closed)="showPassword=false" (opened)="changePasswd()"
#passwordContent>
<mat-expansion-panel-header>
<mat-panel-title>
{{'lang.updatePassword' | translate}}
</mat-panel-title>
<mat-panel-description>
</mat-panel-description>
</mat-expansion-panel-header>
<ng-container *ngIf="showPassword">
<mat-form-field class="input-row">
<input name="currentPassword" matInput [(ngModel)]="password.currentPassword"
placeholder="{{'lang.currentPassword' | translate}}"
[type]="hideCurrentPassword ? 'password' : 'text'">
<mat-icon matSuffix (click)="hideCurrentPassword = !hideCurrentPassword"
class="fa fa-2x"
[ngClass]="[hideCurrentPassword ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
</mat-form-field>
<mat-form-field class="input-row">
<input name="newPassword" matInput [(ngModel)]="password.newPassword"
placeholder="{{'lang.newPassword' | translate}}"
[type]="hideNewPassword ? 'password' : 'text'"
(keyup)="checkPasswordValidity(password.newPassword)">
<mat-icon matSuffix (click)="hideNewPassword = !hideNewPassword"
class="fa fa-2x" [ngClass]="[hideNewPassword ? 'fa-eye-slash' : 'fa-eye']">
</mat-icon>
<mat-hint style="color:red;">{{handlePassword.errorMsg}}</mat-hint>
</mat-form-field>
<mat-form-field class="input-row">
<input name="passwordConfirmation" matInput
[(ngModel)]="password.passwordConfirmation"
placeholder="{{'lang.passwordConfirmation' | translate}}"
[type]="hideNewPasswordConfirm ? 'password' : 'text'"> <mat-icon matSuffix (click)="hideNewPasswordConfirm = !hideNewPasswordConfirm"
class="fa fa-2x"
[ngClass]="[hideNewPasswordConfirm ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
<mat-hint style="color:red;"
*ngIf="password.passwordConfirmation !== password.newPassword">{{'lang.passwordNotMatch' | translate}}</mat-hint>
<mat-hint style="color:green;"
*ngIf="password.passwordConfirmation === password.newPassword && password.newPassword.length > 0 && password.passwordConfirmation.length> 0">
{{'lang.samePassword' | translate}}</mat-hint>
</mat-form-field>
</ng-container>
</mat-expansion-panel>
</mat-accordion>
</div>
</mat-tab>
<mat-tab label="{{'lang.preferences' | translate}}">
<div class="profile-content">
<div class="input-row">
<fieldset>
<legend align="left">{{'lang.notifications' | translate}}</legend>
<div class="form-container">
<div class="form-2-col">
<mat-slide-toggle [checked]="this.profileInfo.preferences.notifications"
(change)="this.profileInfo.preferences.notifications=!this.profileInfo.preferences.notifications"
color="primary">{{'lang.receiveNotif' | translate}}</mat-slide-toggle>
</div>
<div class="form-2-col" style="text-align: justify;font-size: 12px;">
</div>
</div>
</fieldset>
</div>
<div class="input-row">
<fieldset>
<legend align="left">{{'lang.language' | translate}}</legend>
<div class="form-container">
<div class="form-2-col">
<mat-form-field>
<mat-select #langSelect name="langUser" [(ngModel)]="this.profileInfo.preferences.lang">
<mat-option value="fr">Français</mat-option>
<mat-option value="en">English</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="form-2-col" style="text-align: justify;font-size: 12px;">
</div>
</div>
</fieldset>
</div>
<div class="input-row">
<fieldset>
<legend align="left">{{'lang.annotationMode' | translate}}</legend>
<div class="form-container">
<div class="form-2-col">
<mat-form-field>
<mat-select name="writingMode"
[(ngModel)]="this.profileInfo.preferences.writingMode">
<mat-option value="direct">{{'lang.free' | translate}}</mat-option>
<mat-option value="stylus">{{'lang.appleStylus' | translate}} <i class="fab fa-apple"></i>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="this.profileInfo.preferences.writingMode == 'stylus'" class="form-2-col"
style="text-align: justify;font-size: 12px;" [innerHTML]="'lang.freeModeInfo' | translate">
</div>
<div *ngIf="this.profileInfo.preferences.writingMode == 'direct'" class="form-2-col"
style="text-align: justify;font-size: 12px;" [innerHTML]="'lang.standardModeInfo' | translate">
</div>
</div>
</fieldset>
</div>
<div class="input-row">
<fieldset>
<legend align="left">{{'lang.stylusWidh' | translate}}</legend>
<div class="form-container">
<div class="form-2-col">
<mat-form-field>
<mat-select name="writingSize"
[(ngModel)]="this.profileInfo.preferences.writingSize"
(selectionChange)="drawSample();">
<mat-option *ngFor='let in of counter(10) ;let i = index' [value]="i+1">
{{i+1}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="form-2-col">
<canvas id="sampleNote" width="150" height="150"></canvas>
</div>
</div>
</fieldset>
</div>
<div class="input-row">
<fieldset style="display:table;">
<legend align="left">{{'lang.defaultColor' | translate}}</legend>
<div class="form-container">
<div class="form-2-col">
<mat-form-field>
<mat-select name="writingColor"
[(ngModel)]="this.profileInfo.preferences.writingColor">
<mat-option style="color:#000000" value="#000000">{{'lang.black' | translate}}</mat-option>
<mat-option style="color:#1a75ff" value="#1a75ff">{{'lang.blue' | translate}}</mat-option>
<mat-option style="color:#FF0000" value="#FF0000">{{'lang.red' | translate}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="form-2-col">
<div style="height:50px;width:100px;margin:auto;"
[style.backgroundColor]="this.profileInfo.preferences.writingColor">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</mat-tab>
<mat-tab label="{{'lang.administrations' | translate}}" *ngIf="signaturesService.userLogged.canManageRestUsers">
<div class="profile-content">
<div class="input-row">
<fieldset>
<legend align="left">{{'lang.wsUser' | translate}}</legend>
<div class="form-container">
<div class="form-col" style="width:35%;">
<mat-form-field>
<mat-select name="usersRest" [(ngModel)]="currentUserRest">
<mat-option *ngFor="let userRest of usersRest" [value]="userRest">
{{userRest.firstname}}
{{userRest.lastname}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="form-col" style="width:35%;">
<mat-form-field class="input-row">
<input name="newPasswordRest" matInput [(ngModel)]="currentUserRestPassword"
placeholder="{{'lang.newPassword' | translate}}"
[type]="hideNewPassword ? 'password' : 'text'"
(keyup)="checkPasswordValidity(currentUserRestPassword)">
<mat-icon matSuffix (click)="hideNewPassword = !hideNewPassword"
class="fa fa-2x" [ngClass]="[hideNewPassword ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
<mat-hint style="color:red;">{{handlePassword.errorMsg}}</mat-hint>
</mat-form-field>
</div>
<div class="form-col" style="width:29%;">
<button mat-raised-button type="button" color="primary"
[disabled]="handlePassword.error || currentUserRestPassword.length === 0"
(click)="updateRestUser()">{{'lang.update' | translate}}</button>
</div>
</div>
</fieldset>
</div>
</div>
</mat-tab>
</mat-tab-group>
<span class="actions">
<button class="validate" mat-button color="primary" type="submit"
[disabled]="allowValidate() || !profileForm.form.valid">{{
msgButton | translate}}</button>
<button class="cancel" mat-icon-button type="button" (tap)="closeProfile();">
<mat-icon fontSet="fas" fontIcon="fa-arrow-left fa-2x"></mat-icon>
</button>
</span>
</form>
</div>
</nav>