324 lines
10 KiB
JavaScript
324 lines
10 KiB
JavaScript
/*jslint browser: true, unparam: true */
|
|
/*global jQuery */
|
|
|
|
/*
|
|
* jQuery Password Strength plugin for Twitter Bootstrap
|
|
*
|
|
* Copyright (c) 2008-2013 Tane Piper
|
|
* Copyright (c) 2013 Alejandro Blanco
|
|
* Dual licensed under the MIT and GPL licenses.
|
|
*/
|
|
|
|
var ui = {};
|
|
|
|
(function ($, ui) {
|
|
"use strict";
|
|
|
|
var statusClasses = ["error", "warning", "success"],
|
|
verdictKeys = [
|
|
"veryWeak", "weak", "normal", "medium", "strong", "veryStrong"
|
|
];
|
|
|
|
ui.getContainer = function (options, $el) {
|
|
var $container;
|
|
|
|
$container = $(options.ui.container);
|
|
if (!($container && $container.length === 1)) {
|
|
$container = $el.parent();
|
|
}
|
|
return $container;
|
|
};
|
|
|
|
ui.findElement = function ($container, viewport, cssSelector) {
|
|
if (viewport) {
|
|
return $container.find(viewport).find(cssSelector);
|
|
}
|
|
return $container.find(cssSelector);
|
|
};
|
|
|
|
ui.getUIElements = function (options, $el) {
|
|
var $container, result;
|
|
|
|
if (options.instances.viewports) {
|
|
return options.instances.viewports;
|
|
}
|
|
|
|
$container = ui.getContainer(options, $el);
|
|
|
|
result = {};
|
|
result.$progressbar = ui.findElement($container, options.ui.viewports.progress, "div.progress");
|
|
if (options.ui.showVerdictsInsideProgressBar) {
|
|
result.$verdict = result.$progressbar.find("span.password-verdict");
|
|
}
|
|
|
|
if (!options.ui.showPopover) {
|
|
if (!options.ui.showVerdictsInsideProgressBar) {
|
|
result.$verdict = ui.findElement($container, options.ui.viewports.verdict, "span.password-verdict");
|
|
}
|
|
result.$errors = ui.findElement($container, options.ui.viewports.errors, "ul.error-list");
|
|
}
|
|
result.$score = ui.findElement($container, options.ui.viewports.score,
|
|
"span.password-score");
|
|
|
|
options.instances.viewports = result;
|
|
return result;
|
|
};
|
|
|
|
ui.initProgressBar = function (options, $el) {
|
|
var $container = ui.getContainer(options, $el),
|
|
progressbar = "<div class='progress ";
|
|
|
|
if (options.ui.bootstrap2) {
|
|
// Boostrap 2
|
|
progressbar += options.ui.progressBarExtraCssClasses +
|
|
"'><div class='";
|
|
} else {
|
|
// Bootstrap 3 & 4
|
|
progressbar += options.ui.progressExtraCssClasses + "'><div class='" +
|
|
options.ui.progressBarExtraCssClasses + " progress-";
|
|
}
|
|
progressbar += "bar'>";
|
|
|
|
if (options.ui.showVerdictsInsideProgressBar) {
|
|
progressbar += "<span class='password-verdict'></span>";
|
|
}
|
|
|
|
progressbar += "</div></div>";
|
|
|
|
if (options.ui.viewports.progress) {
|
|
$container.find(options.ui.viewports.progress).append(progressbar);
|
|
} else {
|
|
$(progressbar).insertAfter($el);
|
|
}
|
|
};
|
|
|
|
ui.initHelper = function (options, $el, html, viewport) {
|
|
var $container = ui.getContainer(options, $el);
|
|
if (viewport) {
|
|
$container.find(viewport).append(html);
|
|
} else {
|
|
$(html).insertAfter($el);
|
|
}
|
|
};
|
|
|
|
ui.initVerdict = function (options, $el) {
|
|
ui.initHelper(options, $el, "<span class='password-verdict'></span>",
|
|
options.ui.viewports.verdict);
|
|
};
|
|
|
|
ui.initErrorList = function (options, $el) {
|
|
ui.initHelper(options, $el, "<ul class='error-list'></ul>",
|
|
options.ui.viewports.errors);
|
|
};
|
|
|
|
ui.initScore = function (options, $el) {
|
|
ui.initHelper(options, $el, "<span class='password-score'></span>",
|
|
options.ui.viewports.score);
|
|
};
|
|
|
|
ui.initPopover = function (options, $el) {
|
|
$el.popover("destroy");
|
|
$el.popover({
|
|
html: true,
|
|
placement: options.ui.popoverPlacement,
|
|
trigger: "manual",
|
|
content: " "
|
|
});
|
|
};
|
|
|
|
ui.initUI = function (options, $el) {
|
|
if (options.ui.showPopover) {
|
|
ui.initPopover(options, $el);
|
|
} else {
|
|
if (options.ui.showErrors) { ui.initErrorList(options, $el); }
|
|
if (options.ui.showVerdicts && !options.ui.showVerdictsInsideProgressBar) {
|
|
ui.initVerdict(options, $el);
|
|
}
|
|
}
|
|
if (options.ui.showProgressBar) {
|
|
ui.initProgressBar(options, $el);
|
|
}
|
|
if (options.ui.showScore) {
|
|
ui.initScore(options, $el);
|
|
}
|
|
};
|
|
|
|
ui.updateProgressBar = function (options, $el, cssClass, percentage) {
|
|
var $progressbar = ui.getUIElements(options, $el).$progressbar,
|
|
$bar = $progressbar.find(".progress-bar"),
|
|
cssPrefix = "progress-";
|
|
|
|
if (options.ui.bootstrap2) {
|
|
$bar = $progressbar.find(".bar");
|
|
cssPrefix = "";
|
|
}
|
|
|
|
$.each(options.ui.colorClasses, function (idx, value) {
|
|
if (options.ui.bootstrap4) {
|
|
$bar.removeClass("bg-" + value);
|
|
} else {
|
|
$bar.removeClass(cssPrefix + "bar-" + value);
|
|
}
|
|
});
|
|
if (options.ui.bootstrap4) {
|
|
$bar.addClass("bg-" + options.ui.colorClasses[cssClass]);
|
|
} else {
|
|
$bar.addClass(cssPrefix + "bar-" + options.ui.colorClasses[cssClass]);
|
|
}
|
|
$bar.css("width", percentage + '%');
|
|
};
|
|
|
|
ui.updateVerdict = function (options, $el, cssClass, text) {
|
|
var $verdict = ui.getUIElements(options, $el).$verdict;
|
|
$verdict.removeClass(options.ui.colorClasses.join(' '));
|
|
if (cssClass > -1) {
|
|
$verdict.addClass(options.ui.colorClasses[cssClass]);
|
|
}
|
|
$verdict.html(text);
|
|
};
|
|
|
|
ui.updateErrors = function (options, $el, remove) {
|
|
var $errors = ui.getUIElements(options, $el).$errors,
|
|
html = "";
|
|
|
|
if (!remove) {
|
|
$.each(options.instances.errors, function (idx, err) {
|
|
html += "<li>" + err + "</li>";
|
|
});
|
|
}
|
|
$errors.html(html);
|
|
};
|
|
|
|
ui.updateScore = function (options, $el, score, remove) {
|
|
var $score = ui.getUIElements(options, $el).$score,
|
|
html = "";
|
|
|
|
if (!remove) { html = score.toFixed(2); }
|
|
$score.html(html);
|
|
};
|
|
|
|
ui.updatePopover = function (options, $el, verdictText, remove) {
|
|
var popover = $el.data("bs.popover"),
|
|
html = "",
|
|
hide = true;
|
|
|
|
if (options.ui.showVerdicts &&
|
|
!options.ui.showVerdictsInsideProgressBar &&
|
|
verdictText.length > 0) {
|
|
html = "<h5><span class='password-verdict'>" + verdictText +
|
|
"</span></h5>";
|
|
hide = false;
|
|
}
|
|
if (options.ui.showErrors) {
|
|
if (options.instances.errors.length > 0) {
|
|
hide = false;
|
|
}
|
|
html += options.ui.popoverError(options);
|
|
}
|
|
|
|
if (hide || remove) {
|
|
$el.popover("hide");
|
|
return;
|
|
}
|
|
|
|
if (options.ui.bootstrap2) { popover = $el.data("popover"); }
|
|
|
|
if (popover.$arrow && popover.$arrow.parents("body").length > 0) {
|
|
$el.find("+ .popover .popover-content").html(html);
|
|
} else {
|
|
// It's hidden
|
|
popover.options.content = html;
|
|
$el.popover("show");
|
|
}
|
|
};
|
|
|
|
ui.updateFieldStatus = function (options, $el, cssClass, remove) {
|
|
var targetClass = options.ui.bootstrap2 ? ".control-group" : ".form-group",
|
|
$container = $el.parents(targetClass).first();
|
|
|
|
$.each(statusClasses, function (idx, css) {
|
|
if (!options.ui.bootstrap2) { css = "has-" + css; }
|
|
$container.removeClass(css);
|
|
});
|
|
|
|
if (remove) { return; }
|
|
|
|
cssClass = statusClasses[Math.floor(cssClass / 2)];
|
|
if (!options.ui.bootstrap2) { cssClass = "has-" + cssClass; }
|
|
$container.addClass(cssClass);
|
|
};
|
|
|
|
ui.percentage = function (options, score, maximun) {
|
|
var result = Math.floor(100 * score / maximun),
|
|
min = options.ui.progressBarMinPercentage;
|
|
|
|
result = result <= min ? min : result;
|
|
result = result > 100 ? 100 : result;
|
|
return result;
|
|
};
|
|
|
|
ui.getVerdictAndCssClass = function (options, score) {
|
|
var level, verdict;
|
|
|
|
if (score === undefined) { return ['', 0]; }
|
|
|
|
if (score <= options.ui.scores[0]) {
|
|
level = 0;
|
|
} else if (score < options.ui.scores[1]) {
|
|
level = 1;
|
|
} else if (score < options.ui.scores[2]) {
|
|
level = 2;
|
|
} else if (score < options.ui.scores[3]) {
|
|
level = 3;
|
|
} else if (score < options.ui.scores[4]) {
|
|
level = 4;
|
|
} else {
|
|
level = 5;
|
|
}
|
|
|
|
verdict = verdictKeys[level];
|
|
|
|
return [options.i18n.t(verdict), level];
|
|
};
|
|
|
|
ui.updateUI = function (options, $el, score) {
|
|
var cssClass, barPercentage, verdictText, verdictCssClass;
|
|
|
|
cssClass = ui.getVerdictAndCssClass(options, score);
|
|
verdictText = score === 0 ? '' : cssClass[0];
|
|
cssClass = cssClass[1];
|
|
verdictCssClass = options.ui.useVerdictCssClass ? cssClass : -1;
|
|
|
|
if (options.ui.showProgressBar) {
|
|
if (score === undefined) {
|
|
barPercentage = options.ui.progressBarEmptyPercentage;
|
|
} else {
|
|
barPercentage = ui.percentage(options, score, options.ui.scores[4]);
|
|
}
|
|
ui.updateProgressBar(options, $el, cssClass, barPercentage);
|
|
if (options.ui.showVerdictsInsideProgressBar) {
|
|
ui.updateVerdict(options, $el, verdictCssClass, verdictText);
|
|
}
|
|
}
|
|
|
|
if (options.ui.showStatus) {
|
|
ui.updateFieldStatus(options, $el, cssClass, score === undefined);
|
|
}
|
|
|
|
if (options.ui.showPopover) {
|
|
ui.updatePopover(options, $el, verdictText, score === undefined);
|
|
} else {
|
|
if (options.ui.showVerdicts && !options.ui.showVerdictsInsideProgressBar) {
|
|
ui.updateVerdict(options, $el, verdictCssClass, verdictText);
|
|
}
|
|
if (options.ui.showErrors) {
|
|
ui.updateErrors(options, $el, score === undefined);
|
|
}
|
|
}
|
|
|
|
if (options.ui.showScore) {
|
|
ui.updateScore(options, $el, score, score === undefined);
|
|
}
|
|
};
|
|
}(jQuery, ui));
|