ngx-material-password-strength v2.1.1
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
- strength score less than 20%
- strength score less than 40%
- 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):
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 forngx-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
- add an input element to your template with an appropriate ngx-material-password-strength's component
- 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">
- 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"
- 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)