NGX Pass Strength

This is a small library I created which lets you measure password strength and also checks it against Have I Been Pwned APIs created by Troy Hunt to see if is found in a breach before or not.

Demo

Try out the demo on Stackblitz!

Install

npm i ngx-pass-strength --save

Since npm doesn't install the peer dependencies automatically, you will need to install sha1 npm package which is needed to calculate the password hash:

npm i sha1 --save

Setup

You will need to import NgxPassStrengthModule into your application module. Then use <ngx-pass-strength> component for your password field.

Also do not forget to import HttpClientModule as well since it's required to make the HTTP call to the HIBP API.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { NgxPassStrengthModule } from 'ngx-pass-strength';
 
@NgModule({
  imports:      [ 
    BrowserModule, 
    FormsModule,
    NgxPassStrengthModule,
    HttpClientModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

After this you can use the component in your form or even outside if you prefer.

<form>
    <input class="form-control" type="password" name="password" [(ngModel)]="password"  minlength="5" maxlength="50" required />
    <ngx-pass-strength [passwordToCheck]="password"></ngx-pass-strength>
</form>

If you are using reactive forms you can use the form control to bind to the passwordToCheck. The component also gets a callback to give you the strength changes when the password is updated.

Note: This callback is updated on every change to the password whereas API is only called when the user hasn't typed for a minimum of 1000ms. This is to prevent many calls to the API.

<ngx-pass-strength [passwordToCheck]="password" (onStrengthChanged)="countChange($event)"></ngx-pass-strength>

And in your component:

export class AppComponent  {
  countChange($event) {
    console.log($event);
  }
}

Customisation

You can customise the font family and label if you would like to. Simply pass them as inputs.

<ngx-pass-strength [passwordToCheck]="password" (onStrengthChanged)="countChange($event)" [fontFamily]="'Open Sans'"></ngx-pass-strength>

And you can change the label too.

<ngx-pass-strength [passwordToCheck]="password" (onStrengthChanged)="countChange($event)" [barLabel]="'Strength'"></ngx-pass-strength>

Development

Run locally

This project uses [Angular CLI] as base. However if you want to run the library you need to have an application and reference the package. To do so, simply package the library first using:

npm run package

And then in your application add a reference to the generated package to your package.json like a normal package and run npm i.

{
    ...,
    "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "ngx-pass-strength": "file:../angular-libs/dist/ngx-pass-strength/ngx-pass-strength-0.0.2.tgz",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "sha1": "^1.1.1",
    "zone.js": "~0.8.26"
  }
}
 

Contribute

For any type of contribution, please follow the instructions in CONTRIBUTION and read the Code of Conduct file too.

Author

Yaser Adel Mehraban (yashints)

• Website
• Twitter
• GitHub