1. #1
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    751
    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 Ext.plugin.extjs.form.PasswordStrength

    Ext.plugin.extjs.form.PasswordStrength


    A simple plugin that will change the background color of a TextField based on the score of the value entered. On every keystroke, this plugin will test that value against 16 tests and scores it.

    Usage:

    Code:
    Ext.apply(Ext.form.VTypes, {
        strength     : function(val, field) {
            return field.score > field.strength;
        },
        strengthText : "Password is not strong enough"
    });
    Ext.require([
        "Ext.form.*"
    ]);
    Ext.onReady(function() {
        var form = Ext.create("Ext.form.FormPanel", {
            renderTo    : Ext.getBody(),
            width       : 300,
            title       : "Password Strength Plugin",
            defaultType : "textfield",
            defaults    : {
                anchor    : "99%",
                msgTarget : "side"
            },
            items       : [
                {
                    fieldLabel : "Username"
                },
                {
                    fieldLabel : "Password",
                    inputType  : "password",
                    vtype      : "strength",
                    strength   : 24,
                    plugins    : {
                        ptype : "passwordstrength"
                    }
                }
            ]
        });
    });
    You can override the colors use by doing this, I don't claim to be an artist:

    Code:
    ...
    plugins : {
        ptype  : "passwordstrength",
        colors : ["C11B17", "FDD017", "4AA02C", "6AFB92", "00FF00"]
    }
    ...
    There must be 5 values. The score will also be appended to the field so you can do a VType.

    Github: https://github.com/mitchellsimoens/E...sswordStrength
    Demo: http://www.simoens.org/Ext.plugin.ex...swordStrength/
    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.

  2. #2
    Sencha User rogersja's Avatar
    Join Date
    Sep 2008
    Location
    Victoria, BC
    Posts
    102
    Vote Rating
    0
    rogersja is on a distinguished road

      0  

    Default


    That is really neat!

    One suggestion, would be to, in some fashion. Show the user that there are multiple levels of acceptable passwords. without knowing that there are 5 levels, a use may simply stop at the first green level, and not know they could make something stronger.

  3. #3
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,649
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    Hi Mitchell,

    this is a cool thing as passwordstrength is an important one to prevent being hacked.

    While testing it i have an issue from usability:

    * if you color the background it's difficult to see the input, it would be needed to calculate the complementary color for text color
    * the colors are fancy but need description. The user might think: That's funny, i get changing colors. But he don't understand what's about, you would need to descibe that.

    I think the simplest way to display passwordstrength is kind of filled bar beside with
    bad .......... good label beside, so it's easy to understand while typing.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  4. #4
    Ext JS Premium Member yyjia's Avatar
    Join Date
    Oct 2008
    Location
    Greater Boston Area
    Posts
    89
    Vote Rating
    0
    yyjia is on a distinguished road

      0  

    Default


    I modified the code from 1.x forum ( here: http://www.sencha.com/forum/showthre....PasswordMeter ) . I created a password meter widget that is Ext 4 compatible. You can check it from my blog post.
    With a quick test, it works fine. I have not done extensive test on it. Please let me know if you test on it and find any issue.
    Thanks and regards,

    Yiyu Jia

Similar Threads

  1. Ext.plugin.extjs.FIleDrop
    By mitchellsimoens in forum Ext:User Extensions and Plugins
    Replies: 20
    Last Post: 29 Nov 2012, 1:14 PM
  2. [PLUGIN] Ext.plugin.extjs.GridClick
    By mitchellsimoens in forum Ext:User Extensions and Plugins
    Replies: 0
    Last Post: 16 Mar 2011, 10:17 AM
  3. Eclipse's Extjs plugin anybody knows one?
    By andredecotia in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 15 Dec 2010, 5:40 AM
  4. How to create plugin for ExtJS
    By martinfeng in forum Ext 3.x: User Extensions and Plugins
    Replies: 4
    Last Post: 7 Nov 2010, 9:16 AM

Thread Participants: 3

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