ngx-password-strength-bar

This an Angular 16+ implementation of ng2-password-strength-bar.

Install in your project

npm install ngx-password-strength-bar --save

Run the example application locally

• git clone https://github.com/yutamago/ngx-password-strength-bar.git
• cd ngx-password-strength-bar
• npm install
• npm run build ngx-password-strength-bar
• npm run start ngx-password-strength-bar-app # Open browser to http://localhost:4200

Run the tests locally

• Same as above, except for the last step do:
• npm run test ngx-password-strength-bar-app # Will run the tests once with the Firefox browser

Using the Component

Add Component to Module imports

import { NgxPasswordStrengthBarModule } from 'ngx-password-strength-bar';
//...
@NgModule({
 //...
   declarations: [
        AppComponent,
        //...
    ],
    imports: [
      BrowserModule,
      FormsModule,
      NgxPasswordStrengthBarModule,
      //...
 //...
})
export class AppModule {}

Add Component to your Application

@Component({
    selector: 'my-app',
    template: `
  <h3>Angular 2 Password Strength Bar</h3>
    <div>
       <form name="myForm" novalidate>
            <input type="password" class="form-control" id="password" name="password" placeholder="Enter password"
                 [(ngModel)]="account.password" #password="ngModel"
                 minlength="5" maxlength="50" required>
            <ngx-password-strength-bar
                [passwordToCheck]="account.password"
                [barLabel]="barLabel"
                [customThresholds]="thresholds"
                [barColors]="myColors">
            </ngx-password-strength-bar>
        </form>
    </div>
  `,
})

export class App {
    public account = {
        password: <string>null
    };
    public barLabel: string = "Password strength:";
    public myColors = ['#DD2C00', '#FF6D00', '#FFD600', '#AEEA00', '#00C853'];
    public thresholds = [90, 75, 45, 25];
    // ...
}

Parameters

<ngx-password-strength-bar
  [passwordToCheck]="account.password"
  [barLabel]="barLabel"
  [barColors]="myColors"
  [baseColor]="baseColor"
  [strengthLabels]="strengthLabels"
  [customThresholds]="thresholds"
  (onStrengthChanged)="strengthChanged($event)">
</ngx-password-strength-bar>

Input Parameters

passwordToCheck (type: string)

• The variable containing the password to check.

barLabel (type: string)

• The variable containing the label displayed to the left of the bar.

barColors (type: Array<string>, optional)

• The variable can be used to define custom bar colors.
• This must be an Array of 5 strings.
• Lowest security level picks colors[0], ..., the highest picks colors[4].
• If not specified, the default is: ['#F00', '#F90', '#FF0', '#9F0', '#0F0']

baseColor (type: string, optional)

• The variable can be used to define the color of bars when no strength is applied (i.e. when there is no password text).
• If not specified, the default is: '#DDD'. For example:

public baseColor = '#FFF';

strengthLabels (type: Array<string>, optional)

• The variable can be used to define a strength label that will be appended to the colored bars.
• This must be an Array of 5 strings. For example:

public strengthLabels = ['(Useless)', '(Weak)', '(Normal)', '(Strong)', '(Great!)'];

customThresholds (type: Array<number>, optional)

• The variable can be used to define custom strength algorithm thresholds.
• This must be an Array of 4 integers. See the source code for details on how these values are used.
• If not specified, the default is: [90, 70, 40, 20]

Output Parameters

onStrengthChanged(strength: number) optional

• Event triggered when the password changes.
• Takes a single number parameter (the new password strength with value 0 to 4).

strengthChanged(strength: number) {
  this.strength = strength;
}

License

MIT