registration: Disable registration button if UID/email are incorrect

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/auth/register.html b/src/templates/auth/register.html
index 313184fdb5f02f46fca91ad441267540f2eacfec..5b1a81f46e7875740de97c815841478946ae426c 100644 (file)
--- 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 %}