From db28ac9bf9c400f1cfcd906adef537ed8edaeac5 Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Mon, 24 Jul 2023 15:07:06 +0000
Subject: [PATCH] register.html: Fix showing warnings on errors

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

diff --git a/src/templates/auth/register.html b/src/templates/auth/register.html
index 46c3be45..30aeb5bc 100644
--- 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;
 
-- 
2.47.3