register.html: Fix showing warnings on errors

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

diff --git a/src/templates/auth/register.html b/src/templates/auth/register.html
index 46c3be454d296029d464d01d8c587d643248d872..30aeb5bc0df0b5da2cfb028ddb09a516bd7d5603 100644 (file)
--- a/src/templates/auth/register.html
+++ b/src/templates/auth/register.html
@@ -25,27 +25,23 @@
 
                                                <div class="block">
                                                        <div class="field">
-                                                               <div class="field-body">
-                                                                       <div class="field">
-                                                                               <p class="control has-icons-left">
-                                                                                       <span class="icon is-small is-left">
-                                                                                               <i class="fas fa-at"></i>
-                                                                                       </span>
-                                                                                       <input class="input" type="text" name="uid"
-                                                                                               placeholder="{{ _("Username") }}"
-                                                                                               pattern="[a-z_][a-z0-9_-]{3,31}"
-                                                                                               required autofocus>
-                                                                               </p>
-                                                                       </div>
-                                                               </div>
-                                                       </div>
-
-                                                       <div id="uid-invalid" class="invalid-feedback invalid-feedback-uid">
-                                                               {{ _("Please choose a username in UNIX format with at least four characters, starting with a lowercase letter, followed by only lowercase letters, digits, dash and underscore") }}
-                                                       </div>
-
-                                                       <div id="uid-taken" class="invalid-feedback invalid-feedback-uid">
-                                                               {{ _("This username is not available") }}
+                                                               <p class="control has-icons-left">
+                                                                       <span class="icon is-small is-left">
+                                                                               <i class="fas fa-at"></i>
+                                                                       </span>
+                                                                       <input class="input" type="text" name="uid"
+                                                                               placeholder="{{ _("Username") }}"
+                                                                               pattern="[a-z_][a-z0-9_-]{3,31}"
+                                                                               required autofocus>
+                                                               </p>
+
+                                                               <p id="uid-invalid" class="help is-danger invalid-feedback invalid-feedback-uid">
+                                                                       {{ _("Please choose a username in UNIX format with at least four characters, starting with a lowercase letter, followed by only lowercase letters, digits, dash and underscore") }}
+                                                               </p>
+
+                                                               <p id="uid-taken" class="help is-danger invalid-feedback invalid-feedback-uid">
+                                                                       {{ _("This username is not available") }}
+                                                               </p>
                                                        </div>
                                                </div>
 
@@ -57,13 +53,20 @@
                                                                                        <span class="icon is-small is-left">
                                                                                                <i class="fas fa-person"></i>
                                                                                        </span>
-                                                                                       <input class="input" type="text" name="first_name" placeholder="{{ _("First Name") }}" required autofocus>
+                                                                                       <input class="input" type="text"
+                                                                                               name="first_name" placeholder="{{ _("First Name") }}"
+                                                                                               required>
                                                                                </p>
+                                                                       </div>
+
+                                                                       <div class="field">
                                                                                <p class="control has-icons-left">
                                                                                        <span class="icon is-small is-left">
                                                                                                <i class="fas fa-person"></i>
                                                                                        </span>
-                                                                                       <input class="input" type="text" name="last_name" placeholder="{{ _("Last Name") }}" required autofocus>
+                                                                                       <input class="input" type="text"
+                                                                                               name="last_name" placeholder="{{ _("Last Name") }}"
+                                                                                               required>
                                                                                </p>
                                                                        </div>
                                                                </div>
@@ -72,26 +75,25 @@
 
                                                <div class="block">
                                                        <div class="field">
-                                                               <div class="field-body">
-                                                                       <div class="field">
-                                                                               <p class="control has-icons-left">
-                                                                                       <span class="icon is-small is-left">
-                                                                                               <i class="fas fa-envelope"></i>
-                                                                                       </span>
-                                                                                       <input class="input" type="email"
-                                                                                               name="email" placeholder="{{ _("Email Address") }}" required>
-                                                                                       <div id="email-invalid" class="invalid-feedback invalid-feedback-email">
-                                                                                               {{ _("This email address is invalid") }}
-                                                                                       </div>
-                                                                                       <div id="email-blacklisted" class="invalid-feedback invalid-feedback-email">
-                                                                                               {{ _("This email address cannot be used") }}
-                                                                                       </div>
-                                                                                       <div id="email-taken" class="invalid-feedback invalid-feedback-email">
-                                                                                               {{ _("This email address is already in use") }}
-                                                                                       </div>
-                                                                               </p>
-                                                                       </div>
-                                                               </div>
+                                                               <p class="control has-icons-left">
+                                                                       <span class="icon is-small is-left">
+                                                                               <i class="fas fa-envelope"></i>
+                                                                       </span>
+                                                                       <input class="input" type="email"
+                                                                               name="email" placeholder="{{ _("Email Address") }}" required>
+                                                               </p>
+
+                                                               <p id="email-invalid" class="help is-danger invalid-feedback invalid-feedback-email">
+                                                                       {{ _("This email address is invalid") }}
+                                                               </p>
+
+                                                               <p id="email-blacklisted" class="help is-danger invalid-feedback invalid-feedback-email">
+                                                                       {{ _("This email address cannot be used") }}
+                                                               </p>
+
+                                                               <p id="email-taken" class="help is-danger invalid-feedback invalid-feedback-email">
+                                                                       {{ _("This email address is already in use") }}
+                                                               </p>
                                                        </div>
                                                </div>
 
@@ -120,6 +122,9 @@
                        email: false,
                };
 
+               // Hide all invalid feedback
+               form.find(".invalid-feedback").hide();
+
                var check_uid;
                var check_email;