improved error feedback from backend in templates

Author: rgaudin

src/adminui/static/admin-dashboard.js

@@ -71,9 +71,9 @@ function onChangedField(el, evt) {
 addClass(el, 'changed')
 }
 function manuallyValidateFormOnSubmit(form, event) {
-if (!form.checkValidity()) {
-  event.preventDefault()
-  event.stopPropagation()
-}
-addClass(form, 'was-validated');
+  if (!form.checkValidity()) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  addClass(form, 'was-validated');
 }

src/adminui/templates/base.html

@@ -74,6 +74,14 @@
 			border-color: var(--bs-warning-border-subtle) !important;
 		}
 
+		/* form mode, display backend errors until frontend check validates */
+		.display-until-validated {
+		  display: block;
+		}
+		form.was-validated .display-until-validated {
+		  display: none;
+		}
+
 		/* form-mode, display form-wide error */
 		.all-error {
 			padding: .7rem;
@@ -105,7 +113,7 @@
 			<header>
 				<div class="container-sm row m-auto">
 					<div class="offset-md-2 col-md-8">
-						<a class="navbar-brand" href="{{ url_for('home') }}"><img src="http://localhost/branding/horizontal-logo-light.png" /></a>
+						<a class="navbar-brand" href="{{ url_for('home') }}"><img src="{{ url_for('static', path='branding/horizontal-logo-light.png') }}" /></a>
 					</div>
 				</div>
 			</header>

src/adminui/templates/optional/config.html

@@ -36,7 +36,7 @@ <h1 class="">Optional Features</h1>
           <div class="form-check form-switch">
             <input class="form-check-input" type="checkbox" value="yes" role="switch" name="sshd"{% if form.sshd %} checked{% endif %}>
           </div>
-          <div class="invalid-feedback">{% if errors.profile %}{{ errors.profile }}{% else %}Either enabled or disabled.{% endif %}</div>
+          <div class="invalid-feedback {% if errors.ssh %}display-until-validated{% endif %}">{% if errors.ssh %}{{ errors.ssh }}{% else %}Either enabled or disabled.{% endif %}</div>
         </div>
         <div class="feature-doc">
           <p><strong>SSH</strong> is a Secure Shell that is used to connect to the Hotspot's terminal console from another computer on the network.</p>
@@ -55,7 +55,7 @@ <h1 class="">Optional Features</h1>
           <div class="form-check form-switch">
             <input class="form-check-input" type="checkbox" value="yes" role="switch" name="sshd"{% if form.sshd %} checked{% endif %} disabled>
           </div>
-          <div class="invalid-feedback">{% if errors.profile %}{{ errors.profile }}{% else %}Either enabled or disabled.{% endif %}</div>
+          <div class="invalid-feedback {% if errors.kiosk %}display-until-validated{% endif %}">{% if errors.kiosk %}{{ errors.kiosk }}{% else %}Either enabled or disabled.{% endif %}</div>
         </div>
         <div class="feature-doc">
           <p>Allows using the Hotspot device as a <em>client</em> (in addition to its server mode) by plugging it to a screen, keyboard and mouse.</p>

src/adminui/templates/wifi/config.html

@@ -25,7 +25,7 @@ <h1 class="">Configuring WiFi</h1>
                 <option value="perf" {% if form.profile == "perf" %}selected="selected"{% endif %}>Performance</option>
                 <option value="coverage" {% if form.profile == "coverage" %}selected="selected"{% endif %}>Coverage</option>
               </select>
-              <div class="invalid-feedback">{% if errors.profile %}{{ errors.profile }}{% else %}Only Performance and Coverage available.{% endif %}</div>
+              <div class="invalid-feedback {% if errors.profile %}display-until-validated{% endif %}">{% if errors.profile %}{{ errors.profile }}{% else %}Only Performance and Coverage available.{% endif %}</div>
             </div>
 
             <div class="feature-doc">
@@ -48,7 +48,7 @@ <h1 class="">Configuring WiFi</h1>
             <div class="field-row mb-2">
               <!-- ^[^!#;+\]/"\t][^+\]/"\t]{0,31}$ -->
               <input class="form-control {% if errors.ssid %} is-invalid{% endif %}" pattern='^[^!#;+\]\/"\t][^+\]\/"\t]{0,31}$' required minlength="1" maxlength="31"  type="text" name="ssid" placeholder="My Network name" value="{{ form.ssid }}" />
-              <div class="invalid-feedback">{% if errors.ssid %}{{ errors.ssid }}{% else %}Max 32 chars. Can't start with a symbol. <code>+</code>, <code>]</code>, <code>/</code>, <code>"</code>, <code>\t</code> prohibited.{% endif %}</div>
+              <div class="invalid-feedback {% if errors.ssid %}display-until-validated{% endif %}">{% if errors.ssid %}{{ errors.ssid }}{% else %}Max 32 chars. Can't start with a symbol. <code>+</code>, <code>]</code>, <code>/</code>, <code>"</code>, <code>\t</code> prohibited.{% endif %}</div>
             </div>
 
             <div class="feature-doc">
@@ -67,7 +67,7 @@ <h1 class="">Configuring WiFi</h1>
                 <input id="wifi_open_switch" class="form-check-input" type="checkbox" value="yes" role="switch" name="open"{% if form.open %} checked{% endif %}>
               </div>
             </div>
-            <div class="invalid-feedback">{% if errors.open %}{{ errors.open }}{% else %}Either open or not.{% endif %}</div>
+            <div class="invalid-feedback {% if errors.open %}display-until-validated{% endif %}">{% if errors.open %}{{ errors.open }}{% else %}Either open or not.{% endif %}</div>
             <div class="feature-doc">
               <p>Your network can be <em>Open</em> (anybody can join it) or ask <em>clients</em> to supply a passphrase to join (only the first time).</p>
               <p>Your device has a fixed WiFi <em>clients</em> capacity so it's a good idea to set a passphrase if you want to restrict its access.</p>
@@ -82,7 +82,7 @@ <h1 class="">Configuring WiFi</h1>
           <div class="col-12 col-md-10">
             <div class="field-row mb-2">
               <input class="form-control" id="passphrase-input" type="text" name="passphrase" pattern="^[\u0020-\u007e]{8,63}$" {% if not form.open %} required{% endif %} minlength="8" maxlength="63" value="{{ form.passphrase or '' }}" />
-              <div class="invalid-feedback">{% if errors.passphrase %}{{ errors.passphrase }}{% else %}Must be 8 to 63 chars long. Common latin chars and symbols.{% endif %}</div>
+              <div class="invalid-feedback {% if errors.passphrase %}display-until-validated{% endif %}">{% if errors.passphrase %}{{ errors.passphrase }}{% else %}Must be 8 to 63 chars long. Common latin chars and symbols.{% endif %}</div>
             </div>
             <div class="feature-doc">
               <p>Passphrase must be at least 8 latin characters long</p>