Nunjucks Powers Mozilla

    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
    TypeScript icon, indicating that this package has built-in type declarations

    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

    14

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    132 kB

    Total Files

    18

    Last publish

    Collaborators

    • anthonynahas