/ui-password-strength

Widget to give feedback to user about their password strength, based on zxcvbn.

Primary LanguageJavaScriptMIT LicenseMIT

Password strength

Widget to give feedback to user about their password strength.

Preview

password strength is 0 out of 4 password strength is 1 out of 4 password strength is 2 out of 4 password strength is 3 out of 4 password strength is 4 out of 4

Requirements

Usage

  1. Install zxcvbn

     npm install --save zxcvbn

  2. Import the SCSS in your main stylesheet (or link to the CSS):

     @import "password-strength";

  3. add the HTML code from ./password-strength.html to your form ;

  4. add the JS to load zxcvbn asynchronously and the script to estimate password strength or your gulp :

     <script src="zxcvbn-async.js"></script>
 <script src="password-strength.js"></script>

Notes

Use the oninput attribute to watch the <input> as advice by MDN change event :

Unlike the input event, the change event is not necessarily fired for each change to an element's value.