A simple plugin that will change the background color of a TextField based on the score of the value entered. On every keystroke, this plugin will test that value against 16 tests and scores it.
Usage:
Code:
Ext.apply(Ext.form.VTypes, {
strength : function(val, field) {
return field.score > field.strength;
},
strengthText : "Password is not strong enough"
});
Ext.require([
"Ext.form.*"
]);
Ext.onReady(function() {
var form = Ext.create("Ext.form.FormPanel", {
renderTo : Ext.getBody(),
width : 300,
title : "Password Strength Plugin",
defaultType : "textfield",
defaults : {
anchor : "99%",
msgTarget : "side"
},
items : [
{
fieldLabel : "Username"
},
{
fieldLabel : "Password",
inputType : "password",
vtype : "strength",
strength : 24,
plugins : {
ptype : "passwordstrength"
}
}
]
});
});
You can override the colors use by doing this, I don't claim to be an artist:
Code:
...
plugins : {
ptype : "passwordstrength",
colors : ["C11B17", "FDD017", "4AA02C", "6AFB92", "00FF00"]
}
...
There must be 5 values. The score will also be appended to the field so you can do a VType.
Github: https://github.com/mitchellsimoens/E...sswordStrength
Demo: http://www.simoens.org/Ext.plugin.ex...swordStrength/