Sherzod Posted July 13, 2016 Share Posted July 13, 2016 Hello Friends! Simple meter for password strength: 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. 4 Link to comment Share on other sites More sharing options...
Marlon Nardi Posted July 13, 2016 Share Posted July 13, 2016 Link to comment Share on other sites More sharing options...
mhmda Posted July 13, 2016 Share Posted July 13, 2016 Thank you Link to comment Share on other sites More sharing options...
billyChou Posted July 23, 2016 Share Posted July 23, 2016 thanks Link to comment Share on other sites More sharing options...
stiaan Posted July 25, 2016 Share Posted July 25, 2016 Awesome! Thanks! Link to comment Share on other sites More sharing options...
Harry Rogers Posted August 31, 2016 Share Posted August 31, 2016 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 Link to comment Share on other sites More sharing options...
Sherzod Posted August 31, 2016 Author Share Posted August 31, 2016 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 More sharing options...
Harry Rogers Posted August 31, 2016 Share Posted August 31, 2016 Perfect ! Many thanks Link to comment Share on other sites More sharing options...
PALF Posted September 24, 2016 Share Posted September 24, 2016 Hello: How to check in Delphi code strength(meter) of this component?? Thank's Link to comment Share on other sites More sharing options...
Sherzod Posted September 24, 2016 Author Share Posted September 24, 2016 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 More sharing options...
PALF Posted September 24, 2016 Share Posted September 24, 2016 Great!!! Thank's Link to comment Share on other sites More sharing options...
aGaVVa Posted September 5, 2017 Share Posted September 5, 2017 How to change color of input box (default - white). Link to comment Share on other sites More sharing options...
Sherzod Posted September 5, 2017 Author Share Posted September 5, 2017 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, Link to comment Share on other sites More sharing options...
aGaVVa Posted September 6, 2017 Share Posted September 6, 2017 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 More sharing options...
Sherzod Posted September 6, 2017 Author Share Posted September 6, 2017 Hi, The thing is that after applying the PassWord Modifier, UniEdit became white, and before that the Color property was yellow. http://forums.unigui.com/index.php?/topic/6922-passwordmeter/&do=findComment&comment=36322 Link to comment Share on other sites More sharing options...
aGaVVa Posted September 11, 2017 Share Posted September 11, 2017 Hi, http://forums.unigui.com/index.php?/topic/6922-passwordmeter/&do=findComment&comment=36322 Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now