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.
Try out the demo on Stackblitz!
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
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);
}
}
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>
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"
}
}
For any type of contribution, please follow the instructions in CONTRIBUTION and read the Code of Conduct file too.