[0.2] Ext.ux.PasswordMeter

[xpressive]

very nice feature!
I have added a function to provide client side validation of enterd password.

Maybe it is helpful for somebody

        /**
         * validate the strength of the entered password, based on the score
         * Private function
         */
                validateValue : function(value){
                        if(!Ext.ux.PasswordMeter.superclass.validateValue.call(this, value)){
                            return false;
                        }
                        if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
                            return true;
                        }
                        var nScore = this.calcStrength(value);
                        var minStrength = 25;
                        if (nScore < minStrength) {
                         this.markInvalid('The strength of your password is not enough!');
                         this.isValid = false;
                         return false;
                        }
                        return true;
                },

Full source is attached below ...

[Pagebaker]

Nice work! unfortunately I haven't had any time lately to do more work on this one

[sanjshah]

Hi,

I've tried addding this to a form using the following:

	var mypassword = new Ext.ux.PasswordMeter({
			applyTo:'password',
			width:175
    });

But cannot see the graph - am I applying this wrong?

Thanks!

[Dumbledore]

perhaps you forgot to add the css-classes?

Bye

[wwarby]

PageBaker,

Thanks a lot for sharing this example - I'm using it in a current development project. The user interface is lovely - however, I had some reservations about the accuracy of your password strength checking algorithm so I've written my own implementation, and thought I'd share it back with the community...

calcStrength: function(p) {
    var re_d = /\d/;
    var re_l = /[a-z]/;
    var re_u = /[A-Z]/;
    var re_y = /[\W_\-]/;
    var s = 0, cs = 0, cw = 1;
    var r = p.length - p.replace(new RegExp(/(\S+?)(\1+)/g), '$1').length;  //Length of repeated character sequences
    if (re_d.test(p)) { cs += 10; } //Increment the character set size if digits found
    if (re_l.test(p)) { cs += 26; } //Increment the character set size if lowercase letters found
    if (re_u.test(p)) { cs += 26; } //Increment the character set size if uppercase letters found
    if (re_y.test(p)) { cs += 32; } //Increment the character set size if special characters found
    cw = (cs / 94); //Proportion of the printable ASCII character set used
    if ((p.length - r) >= 4) { cw += ((1 - (cs / 94)) * (1 - (4 / (p.length - r)))); } //Weighting based on relationship between character set size and password length
    if (cw > 1) { cw = 1; } //Constrain the weighting value to the range 0-1
    s = (p.length - (r / 2)) * (cw * 6); //Score calculation
    if (s < 0) { s = 0; }; if (s > 100) { s = 100; } //Constrain the score to the range 0-100
    return Math.round(s); //Return score rounded to the nearest integer
}

Since there's a fair bit of maths in there, an explanation is in order.

First I considered which things affect the password strength. Many password hacking tools can try dictionary words and proper nouns, but since it isn't really practical to download dictionary files to the client for a JS strength meter, I will assume a brute force attack method.

Using brute force password strength is measured by the number of permutations required to guarantee breaking of the password. The permutations are a straight forward multiple of password length * character set size. Therefore, the key parameters in the algorithm must be password length and character set size.

Typically the character sets used in brute force attacks are grouped into digits, lowercase, uppercase and specials - assuming we only use the 94 printable ascii characters. Once you've used any single character from any one of these groups, you've effectively forced the hacker to include that whole group in his attack. Therefore, my algorithm calculates the size of the character set used, based on the inclusion of at least one character from each of the character groups.

After some consideration, I resolved that the size of the character set becomes less significant as the length of the password increases, because each new character increases the number of permutations vastly more than increasing the character set size. Therefore, the algorythm assigns a weighting to the character set size which is dependent on the password length; larger character sets always score better, but they affect the scoring more dramatically with shorter passwords than with longer ones.

One final parameter I decided to take into account was repeating character sequences. "aaaaaa" is less strong than "ababab" which is in turn less strong than "abcdef", so I added a penalty for repeating character sequences. Essentially, repeated sequences are considered to be half as long as they really are, so "aaaaaa" which has an actual length of 6 has a measured length of 3.5 in the algorythm, because 5 of the characters are repeats (2.5 penalty). "ababab" has a measured length of 4, because the last four characters are repeated (2 penalty). "abcabc" would have a measured length of 4.5, and so on.

The parameters established by the algorithm are combined to give a rounded score between 0 and 100. It is tuned to score 100 once you hit around 20 characters all in lower case or around 17 characters with a good character set mix.

I'm no mathematician or security expert and I can't say authoritatively whether this algorithm is any good. In my tests however, it closely reflects the results found in 1Password for Mac, and results I would expect with the passwords I have tried. I hope if is of use to somebody

[demongloom]

Hello,
very nice plugin, but please make function updateMeter not depended on event, or add event on value update to force meter update if value set through input.setValue() function.

For example i did new user creation form with password generation function.

var button_generate = new Ext.form.Button({
            text: "Generate password",
            handler: function() {
            
                var mask = "1qwer2tyuio1pa3sdf2ghjklz43xcvbn4mQW5ER5TYUI6OPA67SD8FG79H8JK0LZ9XCV0BNM";
                var pass = "";
                
                while( pass.length < 8 ) {
                    pass += mask[ parseInt(Math.random() * mask.length) ]; }
                
                input_password.setValue(pass);
                input_password.updateMeter(); 
                // ^^^ Here cause crash, because is no event passed as arg.
                // ^^^ I've changed updateMeter function to use this.getRawValue(), but how it's correct?
            
            }
        }); 

When i call

[ktreagu]

I modified the password meter with a few changes.

-modified to work with the Jingo javascript dependancy management system (see http://code.google.com/p/jingo/)
-validated against JSLint
-enhanced to take in calcStrength as an optional config parameter so you can replace the password strength algorithm with your own password strength algorithm (I used the one from http://www.passwordmeter.com/)

Changes attached...

[asafm]

Hi,

I've added the following lines of code to support reset() of the form, which also supposed to reset the meter (and score):

    reset : function() {
    	Ext.ux.PasswordMeter.superclass.reset.call(this);
    	this.updateMeter(this);
    }

And changed updateMeter to work without parameters:

    updateMeter: function() {
    	var score = 0;
        var p = this.getValue();

[osnoek]

Hi I've ported this to Ext4. Check it out here