From f080998bf4604421929b32c93b9d418a779b293e Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 30 Oct 2019 17:18:14 +0000
Subject: [PATCH] people: Improve password UI

The submit button is now disabled as long as the form should
not be sent.

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 src/templates/auth/activate.html         |   2 +-
 src/templates/people/modules/password.js | 178 +++++++++++++----------
 2 files changed, 102 insertions(+), 78 deletions(-)

diff --git a/src/templates/auth/activate.html b/src/templates/auth/activate.html
index 4b661c16..472a41ea 100644
--- a/src/templates/auth/activate.html
+++ b/src/templates/auth/activate.html
@@ -17,7 +17,7 @@
 
 				{% module Password() %}
 
-				<button type="submit" class="btn btn-primary btn-block">
+				<button type="submit" class="btn btn-primary btn-block" disabled>
 					{{ _("Activate Account") }}
 				</button>
 			</form>
diff --git a/src/templates/people/modules/password.js b/src/templates/people/modules/password.js
index e20ed568..8235fc73 100644
--- a/src/templates/people/modules/password.js
+++ b/src/templates/people/modules/password.js
@@ -1,79 +1,103 @@
 $(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);
+	});
 });
-- 
2.47.3