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:

ng new passwordStrengthBar

Step 2

Now, let's create a new component by using the following command:

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:

<div style="margin: 11px;" id="strength" #strength>
<small>{{barLabel}}</small>
<ul id="strengthBar">
<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>
</ul>
</div>

Step 4

Now, open the password-strength-bar.component.ts file and add the following code in this file:

import {Component, OnChanges, Input, SimpleChange} from '@angular/core';
@Component({
selector: 'app-passoword-strength-bar',
templateUrl: './passoword-strength-bar.component.html',
styleUrls: ['./passoword-strength-bar.component.css']
})
export class PassowordStrengthBarComponent implements OnChanges {
@Input() passwordToCheck: string;
@Input() barLabel: string;
bar0: string;
bar1: string;
bar2: string;
bar3: string;
bar4: string;
private colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
private static measureStrength(pass: string) {
let score = 0;
// award every unique letter until 5 repetitions
let letters = {};
for (let i = 0; i< pass.length; i++) {
letters[pass[i]] = (letters[pass[i]] || 0) + 1;
score += 5.0 / letters[pass[i]];
}
// bonus points for mixing it up
let variations = {
digits: /\d/.test(pass),
lower: /[a-z]/.test(pass),
upper: /[A-Z]/.test(pass),
nonWords: /\W/.test(pass),
};
let variationCount = 0;
for (let check in variations) {
variationCount += (variations[check]) ? 1 : 0;
}
score += (variationCount - 1) * 10;
return Math.trunc(score);
}
private getColor(score: number) {
let idx = 0;
if (score > 90) {
idx = 4;
} else if (score > 70) {
idx = 3;
} else if (score >= 40) {
idx = 2;
} else if (score >= 20) {
idx = 1;
}
return {
idx: idx + 1,
col: this.colors[idx]
};
}
ngOnChanges(changes: {[propName: string]: SimpleChange}): void {
var password = changes['passwordToCheck'].currentValue;
this.setBarColors(5, '#DDD');
if (password) {
let c = this.getColor(PassowordStrengthBarComponent.measureStrength(password));
this.setBarColors(c.idx, c.col);
}
}
private setBarColors(count, col) {
for (let _n = 0; _n < count; _n++) {
this['bar' + _n] = col;
}
}
}

Step 5

Now, open the password-strength-bar.component.css file and add the following code:

ul#strengthBar {
display:inline;
list-style:none;
margin:0;
margin-left:15px;
padding:0;
vertical-align:2px;
}
.point:last {
margin:0 !important;
}
.point {
background:#DDD;
border-radius:2px;
display:inline-block;
height:5px;
margin-right:1px;
width:20px;
}

Step 6

Now, open the app.component.html file and add the following code in this file:

<h3>Password Strength Bar</h3>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal" method="" action="">
<div class="form-group">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control"
id="password" name="password" placeholder="Enter password"
[(ngModel)]="account.password" #password="ngModel" minlength="5" maxlength="50"
required>
<app-passoword-strength-bar [passwordToCheck]="account.password" [barLabel]="barLabel">
</app-passoword-strength-bar>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

Step 7

Now, open the app.component.ts file and add the following code:

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public account = {
password: null
};
public barLabel: string = "Password strength:";
constructor() { }
ngOnInit() {
}
}

Step 8

Now, open the app.module.ts file and add the following code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { PassowordStrengthBarComponent } from './passoword-strength-bar/passoword-strength-bar.component';
@NgModule({
declarations: [
AppComponent,
PassowordStrengthBarComponent
],
imports: [
BrowserModule,
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
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

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.