Building a password strength meter
For anyone who haven't known about zxcvbn library, it's a password strength estimator inspired by password crackers developed by Dropbox. It can recognize and weighs 30k common passwords. For more information about this library, you can refer to its official page.
Using the PasswordStrength plugin, it's quite easy for us to see how strong a given password is:
onValidated callback is executed after zxcvbn calculates the password's score which is passed as
It is an integer number between 0 and 4 indicating the strength level:
|0||Too guessable: risky password|
|1||Very guessable: protection from throttled online attacks|
|2||Somewhat guessable: protection from unthrottled online attacks|
|3||Safely unguessable: moderate protection from offline slow-hash scenario|
|4||Very unguessable: strong protection from offline slow-hash scenario|
score value, we can show a meter to let user know how strong password is.
If your form uses one of the following plugin, you can use the framework progress bar component as listed in the table below: