wip: improve form email config

assets/styles/main.css

@@ -178,22 +178,42 @@ a.button {
 
 form h3 {
   margin: 0;
-  margin-top: 1rem;
+  margin-top: 2rem;
+  display: flex;
+  align-items: center;
+
+  &::after {
+    /*content: '';*/
+    height: 1px;
+    flex: 1;
+    display: block;
+    background-color: black;
+    margin-left: .5em;
+  }
 }
 
 fieldset {
   margin: 0;
   padding: 0;
   border: none;
-  margin-top: 1rem;
+  margin-top: .5rem;
 
+  border-left: .25rem solid #a8a8a8;
+  padding-left: .5rem;
 
   legend {
     padding: 0;
     font-size: 1.1rem;
-  }
+    font-weight: 400;
+
+    position: relative;
+    bottom: -.55em;
   }
 
+  & + button.form-new-item {
+    margin-top: 1rem;
+  }
+}
 
 input[type="text"] {
   font-size: 1rem;
@@ -254,11 +274,16 @@ textarea {
   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 {

locales/en/main.ftl

@@ -76,6 +76,8 @@ record-input-dkim =
     .input-label-selector = Selector
     .input-label-signing-key = Signing key
 
+button-add-dkim-key = Add an other signature key
+
 record-config-web-heading = Configure a web site for the domain <strong>{ $name }</strong>
 
 record-config-section-web =
@@ -86,5 +88,6 @@ record-config-mail-heading = Configure e-mails for the domain <strong>{ $name }<
 record-config-section-mail =
     .servers = Mail servers
     .security = Security
+    .dkim = Cryptographic signature
 
 button-save-configuration = Save configuration

locales/fr/main.ftl

@@ -76,6 +76,8 @@ record-input-dkim =
     .input-label-selector = Sélecteur
     .input-label-signing-key = Clé de signature
 
+button-add-dkim-key = Ajouter une autre clé de signature
+
 record-config-web-heading = Configurer un site web pour le domaine <strong>{ $name }</strong>
 
 record-config-section-web =
@@ -86,5 +88,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
 
 button-save-configuration = Sauvegarder la configuration

templates/pages/new_record/configure_record.html

@@ -94,13 +94,20 @@
     <h3>{{ tr(msg="record-config-section-mail", attr="servers", lang=lang) }}</h3>
     <input name="mailservers[_exist]" type="hidden" value="true">
 
+    <div class="form-input">
+        <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>
+
     {% for mailserver in input_data.mailservers.data.mailservers | default(value=[""]) %}
         <fieldset data-new-item-template="mailserver">
             <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"
@@ -152,7 +159,10 @@
     <h3>{{ tr(msg="record-config-section-mail", attr="security", lang=lang) }}</h3>
     <input name="spf[_exist]" type="hidden" value="true">
 
-    <div class="form-input">
+    <fieldset>
+        <legend>Sender policy</legend>
+        <div class="form-row">
+            <div class="form-input width-2">
                 <label for="spf-policy">
                     {{ tr(msg="record-input-spf", attr="input-label", lang=lang) }}
                 </label>
@@ -160,12 +170,42 @@
             </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>
+        </div>
+    </fieldset>
+
+    <fieldset>
+        <legend>Error reporting policy</legend>
+        <div class="form-row">
+            <div class="form-input width-2">
                 <label for="dmarc">
                     {{ tr(msg="record-input-dmarc", attr="input-label", lang=lang) }}
                 </label>
                 <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>
+        </div>
+    </fieldset>
+
+    <h3>{{ tr(msg="record-config-section-mail", attr="dkim", lang=lang) }}</h3>
+
+    <div class="form-input">
+        <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>
+
     <fieldset>
         <legend>
             {{ tr(msg="record-input-dkim", attr="legend", index=1, lang=lang) }}
@@ -188,6 +228,14 @@
         </div>
     </fieldset>
 
+    <button class="form-new-item" type="button" data-new-item="dmark-key">
+        <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"/>
+            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
+        </svg>
+        {{ tr(msg="button-add-dkim-key", lang=lang) }}
+    </button>
+
 
     <div class="form-action">
         <button type="submit">{{ tr(msg="button-save-configuration", lang=lang) }}</button>