WebBuild/wwwroot/libs/passwordrequirement/passwordrequirement.js

(function ($) {
	$.fn.extend({
		passwordRequirements: function (options) {
			// options for the plugin
			var defaults = {
				numCharacters: 8,
				useLowercase: true,
				useUppercase: true,
				useNumbers: true,
				useSpecial: true,
				infoMessage: '',
				style: "dark", // Style Options light or dark
				fadeTime: 100 // FadeIn / FadeOut in milliseconds
			};

			options = $.extend(defaults, options);

			return this.each(function () {

				var o = options;

				o.infoMessage = '';
				// Add Variables for the li elements
				var numCharactersUI = '<li class="pr-numCharacters"><span class="fa fa-times"></span>Min 8 characters in Length</li>',
					useLowercaseUI = '',
					useUppercaseUI = '',
					useNumbersUI = '',
					useSpecialUI = '';
				// Check if the options are checked
				if (o.useLowercase === true) {
					useLowercaseUI = '<li class="pr-useLowercase"><span class="fa fa-times"></span>Lowercase letter (a-z)</li>';
				}
				if (o.useUppercase === true) {
					useUppercaseUI = '<li class="pr-useUppercase"><span class="fa fa-times"></span>Uppercase letter (A-Z)</li>';
				}
				if (o.useNumbers === true) {
					useNumbersUI = '<li class="pr-useNumbers"><span class="fa fa-times"></span>Number (i.e. 0-9)</li> ';
				}
				if (o.useSpecial === true) {
					useSpecialUI = '<li class="pr-useSpecial"><span class="fa fa-times"></span>Special character (!,@,#,etc...)</li>';
				}

				// Append password hint div
				var messageDiv = '<div id="pr-box"><i></i><div id="pr-box-inner"><ul>' + numCharactersUI + useLowercaseUI + useUppercaseUI + useNumbersUI + useSpecialUI + '</ul></div></div>';

				// Set campletion vatiables
				var numCharactersDone = true,
					useLowercaseDone = true,
					useUppercaseDone = true,
					useNumbersDone = true,
					useSpecialDone = true;

				// Show Message reusable function 
				var showMessage = function () {
					if (numCharactersDone === false || useLowercaseDone === false || useUppercaseDone === false || useNumbersDone === false || useSpecialDone === false) {
						$(".pr-password").each(function () {
							// Find the position of element
							var posH = $(this).offset().top,
								itemH = $(this).innerHeight(),
								totalH = posH + itemH,
								itemL = $(this).offset().left;
							// Append info box tho the body
							$("body .showpwsdreq").html(messageDiv);
							$("#pr-box").addClass(o.style)
								.fadeIn(o.fadeTime);
						});
					}
				};

				// Show password hint 
				$(this).on("focus", function () {
					showMessage();
				});

				// Delete Message reusable function 
				var deleteMessage = function () {
					var targetMessage = $("#pr-box");
					targetMessage.fadeOut(o.fadeTime, function () {
						$(this).remove();
					});
				};

				// Show / Delete Message when completed requirements function 
				var checkCompleted = function () {
					if (numCharactersDone === true && useLowercaseDone === true && useUppercaseDone === true && useNumbersDone === true && useSpecialDone === true) {
						deleteMessage();
					} else {
						showMessage();
					}
				};

				// Show password hint 
				$(this).on("blur", function () {
					deleteMessage();
				});


				// Show or Hide password hint based on user's event
				// Set variables
				var lowerCase = new RegExp('[a-z]'),
					upperCase = new RegExp('[A-Z]'),
					numbers = new RegExp('[0-9]'),
					specialCharacter = new RegExp('[!,%,&,@,#,$,^,*,?,_,~]');

				// Show or Hide password hint based on keyup
				$(this).on("keyup focus", function () {
					var thisVal = $(this).val();

					checkCompleted();

					// Check # of characters
					if (thisVal.length >= o.numCharacters) {
						// console.log("good numCharacters");
						$(".pr-numCharacters span").addClass("pr-ok fa-check").removeClass("fa-times");
						$(".pr-numCharacters").addClass("pr-ok");
						numCharactersDone = true;
					} else {
						// console.log("bad numCharacters");
						$(".pr-numCharacters span").removeClass("pr-ok fa-check").addClass("fa-times");
						$(".pr-numCharacters").removeClass("pr-ok");
						numCharactersDone = false;
					}
					// lowerCase meet requirements
					if (o.useLowercase === true) {
						if (thisVal.match(lowerCase)) {
							// console.log("good lowerCase");
							$(".pr-useLowercase span").addClass("pr-ok fa-check").removeClass("fa-times");
							$(".pr-useLowercase").addClass("pr-ok");
							useLowercaseDone = true;
						} else {
							// console.log("bad lowerCase");
							$(".pr-useLowercase span").removeClass("pr-ok fa-check").addClass("fa-times");
							$(".pr-useLowercase").removeClass("pr-ok");
							useLowercaseDone = false;
						}
					}
					// upperCase meet requirements
					if (o.useUppercase === true) {
						if (thisVal.match(upperCase)) {
							// console.log("good upperCase");
							$(".pr-useUppercase span").addClass("pr-ok fa-check").removeClass("fa-times");
							$(".pr-useUppercase").addClass("pr-ok");
							useUppercaseDone = true;
						} else {
							// console.log("bad upperCase");
							$(".pr-useUppercase span").removeClass("pr-ok fa-check").addClass("fa-times");
							$(".pr-useUppercase").removeClass("pr-ok");
							useUppercaseDone = false;
						}
					}
					// upperCase meet requirements
					if (o.useNumbers === true) {
						if (thisVal.match(numbers)) {
							// console.log("good numbers");
							$(".pr-useNumbers span").addClass("pr-ok fa-check").removeClass("fa-times");
							$(".pr-useNumbers").addClass("pr-ok");
							useNumbersDone = true;
						} else {
							// console.log("bad numbers");
							$(".pr-useNumbers span").removeClass("pr-ok fa-check").addClass("fa-times");
							$(".pr-useNumbers").removeClass("pr-ok");
							useNumbersDone = false;
						}
					}
					// upperCase meet requirements
					if (o.useSpecial === true) {
						if (thisVal.match(specialCharacter)) {
							// console.log("good specialCharacter");
							$(".pr-useSpecial span").addClass("pr-ok fa-check").removeClass("fa-times");
							$(".pr-useSpecial").addClass("pr-ok");
							useSpecialDone = true;
						} else {
							// console.log("bad specialCharacter");
							$(".pr-useSpecial span").removeClass("pr-ok fa-check").addClass("fa-times");
							$(".pr-useSpecial").removeClass("pr-ok");
							useSpecialDone = false;
						}
					}
				});
			});
		}
	});
})(jQuery);