1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    8
    Vote Rating
    2
    osnoek is on a distinguished road

      1  

    Default Ext.ux.form.PasswordMeter

    Ext.ux.form.PasswordMeter


    Hi I've adapted the code from the old 1.x version of PasswordMeter for Ext 4. It is based on the code posted by yyjia on his blog. I've adapted his code to use the fieldSubTpl instead of adding elements after render time. Also I align the meter to the inputfield (I prefer it that way )

    password-strength.png

    Code:
    Ext.define('Ext.ux.form.PasswordMeter', {
        extend : 'Ext.form.field.Text',
        alias : 'widget.ux.passwordmeter',
        inputType : 'password',
    
        reset : function() {
            this.callParent();
            this.updateMeter(this);
        },
    
        fieldSubTpl : [ 
            '<div><input id="{id}" type="{type}" ', 
            '<tpl if="name">name="{name}" </tpl>', 
            '<tpl if="size">size="{size}" </tpl>',
            '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>', 
            'class="{fieldCls} {typeCls}" autocomplete="off" /></div>', 
            '<div class="strengthmeter">',
            '<div class="scorebar">&nbsp;</div>', 
            '</div>', {
                compiled : true,
                disableFormats : true
            } ],
    
        // private
        onChange : function(newValue, oldValue) {
            this.updateMeter(newValue);
        },
        /**
         * Sets the width of the meter, based on the score
         * 
         * @param {Object}
         *            e Private function
         */
        updateMeter : function(val) {
            var me = this, maxWidth, score, scoreWidth, objMeter = me.el.down('.strengthmeter'), scoreBar = me.el.down('.scorebar');
    
            maxWidth = objMeter.getWidth();
            score = me.calcStrength(val);
            scoreWidth = maxWidth - (maxWidth / 100) * score;
            scoreBar.setWidth(scoreWidth, true);
        },
    
        /**
         * Calculates the strength of a password
         * 
         * @param {Object}
         *            p The password that needs to be calculated
         * @return {int} intScore The strength score of the password
         */
        calcStrength : function(p) {
            var intScore = 0;
    
            // PASSWORD LENGTH
            intScore += p.length;
    
            if (p.length > 0 && p.length <= 4) { // length 4 or
                // less
                intScore += p.length;
            } else if (p.length >= 5 && p.length <= 7) {
                // length between 5 and 7
                intScore += 6;
            } else if (p.length >= 8 && p.length <= 15) {
                // length between 8 and 15
                intScore += 12;
            } else if (p.length >= 16) { // length 16 or more
                intScore += 18;
            }
    
            // LETTERS (Not exactly implemented as dictacted above
            // because of my limited understanding of Regex)
            if (p.match(/[a-z]/)) {
                // [verified] at least one lower case letter
                intScore += 1;
            }
            if (p.match(/[A-Z]/)) { // [verified] at least one upper
                // case letter
                intScore += 5;
            }
            // NUMBERS
            if (p.match(/\d/)) { // [verified] at least one
                // number
                intScore += 5;
            }
             if (p.match(/(?:.*?\d){3}/)) {
                // [verified] at least three numbers
                intScore += 5;
            }
     
            // SPECIAL CHAR
            if (p.match(/[\!,@,#,$,%,\^,&,\*,\?,_,~]/)) {
                // [verified] at least one special character
                intScore += 5;
            }
            // [verified] at least two special characters
            if (p.match(/(?:.*?[\!,@,#,$,%,\^,&,\*,\?,_,~]){2}/)) {
                intScore += 5;
            }
    
            // COMBOS
            if (p.match(/(?=.*[a-z])(?=.*[A-Z])/)) {
                // [verified] both upper and lower case
                intScore += 2;
            }
            if (p.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/)) {
                // [verified] both letters and numbers
                intScore += 2;
            }
            // [verified] letters, numbers, and special characters
            if (p.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\!,@,#,$,%,\^,&,\*,\?,_,~])/)) {
                intScore += 2;
            }
    
            var nRound = Math.round(intScore * 2);
    
            if (nRound > 100) {
                nRound = 100;
            }
             return nRound;
        }
    });
    And for the CSS:
    Code:
    .strengthmeter {
        background-image: url(../images/meter.gif);
        background-size: 100%;
        width : 100%;
        float: right;
    }
     
    .scorebar {
        background-color : white;
        float: right;
        line-height : 6px;
        width : 100%;
    }
    You can find the background image here.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,206
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You should post a couple screenshots so we can look at it without putting the code in and testing it.

    Also, may want to check out http://market.sencha.com
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    671
    Vote Rating
    0
    Dumbledore is on a distinguished road

      0  

    Default


    i have made some small changes to prevent an error if the field without any value is reset():

    Code:
        reset : function() {
            this.callParent();
            this.updateMeter();
        },

    Code:
        updateMeter : function(val) {
            var me = this, maxWidth, score, scoreWidth, objMeter = me.el.down('.strengthmeter'), scoreBar = me.el.down('.scorebar');
    
            if (val){
                maxWidth = objMeter.getWidth();
                score = me.calcStrength(val);
                scoreWidth = maxWidth - (maxWidth / 100) * score;
                scoreBar.setWidth(scoreWidth, true);
            } else {
                scoreBar.setWidth(0, true);
            }
        },

  4. #4
    Sencha Premium Member i.stojanovic's Avatar
    Join Date
    Oct 2010
    Location
    Kragujevac, Serbia
    Posts
    24
    Vote Rating
    0
    i.stojanovic is on a distinguished road

      0  

    Default Example please

    Example please


    Do you have some implementation examle?
    www.codelighter.com
    There are 10 types of people in this world, those who understand binary and those who dont

  5. #5
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      1  

    Thumbs up


    Demo + Background image replaced through CSS gradient (+ some other enhancements):

    http://jsfiddle.net/SunboX/f8xUz/11/

    greetings Sunny

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2010
    Posts
    20
    Vote Rating
    0
    thinone is on a distinguished road

      0  

    Default


    Hi,
    width of password field does not changing
    PHP Code:
    items: [{
                
    xtype'ux.passwordmeterfield',
                
    labelAlign'left',
                
    fieldLabel'Password',
                
    name'foo',
                
    anchor'100%',
                
    margin'0 0 20 0',
                
    width200    // <--- 
            
    }] 

  7. #7
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Estonia
    Posts
    198
    Vote Rating
    0
    mmuruev is on a distinguished road

      0  

    Default


    Yes it's true. I try find a problem and found block after this field it took a space from right

  8. #8
    Sencha Premium Member
    Join Date
    Jan 2008
    Location
    San Francisco Bay, CA
    Posts
    41
    Vote Rating
    1
    rgralhoz is on a distinguished road

      0  

    Default


    Quote Originally Posted by thinone View Post
    Hi,
    width of password field does not changing
    Fixed. Add the following line inside the HTML tag input, under the config property fieldSubTpl (on @SunboX code it would be on line 14).

    Code:
    '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',

  9. #9
    Sencha Premium Member
    Join Date
    Jan 2008
    Location
    San Francisco Bay, CA
    Posts
    41
    Vote Rating
    1
    rgralhoz is on a distinguished road

      0  

    Default


    I tried to update the code on JSFiddle with the fix, but it created a new link:
    http://jsfiddle.net/rgralhoz/f8xUz/75/