From 838a3e095e37fb912d3db0629abd21de7bdc3bd5 Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 24 Dec 2019 12:36:47 +0100
Subject: [PATCH] registration: Disable registration button if UID/email are
 incorrect

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 src/templates/auth/register.html | 38 ++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/templates/auth/register.html b/src/templates/auth/register.html
index 313184fd..5b1a81f4 100644
--- a/src/templates/auth/register.html
+++ b/src/templates/auth/register.html
@@ -11,7 +11,7 @@
 				{{ _("Become a part of our community by registering an account!") }}
 			</p>
 
-			<form action="" method="POST">
+			<form id="form-register" action="" method="POST">
 				{% raw xsrf_form_html() %}
 
 				<input type="hidden" name="next" value="{{ next or "" }}">
@@ -60,7 +60,7 @@
 					</div>
 				</div>
 
-				<button type="submit" class="btn btn-primary btn-block">
+				<button type="submit" class="btn btn-primary btn-block" disabled>
 					{{ _("Register") }}
 				</button>
 			</form>
@@ -70,10 +70,19 @@
 
 {% block javascript %}
 	<script>
+		var form = $("#form-register");
+		var submit = form.find(":submit");
+
+		// Store the valid status
+		var valid = {
+			uid: false,
+			email: false,
+		};
+
 		var check_uid;
 		var check_email;
 
-		$("input[name=uid]").on("keyup", function(e) {
+		form.find("input[name=uid]").on("keyup", function(e) {
 			if (check_uid)
 				clearTimeout(check_uid);
 
@@ -84,6 +93,7 @@
 					function(data) {
 						// Reset all classes
 						uid.removeClass("is-valid is-invalid");
+						valid.uid = false;
 
 						// Hide all feedback
 						uid.siblings(".invalid-feedback").hide();
@@ -91,6 +101,7 @@
 						switch (data.result) {
 							case "ok":
 								uid.addClass("is-valid");
+								valid.uid = true;
 								break;
 
 							case "invalid":
@@ -103,12 +114,14 @@
 								$("#uid-taken").show();
 								break;
 						}
+
+						form.trigger("change");
 					}
 				);
 			}, 250);
 		});
 
-		$("input[name=email]").on("keyup", function(e) {
+		form.find("input[name=email]").on("keyup", function(e) {
 			if (check_email)
 				clearTimeout(check_email);
 
@@ -119,6 +132,7 @@
 					function(data) {
 						// Reset all classes
 						email.removeClass("is-valid is-invalid");
+						valid.email = false;
 
 						// Hide all feedback
 						email.siblings(".invalid-feedback").hide();
@@ -126,6 +140,7 @@
 						switch (data.result) {
 							case "ok":
 								email.addClass("is-valid");
+								valid.email = true;
 								break;
 
 							case "invalid":
@@ -138,9 +153,24 @@
 								$("#email-taken").show();
 								break;
 						}
+
+						form.trigger("change");
 					}
 				);
 			}, 250);
 		});
+
+		form.on("change", function() {
+			var disabled = false;
+
+			$.each(valid, function(field, status) {
+				if (!status) {
+					disabled = true;
+					return false;
+				}
+			});
+
+			submit.prop("disabled", disabled);
+		});
 	</script>
 {% end block %}
-- 
2.47.2