It is a Ext JS extension that will provide a password strength checker for a password field inside a standard form. It has some customisation possible
Download the Ext.ux.PasswordStrength.js to your server, include it into the HEAD of your page (After the Ext JS inclusion). No CSS file needed. For more details please have a look at the demo.html
[ Flickr ] (http://www.flickr.com/photos/harabagiu_dan/6510269863/)
{
//Standard options
fieldLabel : 'Password',
name : 'password',
anchor : '100%',
minLength : 3,
allowBlank : false,
xtype : 'passwordStrength',
//Custom options
backgroundColor : "#CACACA",
textAlign : "right",
colorL1 : "#FF0000",
colorL2 : "#C79322",
colorL3 : "#005000",
colorL4 : "#00AA00",
textL1 : "Weak",
textL2 : "Poor",
textL3 : "Good",
textL4 : "Excelent",
}
- backgroundColor : The color of the background of the line that displays the meter
- textAlign : The CSS alignment of the text of the meter
- colorL1 : The color of the first level of the meter (0-30%)
- colorL2 : The color of the second level of the meter (30-60%)
- colorL3 : The color of the third level of the meter (60-90%)
- colorL4 : The color of the fourth level of the meter (90-100%)
- textL1 : The text of the first level of the meter (0-30%)
- textL2 : The text of the second level of the meter (30-60%)
- textL3 : The text of the third level of the meter (60-90%)
- textL4 : The text of the fourth level of the meter (90-100%)