CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Change password view enhancement to support and display password validations

Browse Source
This commit is contained in:
Jose Alberto Hernandez
2025-04-06 12:24:55 -05:00
parent f4f480ac64
commit 0dd32c853a
24 changed files with 352 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/change-password-dialog/change-password-dialog.component.html
+33 -61
View File
@@ -3,68 +3,40 @@
<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>
<mifosx-input-password
#password
formControlName="password"
label="{{ 'Password' | translateKey: 'inputs' }}"
></mifosx-input-password>
<div class="error">
<p *ngIf="changePasswordForm.get('password').errors?.['uppercase']">
{{ changePasswordForm.get('password').errors?.['uppercase'] | translateKey: 'inputs' }}
</p>
<p *ngIf="changePasswordForm.get('password').errors?.['number']">
{{ changePasswordForm.get('password').errors?.['number'] | translateKey: 'inputs' }}
</p>
<p *ngIf="changePasswordForm.get('password').errors?.['repeated']">
{{ changePasswordForm.get('password').errors?.['repeated'] | translateKey: 'inputs' }}
</p>
<p *ngIf="changePasswordForm.get('password').errors?.['specialChar']">
{{ changePasswordForm.get('password').errors?.['specialChar'] | translateKey: 'inputs' }}
</p>
<p *ngIf="changePasswordForm.get('password').errors?.['minlength']">
{{ 'Password minimun length must be' | translateKey: 'inputs' }} {{ minPasswordLength }}
</p>
</div>
<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>
<mifosx-input-password
#repeatPassword
formControlName="repeatPassword"
label="{{ 'Confirm Password' | translateKey: 'inputs' }}"
></mifosx-input-password>
</div>
<div class="error">
<p *ngIf="changePasswordForm.get('repeatPassword').errors?.['notequal']">
{{ 'Passwords do not match' | translateKey: 'inputs' }}
</p>
</div>
</form>
</div>
src/app/shared/change-password-dialog/change-password-dialog.component.scss
+8
View File
@@ -0,0 +1,8 @@
.error {
color: red;
}
mat-dialog-content {
min-width: 240px;
width: 240px;
}
src/app/shared/change-password-dialog/change-password-dialog.component.ts
+3 -9
View File
@@ -4,6 +4,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { UntypedFormBuilder, Validators, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
import { Subscription } from 'rxjs';
import { PasswordsUtility } from 'app/core/utils/passwords-utility';
import { environment } from 'environments/environment';
/**
* Change Password Dialog component.
@@ -14,6 +15,8 @@ import { PasswordsUtility } from 'app/core/utils/passwords-utility';
styleUrls: ['./change-password-dialog.component.scss']
})
export class ChangePasswordDialogComponent implements OnInit {
minPasswordLength: number = environment.minPasswordLength | 12;
/** Change Password Form */
changePasswordForm: any;
/** Password input field type. */
@@ -37,15 +40,6 @@ export class ChangePasswordDialogComponent implements OnInit {
this.createChangePasswordForm();
}
/**
* Toggles the visibility of the password input field.
*
* Changes the input type between 'password' and 'text'.
*/
togglePasswordVisibility(index: number) {
this.passwordInputType[index] = this.passwordInputType[index] === 'password' ? 'text' : 'password';
}
/** Change Password form */
createChangePasswordForm() {
this.changePasswordForm = this.formBuilder.group({