Post
Ask Question

Password Strength in Angular

Introduction

 
In this article, we will learn about a form with a password input field. We will then add a password strength checker. Please follow the below steps.
 
Password Restrictions
  1. Must be minimum 6 character
  2. Must be a at least one uppercase
  3. Must be a at least one lowercase
  4. Must be at least one special character
  5. Must be at least one number
We will validate the above rules using a Regular Expression. 
 
Step 1
 
Let's create an Angular app with the following command:
 
Password Strength In Angular 
 
Step 2
 
Open app.module.ts file and add the import of reactiveform.
  1. import { ReactiveFormsModule } from '@angular/forms';  
After then add the reactiveformsmodule to imports the array.
  1.   imports: [  
  2.     ReactiveFormsModule,  
  3. ],   
Step 3
 
We can use the template-driven form validate. Now open the app.component.ts file and add the following code.
  1. <form >  
  2.    <div class="form-group">  
  3.        <input type="password" class="form-control"  autocomplete="off" placeholder="Password">  
  4.    </div>  
  5. </form>  
Step 4
 
We are using reactive form validation in Angular, so we need to add formgroup property and formcontrolname in the input field .
  1. <form [formGroup]="passwordform">  
  2.  </form>  
 We also add the formcontrolname in input filed.
  1. formControlName="chkpassword"  
Step 5
 
Next, we need to open then app.componet.ts file and add the following reference file.
  1. import { FormGroup, FormBuilder, Validators } from '@angular/forms';   
  • The formgroup used the state of formcontrol elements .
  • The Formbuilder has a new helper class called formbuilder.
  • The validators some set of built validators to be used.
Step 6
 
We need add to the construtor and ngOnInit methods.
  1. ngOnInit()  
  2.  {  
  3.    this.passwordform = this.form.group({  
  4.      chkpassword: ['', Validators.required],  
  5.  });  
Step 7
 
Next, we can create a child component to be used for some bars and indicate the strength of the password. The bars will automatically update to different colors. Create a component for the following npm command:
 
Ng g c password
 
This command automatically adds to app.module.ts file
 
Step 8
 
We can open the passwordcheck.component.html file and add the following code:
  1. <div class="strength">  
  2.     <ul class="barlength">  
  3.       <li class="checker" [style.background-color]="length0"></li>  
  4.       <li class="checker" [style.background-color]="length1"></li>  
  5.       <li class="checker" [style.background-color]="length2"></li>  
  6.       <li class="checker" [style.background-color]="length3"></li>  
  7.     </ul>  
  8.     <br>  
  9.     <p style="font-size: 15px;">{{message}}</p>  
  10.   </div>  
Step 9
 
Next, we can open the passwordcheck.component.ts to add the property file.
  1. length0: string;  
  2.   length1: string;  
  3.   length2: string;  
  4.   length3: string;  
  5.   message=''  
Step 10
 
Go to app.component.html page add the passwordcheck child component by using the component selector.
  1. <app-password></app-password>   
Step 11
 
Let's open the passwordcheck.component.ts file and create a input property called passwordcheck
  1. @Input() public passwordCheck: string;  
Add output for strength
  1. @Output() Strength = new EventEmitter<boolean>()  
Step 12
 
Create an array colors to be displayed the bars.
  1. private colors = ['red', 'darkorange', 'green', 'darkgreen'];   
Now create a method for check the password strength. Add the following code.
  1. private static Strengths(p) {  
  2.     let checklen = 0;  
  3.     const regex = /[$-/:-?{-~!"^_@`\[\]]/g;  
  4.   
  5.     const lowerLetters = /[a-z]+/.test(p);  
  6.     const upperLetters = /[A-Z]+/.test(p);  
  7.     const numbers = /[0-9]+/.test(p);  
  8.     const symbols = regex.test(p);  
  9.   
  10.     const flags = [lowerLetters, upperLetters, numbers, symbols];  
  11.   
  12.     let Passwordmaches = 0;  
  13.     for (const flag of flags) {  
  14.       Passwordmaches += flag === true ? 1 : 0;  
  15.     }  
  16.   
  17.     checklen += 2 * p.length + ((p.length >= 10) ? 1 : 0);  
  18.     checklen += Passwordmaches * 10;  
  19.   
  20.     //Check length  
  21.     checklen = (p.length <= 6) ? Math.min(checklen, 3) : checklen;  
  22.   
  23.   
  24.     checklen = (Passwordmaches === 1) ? Math.min(checklen, 10) : checklen;  
  25.     checklen = (Passwordmaches === 2) ? Math.min(checklen, 20) : checklen;  
  26.     checklen = (Passwordmaches === 3) ? Math.min(checklen, 30) : checklen;  
  27.     checklen = (Passwordmaches === 4) ? Math.min(checklen, 40) : checklen;  
  28.   
  29.     return checklen;  
  30.   }  
Step 13
 
The next step is to implement ngonchanges, so add the following code.
  1. ngOnChanges(changes: { [propName: string]: SimpleChange }): void {  
  2.    debugger;   
  3.     const password = changes.passwordCheck.currentValue;  
  4.     this.setBarColors(4, '#DDD');  
  5.     if (password) {  
  6.       const c = this.getColor(PasswordComponent.Strengths(password));  
  7.       this.setBarColors(c.idx, c.col);  
  8.   
  9.       const pwdStrength = PasswordComponent.Strengths(password);  
  10.   
  11.       if(pwdStrength>=30)  
  12.       {  
  13.       this.Strength.emit(true)  
  14.       }  
  15.       else  
  16.       {  
  17.         this.Strength.emit(false)  
  18.       }  
Step 14
 
Inside of the if statement in the ngonchanges, add to switch statements.
  1. switch (c.idx) {  
  2.         case 1:  
  3.           this.message = 'Weak'+'(Ex:Hari@12345)';  
  4.           break;  
  5.         case 2:  
  6.           this.message = 'Average' +'(Ex:Hari@12345)';  
  7.           break;  
  8.         case 3:  
  9.           this.message = 'Good' +'(Ex:Hari@12345)';  
  10.           break;  
  11.         case 4:  
  12.           this.message = 'Strong';  
  13.           break;  
  14.       }  
  15.     } else {  
  16.       this.message = '';  
  17.     }  
  18.   }  
  19.   
  20.   private getColor(s) {  
  21.     let idx = 0;  
  22.     if (s <= 10) {  
  23.         idx = 0;  
  24.     } else if (s <= 20) {  
  25.         idx = 1;  
  26.     } else if (s <= 30) {  
  27.         idx = 2;  
  28.     } else if (s <= 40) {  
  29.         idx = 3;  
  30.     } else {  
  31.         idx = 4;  
  32.     }  
  33.     return {  
  34.         idx: idx + 1,  
  35.         col: this.colors[idx]  
  36.     };  
  37.   }  
  38.   
  39.   private setBarColors(count, col) {  
  40.     for (let n = 0; n < count; n++) {  
  41.         this['length' + n] = col;  
  42.     }  
  43.   }  
Step 15
 
Next, we will open the app.component.html file and add the following code:
  1. <app-password  
  2.        [passwordCheck]="passwordform.value.password"  
  3.        (Strength)="passwordValid($event)"  
  4.   ></app-password>  

Summary

 
In this article, we have learned how to add a child component using selector, @input and @output decoders for component interaction.


Similar Articles