fix login form component with password toggle (#2263)

src/app/login/login-form/login-form.component.html

@@ -21,8 +21,8 @@
       *ngIf="loginForm.controls.password.value && !loading"
       matSuffix
       mat-icon-button
-      (mousedown)="passwordInputType = 'text'"
+      (mousedown)="togglePasswordVisibility()"
-      (mouseup)="passwordInputType = 'password'"
+      (mouseup)="togglePasswordVisibility()"
     >
       <fa-icon *ngIf="passwordInputType === 'password'" icon="eye"></fa-icon>
       <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
@@ -36,6 +36,8 @@
     'labels.inputs.Remember me' | translate
   }}</mat-checkbox>
 
+  <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+
   <button mat-raised-button color="primary" fxFlexAlign="center" class="login-button" [disabled]="!loginForm.valid">
     {{ 'labels.buttons.Login' | translate }}
     <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>

src/app/login/login-form/login-form.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 /** rxjs Imports */
 import { finalize } from 'rxjs/operators';
@@ -18,9 +18,9 @@ import { AuthenticationService } from '../../core/authentication/authentication.
 })
 export class LoginFormComponent implements OnInit {
   /** Login form group. */
-  loginForm: UntypedFormGroup;
+  loginForm: FormGroup;
   /** Password input field type. */
-  passwordInputType: string;
+  passwordInputType: string = 'password';
   /** True if loading. */
   loading = false;
 
@@ -29,7 +29,7 @@ export class LoginFormComponent implements OnInit {
    * @param {AuthenticationService} authenticationService Authentication Service.
    */
   constructor(
-    private formBuilder: UntypedFormBuilder,
+    private formBuilder: FormBuilder,
     private authenticationService: AuthenticationService
   ) {}
 
@@ -40,7 +40,6 @@ export class LoginFormComponent implements OnInit {
    */
   ngOnInit() {
     this.createLoginForm();
-    this.passwordInputType = 'password';
   }
 
   /**
@@ -63,6 +62,16 @@ export class LoginFormComponent implements OnInit {
       .subscribe();
   }
 
+  /**
+   * Toggles the visibility of the password input field.
+   *
+   * Changes the input type between 'password' and 'text'.
+   */
+
+  togglePasswordVisbility() {
+    this.passwordInputType = this.passwordInputType === 'password' ? 'text' : 'password';
+  }
+
   /**
    * TODO: Decision to be taken on providing this feature.
    */
@@ -71,8 +80,9 @@ export class LoginFormComponent implements OnInit {
   }
 
   /**
-   * Creates login form.
+   * Creates login form with validation rules.
    */
+
   private createLoginForm() {
     this.loginForm = this.formBuilder.group({
       username: [
@@ -81,9 +91,28 @@ export class LoginFormComponent implements OnInit {
       ],
       password: [
         '',
-        Validators.required
+        [
+          Validators.required,
+          Validators.minLength(8)]
       ],
       remember: false
     });
   }
+
+  /**
+   * Returns the appropriate error message for the specified form control.
+   *
+   * @param {string} controlName - The name of the form control.
+   * @returns {string} - The error message.
+   */
+
+  getErrorMessage(controlName: string): string {
+    const control = this.loginForm.get(controlName);
+    if (control?.hasError('required')) {
+      return 'This field is required';
+    } else if (control?.hasError('minlength')) {
+      return `Minimum length is ${control.errors?.minlength.requiredLength}`;
+    }
+    return '';
+  }
 }