strengthify

Combine jQuery and zxcvbn to create a password strength meter.

How to use

Add following wrapper to your document - preferably nearby the password field.

<div class="strengthify-wrapper"></div>

Add jquery (tested with 1.10.0), jquery.strengthify.js and strengthify.css to your document.

<script src="jquery-1.10.0.min.js"></script>
<script src="jquery-tipsy.js"></script>
<script src="jquery.strengthify.js"></script>
<link rel="stylesheet" href="strengthify.css" type="text/css">

Because zxcvbn is really heavy-weigth it will be loaded asynchronous from zxcvbn/zxcvbn.js, but this can be configured with an optional parameter.

Then call .strengthify on the password input field.

$('#password-field').strengthify()

That's it. Now the password strength meter will be updated on each keystroke.

Configuration

The path and the title of the different strength categories can be configured with the first parameter of .strengthify.

Default:

{
  "zxcvbn": "zxcvbn/zxcvbn.js",
  "titles": [
    "Weakest",
    "Weak",
    "So-so",
    "Good",
    "Perfect"
  ]
}

Overwrite example:

$('#password-field').strengthify({zxcvbn: 'my/path/to/zxcvbn.js'})

Versions

0.3 some fixes: migrate from "display" to "opacity" fix pasting to input field add tipsy with strength 0.2 solve mimetype issues 0.1 Initial version