@diama/password-strength-checker

password-strength-checker

An Angular library to check input password field strength and return invalid or valid statement with animated bar color.

this library has been built with no dependencies to provide an easy way to use it.

tested with karma and jasmine

Demo

Versions

Angular	version
>= 5.0.0 < 13.0.0	v1.x

Getting started

Step 1: Installing

NPM

npm install --save @diama/password-strength-checker

YARN

yarn add @diama/password-strength-checker

Step 2: Import the PasswordStrengthCheckerModule and angular FormsModule module and also ReactiveFormsModule for using it in reactive forms

import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {PasswordStrengthCheckerModule} from "password-strength-checker";

@NgModule({
  declarations: [AppComponent],
  imports: [
    PasswordStrengthCheckerModule,
    ReactiveFormsModule,
    FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Usage

Define options in your consuming component:

@Component({...})
export class ExampleComponent {
  password = new FormControl('', [Validators.required]);
  myRegex = /^\d+$/;
}

In template use password-strength-checker component with your options

<!--Using ng-option and for loop-->
<form>
  <div>
    <label for="password"> Password</label>
    <input type="password" id="password" [formControl]="password" autocomplete="off">
  </div>
  <password-strength-checker [requiredLength]="8" [password]="password.value" [regexPattern]="myRegex"></password-strength-checker>
</form>

API

Inputs

Input	Type	Default	Required	Description
password	string	``	yes	password value to evaluate strength
requiredStrength	number	8	no	a required min length of the password passed has input
barColors	string[]	['#FF0000', '#FF7700', '#0CC124']	no	update the bar color to display in UI, first color is for error output,second for password which match perfectly with required length but not with your regex pattern and the last for password which match perfectly with your standard defined
regexPattern	Regexp	/^[a-zA-Z]+$/	no	if you want more complexity , its check if password contain some characters that you will define with your regex
feedbacks	{errorText: string, mediumText: string, successText: string}	{ errorText: 'Must have at least 8 characters', mediumText: 'Add special characters or number', successText: 'Good password'}	no	to custom output message to show to the user