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
  • 2 weeks later...
  • 1 month later...
Harry Rogers Advanced Member

Harry Rogers

Posted
Posted

This is really nice.

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

 

Anyone?

 

Thanks

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.

  • 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.

  • 11 months later...
Sherzod Advanced Member

Sherzod

Posted
  • Author
Posted

Hi,

 

How to change color of input box (default -  white).

 

Try UniEdit -> Color property for this

 

BTW, which edition and build are you using ?!

 

Best regards,

aGaVVa Newbie

aGaVVa

Posted
Posted

Hi,

 

 

Try UniEdit -> Color property for this

 

BTW, which edition and build are you using ?!

 

Best regards,

 

The thing is that after applying the PassWord Modifier, UniEdit became white, and before that the Color property was yellow.

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...