Hybrid View

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

      0  

    Default [0.2] Ext.ux.PasswordMeter

    [0.2] Ext.ux.PasswordMeter


    After working with Ext for some time I tought it would be time to start writing some extentions.

    Ext.ux.PasswordMeter calculates the strength of a password, shows a nice graph and can be used in any form.

    Code and example can be found here.

    If you guys have suggestions or comments please let me know.

    Hopefully it can be usefull for someone


    @TODO:
    Compare with other fields in the form (configuration option)

    @fixed
    Fix IE layout inconsistency
    I improved the algorithm and it now works like expected
    Set meter to 0 if the password field is empty

  2. #2
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Very nice!!

    Note: In IE the progress widget is not correct align to password field. May be 1 or 2 pixel to right!

    Thanks in advance,
    Attached Images

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

      0  

    Default


    Thanks, I noticed it, I'll add it to the todo list

  4. #4
    Ext User
    Join Date
    Aug 2007
    Posts
    10
    Vote Rating
    0
    GrimReapa is on a distinguished road

      0  

    Default


    You might want to do some more checking based on other form fields (ie: first / last name).

    I entered my first name and last name, then i choose a password of first+last name and got a high rated password when in fact it isn't that great of a password.

    Looks good so far...just needs a little more improving.

  5. #5
    Ext User
    Join Date
    Mar 2007
    Location
    Southwest Florida
    Posts
    43
    Vote Rating
    0
    smpdawg is on a distinguished road

      0  

    Default


    I have a question what could be construed as a suggestion. Typically the creation of a new password usually requires a second field for confirming the previous password. I am not sure it needs to have a progress bar below the first one - perhaps even an option for this control to make both edit boxes and put the progress bar between them and have it verify that both passwords are the same. It is what I like to call laziness...

    Thanks, looks good.

  6. #6
    Ext User MarkT's Avatar
    Join Date
    Mar 2007
    Location
    Boston, MA, USA
    Posts
    61
    Vote Rating
    0
    MarkT is on a distinguished road

      0  

    Lightbulb p.length=0

    p.length=0


    If the user erases all of the characters in the password field, the score doesn't drop back down to zero. Adding the following to the top of calcStrength should fix that.
    PHP Code:
    if (p.length == 0) {
        return 
    0;

    If you give someone a program, you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.
    - Anonymous

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

      0  

    Default


    @GrimReapa
    I was thinking of something like that, good idea. I think I'll add a configuration option for that, so you can pass an array with fields that need to be compared with the password.

    @smpdawg
    Mayb I'll add this feature.

    @MarkT
    Thanks

  8. #8
    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 Pagebaker View Post
    @GrimReapa
    I was thinking of something like that, good idea. I think I'll add a configuration option for that, so you can pass an array with fields that need to be compared with the password.
    May I suggest a couple of things with regard to this:
    • Not all string values that we want/need to filter out will be available in a form field, so an array of string values would be nice.
    • We may not always know the values we wish to force the user to exclude, so a config option referencing a function that returns an array would also be handy.
    • Which leads me to wonder if maybe this can all be accomplished with a single function that gets called each and every time (like validators do) and returns an array of static string values, an array of field values, a combination, or whatever the developer decides.
    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.

  9. #9
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    213
    Vote Rating
    0
    sanjshah is on a distinguished road

      0  

    Default


    Hi,

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

    Code:
    	var mypassword = new Ext.ux.PasswordMeter({
    			applyTo:'password',
    			width:175
        });
    But cannot see the graph - am I applying this wrong?

    Thanks!

  10. #10
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    686
    Vote Rating
    22
    Dumbledore will become famous soon enough Dumbledore will become famous soon enough

      0  

    Default


    perhaps you forgot to add the css-classes?

    Bye