Skip to content
Measure your password strength powered by Angular Library
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
projects/ngx-pass-strength
.editorconfig
.gitignore
.travis.yml
CC.md
Contribution.md
LICENSE
README.md
angular.json
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

NGX Pass Strength

Build Status npm

npm

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)

You can’t perform that action at this time.