Miss any of our Open RFC calls?Watch the recordings here! »

This package has been deprecated

Author message:

ngx-material-password-strength has been renamed to @angular-material-extensions/password-strength. Please update your dependencies

ngx-material-password-strength

2.1.1 • Public • Published

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

npm version, npm Join the chat at https://gitter.im/angular-material-extensions/Lobby Coverage Status dependency Status devDependency Status Greenkeeper Badge license

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

ngx-material-password-strength

ngx-material-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%

ngx-material-password-strength score less than 20%

  1. strength score less than 40%

ngx-material-password-strength score less than 40%

  1. strength score less than 100%

ngx-material-password-strength score less than 100%

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

ngx-material-password-strength's info


Requirements (peer dependencies):

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

option bind type default description
password Input() string - the password to calculate its strength
externalError Input() boolean false used to change the color of the password to warn if an external error occurs
onStrengthChanged Output() number - emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100%

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

option bind type default description
passwordComponent Input() PasswordStrengthComponent - the password component used in the template in order to display more info related to the 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 -->

ngx-material-password-strength

Please checkout the full documentation here or follow the official tutorial

Run Demo App Locally

$ 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

Support

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


License

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

Install

npm i ngx-material-password-strength

DownloadsWeekly Downloads

24

Version

2.1.1

License

MIT

Unpacked Size

132 kB

Total Files

18

Last publish

Collaborators

  • avatar