CODEWITHSUNDEEP
extjs
MNR
MNR

Reputation: 1073

ExtJs Password strength checker

How to check password strength in ExtJS Iam design a window with oldpassword ,new password and confirmpassword. So how to diplay password strength beside the new password and also password match message beside confirm pasword(In case of passwords not matched)

Thanks in advance

Upvotes: 1

Views: 4705

Answers (2)

Deniz
Deniz

Reputation: 803

In my project I'm using passwordmeter. The algorithm it use to evaluate the password is very logical and powerful (which is not always the case). I've put it in box container into a formpanel. Here is my code :

{

            xtype: 'box',

            isFormField: true,

            autoEl: {

                tag: 'div',

                id: 'scorebarBorder',

                children: [{

                    tag: 'div',

                    id: 'score',

                    html: '0%'

                }, {

                    tag: 'div',

                    id: 'scorebar',

                    html: ' '

                }, {

                    tag: 'div',

                    id: 'complexity',

                    html: 'Too Short'

                }]

            }

        }

You must to connect your password field with a keyup event to use that :

{

            xtype: 'textfield',

            inputType: 'password',

            fieldLabel: "Enter your new password",

            minLengthText: 'Type at least 4 characters',


            maxLengthText: 'Type maximum 50 characters',

            enableKeyEvents: true,

            listeners: {

                keyup: function (field, event) {

                    chkPass(field.getRawValue());

                }

            }

        }

You can also use a vtype to compare the two pass values entered by user :

    Ext.apply(Ext.form.VTypes, {

        password: function (val, field) {

            if (field.initialPassField) {

                var pwd = Ext.getCmp(field.initialPassField);

                return (val == pwd.getValue());

            }

            return true;

        },

        passwordText: 'The passwords entered do not match!<br/>Please Re-Type'

    });

}, this);

and then :

{

        xtype: 'textfield',

        fieldLabel: "Please re-type your new password",

        inputType: 'password',


        vtype: 'password',

        initialPassField: 'firstPassword'

    }

Check also this site for other pass check alternatives.

Upvotes: 2

wombleton
wombleton

Reputation: 8376

The bare bones of this is in a validation example on the ExtJS site: http://dev.sencha.com/deploy/ext-3.3.0/examples/form/adv-vtypes.html

You can update a panel with the password strength by putting a listener on the clientvalidation event.

Upvotes: 1

Related Questions