Added rules for a strong password

src/app/main/user/user-form/user-form.component.html

@@ -17,12 +17,12 @@
         <label for="password" class="label col-sm-3 form-control-label">Password</label>
         <div class="col-sm-9">
           <input nbInput id="password" placeholder="Password" type="password" formControlName="password"
-            autocomplete="user-password">
+            autocomplete="user-password" (ngModelChange)="onCustomerPasswordStrength($event)">
           <div *ngIf="password.invalid && (password.dirty || password.touched)">
             <div *ngIf="password.hasError('required')" class="caption status-danger ng-star-inserted"> Required</div>
-            <div *ngIf="password.hasError('minlength')" class="caption status-danger ng-star-inserted"> Must have at
-              least
-              {{password.getError('minlength')['requiredLength']}} characters.</div>
+            <div class="strength-bars" *ngFor="let item of feedbackArr">
+              {{item.label}} <i class="fa" [ngClass]="item.status?'fa-check text-success' : 'fa-times text-danger'"></i>
+            </div>
           </div>
         </div>
       </div>

src/app/main/user/user-form/user-form.component.scss

@@ -7,3 +7,10 @@
 .selector {
   width: fit-content;
 }
+.strength-bars {
+  background: rgb(225, 242, 246);
+  width: 30%;
+  padding-top: 10px;
+  padding-left: 15px;
+  color: rgb(0, 124, 173);
+}

src/app/main/user/user-form/user-form.component.ts

@@ -28,6 +28,7 @@ export class UserFormComponent implements OnInit {
   }
 
   title: String;
+  feedbackArr: Array<Object> = [];
 
   @Output() onSave = new EventEmitter<UserWithPassword>();
   @Output() onCancel = new EventEmitter<void>();
@@ -43,12 +44,12 @@ export class UserFormComponent implements OnInit {
   }
 
   prepareForm(user: User): void {
-    const passwordValidators: ValidatorFn[] = [Validators.minLength(8)];
+    const passwordValidators: ValidatorFn[] = [Validators.minLength(8), Validators.pattern(/[A-Z]/),
+    Validators.pattern(/[a-z]/), Validators.pattern(/[0-9]/), Validators.pattern(/[!@#$%*]/)];
 
     if (!this.editMode) {
       passwordValidators.push(Validators.required);
     }
-
     this.detailForm = this.formBuilder.group({
       identifier: [user.identifier, [Validators.required, Validators.minLength(3), Validators.maxLength(32), FimsValidators.urlSafe]],
       password: ['', passwordValidators],
@@ -79,4 +80,59 @@ export class UserFormComponent implements OnInit {
   fetchRoles(): void {
     this.store.dispatch({ type: SEARCH_ROLE });
   }
+
+  isLengthMet(password: string): boolean {
+    if (password.length >= 8) {
+      this.feedbackArr.push({'label': `Minimum 8 characters`, status: true});
+      return true;
+    } else {
+      this.feedbackArr.push({'label': `Minimum 8 characters`, status: false});
+      return false;
+    }
+  }
+  isSpecialCharMet(password: string): boolean {
+    if ( (/[!@#$%*]/).test(password) ) {
+      this.feedbackArr.push({'label': `One special characters`, status: true});
+      return true;
+    } else {
+      this.feedbackArr.push({'label': `One special characters`, status: false});
+      return false;
+    }
+  }
+  isNumberMet(password: string): boolean {
+    if ( (/[0-9]/).test(password) ) {
+      this.feedbackArr.push({'label': `One number`, status: true});
+      return true;
+    } else {
+      this.feedbackArr.push({'label': `One number`, status: false});
+      return false;
+    }
+  }
+  isSmallcaseMet(password: string): boolean {
+    if ( (/[a-z]/).test(password) ) {
+      this.feedbackArr.push({'label': `One smallcase character`, status: true});
+      return true;
+    } else {
+      this.feedbackArr.push({'label': `One smallcase character`, status: false});
+      return false;
+    }
+  }
+  isUppercaseMet(password: string): boolean {
+    if ( (/[A-Z]/).test(password) ) {
+      this.feedbackArr.push({'label': `One uppercase character`, status: true});
+      return true;
+    } else {
+      this.feedbackArr.push({'label': `One uppercase character`, status: false});
+      return false;
+    }
+  }
+
+  onCustomerPasswordStrength(data: any): void {
+    this.feedbackArr = [];
+    this.isLengthMet(data);
+    this.isNumberMet(data);
+    this.isSmallcaseMet(data);
+    this.isUppercaseMet(data);
+    this.isSpecialCharMet(data);
+  }
 }