1. #1
    Ext User benny_boi's Avatar
    Join Date
    May 2007
    Posts
    24
    Vote Rating
    0
    benny_boi is on a distinguished road

      0  

    Smile [2.0] Ext.ux.PasswordField (v0.21)

    [2.0] Ext.ux.PasswordField (v0.21)


    Hi All,

    On searching these forums, I've seen a couple of really good ideas for password fields - one was a code example put up by TheJoker101 to detect if caps lock is on while entering a password (http://extjs.com/forum/showthread.php?t=20210), and the other was an Ext 1.1 UX by Pagebaker which implemented a really clean-look password strength meter (http://extjs.com/forum/showthread.php?t=12155).

    I'm not pretending to have come up with anything innovative, I've just updated Pagebakers UX to work cleanly (almost!) on Ext 2.0 release, and combined it with the code of TheJoker101's to produce a flexible password field.

    DEMO:

    http://dev.b2bwebsolutions.com.au/ex...ield/demo.html

    TESTED ON:

    Internet Explorer 7 (Windows)
    FireFox 2 (Windows)

    RELEASE HISTORY:

    v0.21 (Updated 12.12.2007)
    • Fixed error with hiding caps lock warning on field blur (thanks to krycek) for picking up on this!
    v0.20 (Updated 12.12.2007)
    • Fixed password strength meter width issues (input field size captured in afterRender method)
    • Added config property: pwStrengthMeter [function] - Overrides regular password strength calculation algorithm if desired. Recieves 'password [string]' as only property and returns a value between 0 (weakest) and 100 (strongest) to indicate password strength. This could be used to call a web service or perform more advanced analysis of the password (internal algorithm will be further developed in further versions).
    • Added config properties: pwStrengthMeterCls [string], pwStrengthMeterFocusCls [string] and pwStrengthMeterScoreBarCls [string] - Allow override of the default CSS classes for the password strength meter.
    v0.10 (Updated 11.12.2007)
    • Initial release
    Feel free to have a play - any improvements welcome. As previously mentioned, all praise for the original implementations should be sent to Pagebaker and TheJoker101 - nice work guys!
    Attached Images
    Attached Files

  2. #2
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    If you're going to take on the notion of the community ux password field, I'd suggest that you look to support a couple of things. First, with the password strength, there really needs to be a reasonably good bit of logic behind it. Search the forums and you'll find one or two really good threads chock full of info you can use. Second, some manner of hook that can be toggled via the field's config to hash the password value prior to sending it over the wire to help folks creating chap systems. Third, the ability to toggle on in the config a second "confirm/verify" password field.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  3. #3
    Ext User benny_boi's Avatar
    Join Date
    May 2007
    Posts
    24
    Vote Rating
    0
    benny_boi is on a distinguished road

      0  

    Default


    Looks like I've got my homework list... :-)

    All great ideas - I'll keep tinkering and see if I can evolve the functionality to include as many of those features as possible.

    Jeff - this might be an absolute no-brainer for you - do you know where I'm going wrong with obtaining the width of the input field to size the strength meter? The problem is demo'd at the following: http://dev.b2bwebsolutions.com.au/ex...eld/demo2.html

    HTML Code:
    <script language="javascript" type="text/javascript">
        Ext.onReady(function(){
            var password = new Ext.ux.PasswordField({
                width: 300,
                showCapsWarning: true,
                showStrengthMeter: true                                    
            });
            password.render('pass1');
        });
    </script>
    I'm extending the onRender() of Ext.form.TextField with the following code to insert the strength meter:

    Code:
                // create password strength meter
                if (this.showStrengthMeter) {
                    this.objMeter = ct.createChild({tag: "div", 'class': "x-form-password-strengthMeter"});
                    this.objMeter.setWidth(ct.first('INPUT').getWidth(false));
                    this.scoreBar = this.objMeter.createChild({tag: "div", 'class': "x-form-password-scoreBar"});                
                    if(Ext.isIE && !Ext.isIE7) { // Fix style for IE6
                        this.objMeter.setStyle('margin-left', '3px');
                    }                    
                }
    Working through this with FireBug - at the time that onRender() is called, an input object has been inserted into the control with a seemingly default width (125px width) - then my code runs and grabs the width to size the meter.

    After onRender() has completed, the input field is resized to the size I specify with the width config property for the field. I haven't been able to find an event trap late enough to pick up the input's width when it's been sized properly. (I tried wiring a handler to this.el.on('render', .....), but it doesnt appear to fire).

    I sooo love working with Ext 2.0 by the way - great work guys!!

    Cheers,

    Ben

  4. #4
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Quote Originally Posted by benny_boi View Post
    Looks like I've got my homework list... :-)
    There's certainly more, but better to take babysteps (if that's what you'd call my ideas *grin*).

    Quote Originally Posted by benny_boi View Post
    Jeff - this might be an absolute no-brainer for you - do you know where I'm going wrong with obtaining the width of the input field to size the strength meter?
    I actually don't know either. Like you, I'd have to dig through the inner workings of Ext form fields to figure it out myself. If I were doing it, I'd probably start with a field that's a combination of things, like maybe the combobox, as it has to adjust its width to accommodate the triggerfield.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  5. #5
    Ext User
    Join Date
    Apr 2007
    Posts
    36
    Vote Rating
    0
    Pagebaker is on a distinguished road

      0  

    Default


    Nice work, very good combination. Also good to see my work is being adapted by others ;D

    Quote Originally Posted by JeffHowden View Post
    Third, the ability to toggle on in the config a second "confirm/verify" password field.
    I agree with this

    cheers

  6. #6
    Ext User benny_boi's Avatar
    Join Date
    May 2007
    Posts
    24
    Vote Rating
    0
    benny_boi is on a distinguished road

      0  

    Default


    Ah - found the blighter that was causing the meter sizing issues!

    The text field seems to get resized from it's default to the required width as part of afterRender() in the lifecycle. By extending that method in my component, calling the superclass's method first (which resizes the input to the width set in the components width property) and THEN resizing my strength meter, everything lines up!...

    I'll post v0.2 tomorrow with the bug fix. I've also changed it so that you can override with your own function for scoring the password strength (ie: call a web service or similar).

    Next on the list (as Jeff suggested), extending the component further so that it can render two password boxes and wiring up the validation surrounding this...

  7. #7
    Ext User benny_boi's Avatar
    Join Date
    May 2007
    Posts
    24
    Vote Rating
    0
    benny_boi is on a distinguished road

      0  

    Default


    OK.. Just posting v0.20 as promised...

    CHANGES:
    • Fixed password strength meter width issues (input field size captured in afterRender method)
    • Added config property: pwStrengthMeter [function] - Overrides regular password strength calculation algorithm if desired. Recieves 'password [string]' as only property and returns a value between 0 (weakest) and 100 (strongest) to indicate password strength. This could be used to call a web service or perform more advanced analysis of the password (internal algorithm will be further developed in further versions).
    • Added config properties: pwStrengthMeterCls [string], pwStrengthMeterFocusCls [string] and pwStrengthMeterScoreBarCls [string] - Allow override of the default CSS classes for the password strength meter.
    More to come. Thanks to Jeff for his ideas, and Pagebaker and TheJoker101 for their original work. Anyone else's feedback very welcome!

    Cheers,

    Ben

  8. #8
    Sencha User krycek's Avatar
    Join Date
    Jun 2007
    Posts
    96
    Vote Rating
    0
    krycek is on a distinguished road

      0  

    Default


    Code:
    this.hideCapsWarning is not a function
    [Break on this error] this.hideCapsWarning();
    on blur

  9. #9
    Ext User benny_boi's Avatar
    Join Date
    May 2007
    Posts
    24
    Vote Rating
    0
    benny_boi is on a distinguished road

      0  

    Default


    Thanks for picking up on this krycek .. Was a simple attempt to rename the method to something more meaningful but I obviously missed replacing one of them... Fixed now in 0.21 (available for download above).

    Cheers,

    Ben

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Posts
    761
    Vote Rating
    1
    franklt69 is on a distinguished road

      0  

    Default


    Hi benny_boi I was testing your good Ext.ux.PasswordField (v0.21) inside an windows, and work ok but when I set the caps lock don't appear the warning side the Ext.ux.PasswordField it is render in the body, out side the windows, do you are testing it inside a windows?

    I am doing it;

    Code:
    formNewUserLogin = function(grid) {
     
        this.password = new Ext.ux.PasswordField({
    			
                id: 'uxpf1',
                showCapsWarning: true,
               allowBlank:false,
                fieldLabel:"Current Password",
                showStrengthMeter: true,
    			pwStrengthTest: function(pw) {
    				return (pw.length * 10);
    			}
    		});
       formNewUserLogin.superclass.constructor.call(this, {
            id:'frm-party-form-userlogin',
            xtype:"form",
            title:this.title,
            width:600,
            frame: true,
            closable:true,
            header: false,
            url:"/asfa/PartyManager/Manager/Services/PartyServicesHandler.ashx",
            autoScroll:true,
            defaults:{
                width:200
            },
            items:[{
                xtype:"textfield",
                fieldLabel:"User Login Id",
                name:"tfId",
                allowBlank:false,
                id:"Id"
            },this.password,
             {
                xtype:"textfield",
                fieldLabel:"Confirm Password Verify",
                name:"tfConfirmPassword",
                allowBlank:false,
                inputType: 'password',
                id:"ConfirmPassword"
            },
             {
                xtype:"textfield",
                fieldLabel:"Password Hint",
                name:"tfPasswordHint",
                id:"PasswordHint"
            }]
    
        });
    this form is an items inside a windows.

    Note I don't use password.render('pass1'); because I don't want to use a div.

    regards
    Frank

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi