86 lines
3.7 KiB
HTML
86 lines
3.7 KiB
HTML
<h1 mat-dialog-title>{{ 'labels.heading.Change Password' | translate }}</h1>
|
|
|
|
<div mat-dialog-content>
|
|
<form [formGroup]="changePasswordForm">
|
|
<div fxLayout="column">
|
|
<mat-form-field>
|
|
<mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
|
|
<input matInput formControlName="password" type="{{ passwordInputType[0] }}" />
|
|
<button
|
|
type="button"
|
|
mat-button
|
|
matSuffix
|
|
mat-icon-button
|
|
(mousedown)="togglePasswordVisibility(0)"
|
|
(mouseup)="togglePasswordVisibility(0)"
|
|
>
|
|
<fa-icon *ngIf="passwordInputType[0] === 'password'" icon="eye"></fa-icon>
|
|
<fa-icon *ngIf="passwordInputType[0] === 'text'" icon="eye-slash"></fa-icon>
|
|
</button>
|
|
<mat-error *ngIf="changePasswordForm.controls.password.hasError('required')">
|
|
{{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
|
|
</mat-error>
|
|
<mat-error *ngIf="changePasswordForm.controls.password.hasError('minlength')">
|
|
{{ 'labels.commons.Password should be at least' | translate }}
|
|
<strong>{{ 'labels.commons.12 characters long' | translate }}</strong>
|
|
</mat-error>
|
|
<mat-error *ngIf="changePasswordForm.controls.password.hasError('maxlength')">
|
|
{{ 'labels.commons.Password should not be more than' | translate }}
|
|
<strong>{{ 'labels.commons.50 characters long' | translate }}</strong>
|
|
</mat-error>
|
|
<mat-error
|
|
*ngIf="
|
|
changePasswordForm.controls.password.hasError('pattern') &&
|
|
!(
|
|
changePasswordForm.controls.password.hasError('minlength') ||
|
|
changePasswordForm.controls.password.hasError('maxlength')
|
|
)
|
|
"
|
|
>
|
|
{{ 'labels.commons.Password should include a' | translate }}
|
|
<strong>{{ 'labels.commons.numeral' | translate }}</strong> {{ 'labels.commons.and at' | translate }}
|
|
<strong>{{ 'labels.commons.least one uppercase' | translate }}</strong
|
|
>, <strong>{{ 'labels.commons.lowercase and special character' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field>
|
|
<mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
|
|
<input matInput formControlName="repeatPassword" type="{{ passwordInputType[1] }}" />
|
|
<button
|
|
type="button"
|
|
mat-button
|
|
matSuffix
|
|
mat-icon-button
|
|
(mousedown)="togglePasswordVisibility(1)"
|
|
(mouseup)="togglePasswordVisibility(1)"
|
|
>
|
|
<fa-icon *ngIf="passwordInputType[1] === 'password'" icon="eye"></fa-icon>
|
|
<fa-icon *ngIf="passwordInputType[1] === 'text'" icon="eye-slash"></fa-icon>
|
|
</button>
|
|
<mat-error *ngIf="changePasswordForm.controls.repeatPassword.hasError('required')">
|
|
{{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
<mat-error *ngIf="changePasswordForm.controls.repeatPassword.hasError('notequal')">
|
|
{{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.does not match' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<mat-dialog-actions align="center">
|
|
<button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
|
|
<button
|
|
mat-raised-button
|
|
color="warn"
|
|
[disabled]="!changePasswordForm.valid"
|
|
[mat-dialog-close]="{
|
|
password: changePasswordForm.get('password').value,
|
|
repeatPassword: changePasswordForm.get('repeatPassword').value
|
|
}"
|
|
>
|
|
{{ 'labels.buttons.Confirm' | translate }}
|
|
</button>
|
|
</mat-dialog-actions>
|