Merge pull request #2354 from alberto-art3ch/fix/user_change_password_dialog

fix: Change password dialog password validation issue

src/app/shared/change-password-dialog/change-password-dialog.component.html

@@ -5,7 +5,18 @@
     <div fxLayout="column">
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
-        <input matInput formControlName="password" type="password" />
+        <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>
@@ -36,7 +47,18 @@
 
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
-        <input matInput formControlName="repeatPassword" type="password" />
+        <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>

src/app/shared/change-password-dialog/change-password-dialog.component.ts

@@ -16,6 +16,11 @@ import { PasswordsUtility } from 'app/core/utils/passwords-utility';
 export class ChangePasswordDialogComponent implements OnInit {
   /** Change Password Form */
   changePasswordForm: any;
+  /** Password input field type. */
+  passwordInputType: string[] = [
+    'password',
+    'password'
+  ];
 
   /**
    * @param {MatDialogRef} dialogRef Component reference to dialog.
@@ -32,6 +37,15 @@ 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({