How to Check Password Strength meter in Angular 8

Introduction

In most of the applications there is a field while registering to enter a valid password which should contains at least a digit a number and one special symbol so here in this article we are going to learn how to create a password strength bar which will show every time after entering the password that is that entered password is week or good or strong.

Prerequisite

• 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 password-strength-bar.component.html file and add the following code in this 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 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 password-strength-bar.component.css file and add the following code in this file.

 

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 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 app.component.ts file and add the following code in this file.

 

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 app.module.ts file and add the following code in this file.

 

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

Let's copy the below code and paste it to app.component.html.

 

 

Step 10

Now let's run the project, by using 'npm start' or 'ng serve' command and check the output.

 

 

 

 

 

 

 

 

 

Summary

In this article, I have discussed how we can copy any text to the clipboard and paste not only the text, but also the current date and time 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 could improve upon it.