Post
Ask Question

How to Check Password Strength Meter in Angular 8

Introduction

 
In most applications, there is a field while registering to enter a valid password that should contain at least a digit a number and one special symbol. In this article, we are going to learn how to create a password strength bar which will show whether the entered password is weak, good, or strong.
 
Prerequisites
  • Basic knowledge of Angular
  • Visual Studio Code must be installed
  • Angular CLI must be installed
  • Node JS must be installed
Step 1
 
Lets create a new Angular project using the following NPM command:
  1. ng new passwordStrengthBar  
Step 2
 
Now, let's create a new component by using the following command:
  1. ng g c password-strength-bar   
Step 3
 
Now, open the password-strength-bar.component.html file and add the following code in the file:
  1. <div style="margin: 11px;" id="strength" #strength>  
  2.   <small>{{barLabel}}</small>  
  3.   <ul id="strengthBar">  
  4.       <li class="point" [style.background-color]="bar0"></li><li class="point" [style.background-color]="bar1"></li><li class="point" [style.background-color]="bar2"></li><li class="point" [style.background-color]="bar3"></li><li class="point" [style.background-color]="bar4"></li>  
  5.   </ul>  
  6. </div>  
Step 4
 
Now, open the password-strength-bar.component.ts file and add the following code in this file:
  1. import {Component, OnChanges, Input, SimpleChange} from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-passoword-strength-bar',  
  5.   templateUrl: './passoword-strength-bar.component.html',  
  6.   styleUrls: ['./passoword-strength-bar.component.css']  
  7. })  
  8. export class PassowordStrengthBarComponent implements OnChanges  {  
  9.   
  10.   @Input() passwordToCheck: string;  
  11.   @Input() barLabel: string;  
  12.   bar0: string;  
  13.   bar1: string;  
  14.   bar2: string;  
  15.   bar3: string;  
  16.   bar4: string;  
  17.   
  18.   private colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];  
  19.   
  20.   private static measureStrength(pass: string) {  
  21.       let score = 0;  
  22.       // award every unique letter until 5 repetitions  
  23.       let letters = {};  
  24.       for (let i = 0; i< pass.length; i++) {  
  25.       letters[pass[i]] = (letters[pass[i]] || 0) + 1;  
  26.       score += 5.0 / letters[pass[i]];  
  27.       }  
  28.       // bonus points for mixing it up  
  29.       let variations = {  
  30.       digits: /\d/.test(pass),  
  31.       lower: /[a-z]/.test(pass),  
  32.       upper: /[A-Z]/.test(pass),  
  33.       nonWords: /\W/.test(pass),  
  34.       };  
  35.   
  36.       let variationCount = 0;  
  37.       for (let check in variations) {  
  38.       variationCount += (variations[check]) ? 1 : 0;  
  39.       }  
  40.       score += (variationCount - 1) * 10;  
  41.       return Math.trunc(score);  
  42.   }  
  43.   
  44. private getColor(score: number) {  
  45.   let idx = 0;  
  46.   if (score > 90) {  
  47.     idx = 4;  
  48.   } else if (score > 70) {  
  49.     idx = 3;  
  50.   } else if (score >= 40) {  
  51.     idx = 2;  
  52.   } else if (score >= 20) {  
  53.     idx = 1;  
  54.   }  
  55.   return {  
  56.     idx: idx + 1,  
  57.     col: this.colors[idx]  
  58.   };  
  59. }  
  60.   
  61.   ngOnChanges(changes: {[propName: string]: SimpleChange}): void {  
  62.       var password = changes['passwordToCheck'].currentValue;  
  63.       this.setBarColors(5, '#DDD');  
  64.       if (password) {  
  65.           let c = this.getColor(PassowordStrengthBarComponent.measureStrength(password));  
  66.           this.setBarColors(c.idx, c.col);  
  67.       }  
  68.   }  
  69.   private setBarColors(count, col) {  
  70.       for (let _n = 0; _n < count; _n++) {  
  71.           this['bar' + _n] = col;  
  72.       }  
  73.   }  
  74.   
  75. }  
Step 5
 
Now, open the password-strength-bar.component.css file and add the following code:
  1. ul#strengthBar {  
  2.     display:inline;  
  3.     list-style:none;  
  4.     margin:0;  
  5.     margin-left:15px;  
  6.     padding:0;  
  7.     vertical-align:2px;  
  8. }  
  9. .point:last {  
  10.     margin:0 !important;  
  11. }  
  12. .point {  
  13.     background:#DDD;  
  14.     border-radius:2px;  
  15.     display:inline-block;  
  16.     height:5px;  
  17.     margin-right:1px;  
  18.     width:20px;  
  19. }  
Step 6
 
Now, open the app.component.html file and add the following code in this file:
  1. <h3>Password Strength Bar</h3>  
  2. <div class="container">  
  3.     <div class="row">  
  4.         <div class="col-md-8 col-md-offset-2">  
  5.   
  6.             <div class="panel panel-default">  
  7.                 <div class="panel-body">  
  8.                     <form class="form-horizontal" method="" action="">  
  9.   
  10.                         <div class="form-group">  
  11.                             <label class="col-md-4 control-label">Email</label>  
  12.                             <div class="col-md-6">  
  13.                                 <input type="email" class="form-control" name="email" value="">  
  14.                             </div>  
  15.                         </div>  
  16.                         <div class="form-group">  
  17.                             <label class="col-md-4 control-label">Password</label>  
  18.                             <div class="col-md-6">  
  19.                                 <input type="password" class="form-control"  
  20.                                     id="password" name="password" placeholder="Enter password"  
  21.                                     [(ngModel)]="account.password" #password="ngModel" minlength="5" maxlength="50"  
  22.                                     required>  
  23.                          
  24.                                 <app-passoword-strength-bar [passwordToCheck]="account.password" [barLabel]="barLabel">  
  25.                                 </app-passoword-strength-bar>  
  26.                             </div>  
  27.                         </div>  
  28.                     </form>  
  29.                 </div>  
  30.             </div>  
  31.         </div>  
  32.     </div>  
  33. </div>  
Step 7
 
Now, open the app.component.ts file and add the following code:
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent implements OnInit {  
  9.   public account = {  
  10.     password: null  
  11.   };  
  12.   public barLabel: string = "Password strength:";  
  13.   
  14.   constructor() { }  
  15.   
  16.   ngOnInit() {  
  17.   
  18.   }  
  19. }  
Step 8
 
Now, open the app.module.ts file and add the following code:
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { FormsModule } from '@angular/forms';  
  4. import { AppComponent } from './app.component';  
  5. import { PassowordStrengthBarComponent } from './passoword-strength-bar/passoword-strength-bar.component';  
  6.   
  7. @NgModule({  
  8.   declarations: [  
  9.     AppComponent,  
  10.     PassowordStrengthBarComponent  
  11.   ],  
  12.   imports: [  
  13.     BrowserModule,  
  14.     FormsModule,  
  15.   ],  
  16.   providers: [],  
  17.   bootstrap: [AppComponent]  
  18. })  
  19. export class AppModule { }  
Step 9
 
Now let's run the project by using 'npm start' or 'ng serve' command and check the output.
 
How To Check Password Strength Meter In Angular 8 
How To Check Password Strength Meter In Angular 8 
How To Check Password Strength Meter In Angular 8 
How To Check Password Strength Meter In Angular 8 
 

Summary

 
In this article, we learned how we can create a password strength bar in Angular 8 applications.
 
Please give your valuable feedback/comments/questions about this article. Please let me know if you liked and understood this article and how I can improve upon it.


Similar Articles