wip: improve form email config

assets/styles/main.css

@@ -208,6 +208,7 @@ fieldset {
 
     position: relative;
     bottom: -.55em;
+    margin-bottom: .5rem;
   }
 
   & + button.form-new-item {
@@ -224,9 +225,18 @@ textarea {
 }
 
 .form-input {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: auto auto;
+  grid-auto-columns: 1fr;
+  column-gap: 1rem;
+  margin-top: 1rem;
+
+  & > div {
+    width: 100%;
     display: flex;
     flex-direction: column;
-  margin-top: 1rem;
+  }
 
   label {
     margin-bottom: .5rem;
@@ -257,8 +267,9 @@ textarea {
 
   .help {
     margin: 0;
-    margin-bottom: .15rem;
+    margin-top: .15rem;
     font-style: oblique;
+    font-size: .9rem;
   }
 
   input,
@@ -268,24 +279,6 @@ textarea {
   }
 }
 
-.form-row {
-  display: flex;
-  width: 100%;
-  gap: 1rem;
-  flex-wrap: wrap;
-  margin-top: 1rem;
-  align-items: end;
-
-  .form-input {
-    margin-top: 0;
-    flex: 1;
-  }
-
-  .form-input.width-2 {
-    flex-grow: 2;
-  }
-}
-
 .form-action {
   margin-top: 1rem;
 }

locales/en/main.ftl

@@ -44,8 +44,8 @@ record-input-name =
 button-create-record-next-step = Next step
 
 record-input-ttl =
-    .input-label = Duration in cache (TTL), in seconds
+    .input-label = Duration in cache (TTL)
-    .help = Optional, default to 1 hour (3600 secondes)
+    .help = In seconds, optional, default to 1 hour
     .error-input-type_error = The duration in cache must be a positif integer number.
     .error-record-parse-number = The duration in cache must be a positif integer number.
 
@@ -66,10 +66,12 @@ record-input-mailservers =
 button-add-mailserver = Add an other mailserver
 
 record-input-spf =
-    .input-label = Sender policy (SPF)
+    .legend = Sender policy (SPF)
+    .input-label = Sender policy
 
 record-input-dmarc =
-    .input-label = Error reporting policy (DMARC)
+    .legend = Error reporting policy (DMARC)
+    .input-label = Error reporting policy
 
 record-input-dkim =
     .legend = Cryptographic signature key (DKIM) #{ $index }

locales/fr/main.ftl

@@ -44,8 +44,8 @@ record-input-name =
 button-create-record-next-step = Étape suivante
 
 record-input-ttl =
-    .input-label = Durée dans le cache (TTL), en seconde
+    .input-label = Durée dans le cache (TTL)
-    .help = Optionnel, 1 heure par défaut (3600 secondes)
+    .help = En secondes, optionnel, 1 heure par défaut
     .error-input-type_error = La durée dans le cache doit être un nombre entier positif.
     .error-record-parse-number = La durée dans le cache doit être un nombre entier positif.
 
@@ -66,13 +66,15 @@ record-input-mailservers =
 button-add-mailserver = Ajouter un autre serveur de courriel
 
 record-input-spf =
-    .input-label = Politique d’envoi (SPF)
+    .input-label = Politique d’envoi
+    .legend = Politique d’envoi (SPF)
 
 record-input-dmarc =
-    .input-label = Politique de signalement d’erreurs (DMARC)
+    .legend = Politique de signalement d’erreurs (DMARC)
+    .input-label = Politique de signalement d’erreurs
 
 record-input-dkim =
-    .legend = Clé de signature cryptographique (DKIM) #{ $index }
+    .legend = Clé de signature cryptographique #{ $index }
     .input-label-selector = Sélecteur
     .input-label-signing-key = Clé de signature
 
@@ -88,6 +90,6 @@ record-config-mail-heading = Configurer le courriel pour le domaine <strong>{ $n
 record-config-section-mail =
     .servers = Serveurs de courriel
     .security = Sécurité
-    .dkim = Signature cryptographique
+    .dkim = Signature cryptographique (DKIM)
 
 button-save-configuration = Sauvegarder la configuration

templates/pages/new_record.html

@@ -5,7 +5,7 @@
 {% block main %}
 <h1>{{ tr(msg="record-creation-process-heading", zone=current_zone, lang=lang) }}</h1>
 
-<!-- {{ errors | json_encode(pretty=true) }} -->
+{{ errors | json_encode(pretty=true) }}
 
 {% set domain_error = errors | get(key="/name", default="") %}
 

templates/pages/new_record/configure_record.html

@@ -12,9 +12,7 @@
         <label for="addresses-ttl">
             {{ tr(msg="record-input-ttl", attr="input-label", lang=lang) }}
         </label>
-        <p class="help" id="ttl-help">
+        <div>
-            {{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
-        </p>
             <input
                 type="text"
                 inputmode="numeric"
@@ -31,6 +29,10 @@
                         lang=lang) }}
                 </p>
             {% endif %}
+            <p class="help" id="ttl-help">
+                {{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
+            </p>
+        </div>
     </div>
 
     {% set global_address_error = errors | get(key="/addresses/data", default="") %}
@@ -45,6 +47,7 @@
             >
                 {{ tr(msg="record-input-addresses", attr="input-label", index=loop.index, lang=lang) }}
             </label>
+            <div>
                 <input
                     type="text"
                     name="addresses[data][addresses][{{ loop.index0 }}][address]"
@@ -72,6 +75,7 @@
                     </p>
                 {% endif %}
             </div>
+        </div>
         <button class="form-new-item" type="button" data-new-item="address">
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16" aria-hidden="true">
                 <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
@@ -98,7 +102,12 @@
         <label for="mailservers-ttl">
             {{ tr(msg="record-input-ttl", attr="input-label", lang=lang) }}
         </label>
-        <input name="mailservers[ttl]" id="mailservers-ttl" type="text" value="{{ input_data.mailservers.ttl | default(value="") }}">
+        <div>
+            <input name="mailservers[ttl]" id="mailservers-ttl" type="text" value="{{ input_data.mailservers.ttl | default(value="") }}" aria-describedby="mailservers-ttl">
+            <p class="help" id="mailservers-ttl-help">
+                {{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
+            </p>
+        </div>
     </div>
 
     {% for mailserver in input_data.mailservers.data.mailservers | default(value=[""]) %}
@@ -106,8 +115,7 @@
             <legend data-new-item-template-content="{{ tr(msg="record-input-mailservers", attr="legend", index="{i}", lang=lang) }}">
                 {{ tr(msg="record-input-mailservers", attr="legend", index=loop.index, lang=lang) }}
             </legend>
-            <div class="form-row">
+            <div class="form-input">
-                <div class="form-input width-2">
                 <label
                     for="mailserver-mail_exchanger-{{ loop.index0 }}"
                     data-new-item-template-attr="for"
@@ -115,6 +123,7 @@
                 >
                     {{ tr(msg="record-input-mailservers", attr="input-label-server-name", lang=lang) }}
                 </label>
+                <div>
                     <input
                         name="mailservers[data][mailservers][{{ loop.index0 }}][mail_exchanger]"
                         id="mailserver-mail_exchanger-{{ loop.index0 }}"
@@ -126,7 +135,6 @@
                     >
                 </div>
 
-                <div class="form-input">
                 <label
                     for="mailserver-preference-{{ loop.index0 }}"
                     data-new-item-template-attr="for"
@@ -134,6 +142,7 @@
                 >
                     {{ tr(msg="record-input-mailservers", attr="input-label-preference", lang=lang) }}
                 </label>
+                <div>
                     <input
                         name="mailservers[data][mailservers][{{ loop.index0 }}][preference]"
                         id="mailserver-preference-{{ loop.index0 }}"
@@ -160,39 +169,45 @@
     <input name="spf[_exist]" type="hidden" value="true">
 
     <fieldset>
-        <legend>Sender policy</legend>
+        <legend>{{ tr(msg="record-input-spf", attr="legend", lang=lang) }}</legend>
-        <div class="form-row">
+        <div class="form-input">
-            <div class="form-input width-2">
             <label for="spf-policy">
                 {{ tr(msg="record-input-spf", attr="input-label", lang=lang) }}
             </label>
+            <div>
                 <input name="spf[data][policy]" id="spf-policy" type="text" value="{{ input_data.spf.data.policy | default(value="") }}">
             </div>
 
-            <div class="form-input">
             <label for="spf-ttl">
                 {{ tr(msg="record-input-ttl", attr="input-label", lang=lang) }}
             </label>
-                <input name="spf[ttl]" id="spf-ttl" type="text" value="{{ input_data.spf.ttl | default(value="") }}">
+            <div>
+                <input name="spf[ttl]" id="spf-ttl" type="text" value="{{ input_data.spf.ttl | default(value="") }}" aria-describedby="spf-ttl-help">
+                <p class="help" id="spf-ttl-help">
+                    {{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
+                </p>
             </div>
         </div>
     </fieldset>
 
     <fieldset>
-        <legend>Error reporting policy</legend>
+        <legend>{{ tr(msg="record-input-dmarc", attr="legend", lang=lang) }}</legend>
-        <div class="form-row">
+        <div class="form-input">
-            <div class="form-input width-2">
             <label for="dmarc">
                 {{ tr(msg="record-input-dmarc", attr="input-label", lang=lang) }}
             </label>
+            <div>
                 <input name="dmarc" id="dmarc" type="text">
             </div>
 
-            <div class="form-input">
             <label for="dmarc-ttl">
                 {{ tr(msg="record-input-ttl", attr="input-label", lang=lang) }}
             </label>
-                <input name="dmarc[ttl]" id="dmarc-ttl" type="text" value="{{ input_data.dmarc.ttl | default(value="") }}">
+            <div>
+                <input name="dmarc[ttl]" id="dmarc-ttl" type="text" value="{{ input_data.dmarc.ttl | default(value="") }}" aria-describedby="dmac-ttl-help">
+                <p class="help" id="dmarc-ttl-help">
+                    {{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
+                </p>
             </div>
         </div>
     </fieldset>
@@ -203,7 +218,12 @@
         <label for="dkim-ttl">
             {{ tr(msg="record-input-ttl", attr="input-label", lang=lang) }}
         </label>
-        <input name="dkim[ttl]" id="dkim-ttl" type="text" value="{{ input_data.dkim.ttl | default(value="") }}">
+        <div>
+            <input name="dkim[ttl]" id="dkim-ttl" type="text" value="{{ input_data.dkim.ttl | default(value="") }}" aria-describedby="dkim-ttl-help">
+            <p class="help" id="dkim-ttl-help">
+                {{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
+            </p>
+        </div>
     </div>
 
     <fieldset>
@@ -211,18 +231,18 @@
             {{ tr(msg="record-input-dkim", attr="legend", index=1, lang=lang) }}
         </legend>
 
-        <div class="form-row">
         <div class="form-input">
             <label for="dkim-selector">
                 {{ tr(msg="record-input-dkim", attr="input-label-selector", lang=lang) }}
             </label>
+            <div>
                 <input name="dkim-selector" id="dkim-selector" type="text">
             </div>
 
-            <div class="form-input">
             <label for="dkim-key">
                 {{ tr(msg="record-input-dkim", attr="input-label-signing-key", lang=lang) }}
             </label>
+            <div>
                 <textarea name="dkim-key" id="dkim-key"></textarea>
             </div>
         </div>