Jump to content

PasswordMeter


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
Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...

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

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

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.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...