5
Używam wtyczki jQuery Password Strength do Twitter Bootstrap, aby wyświetlić siłę hasła. kiedy wprowadzimy nowe hasło, wskaźnik wyświetli jego siłę. Chcę wyświetlić wskaźnik siły hasła wewnątrz niestandardowego elementu div. plugin jQuery Hasło Siła jest takjak dostosować lokalizację wskaźnika siły jQuery Hasło
jQuery(document).ready(function() {
var options = {
onLoad: function() {
$('#messages').text('Start typing password');
},
onKeyUp: function (evt) {
$(evt.target).pwstrength("outputErrorList");
}
};
$('#new_password').pwstrength(options);
});
(function ($) {
"use strict";
var options = {
errors: [],
// Options
minChar: 8,
errorMessages: {
password_to_short: "The Password is too short",
same_as_username: "Your password cannot be the same as your username"
},
scores: [17, 26, 40, 50],
verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"],
showVerdicts: true,
raisePower: 1.4,
usernameField: "#username",
onLoad: undefined,
onKeyUp: undefined,
viewports: {
progress: undefined,
verdict: undefined,
errors: undefined
},
// Rules stuff
ruleScores: {
wordNotEmail: -100,
wordLength: -100,
wordSimilarToUsername: -100,
wordLowercase: 1,
wordUppercase: 3,
wordOneNumber: 3,
wordThreeNumbers: 5,
wordOneSpecialChar: 3,
wordTwoSpecialChar: 5,
wordUpperLowerCombo: 2,
wordLetterNumberCombo: 2,
wordLetterNumberCharCombo: 2
},
rules: {
wordNotEmail: true,
wordLength: true,
wordSimilarToUsername: true,
wordLowercase: true,
wordUppercase: true,
wordOneNumber: true,
wordThreeNumbers: true,
wordOneSpecialChar: true,
wordTwoSpecialChar: true,
wordUpperLowerCombo: true,
wordLetterNumberCombo: true,
wordLetterNumberCharCombo: true
},
validationRules: {
wordNotEmail: function (options, word, score) {
return word.match(/^([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~][email protected]((((([a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,6})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)$/i) && score;
},
wordLength: function (options, word, score) {
var wordlen = word.length,
lenScore = Math.pow(wordlen, options.raisePower);
if (wordlen < options.minChar) {
lenScore = (lenScore + score);
options.errors.push(options.errorMessages.password_to_short);
}
return lenScore;
},
wordSimilarToUsername: function (options, word, score) {
var username = $(options.usernameField).val();
if (username && word.toLowerCase().match(username.toLowerCase())) {
options.errors.push(options.errorMessages.same_as_username);
return score;
}
return true;
},
wordLowercase: function (options, word, score) {
return word.match(/[a-z]/) && score;
},
wordUppercase: function (options, word, score) {
return word.match(/[A-Z]/) && score;
},
wordOneNumber : function (options, word, score) {
return word.match(/\d+/) && score;
},
wordThreeNumbers : function (options, word, score) {
return word.match(/(.*[0-9].*[0-9].*[0-9])/) && score;
},
wordOneSpecialChar : function (options, word, score) {
return word.match(/.[!,@,#,$,%,\^,&,*,?,_,~]/) && score;
},
wordTwoSpecialChar : function (options, word, score) {
return word.match(/(.*[!,@,#,$,%,\^,&,*,?,_,~].*[!,@,#,$,%,\^,&,*,?,_,~])/) && score;
},
wordUpperLowerCombo : function (options, word, score) {
return word.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/) && score;
},
wordLetterNumberCombo : function (options, word, score) {
return word.match(/([a-zA-Z])/) && word.match(/([0-9])/) && score;
},
wordLetterNumberCharCombo : function (options, word, score) {
return word.match(/([a-zA-Z0-9].*[!,@,#,$,%,\^,&,*,?,_,~])|([!,@,#,$,%,\^,&,*,?,_,~].*[a-zA-Z0-9])/) && score;
}
}
},
setProgressBar = function ($el, score) {
var options = $el.data("pwstrength"),
progressbar = options.progressbar,
$verdict;
if (options.showVerdicts) {
if (options.viewports.verdict) {
$verdict = $(options.viewports.verdict).find(".password-verdict");
} else {
$verdict = $el.parent().find(".password-verdict");
if ($verdict.length === 0) {
$verdict = $('<span class="password-verdict"></span>');
$verdict.insertAfter($el);
}
}
}
if (score < options.scores[0]) {
progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success");
progressbar.find(".bar").css("width", "5%");
if (options.showVerdicts) {
$verdict.text(options.verdicts[0]);
}
} else if (score >= options.scores[0] && score < options.scores[1]) {
progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success");
progressbar.find(".bar").css("width", "25%");
if (options.showVerdicts) {
$verdict.text(options.verdicts[1]);
}
} else if (score >= options.scores[1] && score < options.scores[2]) {
progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success");
progressbar.find(".bar").css("width", "50%");
if (options.showVerdicts) {
$verdict.text(options.verdicts[2]);
}
} else if (score >= options.scores[2] && score < options.scores[3]) {
progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success");
progressbar.find(".bar").css("width", "75%");
if (options.showVerdicts) {
$verdict.text(options.verdicts[3]);
}
} else if (score >= options.scores[3]) {
progressbar.addClass("progress-success").removeClass("progress-warning").removeClass("progress-danger");
progressbar.find(".bar").css("width", "100%");
if (options.showVerdicts) {
$verdict.text(options.verdicts[4]);
}
}
},
calculateScore = function ($el) {
var self = this,
word = $el.val(),
totalScore = 0,
options = $el.data("pwstrength");
$.each(options.rules, function (rule, active) {
if (active === true) {
var score = options.ruleScores[rule],
result = options.validationRules[rule](options, word, score);
if (result) {
totalScore += result;
}
}
});
setProgressBar($el, totalScore);
return totalScore;
},
progressWidget = function() {
return '<div class="progress"><div class="bar"></div></div>';
},
methods = {
init: function (settings) {
var self = this,
allOptions = $.extend(options, settings);
return this.each(function (idx, el) {
var $el = $(el),
progressbar,
verdict;
$el.data("pwstrength", allOptions);
$el.on("keyup", function (event) {
var options = $el.data("pwstrength");
options.errors = [];
calculateScore.call(self, $el);
if ($.isFunction(options.onKeyUp)) {
options.onKeyUp(event);
}
});
progressbar = $(progressWidget());
if (allOptions.viewports.progress) {
$(allOptions.viewports.progress).append(progressbar);
} else {
progressbar.insertAfter($el);
}
progressbar.find(".bar").css("width", "0%");
$el.data("pwstrength").progressbar = progressbar;
if (allOptions.showVerdicts) {
verdict = $('<span class="password-verdict">' + allOptions.verdicts[0] + '</span>');
if (allOptions.viewports.verdict) {
$(allOptions.viewports.verdict).append(verdict);
} else {
verdict.insertAfter($el);
}
}
if ($.isFunction(allOptions.onLoad)) {
allOptions.onLoad();
}
});
},
destroy: function() {
this.each(function (idx, el) {
var $el = $(el);
$el.parent().find("span.password-verdict").remove();
$el.parent().find("div.progress").remove();
$el.parent().find("ul.error-list").remove();
$el.removeData("pwstrength");
});
},
forceUpdate: function() {
var self = this;
this.each(function (idx, el) {
var $el = $(el),
options = $el.data("pwstrength");
options.errors = [];
calculateScore.call(self, $el);
});
},
outputErrorList: function() {
this.each(function (idx, el) {
var output = '<ul class="error-list">',
$el = $(el),
errors = $el.data("pwstrength").errors,
viewports = $el.data("pwstrength").viewports,
verdict;
$el.parent().find("ul.error-list").remove();
if (errors.length > 0) {
$.each(errors, function (i, item) {
output += '<li>' + item + '</li>';
});
output += '</ul>';
if (viewports.errors) {
$(viewports.errors).html(output);
} else {
output = $(output);
verdict = $el.parent().find("span.password-verdict");
if (verdict.length > 0) {
el = verdict;
}
output.insertAfter(el);
}
}
});
},
addRule: function (name, method, score, active) {
this.each(function (idx, el) {
var options = $(el).data("pwstrength");
options.rules[name] = active;
options.ruleScores[name] = score;
options.validationRules[name] = method;
});
},
changeScore: function (rule, score) {
this.each(function (idx, el) {
$(el).data("pwstrength").ruleScores[rule] = score;
});
},
ruleActive: function (rule, active) {
this.each(function (idx, el) {
$(el).data("pwstrength").rules[rule] = active;
});
}
};
$.fn.pwstrength = function (method) {
var result;
if (methods[method]) {
result = methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === "object" || !method) {
result = methods.init.apply(this, arguments);
} else {
$.error("Method " + method + " does not exist on jQuery.pwstrength");
}
return result;
};
}(jQuery));@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;} to{background-position:0 0;}}@-moz-keyframes progress-bar-stripes{from{background-position:40px 0;} to{background-position:0 0;}}@-ms-keyframes progress-bar-stripes{from{background-position:40px 0;} to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;} to{background-position:0 0;}}.progress{overflow:hidden;height:20px;margin-bottom:20px;background-color:#f7f7f7;background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(to bottom, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.progress .bar{width:0%;height:100%;color:#ffffff;float:left;font-size:12px;text-align:center;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0e90d2;background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(to bottom, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;}
.progress .bar+.bar{-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);-moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);}
.progress-striped .bar{background-color:#149bdf;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;}
.progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;-ms-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;}
.progress-danger .bar,.progress .bar-danger{background-color:#dd514c;background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(to bottom, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);}
.progress-danger.progress-striped .bar,.progress-striped .bar-danger{background-color:#ee5f5b;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}
.progress-success .bar,.progress .bar-success{background-color:#5eb95e;background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(to bottom, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);}
.progress-success.progress-striped .bar,.progress-striped .bar-success{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}
.progress-info .bar,.progress .bar-info{background-color:#4bb1cf;background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(to bottom, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);}
.progress-info.progress-striped .bar,.progress-striped .bar-info{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}
.progress-warning .bar,.progress .bar-warning{background-color:#faa732;background-image:-moz-linear-gradient(top, #fbb450, #f89406);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));background-image:-webkit-linear-gradient(top, #fbb450, #f89406);background-image:-o-linear-gradient(top, #fbb450, #f89406);background-image:linear-gradient(to bottom, #fbb450, #f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);}
.progress-warning.progress-striped .bar,.progress-striped .bar-warning{background-color:#fbb450;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<form>
<fieldset>
<legend>Please type in your password</legend>
Current Password: <input type="password" id="current_password" /><br />
New Password: <input type="password" id="new_password" />
Confirm Password: <input type="password" id="confirm_password" /><br />
Password Strength: <div id="password-indicator"></div>
</fieldset>
</form>Będę wdzięczny za każdą pomoc, gdzie możemy dostosować położenie wskaźnika i wyświetlić wskaźnik siły hasło wewnątrz niestandardowego div hasłem wskaźnikowej
Password Strength: <div id="password-indicator"></div>