Notes

<div flex layout="row">
<div flex layout-padding>
<h2 class="md-title">Password Change</h2>

@if (expired) {
<div class="md-whiteframe-1dp">
<h3 class="md-subhead">Your password has expired, please reset your password using the form below.</h3>
</div>
} @else {
<!-- Notification Box -->
<mat-card class="notification-box md-whiteframe-1dp">
<h3 class="md-subhead">To reset your password please enter your current password and new password below.
</h3>
</mat-card>
}

@if (changeError) {
<mat-card role="alert" class="error-notification">
<mat-card-content>
<mat-icon style="color: red;">warning</mat-icon>
<span class="mat-title error_text" tabindex="8">{{ message }}</span>
</mat-card-content>
</mat-card>
}
<!-- Change Password Form -->
<form [formGroup]="changePasswordForm" (ngSubmit)="onSubmit()" class="change-password-form">
<div fxLayout="column">
<!-- Current Password -->
<mat-form-field appearance="fill" style="width: 100%;">
<mat-label>Current Password</mat-label>
<input matInput type="password" formControlName="currentPassword" autocomplete="off"
aria-label="Current Password" />
@if (getFieldError('currentPassword', 'required')) {
<mat-error>You <b>must</b> enter a current password.</mat-error>
}
</mat-form-field>

<!-- New Password -->
<mat-form-field appearance="fill" style="width: 100%;">
<mat-label>New Password</mat-label>
<input matInput type="password" formControlName="newPassword" autocomplete="off"
aria-label="New Password" />
@if (getFieldError('newPassword', 'required') ) {
<mat-error>You <b>must</b> enter a new password.</mat-error>
}
@if (getFieldError('newPassword', 'minlength') ) {
<mat-error>The new password <b>must</b> be at least 8 characters.</mat-error>
}
@if (getFieldError('newPassword', 'pattern') ) {
<mat-error>The new password <b>must</b> include at least one uppercase, one lowercase, one digit,
and one special character.</mat-error>
}
</mat-form-field>

<!-- Confirm Password -->
<mat-form-field appearance="fill" style="width: 100%;">
<mat-label>Re-enter New Password</mat-label>
<input matInput type="password" formControlName="confirmPassword" autocomplete="off"
aria-label="Confirm Password" />
<!-- Error 1: Required -->
<mat-error *ngIf="getFieldError('confirmPassword', 'required')">
You <b>must</b> confirm your password.
</mat-error>

<!-- Error 2: Minlength -->
<mat-error *ngIf="getFieldError('confirmPassword', 'minlength')">
The password <b>must</b> be at least 8 characters.
</mat-error>

<!-- Error 3: Must Match -->
<mat-error *ngIf="changePasswordForm.hasError('mustMatch')">
The new and confirmation password <b>must</b> match each other.
</mat-error>
</mat-form-field>
<!-- <mat-form-field appearance="fill" style="width: 100%;">
<mat-label>Re-enter New Password</mat-label>
<input matInput type="password" formControlName="confirmPassword" autocomplete="off"
aria-label="Confirm Password" />
@if (changePasswordForm.get('confirmPassword')?.hasError('required')) {
<mat-error>You <b>must</b> confirm your new password.</mat-error>
}
@if (changePasswordForm.get('confirmPassword')?.hasError('mustMatch')) {
<mat-error>The passwords <b>must</b> match.</mat-error>
}
</mat-form-field> -->
</div>

<!-- Buttons and Loading Spinner -->
<div fxLayout="row" fxLayout.sm="column" fxLayoutGap="10px">
<button mat-button type="button" [routerLink]="['/home']">Cancel</button>
<button class="changepwd" color="primary" type="submit"
[disabled]="changePasswordForm.invalid || isLoading">
<!-- <mat-icon aria-hidden="true">lock-reset</mat-icon> Change -->
<img src="assetsiconslock_reset.svg" alt="lock_reset" class="icons"> Change
</button>
<mat-progress-spinner *ngIf="isLoading" mode="indeterminate" diameter="40"></mat-progress-spinner>
</div>
</form>
</div>
</div>