Iniit
This commit is contained in:
@@ -0,0 +1,108 @@
|
||||
#pr-box {
|
||||
font: 13px/16px sans-serif;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
width: 300px;
|
||||
max-width: 90%;
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
#pr-box i {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 14px;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #333C47;
|
||||
}
|
||||
|
||||
#pr-box-inner {
|
||||
margin-top: 6px;
|
||||
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#pr-box p {
|
||||
padding: 20px;
|
||||
-webkit-border-radius: 2px 2px 0 0;
|
||||
-moz-border-radius: 2px 2px 0 0;
|
||||
border-radius: 2px 2px 0 0;
|
||||
|
||||
}
|
||||
|
||||
#pr-box ul {
|
||||
padding: 7px;
|
||||
-webkit-border-radius: 0 0 2px 2px;
|
||||
-moz-border-radius: 0 0 2px 2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#pr-box ul li {
|
||||
list-style: none;
|
||||
padding: 7px;
|
||||
color: #F16063;
|
||||
}
|
||||
|
||||
#pr-box ul li span {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
float: left;
|
||||
border-radius: 100%;
|
||||
margin-right: 10px;
|
||||
margin-left:2px;
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
#pr-box.light {
|
||||
color: #2d2f31;
|
||||
}
|
||||
|
||||
#pr-box.light p {
|
||||
background-color: #23a86d;
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
#pr-box.light ul {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
#pr-box.light ul li span {
|
||||
background-color: #fff;
|
||||
border: 3px solid #23a86d;
|
||||
}
|
||||
|
||||
#pr-box.light ul li span.pr-ok {
|
||||
background-color: #23a86d;
|
||||
border: 3px solid #23a86d;
|
||||
}
|
||||
|
||||
#pr-box.dark {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
#pr-box.dark p {
|
||||
background-color: #23a86d;
|
||||
}
|
||||
|
||||
#pr-box.dark ul {
|
||||
background-color: #333C47;
|
||||
}
|
||||
|
||||
#pr-box.dark ul li span {
|
||||
/* background-color: white;
|
||||
border: 3px solid #F16063;*/
|
||||
}
|
||||
|
||||
#pr-box.dark ul li span.pr-ok {
|
||||
color: #10BD72;
|
||||
|
||||
}
|
||||
#pr-box.dark ul li.pr-ok {
|
||||
color: #10BD72;
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
(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);
|
||||
Reference in New Issue
Block a user