Jump to content

PasswordMeter

Sherzod

By Sherzod
in Components and Code Samples

 Share

Recommended Posts

Sherzod Advanced Member

Sherzod

Posted
Posted

Hello Friends!

 

Simple meter for password strength:

 

post-906-0-72097400-1468420091_thumb.png

 

How to use?

 

For example for UniEdit:

 

1. UniServerModule.CustomCSS :

.x-form-strengthmeter {
    width : 100%;
    float: right;
    background: #ff4c00; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    
    background: -moz-linear-gradient(left,  #ff4c00 0%, #edd712 50%, #1aff00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff4c00), color-stop(50%,#edd712), color-stop(100%,#1aff00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #ff4c00 0%,#edd712 50%,#1aff00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #ff4c00 0%,#edd712 50%,#1aff00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #ff4c00 0%,#edd712 50%,#1aff00 100%); /* IE10+ */
    background: linear-gradient(left,  #ff4c00 0%,#edd712 50%,#1aff00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4c00', endColorstr='#1aff00',GradientType=1 ); /* IE6-8 */
}
 
.x-form-strengthmeter-scorebar {
    background-color: white;
    float: right;
    line-height: 6px;
    width: 100%;
}

2. UniEdit->ClientEvents->UniEvents: beforeInit fn

 

 

 

function beforeInit(sender, config)
{
    config.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>',
        '<tpl if="value">value="{[values.value]}" </tpl>',
        'class="{fieldCls} {typeCls}" autocomplete="off" /></div>',
        '<div class="' + Ext.baseCSSPrefix + 'form-strengthmeter">',
        '<div class="' + Ext.baseCSSPrefix + 'form-strengthmeter-scorebar"> </div>',
        '</div>', {
            compiled: true,
            disableFormats: true
        }
    ];

    //config.inputType = 'password';

    config.listeners = {
        change: function(sender, newValue, oldValue, eOpts) {
            this.updateMeter(newValue);
        },
        dirtychange: function(sender, isDirty, eOpts) {
            this.updateMeter(this.value);
        },
        reset: function() {
            this.callParent();
            this.updateMeter();
        },
        afterrender: function(sender, eOpts) {
            this.updateMeter(this.value);
        }
    };

    config.updateMeter = function(val) {
        var me = this,
            maxWidth, score, scoreWidth,
            objMeter = me.el.down('.' + Ext.baseCSSPrefix + 'form-strengthmeter'),
            scoreBar = me.el.down('.' + Ext.baseCSSPrefix + 'form-strengthmeter-scorebar');

        if (val) {
            maxWidth = objMeter.getWidth();
            score = me.calcStrength(val);
            scoreWidth = maxWidth - (maxWidth / 100) * score;
            scoreBar.setWidth(scoreWidth, true);
        } else {
            maxWidth = objMeter.getWidth();
            scoreBar.setWidth(maxWidth, true);
        }
    };

    config.calcStrength = function(p) {
        // PASSWORD LENGTH
        var len = p.length,
            score = len;

        if (len > 0 && len <= 4) { // length 4 or
            // less
            score += len
        } else if (len >= 5 && len <= 7) {
            // length between 5 and 7
            score += 6;
        } else if (len >= 8 && len <= 15) {
            // length between 8 and 15
            score += 12;
        } else if (len >= 16) { // length 16 or more
            score += 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
            score += 1;
        }
        if (p.match(/[A-Z]/)) { // [verified] at least one upper
            // case letter
            score += 5;
        }
        // NUMBERS
        if (p.match(/\d/)) { // [verified] at least one
            // number
            score += 5;
        }
        if (p.match(/(?:.*?\d){3}/)) {
            // [verified] at least three numbers
            score += 5;
        }

        // SPECIAL CHAR
        if (p.match(/[\!,@,#,$,%,\^,&,\*,\?,_,~]/)) {
            // [verified] at least one special character
            score += 5;
        }
        // [verified] at least two special characters
        if (p.match(/(?:.*?[\!,@,#,$,%,\^,&,\*,\?,_,~]){2}/)) {
            score += 5;
        }

        // COMBOS
        if (p.match(/(?=.*[a-z])(?=.*[A-Z])/)) {
            // [verified] both upper and lower case
            score += 2;
        }
        if (p.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/)) {
            // [verified] both letters and numbers
            score += 2;
        }
        // [verified] letters, numbers, and special characters
        if (p.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\!,@,#,$,%,\^,&,\*,\?,_,~])/)) {
            score += 2;
        }

        return Math.min(Math.round(score * 2), 100);
    }
}

 

 

 

Of course still need to optimize the calcStrength function.

Try...

 

Best regards.

  • Upvote 4
Link to comment
Share on other sites
  • 2 weeks later...
  • 1 month later...
Sherzod Advanced Member

Sherzod

Posted
  • Author
Posted

The font.size defined in the object inspector gets overridden - presumably some addition to the before init js code to redefine this is possible.?

My attempts have so far resulted in broken js

 

Hi,

 

If I understand correctly you, try this:

 

 

 

function beforeInit(sender, config)
{
    config.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>',
        '<tpl if="value">value="{[values.value]}" </tpl>',
        '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',               //<----------------
        'class="{fieldCls} {typeCls}" autocomplete="off" /></div>',
        '<div class="' + Ext.baseCSSPrefix + 'form-strengthmeter">',
        '<div class="' + Ext.baseCSSPrefix + 'form-strengthmeter-scorebar"> </div>',
        '</div>', {
            compiled: true,
            disableFormats: true
        }
    ];

    //config.inputType = 'password';

    config.listeners = {
        change: function(sender, newValue, oldValue, eOpts) {
            this.updateMeter(newValue);
        },
        dirtychange: function(sender, isDirty, eOpts) {
            this.updateMeter(this.value);
        },
        reset: function() {
            this.callParent();
            this.updateMeter();
        },
        afterrender: function(sender, eOpts) {
            this.updateMeter(this.value);
        }
    };

    config.updateMeter = function(val) {
        var me = this,
            maxWidth, score, scoreWidth,
            objMeter = me.el.down('.' + Ext.baseCSSPrefix + 'form-strengthmeter'),
            scoreBar = me.el.down('.' + Ext.baseCSSPrefix + 'form-strengthmeter-scorebar');

        if (val) {
            maxWidth = objMeter.getWidth();
            score = me.calcStrength(val);
            scoreWidth = maxWidth - (maxWidth / 100) * score;
            scoreBar.setWidth(scoreWidth, true);
        } else {
            maxWidth = objMeter.getWidth();
            scoreBar.setWidth(maxWidth, true);
        }
    };

    config.calcStrength = function(p) {
        // PASSWORD LENGTH
        var len = p.length,
            score = len;

        if (len > 0 && len <= 4) { // length 4 or
            // less
            score += len
        } else if (len >= 5 && len <= 7) {
            // length between 5 and 7
            score += 6;
        } else if (len >= 8 && len <= 15) {
            // length between 8 and 15
            score += 12;
        } else if (len >= 16) { // length 16 or more
            score += 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
            score += 1;
        }
        if (p.match(/[A-Z]/)) { // [verified] at least one upper
            // case letter
            score += 5;
        }
        // NUMBERS
        if (p.match(/\d/)) { // [verified] at least one
            // number
            score += 5;
        }
        if (p.match(/(?:.*?\d){3}/)) {
            // [verified] at least three numbers
            score += 5;
        }

        // SPECIAL CHAR
        if (p.match(/[\!,@,#,$,%,\^,&,\*,\?,_,~]/)) {
            // [verified] at least one special character
            score += 5;
        }
        // [verified] at least two special characters
        if (p.match(/(?:.*?[\!,@,#,$,%,\^,&,\*,\?,_,~]){2}/)) {
            score += 5;
        }

        // COMBOS
        if (p.match(/(?=.*[a-z])(?=.*[A-Z])/)) {
            // [verified] both upper and lower case
            score += 2;
        }
        if (p.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/)) {
            // [verified] both letters and numbers
            score += 2;
        }
        // [verified] letters, numbers, and special characters
        if (p.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\!,@,#,$,%,\^,&,\*,\?,_,~])/)) {
            score += 2;
        }

        return Math.min(Math.round(score * 2), 100);
    }
}

 

 

 

Best regards.

Link to comment
Share on other sites
  • 4 weeks later...
Sherzod Advanced Member

Sherzod

Posted
  • Author
Posted

Hi,

 

For example, like this:

 

1.

...
    config.updateMeter = function(val) {
        var me = this,
            maxWidth, score, scoreWidth,
            objMeter = me.el.down('.' + Ext.baseCSSPrefix + 'form-strengthmeter'),
            scoreBar = me.el.down('.' + Ext.baseCSSPrefix + 'form-strengthmeter-scorebar');

        if (val) {
            maxWidth = objMeter.getWidth();
            score = me.calcStrength(val);
            scoreWidth = maxWidth - (maxWidth / 100) * score;
            scoreBar.setWidth(scoreWidth, true);
            ajaxRequest(me, "strengthmeter", ["val="+score]);
        } else {
            maxWidth = objMeter.getWidth();
            scoreBar.setWidth(maxWidth, true);
            ajaxRequest(me, "strengthmeter", ["val=0"]);
        }
    };
...

2.

procedure TMainForm.UniEdit1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName='strengthmeter' then
    yourVariable := Params.Values['val']
end;

Best regards.

Link to comment
Share on other sites
  • 11 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...