jQuery jQuery Entropizer

# jQuery Entropizer

Password strength meter jQuery plugin

For the standalone Entropizer engine, click here

What is jQuery Entropizer?

jQuery Entropizer is a simple, lightweight jQuery plugin that uses the Entropizer engine to calculate password entropy. It's easy to set up and provides several hooks to customize the UI.

jQuery Entropizer supports AMD and CommonJS. It is available as a bower component.

Demos

Some basic demos can be found here.

Getting Started

This plugin requires both jQuery (1.7.2+) and Entropizer.

Basic usage:

<label for="pwd">Please enter a password</label>
<input type="password" id="pwd" name="pwd" />
<div id="meter"></div>

// Creates a default Entropizer meter inside #meter and watches the first password field on the
// page by default
$('#meter').entropizer();

Options and examples:

// Create an Entropizer meter using custom options
$('#meter').entropizer({

    // The input field to watch: any selector, DOM element or jQuery instance
    // Default: 'input[type=password]:first'
    target: '#pwd',

    // The event(s) upon which to update the meter UI
    // Default: 'keydown keyup'
    on: 'keydown',

    // Used to calculate the percentage of the bar to fill (see map function below)
    // Default: 100
    maximum: 80,

    // An array of ranges to use when classifying password strength. Used internally by default map
    // function and can be used publicly via $.entropizer.classify(value, buckets). Properties
    // 'min' and 'max' are used to calculate which bucket to use - upon finding a match, an object
    // containing all the other properties is returned, e.g. below, a value of 42 returns
    // { message: ':)' }
    // Default: 4 ranges with strength and color properties (see source for values)
    buckets: [
        { max: 40, message: ':(' },
        { min: 40, max: 60, message: ':)' },
        { min: 60, message: ':D' }
    ],

    // Either an Entropizer engine options object or an Entropizer instance
    // Default: a new Entropizer instance with default settings
    engine: {
        classes: ['lowercase', 'uppercase', 'numeric']
    },

    // A callback controlling UI creation - takes a jQuery instance representing the container
    // and returns an object containing UI components for access in update and destroy
    // Default: creates a track element (the bar background), a bar element and a text element
    create: function(container) {
        var bar = $('<div>').appendTo(container);
        return { foo: bar };
    },

    // A callback controlling UI cleanup - takes the UI object created by create
    // Default: removes the track, bar and text elements
    destroy: function(ui) {
        ui.foo.remove();
    },

    // A callback that maps the raw entropy value to an object passed to update. First argument is
    // the number of bits of entropy, second argument is an object containing all properties on
    // the options object apart from target, on, engine and the callbacks (i.e. by default, just
    // maximum and buckets)
    // Default: uses maximum and buckets above to return an object with entropy, percent, strength
    // and color properties
    map: function(entropy, mapOptions) {
        return $.extend({ entropy: entropy }, $.entropizer.classify(entropy, mapOptions.buckets));
    },

    // A callback controlling UI updates - takes the data returned by map and the ui object
    // Default: updates the width and background color of the bar, and displays the number of bits
    update: function(data, ui) {
        ui.foo.text(data.entropy.toFixed(0) + ' ' + data.message);
    }
});

If you need to remove an entropizer instance:

$('#meter').entropizer('destroy');

This will unbind all Entropizer events from the target and invoke the destroy callback.

Styling

The default UI creates elements for the track, bar and text - these use the CSS classes entropizer-track, entropizer-bar and entropizer-text respectively. Default styles for these elements can be found in the provided CSS stylesheet.

Engine options

For a guide to Entropizer engine options, see the readme here.

Browser compatibility

jQuery Entropizer supports IE6+, Firefox, Chrome and Opera.