Skip to content

To display the strength of the password with a visual feedback. PasswordStrengthMeter use zxcvbn to estimate the strength of the password and also provide a visual feedback with suggestions and warning messages.

License

Notifications You must be signed in to change notification settings

BenevidesLecontes/password-strength-meter

 
 

Repository files navigation

Password Strength Meter For angular 8

To display the strength of the password with a visual feedback.

Password Strength Meter use zxcvbn to estimate the strength of the password and also provide a visual feedback with suggestions and warning messages.

This lib was developed based on the following tutorial.

How then is password strength measured? Dropbox developed an algorithm for a realistic password strength estimator inspired by password crackers. This algorithm is packaged in a Javascript library called zxcvbn. In addition, the package contains a dictionary of commonly used English words, names and passwords.

Demo

See Demo Here

  <password-strength-meter [password]="password"></password-strength-meter>

Get Started

Step 1: Since this lib was depending upon the zxcvbn lib, install it first

npm install @contentpass/zxcvbn --save

Step 2: Install password-strength-meter

npm install @benevideschissanga/angular-password-strength-meter --save

Step 3: Import Password Strength Meter Module into your app module. Obs: Use forRoot(config) to pass any config to override messages or any zxcvbn config

....
import { PasswordStrengthMeterModule } from 'angular-password-strength-meter';

....

@NgModule({
    ...
    imports: [
        ....
        PasswordStrengthMeterModule
    ],
    ....
})
export class AppModule { }

Step 4: use the password-strength-meter component in your app.component.ts

  <password-strength-meter [password]="password"></password-strength-meter>

API

option bind type default description
password Input() string - password to calculate its strength
minPasswordLength Input() number 8 min length of password to calculate the strength
enableFeedback Input() boolean false to show/hide the suggestions and warning messages
colors Input() string[] ['darkred', 'orangered', 'orange', 'yellowgreen', 'green'] to overide the meter colors, password strength range is 0 - 4, for strength 0 equals first color in the array and so on
strengthChange Output() number - emits the strength of the provided password in number -> range 0 - 4

About

To display the strength of the password with a visual feedback. PasswordStrengthMeter use zxcvbn to estimate the strength of the password and also provide a visual feedback with suggestions and warning messages.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 62.4%
  • HTML 13.8%
  • CSS 12.3%
  • JavaScript 11.5%