70 lines
3.6 KiB
HTML
70 lines
3.6 KiB
HTML
<form [formGroup]="passwordFormGroup">
|
|
<div class="password-form" fxLayout="row" fxLayoutGap="2rem" fxLayoutAlign="start start">
|
|
<!--Old password-->
|
|
<nb-form-field class="password-form-field">
|
|
<label for="oldPassword" class="label">
|
|
{{'profile.password.old' | translate}}
|
|
</label>
|
|
<input formControlName="oldPassword"
|
|
type="{{getInputType('oldPassword')}}" required
|
|
id="oldPassword" nbInput
|
|
class="form-field"
|
|
[status]="passwordFormGroup.get('oldPassword').dirty ? (passwordFormGroup.get('oldPassword').invalid ? 'danger' : 'basic') : 'basic'"
|
|
placeholder="{{'******'}}">
|
|
<button nbSuffix nbButton ghost class="form-field-button" (click)="toggleShowOldPassword()">
|
|
<fa-icon [icon]="showOldPassword ? fa.faEye : fa.faEyeSlash"></fa-icon>
|
|
</button>
|
|
<!-- FIXME: when the bug (https://github.com/angular/components/issues/7739) is fixed -->
|
|
<ng-template *ngIf="passwordFormGroup.get('oldPassword').dirty">
|
|
<span class="error-text"
|
|
*ngIf="passwordFormGroup.get('oldPassword')?.hasError('required')">
|
|
{{'profile.password.validationMessage.passwordRequired' | translate}}
|
|
</span>
|
|
</ng-template>
|
|
</nb-form-field>
|
|
<div fxLayout="column" fxLayoutGap="2rem">
|
|
<!--New password-->
|
|
<nb-form-field class="password-form-field">
|
|
<label for="newPassword" class="label">
|
|
{{'profile.password.new' | translate}}
|
|
</label>
|
|
<input formControlName="newPassword"
|
|
type="{{getInputType('newPassword')}}" required
|
|
id="newPassword" nbInput
|
|
class="form-field"
|
|
[status]="passwordFormGroup.get('newPassword').dirty ? (passwordFormGroup.get('newPassword').invalid ? 'danger' : 'basic') : 'basic'"
|
|
placeholder="{{'******'}}">
|
|
<button nbSuffix nbButton ghost class="form-field-button" (click)="toggleShowNewPasswords()">
|
|
<fa-icon [icon]="showNewPasswords ? fa.faEye : fa.faEyeSlash"></fa-icon>
|
|
</button>
|
|
<!-- FIXME: when the bug (https://github.com/angular/components/issues/7739) is fixed -->
|
|
<ng-template *ngIf="passwordFormGroup.get('newPassword').dirty">
|
|
<span class="error-text"
|
|
*ngIf="passwordFormGroup.get('newPassword')?.hasError('required')">
|
|
{{'profile.password.validationMessage.passwordRequired' | translate}}
|
|
</span>
|
|
</ng-template>
|
|
</nb-form-field>
|
|
<!--New password-->
|
|
<nb-form-field class="password-form-field">
|
|
<label for="confirmNewPassword" class="label">
|
|
{{'profile.password.confirmNew' | translate}}
|
|
</label>
|
|
<input formControlName="confirmNewPassword"
|
|
type="{{getInputType('confirmNewPassword')}}" required
|
|
id="confirmNewPassword" nbInput
|
|
class="form-field"
|
|
[status]="passwordFormGroup.get('confirmNewPassword').dirty ? (passwordFormGroup.get('confirmNewPassword').invalid ? 'danger' : 'basic') : 'basic'"
|
|
placeholder="{{'******'}}">
|
|
<!-- FIXME: when the bug (https://github.com/angular/components/issues/7739) is fixed -->
|
|
<ng-template *ngIf="passwordFormGroup.get('confirmNewPassword').dirty">
|
|
<span class="error-text"
|
|
*ngIf="passwordFormGroup.get('confirmNewPassword')?.hasError('required')">
|
|
{{'profile.password.validationMessage.passwordRequired' | translate}}
|
|
</span>
|
|
</ng-template>
|
|
</nb-form-field>
|
|
</div>
|
|
</div>
|
|
</form>
|