Jump to content

Query to add password strength meter


Recommended Posts

The following code might be help you:

1. Insert in the Header:

<script type="text/javascript">
var indicatorStyle = '{"styles": [\
{"backgroundColor": "#76B23C", "width": "98%", "innerHTML": "Very strong"},\
{"backgroundColor": "#76997F", "width": "75%", "innerHTML": "Strong"},\
{"backgroundColor": "#D6A86F", "width": "50%", "innerHTML": "Medium"}, \
{"backgroundColor": "#65A6DF", "width": "40%", "innerHTML": "Weak"}, \
{"backgroundColor": "#4682B4", "width": "25%", "innerHTML": "Very weak"}, \
{"backgroundColor": "#C0C0C0", "width": "10%", "innerHTML": "Too short"}]}';

if (typeof passwordCheker == 'undefined') {
	
	passwordCheker = (function (sets) {
		var minchar;
		if (sets.minLenPas) { minchar = sets.minLenPas; } else { minchar = 8; }
		var mediumAnyWay = 15;
		if ((sets.modeBubble) && (sets.modeBubble == 1)) { this.modeView = 1; } else { this.modeView = 0; }
		
		this.WindowOnload = function (f) {
			var prev = window.onload;
			window.onload = function () { if (prev) prev(); f(); }
		}

		this.indicator = function (x) {
			var obj = this;
			try {
				if (x) {
					var el; var ele;
					var elem = x.split(/[;:]/);				
					for (var i = 0, len = elem.length; i < len; i++) {
						ele = elem[i];
						var form = this.getForm(document.getElementById(sets.anhor));
						var inputs = form.getElementsByTagName('input');
						for (var a = 0, len = inputs.length; a < len; a++) {
							if (inputs[a].id==ele) {
								el = inputs[a];
								this.docOnEvent(el, obj);
							}
						}
					}
				}
				else {
					var form = this.getForm(document.getElementById(sets.anhor));
					var inputs = form.getElementsByTagName('input');
					if (inputs.length != 0) {
						for (var i = 0, len = inputs.length; i < len; i++) {
							if (inputs[i].type == "password") {
								el = inputs[i];
								this.docOnEvent(el, obj);
							}
						}
					}
				}
			}
			catch (e) {  }
		}

		function getCoords(elem) {
			var distanceToBubble = 15;
			var box = elem.getBoundingClientRect();
			var body = document.body;
			var docEl = document.documentElement;
			var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
			var clientLeft = docEl.clientLeft || body.clientLeft || 0;
			var left = box.left + scrollLeft - clientLeft;
			left = Math.round(left);
			var widthEl = Math.round(elem.offsetWidth);
			left = left + widthEl + distanceToBubble;
			return left;
		}

		this.getForm = function (v_node) {
			var form = v_node;
			while (form && form.tagName.toLowerCase() != 'form') { form = form.parentNode; }
			if (!form) { return; }
			return form;
		};

		this.docOnEvent = function (el, obj) {
			var prev = el.onkeyup;
			el.onkeyup = function () { if (prev) prev(); obj.indicatorCanvas(el); }
			var prev1 = el.onblur;
			el.onblur = function () { if (prev1) prev1(); obj.hideDiv(el); }
			var prev2 = el.onfocus;
			el.onfocus = function () { if (prev2) prev2(); obj.visibleDiv(el); }
		}

		this.visibleDiv = function (node) {
			if (this.modeView == 1) {
				var nextNode = node.nextSibling;
				if (!nextNode) {
					var divToolip = document.createElement('div');
					divToolip.id = node.id + "_tooltip";
					var divBar = document.createElement('div');
					divBar.id = node.id + "_bar";
					divBar.style.cssText = "font-size: 1px; height: 5px; width: 0px; margin-bottom: 3px;";
					var divText = document.createElement('div');
					divText.id = node.id + "_text";
					divText.style.cssText = "font-family: Arial; font-size: 12px; margin-left: 1px;";
					divToolip.appendChild(divBar);
					divToolip.appendChild(divText);
					var divTriangB = document.createElement('div');
					divTriangB.style.cssText = "border-color:  transparent #C0C0C0 transparent transparent; border-style: solid; border-width: 8px;	height:0; width:0;	position:absolute; bottom:15px;	left:-16px;";
					var divTriang = document.createElement('div');
					divTriang.style.cssText = "border-color:  transparent #ffffff transparent transparent; border-style: solid; border-width: 8px; height:0; width:0px; position:absolute;	bottom:15px; left:-13px;";
					divToolip.appendChild(divTriangB);
					divToolip.appendChild(divTriang);
					var leftToolTip = getCoords(node);
					divToolip.style.cssText = "background-color:transparent; border:2px solid #C0C0C0; font-size:15px;	margin-top: -11px; padding:12px 12px 10px 12px;	width:100px; display:inline; position: absolute; left:" + leftToolTip + "px;";
					try {
						this.insertAfter(divToolip, node);
					}
					catch (e) { }
				}
			}
			else {
				var nextNode = node.nextSibling;
				if ((!nextNode) || (!(nextNode.id==node.id + "_bar"))) {
					var divBar = document.createElement('div');
					divBar.id = node.id + "_bar";
					divBar.style.cssText = "font-size: 1px; height: 5px; width: 0px; margin-top: 5px; margin-left: 2px; margin-bottom: 3px; ";
					var divText = document.createElement('div');
					divText.id = node.id + "_text";
					divText.style.cssText = "margin-left: 3px; font-family: Arial; font-size: 12px; margin-top: 0px;";
					try {
						this.insertAfter(divText, node);
						this.insertAfter(divBar, node);
					}
					catch (e) { }
				}
			}
          node.onkeyup();
		}

		this.insertAfter = function (insertEl, arterEl) { 
			return arterEl.parentNode.insertBefore(insertEl, arterEl.nextSibling);
		}

		this.hideDiv = function (Obj) {
			if (this.modeView == 1) {
				try {
					var nextBar = Obj.nextSibling;
					if (nextBar.id == Obj.id + "_tooltip") { nextBar.parentNode.removeChild(nextBar); }
				}
				catch (e) { }
			}
			else {
				try {
					var nextBar = Obj.nextSibling;
					var nextText = nextBar.nextSibling;
					if (nextBar.id == Obj.id + "_bar") { nextBar.parentNode.removeChild(nextBar); }
					if (nextText.id == Obj.id + "_text") { nextText.parentNode.removeChild(nextText); }
				}
				catch (e) { }
			}
		}

		this.indicatorCanvas = function (obj) {
			var strText;
			var strColor;
			var strWidth;                   
			var strPassword = obj.value;
			var nScore = this.checkPassword(strPassword);
			var ctlBar; var ctlText;
			var form = this.getForm(document.getElementById(sets.anhor));
			var divs = form.getElementsByTagName('div');
			if (divs.length != 0) {
				for (var i = 0, len = divs.length; i < len; i++) {
					if (divs[i].id == obj.id + "_bar") {
						ctlBar = divs[i];
					}
					else if (divs[i].id == obj.id + "_text") {
						ctlText = divs[i];
					}
				}
			}
			var styler = eval('(' + indicatorStyle + ')');
			if (!ctlBar || !ctlText) return;
			else if (nScore == 100) { strText = styler.styles[0].innerHTML; strColor = styler.styles[0].backgroundColor; strWidth = styler.styles[0].width; }
			else if (nScore >= 30) { strText = styler.styles[1].innerHTML; strColor = styler.styles[1].backgroundColor; strWidth = styler.styles[1].width; }
			else if (nScore >= 20) { strText = styler.styles[2].innerHTML; strColor = styler.styles[2].backgroundColor; strWidth = styler.styles[2].width; }
			else if (nScore >= 10) { strText = styler.styles[3].innerHTML; strColor = styler.styles[3].backgroundColor; strWidth = styler.styles[3].width; }
			else if (nScore >= 5) { strText = styler.styles[4].innerHTML; strColor = styler.styles[4].backgroundColor; strWidth = styler.styles[4].width; }
			else if (nScore != 0) { strText = styler.styles[5].innerHTML; strColor = styler.styles[5].backgroundColor; strWidth = styler.styles[5].width; }
			else { strText = styler.styles[5].innerHTML; strColor = styler.styles[5].backgroundColor; strWidth = styler.styles[5].width; }
			ctlBar.style.backgroundColor = strColor;
			ctlBar.style.width = strWidth;
			ctlText.innerHTML = "[color= " + strColor + ";] " + strText + "[/color]";
		}

		this.checkPassword = function (strPassword) {
			var nScore = 0; var nSpecCount=0; var nNumberCount=0; var nUpperCount=0; var nLowerCount=0
			var matches = 0;  
			matches = strPassword.split(strPassword.charAt(0)).length - 1;
			if (strPassword.length >= minchar) {
							if (strPassword.match(/[a-z]/)) { nLowerCount = 1 };
							if (strPassword.match(/[A-Z]/)) { nUpperCount = 1 };
							if (strPassword.match(/\d+/)) { nNumberCount = 1 };
							if (strPassword.match(/.[!,@,#,$,%,^,&,*,?,_,~,(,),+,=,-,\,/]/)) { nSpecCount = 1 }
                                   
							if (nUpperCount != 0 && nLowerCount != 0) { nScore += 20; }   
							else if (nUpperCount != 0 || nLowerCount != 0)  { nScore += 10; }
                       
							if(nNumberCount != 0 && nSpecCount != 0) { nScore += 20; }
							else if (nNumberCount != 0 || nSpecCount != 0) { nScore += 10; }
                                               
							if ((nScore == 10) && (strPassword.length >= mediumAnyWay)) { nScore = 20; }
							if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount != 0 && nSpecCount != 0) { nScore = 100; }
					}
			else if (strPassword.length >= minchar && matches == strPassword.length && strPassword.length < mediumAnyWay) { nScore = 5; }
			else if (strPassword.length < minchar) { nScore = 1; }
			return nScore;
		}
	})
};


	window.onload = function () {
//comment (2)
	var setup = { "anhor": "er" };
	var passMeter = new passwordCheker(setup);
//comment (1)

passMeter.WindowOnload(passMeter.indicator('InsertRecordPassword'));
};
</script>

Change the line of code passMeter.WindowOnload(passMeter.indicator('InsertRecordPassword')); to passMeter.WindowOnload(passMeter.indicator('InsertRecord***'));

*** is the FieldName

2. insert in the HTML Block:

<input type="hidden" id="er" />
Link to comment
Share on other sites

  • 5 years later...

Hi,

 

Setting the Password Strength Level lets you enforce the minimum strength of passwords that users select for themselves. Minimum password strength requirements can be enforced on Caspio forms wherever passwords are submitted, updated, or reset.

You do not have to include complex programming to achieve this.

You can check this link for reference: https://howto.caspio.com/datapages/datapage-components/field-configuration-options/password-options/

 

Regards,

kristina

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

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.

Loading...
 Share

×
×
  • Create New...