Jump to content
uniGUI Discussion Forums

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

×