$(function() {
- var progress = $("#password-strength");
- var warning = $("#password-warning");
- var feedback = $("#password-feedback");
-
- $("#password1").keyup(function(event) {
- var password1 = $(this).val();
-
- // Fetch words that are common to the user
- var user_inputs = $(this).data("user-input").split(" ");
-
- if (password1) {
- // Estimate password quality
- var quality = zxcvbn(password1, user_inputs);
-
- // Convert score into percentage
- var percentage = (quality.score + 1) * 20;
-
- // Set progress bar width
- progress.css("width", percentage + "%");
-
- // Clear all previous backgrounds
- progress.removeClass([
- "bg-success", "bg-warning", "bg-danger"
- ]);
-
- // Make progress bar show in the right colour
- switch (quality.score) {
- case 0:
- case 1:
- case 2:
- progress.addClass("bg-danger");
- break;
-
- case 3:
- progress.addClass("bg-warning");
- break;
-
- case 4:
- progress.addClass("bg-success");
- break;
- }
-
- // Show any feedback
- warning.empty();
- feedback.empty();
-
- if (quality.feedback) {
- if (quality.feedback.warning) {
- warning.html(quality.feedback.warning);
- }
-
- $.each(quality.feedback.suggestions, function (i, suggestion) {
- feedback.append("<li>" + suggestion + "</li>");
- });
- }
- } else {
- progress.css("width", "0%");
-
- // Clear all feedback
- warning.empty();
- feedback.empty();
- }
- });
-
- $("input[type=submit]").click( function(event) {
- var password1 = $("#password1");
- var password2 = $("#password2");
-
- // If the passwords match, we allow to submit the form
- if (password1.val() === password2.val()) {
- return true;
-
- } else {
- $("#password-mismatch").show();
- return false;
- }
- });
+ var progress = $("#password-strength");
+ var warning = $("#password-warning");
+ var feedback = $("#password-feedback");
+
+ var password1 = $("#password1");
+ var password2 = $("#password2");
+
+ var form = password1.parents("form");
+ var submit = form.find(":submit");
+
+ // Fetch words that are common to the user
+ var user_inputs = password1.data("user-input").split(" ");
+
+ var quality;
+
+ password1.keyup(function(event) {
+ var val1 = password1.val();
+
+ if (val1) {
+ // Estimate password quality
+ quality = zxcvbn(val1, user_inputs);
+
+ // Convert score into percentage
+ var percentage = (quality.score + 1) * 20;
+
+ // Set progress bar width
+ progress.css("width", percentage + "%");
+
+ // Clear all previous backgrounds
+ progress.removeClass([
+ "bg-success", "bg-warning", "bg-danger"
+ ]);
+
+ // Make progress bar show in the right colour
+ switch (quality.score) {
+ case 0:
+ case 1:
+ case 2:
+ progress.addClass("bg-danger");
+ break;
+
+ case 3:
+ progress.addClass("bg-warning");
+ break;
+
+ case 4:
+ progress.addClass("bg-success");
+ break;
+ }
+
+ // Show any feedback
+ warning.empty();
+ feedback.empty();
+
+ if (quality.feedback) {
+ if (quality.feedback.warning) {
+ warning.html(quality.feedback.warning);
+ }
+
+ $.each(quality.feedback.suggestions, function (i, suggestion) {
+ feedback.append("<li>" + suggestion + "</li>");
+ });
+ }
+ } else {
+ progress.css("width", "0%");
+
+ // Clear all feedback
+ warning.empty();
+ feedback.empty();
+ }
+
+ form.trigger("change");
+ });
+
+ password2.keyup(function(event) {
+ form.trigger("change");
+ });
+
+ form.on("change", function() {
+ $("#password-mismatch").hide();
+ submit.prop("disabled", true);
+
+ var val1 = password1.val();
+ var val2 = password2.val();
+
+ // We cannot submit the form when password2 is empty
+ if (!val2)
+ return;
+
+ // If the passwords match, we allow to submit the form
+ if (val1 !== val2) {
+ $("#password-mismatch").show();
+ return;
+ }
+
+ if (!quality || quality.score < 3)
+ return;
+
+ // They match, so we can enable the submit button
+ submit.prop("disabled", false);
+ });
});