Query to add password strength meter

[narayan]

Hello can anybody tell me how to add password strength in password field

[HongTaiLang]

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

[cheonsa]

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