Estimate the strength of the password using zxcvbn, and display a visual password strength bar and feedback with suggestions and warning messages to help choose better passwords.
Install zxcvbn (as the lib depends on) and NgxPwdStrength
via npm:
npm install zxcvbn3 ngx-pwd-strength --save
Import NgxPwdStrength Module into the app module
import {APP_INITIALIZER, NgModule} from '@angular/core';
import {NgxPwdStrengthModule, NgxPwdStrengthService} from "ngx-pwd-strength";
// By default password strenght suggestions is enabled, use this config to disable it
function initializePwdStrength(pwdStrength: NgxPwdStrengthService) {
return () =>
pwdStrength.init({
enableFeedback: false
});
}
@NgModule({
imports: [
NgxPwdStrengthModule
],
providers: [
{
provide: APP_INITIALIZER,
useFactory: initializePwdStrength,
multi: true,
deps: [NgxPwdStrengthService]
}
]
})
export class AppModule { }
Add ngxPwdStrength
directive to inputs of type = password
<input type="password" ngxPwdStrength name="password" placeholder="Password">