Skip to content

README.md

Latest commit

 

History

History
89 lines (70 loc) · 1.84 KB

README.md

File metadata and controls

89 lines (70 loc) · 1.84 KB
Raw

strengthify

Combine jQuery and zxcvbn to create a password strength meter.

How to use

Add the following wrapper to your document - preferably near 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 heavyweight, it will be loaded asynchronously from zxcvbn/zxcvbn.js. This can however 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 after each keystroke.

Configuration

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

The inputs property is an array of words to add to zxcvbn's dictionary or a function that returns the array to use.

Default:

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

Overwrite example:

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

Versions

0.4.1
hotfix for missing ;
0.4
syntax and performance cleanups
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