Animated Password Strength Meter with jQuery and Bootstrap

Animated Password Strength Meter with jQuery and Bootstrap
File Size: 226 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Pwstrength is a jQuery plugin works with Twitter's bootstrap for creating an animated bar attached to the password input filed to display a real-time Password Strength Meter.

Features:

  • Beautiful and easy to use.
  • Multiple instances on one page.
  • Custom rules.
  • Callback functions supported.
  • Custom minimum password length.

See also:

Basic Usage:

1. Load the CDN hosted Twitter's Bootstrap CSS in the head of your page.

<link rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

2. Markup html structure.

<form>
<div class="form-group">
<input type="text" id="username" class="form-control" />
<input type="password" id="password" class="form-control" />
</div>
</form>

3. Load the latest jQuery javascript library and jQuery Pwstrength plugin at the end of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="pwstrength.js"></script>

4. Initialize the plugin with options.

<script type="text/javascript">
jQuery(document).ready(function () {
"use strict";
var options = {
minChar: 8,
bootstrap3: true,
};
$(':password').pwstrength(options);
});
</script>

5. All the options.

<script type="text/javascript">
jQuery(document).ready(function () {
"use strict";
var options = {
minChar: 8,
bootstrap3: false,
errorMessages: {
    password_too_short: "<font color='red'>The Password is too short</font>",
    same_as_username: "Your password cannot be the same as your username"
},
scores: [17, 26, 40, 50],
verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"],
showVerdicts: true,
showVerdictsInitially: false,
raisePower: 1.4,
usernameField: "#username",
};
$(':password').pwstrength(options);
});
</script>

Change log:

v1.2.2 (2014-09-12)

  • Every rule can have associated error messages.

v1.2.1 (2014-08-24)

  • Improve documentation.
  • Fix typo in alphabetical sequence.
  • Use the not minified version of the library in bower as main file.
  • Listen also to the change and onpaste events, not only to the onkeyup.
  • Show the lowest verdict when the score is below zero.
  • New option to pass more input fields content to the zxcvbn library.
  • Don't show the verdicts inside the popover if they are being showed inside the progressbar.

v1.1.5 (2014-06-21)

  • Better Bower configuration.
  • Pass also the verdict level to the "on key up" event handler.
  • Add a basic usage section to the readme.

v1.1.4 (2014-06-19)

  • Bower support.
  • Pass the score and the verdict to the "on key up" event handler.
  • Upgrade dev dependencies: grunt plugins and jquery
  • Bugfix in sequences lookup
  • New tests for sequences lookup

v1.1.1 (2014-02-18)

  • Pass the username field content to the zxcvbn function, so zxcvbn takes it into consideration when scoring the password.
  • Add a debug option, so the score gets printed in the JS console.
  • Check reversed sequences too in the sequences rule.
  • Fix the popover flickering.

v1.1.0 (2013-12-28)

  • Separate source file in several smaller files.
  • Add Grunt support for creating a bundle and a minified version.
  • Add tests for the rules engine, and continuos integration with Travis.

v1.0.0 (2013-12-24)

  • Complete refactor of the code. This is a cleaner version, easier to extend and mantain.
  • Broke backwards compatibility. Bootstrap 3 is the default option now, other options default values have changed. Options structure has changed too.
  • Old tests have been renamed to examples, which is what they really are. Leave room for real tests.

v0.4.6 (2013-12-17)

  • Support popovers in Bootstrap 2 too
  • Remove showVerdictsInitially option.

v0.4.5 (2013-12-07)

  • Fix error message when the password contains the username.
  • Check if the password is an email, and mark as weak.
  • Add a container option, it will be used to look for the viewports.

This awesome jQuery plugin is developed by ablanco. For more Advanced Usages, please check the demo page or visit the official website.