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.
;;;;;;
After this you can use the component in your form or even outside if you prefer.
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.
And in your component:
Customisation
You can customise the font family and label if you would like to. Simply pass them as inputs.
And you can change the label too.
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
.
Contribute
For any type of contribution, please follow the instructions in CONTRIBUTION and read the Code of Conduct file too.