Ext.plugin.extjs.form.PasswordStrength

[mitchellsimoens]

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:

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:

...
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/

[rogersja]

That is really neat!

One suggestion, would be to, in some fashion. Show the user that there are multiple levels of acceptable passwords. without knowing that there are 5 levels, a use may simply stop at the first green level, and not know they could make something stronger.

[steffenk]

Hi Mitchell,

this is a cool thing as passwordstrength is an important one to prevent being hacked.

While testing it i have an issue from usability:

* if you color the background it's difficult to see the input, it would be needed to calculate the complementary color for text color
* the colors are fancy but need description. The user might think: That's funny, i get changing colors. But he don't understand what's about, you would need to descibe that.

I think the simplest way to display passwordstrength is kind of filled bar beside with
bad .......... good label beside, so it's easy to understand while typing.

[yyjia]

I modified the code from 1.x forum ( here: http://www.sencha.com/forum/showthre....PasswordMeter ) . I created a password meter widget that is Ext 4 compatible. You can check it from my blog post.
With a quick test, it works fine. I have not done extensive test on it. Please let me know if you test on it and find any issue.