1. #21
    Ext User
    Join Date
    Dec 2007
    Posts
    10
    Vote Rating
    0
    ramaboo is on a distinguished road

      0  

    Default Unofficial Version v0.22

    Unofficial Version v0.22


    I made a few changes (mentioned above) and renamed the css classs to be lower case only (in fitting with Ext style). I also cleaned up a few things in the code (mostly spacing issues). Here is the result. Hopefully these changes can be made into an official release when the original other has time.
    Code:
    // Create user extensions namespace (Ext.ux)
    Ext.namespace('Ext.ux');
    // Tweaked by David Singer (david@ramaboo.com)
    /**
      * Ext.ux.PasswordField Extension Class
      *
      * @author Benjamin Horan (benh@b2bwebsolutions.com.au)
      * @version 0.22
      *
      * @license MIT License: http://www.opensource.org/licenses/mit-license.php  
      *  
      * Combines the existing work of:
      *     CAPS detection code by James Asher
      *     (http://17thdegree.com/archives/2007/12/06/capturing-caps-lock-with-the-ext-js-framework/)
      *        - Initial concept by Stuart Langridge           
      *               http://24ways.org/2007/capturing-caps-lock
      *  and
      *     Password Strength UX code by Eelco Wiersma
      *     (http://testcases.pagebakers.com/PasswordMeter/)
      *        - Algorithm based on code of Tane
      *            http://digitalspaghetti.me.uk/index.php?q=jquery-pstrength
      *      and 
      *        - Steve Moitozo
      *            http://www.geekwisdom.com/dyn/passwdmeter  
      *
      * @class Ext.ux.PasswordField
      * @extends Ext.form.Textfield
      * @constructor
      * @param {Object} config Configuration options
      *
      * EXT Version: 2.0 or 2.1
      *
      * Refer to config options for Ext.form.TextField
      *
      * showCapsWarning : boolean - 
      *    If 'true', will show  warning message beside password
      *    field if CAPS LOCK is detected.
      *
      * showStrengthMeter : boolean -
      *    If 'true', will show password strength meter immediately
      *    below password field.
      *
      * pwStrengthMeter :  function(password [string]) -
      *    If set, must point to a function that recieves the password
      *    as a string, performs strength ratings on it, and returns an
      *    integer value between 0 and 100 (0 = weakest, 100 = strongest)
      *
      * pwStrengthMeterCls : string -
      *    CSS Class to apply to the password strength meter.
      *
      * pwStrengthMeterFocusCls : string -
      *    CSS Class to apply to strength meter when the password field has focus.
      *
      * pwStrengthMeterScoreBarCls : string -
      *    CSS Class to apply to the score bar within the pw strength meter.
      *
      */
    
    Ext.ux.PasswordField = function(config) {
        if (!config) config = {};
        // call parent constructor
        Ext.ux.PasswordField.superclass.constructor.call(this, config);
        
        // set custom config properties (or assume component defaults)
        this.showCapsWarning = config.showCapsWarning || true;
        this.showStrengthMeter = config.showStrengthMeter || false;
        this.pwStrengthTest = config.pwStrengthTest || this.calcStrength;
        this.pwStrengthMeterCls = config.pwStrengthMeterCls || 'x-form-password-meter';
        this.pwStrengthMeterFocusCls = config.pwStrengthMeterFocusCls || 'x-form-password-meter-focus';
        this.pwStrengthScoreBarCls = config.pwStrengthScoreBarCls || 'x-form-password-scorebar';
    };
    
    Ext.extend(Ext.ux.PasswordField, Ext.form.TextField, {
            inputType: 'password',
            // private
            onRender: function(ct, position) {
                Ext.ux.PasswordField.superclass.onRender.call(this, ct, position);
                
                // create caps lock warning box
                if (this.showCapsWarning) {
                    var id = Ext.id();
                    this.alertBox = Ext.DomHelper.append(document.body,{
                        tag: 'div',
                        style: 'width: 10em; z-index: 99999;',
                        cls: 'x-alert',
                        children: [{
                            tag: 'div',
                            style: 'text-align: center; color: red;',
                            html: 'Caps Lock is on.',
                            id: id
                        }]
                    }, true);
                    Ext.fly(id).boxWrap();
                    this.alertBox.hide();
                    
                }
                // create password strength meter
                if (this.showStrengthMeter) {
                    this.objMeter = ct.createChild({tag: "div", 'class': this.pwStrengthMeterCls});
                    this.objMeter.setWidth(ct.first('INPUT').getWidth(false));
                    this.scoreBar = this.objMeter.createChild({tag: "div", 'class': this.pwStrengthScoreBarCls});                
                    if(Ext.isIE && !Ext.isIE7) { // Fix style for IE6
                        this.objMeter.setStyle('margin-left', '3px');
                    }
                }
            },
            afterRender: function() {
                Ext.ux.PasswordField.superclass.afterRender.call(this);
                if (this.showStrengthMeter) {
                    this.objMeter.setWidth(this.el.getWidth(false));
                }
            },
            initEvents: function() {
                Ext.ux.PasswordField.superclass.initEvents.call(this);    
                
                this.el.on('keypress', this.handleKeypress, this);
                this.el.on('blur', this.handleBlur, this);
                this.el.on('focus', this.handleFocus, this);
                this.el.on('keyup', this.handleKeyUp, this);            
            },
            handleFocus: function(e) {
                if(!Ext.isOpera) { // don't touch in Opera
                    if (this.showStrengthMeter) {
                        this.objMeter.addClass(this.pwStrengthMeterFocusCls);
                    }
                }
            },
            handleBlur: function(e) {
                if(!Ext.isOpera) { // don't touch in Opera
                    if (this.showStrengthMeter) {
                        this.objMeter.removeClass(this.pwStrengthMeterFocusCls);
                    }
                }
                if (this.showCapsWarning) {
                    this.hideCapsMessage();    
                }
            },        
            handleKeypress: function(e) {
                var charCode = e.getCharCode();
                // blank field if ESC pressed
                if (charCode == e.ESC) {
                    this.setRawValue('');
                }
                // detect if CAPS LOCK is on and show warning if appropriate
                if (this.showCapsWarning) {
                    if(
                        (e.shiftKey && charCode >= 97 && charCode <= 122) ||
                        (!e.shiftKey && charCode >= 65 && charCode <= 90)
                    ){
                        this.showCapsMessage(e.target); 
                    } else {
                        this.hideCapsMessage();
                    }
                }
            },
            handleKeyUp: function(e) {
                if (this.showStrengthMeter) {
                    
                    this.updateMeter(e);    
                }    
            },
            showCapsMessage: function(el) {
                // set position of caps warning based on whether field is stand-alone
                // or has strength meter immediately below it.
                var position = this.showStrengthMeter ? 'tl-tr': 'l-r';
                
                this.alertBox.alignTo(el, position, [5, 0]);
                this.alertBox.show();
            },
            hideCapsMessage: function() {
                this.alertBox.hide();
            },
            /**
             * Sets the width of the meter, based on the score
             * @param {Object} e 
             * Private function
             */
            updateMeter: function(e) {
                var score = 0 
                var p = e.target.value;
                
                var maxWidth = this.objMeter.getWidth() - 2;
                
                var nScore = this.pwStrengthTest(p);
                
                if (nScore > 100) {
                    nScore = 100;    
                }
                
                var scoreWidth = (maxWidth / 100) * nScore;
                
                this.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 (max = 100)
             */
            calcStrength: function(p) {
                var intScore = 0;
                
                if (p.length == 0) return (intScore);
    
                // 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.*\d.*\d/)) {            // [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(/.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~]/)) {
                    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;
                }
                
                // return score (max = 100)
                return Math.round(intScore * 2);
            }, 
            reset : function(){
                if (this.showStrengthMeter) {
                    this.scoreBar.setWidth(0, true)
                }
            }
        }
    );
    Ext.reg('uxpassword', Ext.ux.PasswordField);

  2. #22
    Sencha User
    Join Date
    May 2007
    Posts
    191
    Vote Rating
    0
    temporary is on a distinguished road

      0  

    Default


    Any news here?

    I'm having two problems, first, the field doesn't work with anchoring, second, I can't get it to run with a card layout when the the panel with the password field isn't activated at start.
    When I switch to the panel with the password field the strength meter has a width of 0.

    Can someone help?

    Stephan

  3. #23
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    4
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by temporary View Post
    second, I can't get it to run with a card layout when the the panel with the password field isn't activated at start.
    When I switch to the panel with the password field the strength meter has a width of 0.
    for that, try adding deferredRender: true to your Panel's layout config, and hideMode: 'offsets' to all children under the CardLayout.

  4. #24
    Sencha User
    Join Date
    May 2007
    Posts
    191
    Vote Rating
    0
    temporary is on a distinguished road

      0  

    Default


    thx mystix, the hideMode: 'offsets' fixed it. But deferredRender has no effect, it worked without it (i'm not in a tabpanel but in a window with card-layout).

  5. #25
    Sencha User
    Join Date
    May 2007
    Posts
    191
    Vote Rating
    0
    temporary is on a distinguished road

      0  

    Default


    Another thing - the Caps Lock message isn't shown on Firefox 3rc1.
    showCapsMessage() is called, but the warning doesn't show up.

    Also nice would be a textual representation of the password strange (from very weak to very strong or similar).

  6. #26
    Ext User
    Join Date
    Jun 2007
    Posts
    187
    Vote Rating
    1
    anjelika is on a distinguished road

      0  

    Default


    Quote Originally Posted by temporary View Post
    thx mystix, the hideMode: 'offsets' fixed it. But deferredRender has no effect, it worked without it (i'm not in a tabpanel but in a window with card-layout).
    Still wasn't able to show the strengthbar by using "hideMode: 'offsets'" in IE 7.0. This only worked in FF2 but in IE7 some rendering method is needed in order to display the bar.
    I am using a card layout in a window.
    Any toughts?

  7. #27
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    4
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by anjelika View Post
    Still wasn't able to show the strengthbar by using "hideMode: 'offsets'" in IE 7.0. This only worked in FF2 but in IE7 some rendering method is needed in order to display the bar.
    I am using a card layout in a window.
    Any toughts?
    post some code.

  8. #28
    Ext User
    Join Date
    Jun 2007
    Posts
    187
    Vote Rating
    1
    anjelika is on a distinguished road

      0  

    Default


    I am using this extension inside another one (the Wizard) which uses Card layout.
    Code:
    var wizard = new Ext.ux.Wiz({
            
            title : 'Web2SMS - Inregistrare',
            height: 350,
            width: 500,
            listeners: {
            'finish': {
            	fn : function(t)
            		{console.log (this.getWizardData())}
            	}
            },
                    
            headerConfig : {
                title : 'Vreau sa devin membru Web2SMS !'    
            },
            
            cardPanelConfig : {
                defaults : {
                    baseCls    : 'x-small-editor',
                    bodyStyle  : 'padding:20px 15px 5px 120px;background-color:#F6F6F6;',
                    border     : false,
                    labelAlign : 'right'
                }
            },   
               
            cards : [
            
                // first card with welcome message
                new Ext.ux.Wiz.Card({
                    title : 'Bine ai venit!',
                    items : [{
                        border    : false,
                        bodyStyle : 'background:none;',
                        html      : 'Bine ai venit la <b>Telcor Web2SMS!</b><br>'+
                                    'Este necesar sa ai la indemana doar telefonul mobil pentru a-ti putea crea contul tau Web2SMS in numai <b>3 minute</b>.<br>'+
                                    'Dupa aceea poti trimite <b>3 mesaje gratuite!</b>'    
                    }]    
                }),
                
                // second card with input fields last/firstname
                new Ext.ux.Wiz.Card({
    
                    title        : 'Cont si parola',
                	hideMode: 'offsets',
                    monitorValid : true,
                    defaults     : {
                        labelStyle : 'font-size:11px'
                    },
                    items : [{
                            border    : false,
                            bodyStyle : 'background:none;padding-bottom:30px;',
                            html      : 'Alege un nume de cont si o parola pentru accessul la serviciul Web2SMS.<br>'
                        },
                        new Ext.form.TextField({
                            name       : 'username',
                            fieldLabel : 'Nume cont',
                            allowBlank : false,
                            plugins:[Ext.ux.plugins.RemoteValidator],
                            rvOptions: {url:'validate_username.php'},
                            validator  : function(v){
                                var t = /^[0-9a-zA-Z_\- ]+$/;
                                return t.test(v);
                            }
                        }),
                        new Ext.ux.PasswordField({
                        		name: 'parola',
                        		fieldLabel:"Parola",
    				            showCapsWarning: true,
    				            allowBlank:false,
    				            showStrengthMeter: true                                    
    				    })
                    ]    
                }),
    This works fine in FF and Safari for Windows, but in IE7 it displays nothing (none of the 2 inputs) on the second card (where the password field is).
    If I move the window or gat back to the first card and then back to the second one , the fields are displaying fine ( the Strength field appears a bit left side but I think I can fix this from css).
    Thanks

  9. #29
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    4
    mystix will become famous soon enough

      0  

    Default


    do normal DateFields and TextFields display correctly with that setup?

  10. #30
    Ext User
    Join Date
    Jun 2007
    Posts
    187
    Vote Rating
    1
    anjelika is on a distinguished road

      0  

    Default


    Nope, none of the fields are displayed untill the windows is moved (refreshed).

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar