ngx-material-password-strength - Material password strength meter to indicate how secure is the provided password - Angular v6 supported

,

This project has been moved to @angular-material-extensions/password-strength

Demo

View all the directives in action at https://anthonynahas.github.io/ngx-material-password-strength

Library's components

• <ngx-material-password-strength> used to calculate and display the strength of a provided password

1. strength score less than 20%

1. strength score less than 40%

1. strength score less than 100%

• <ngx-material-password-strength-info> used to display more information about the strength of a provided password

Requirements (peer dependencies):

• angular animations
• angular forms
• angular cdk
• angular material
• angular material theme

npm i @angular/cdk @angular/material @angular/animations 

Dependencies

• Angular (requires Angular 2 or higher, tested with 6.0.4)

Installation

Install above dependencies via npm.

Now install ngx-material-password-strength via:

npm install --save ngx-material-password-strength

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for ngx-material-password-strength:

map: {
  'ngx-material-password-strength': 'node_modules/ngx-material-password-strength/bundles/ngx-material-password-strength.umd.js',
}

Once installed you need to import the main module:

import { NgxMaterialPasswordStrengthModule } from 'ngx-material-password-strength';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgxMaterialPasswordStrengthModule .forRoot()):

import { NgxMaterialPasswordStrengthModule } from 'ngx-material-password-strength';
 
@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgxMaterialPasswordStrengthModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import NgxMaterialPasswordStrengthModule:

import { NgxMaterialPasswordStrengthModule } from 'ngx-material-password-strength';
 
@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgxMaterialPasswordStrengthModule, ...], 
})
export class OtherModule {
}

API

<ngx-material-password-strength> used to calculate and display the strength of a provided password

<ngx-material-password-strength-info> used to display more information about the strength of a provided password

Documentation

Usage

add the ngx-material-password-strength element to your template:

<ngx-material-password-strength
            [password]="password.value">
          </ngx-material-password-strength>

This will display only the material password strength meter in form of a progress without any input fields or similar.

In the following example, we integration a material input container with ngx-material-password-strength 's component.

<div>
  <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
              <mat-label>Password</mat-label>
              <input matInput #password
                     [type]="inputType"
                     required
                     placeholder="Password">
              <mat-hint align="end" aria-live="polite">
                {{password.value.length}} / 25
              </mat-hint>
            </mat-form-field>
  
            <ngx-material-password-strength #passwordComponent
                                            (onStrengthChanged)="onStrengthChanged($event)"
                                            [password]="password.value">
            </ngx-material-password-strength>
     </div>

learn more about mat-form-field

Example of how to use the emitted strength of the password in your template

<div fxLayout="row" fxLayoutGap="10px">
                <div *ngIf="passwordComponent.strength === 100; then done else error">
                </div>
                <ng-template #done>
                  <mat-icon color="primary">done</mat-icon>
                </ng-template>
                <ng-template #error>
                  <mat-icon color="warn">error</mat-icon>
                </ng-template>
                <div>
                  <p>Password's strength = {{passwordComponent.strength}} %100</p>
                </div>
              </div>

Client Side password's validation using a built in angular formController

1. add an input element to your template with an appropriate ngx-material-password-strength's component
2. hold a reference of the ngx-material-password-strength's component by adding passwordComponentWithValidation (or whatever you want) inside the element

e.g:

 <ngx-material-password-strength #passwordComponentWithValidation
                                  [password]="passwordWithValidation.value">

1. bind the form controller of the ngx-material-password-strength to the input element

• you can access the form controller of ngx-material-password-strength using the chile view --> passwordComponentWithValidation.passwordFormControl
• bind the form controller to an input element --> [formControl]="passwordComponentWithValidation.passwordFormControl"

1. Full example - see below

<div>
  <mat-form-field appearance="outline" style="width: 100%">
    <mat-label>Password</mat-label>
    <input matInput #passwordWithValidation
           [type]="inputType"
           required
           [formControl]="passwordComponentWithValidation.passwordFormControl"
           placeholder="Password">
    <mat-hint align="end" aria-live="polite">
      {{passwordWithValidation.value.length}} / 25
    </mat-hint>
    <mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('required')">
      Password is required
    </mat-error>
    <mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('pattern')">
      Password is not valid
    </mat-error>
  </mat-form-field>
  <ngx-material-password-strength #passwordComponentWithValidation
                                  (onStrengthChanged)="onStrengthChanged($event)"
                                  [password]="passwordWithValidation.value">
  </ngx-material-password-
  <!--Password's strength info-->
  <ngx-material-password-strength-info
    [passwordComponent]="passwordComponentWithValidation">
  </ngx-material-password-stren
</div>

this will looks like -->

Please checkout the full documentation here or follow the official tutorial

Run Demo App Locally

• clone this repo by running

$ git clone https://github.com/AnthonyNahas/ngx-material-password-strength.git

• link the ngx-material-password-strength package

$ gulp link

use gulp locally

$ npx gulp link

for some mac os users, you may use the sudo command with gulp use gulp with sudo

$ sudo gulp link

or locally

$ sudo npx gulp link

• navigate to the demo app directory

$ cd demo

• install the dependencies

$ npm i

• run/start/serve the app

$ npm run start

or

$ ng serve --open

• the app is now hosted by http://localhost:4200/

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

Other Angular Libraries

• ngx-material-password-strength
• ngx-material-pages
• @angular-material-extensions/contacts
• @angular-material-extensions/faq
• @angular-material-extensions/combination-generator

Support

Drop an email to: Anthony Nahas and I will help you!

License

Copyright (c) 2018 anthonynahas. Licensed under the MIT License (MIT)