A Password Strength Meter Widget

Demonstration



Page Setup

CSS and Javascript

Add the following css and javascript tags into your page.
		<link rel="stylesheet" href="../../build/cssreset/reset-min.css" />
		<link rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
		<link rel="stylesheet" href="../../build/lazrjs/cssbase/base-min.css" />
		<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
		<script type="text/javascript" src="../../build/lazr-meta.js">lt;/script>
 	

In order to facilitate ease of integration into existing web pages with differing needs in both layout and password strength requirements, the widget takes as construction parameters the ids of the password field to be evaluated, the id of the dom element that will hold the meter, and a reference to a javascript function that will be used to evaluate the strength of the password.

<label for="password">Password<label>
<div>
  <input type="password" id="password" />
  <div id="meter"><div>
</div>
	    

Widget Setup

The javascript function that will be used by the widget will recive one parameter: the password as a string. The function needs to return an object literal with two attributes: color and text. The return value should look something like this:
var strengthFunc = function(password) {
	//whatever logic you require to determine password strength
	return {
		"color": [an html color code like '#FF0000'],
		"text": [a description like "weak" or "strong"]
	};
};
Finally, putting it all together the widget needs to be constructed and rendered as follows:
           var LAZR_YUI_CONFIG = {
                filter: "min",
                base: "../../build/",
                modules: LAZR_MODULES,
                insertBefore: "style-overrides",
            };
          LP.use('node', 'event', 'lazr.passwordmeter', function(Y){

            var passwordMeter = new Y.PasswordMeter({
                input: '#password',
                contentBox: '#meter',
                func: strengthFunc,
            });

            passwordMeter.render();
        });