Jump to content
narayan

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" />

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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...

×
×
  • Create New...