Now Playing Mario

    angular-password-strength-meter
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.1 • Public • Published

    CI npm version Coverage Status

    Password Strength Meter For Angular 14

    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.

    Need lib for Vue.js? Click here

    Demo

    See Demo Here

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

    Get Started

    Step 1: npm install

    npm install @zxcvbn-ts/core @zxcvbn-ts/language-en angular-password-strength-meter --save

    Step 2: Import Password Strength Meter Module into your app module

    ....
    import { PasswordStrengthMeterModule } from 'angular-password-strength-meter';
    
    ....
    
    @NgModule({
        ...
        imports: [
            ....
            PasswordStrengthMeterModule.forRoot()
        ],
        ....
    })
    export class AppModule { }

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

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

    Use custom zxcvbn options for the password strength meter

    You can override the default zxcvbn options by providing the PSM_CONFIG.

    Refer to the zxcvbn documentation for more information.

    ....
    import { PasswordStrengthMeterModule, PSM_CONFIG } from 'angular-password-strength-meter';
    import zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
    import zxcvbnEnPackage from '@zxcvbn-ts/language-en'
    
    ....
    
    @NgModule({
        ...
        imports: [
            ....
            PasswordStrengthMeterModule.forRoot()
        ],
        providers: [
          {
            provide: PSM_CONFIG,
            useValue: {
              translations: zxcvbnEnPackage.translations,
              graphs: zxcvbnCommonPackage.adjacencyGraphs,
              dictionary: {
                ...zxcvbnCommonPackage.dictionary,
                ...zxcvbnEnPackage.dictionary,
              },
            }
          }
        ],
        ....
    })
    export class AppModule { }

    Use custom password strength meter service

    You can override the default password strength meter service by providing the Custom Service class as follows.

    ....
    import { Injectable } from '@angular/core';
    import { IPasswordStrengthMeterService } from 'angular-password-strength-meter';
    
    @Injectable()
    export class CustomPsmServiceService extends IPasswordStrengthMeterService {
      score(password: string): number {
        // TODO - return score 0 - 4 based on password
        return 1;
      }
    
      scoreWithFeedback(password: string): {
        score: number;
        feedback: { warning: string; suggestions: string[] };
      } {
        // TODO - return score with feedback
        return { score: 1, feedback: { warning: '', suggestions: [] } };
      }
    }
    ....
    
    import { PasswordStrengthMeterModule } from 'angular-password-strength-meter';
    import { CustomPsmServiceService } from './custom-psm-service.service';
    
    
    @NgModule({
        ...
        imports: [
            ....
            PasswordStrengthMeterModule.forRoot({ serviceClass: CustomPsmServiceService })
        ],
        ....
    })
    export class AppModule { }

    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
    numberOfProgressBarItems Input() number 5 change the number to update the number of progress bar items
    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.

    Note - length of the colors array should match the number of progress bar items
    strengthChange Output() number - emits the strength of the provided password in number -> range 0 - 4

    Install

    npm i angular-password-strength-meter

    DownloadsWeekly Downloads

    3,431

    Version

    5.0.1

    License

    MIT

    Unpacked Size

    128 kB

    Total Files

    21

    Last publish

    Collaborators

    • antoantonyk