improve new record page

assets/scripts/add-form-row.js

@@ -16,9 +16,14 @@ function addFormRow(templateName) {
     newItem.querySelectorAll('[data-new-item-skip]')
         .forEach(node => node.remove());
 
+    // Reset form fields
     newItem.querySelectorAll('input')
         .forEach(input => { input.value = '' });
 
+    newItem.querySelectorAll('textarea')
+        .forEach(input => { input.value = '' });
+
+    // Template attributes
     const templatedAttrNodes = newItem.querySelectorAll('[data-new-item-template-attr]');
     for (const node of templatedAttrNodes) {
         const attributes = node.dataset.newItemTemplateAttr.split(/\s/);
@@ -28,6 +33,7 @@ function addFormRow(templateName) {
         }
     }
 
+    // Template content
     const templatedNodes = newItem.querySelectorAll('[data-new-item-template-content]');
     for (const node of templatedNodes) {
         const templatedString = node.dataset.newItemTemplateContent;

assets/styles/main.css

@@ -178,19 +178,22 @@ a.button {
 
 form h3 {
   margin: 0;
+  margin-top: 1rem;
 }
 
 fieldset {
   margin: 0;
   padding: 0;
   border: none;
-}
+  margin-top: 1rem;
+
 
   legend {
     padding: 0;
-  margin-bottom: .5rem;
     font-size: 1.1rem;
   }
+}
+
 
 input[type="text"] {
   font-size: 1rem;
@@ -213,6 +216,11 @@ textarea {
   width: 100%;
   gap: 1rem;
   flex-wrap: wrap;
+  margin-top: 1rem;
+
+  .form-input {
+    margin-top: 0;
+  }
 }
 
 .form-action {
@@ -226,6 +234,7 @@ button.form-new-item {
   text-decoration: underline;
   border-radius: 0;
   color: #850085;
+  margin-top: .5rem;
 
   &:hover,
   &:focus-visible {

locales/en/main.ftl

@@ -36,5 +36,35 @@ record-input-addresses =
         should be either an IPv4 address, like <code>198.51.100.3</code>, or an IPv6
         address, like <code>2001:db8:cafe:bc68::2</code>.
 
-button-save-configuration = Save configuration
 button-add-address = Add an other address
+
+record-input-mailservers =
+    .legend = Mail server #{ $index }
+    .input-label-server-name = Server name
+    .input-label-preference = Preference
+
+button-add-mailserver = Add an other mailserver
+
+record-input-spf =
+    .input-label = Sender policy (SPF)
+
+record-input-dmarc =
+    .input-label = Error reporting policy (DMARC)
+
+record-input-dkim =
+    .legend = Cryptographic signature key (DKIM) #{ $index }
+    .input-label-selector = Selector
+    .input-label-signing-key = Signing key
+
+record-config-web-heading = Configure a web site for the domain <strong>{ $name }</strong>
+
+record-config-section-web =
+    .servers = Web servers
+
+record-config-mail-heading = Configure e-mails for the domain <strong>{ $name }</strong>
+
+record-config-section-mail =
+    .servers = Mail servers
+    .security = Security
+
+button-save-configuration = Save configuration

locales/fr/main.ftl

@@ -36,5 +36,35 @@ record-input-addresses =
         soit une adresse IPv4, comme <code>198.51.100.3</code>, soit une adresse IPv6,
          comme <code>2001:db8:cafe:bc68::2</code>.
 
-button-save-configuration = Sauvegarder la configuration
 button-add-address = Ajouter une autre adresse
+
+record-input-mailservers =
+    .legend = Serveur de courriel #{ $index }
+    .input-label-server-name = Nom du serveur
+    .input-label-preference = Préférence
+
+button-add-mailserver = Ajouter un autre serveur de courriel
+
+record-input-spf =
+    .input-label = Politique d’envoi (SPF)
+
+record-input-dmarc =
+    .input-label = Politique de signalement d’erreurs (DMARC)
+
+record-input-dkim =
+    .legend = Clé de signature cryptographique (DKIM) #{ $index }
+    .input-label-selector = Sélecteur
+    .input-label-signing-key = Clé de signature
+
+record-config-web-heading = Configurer un site web pour le domaine <strong>{ $name }</strong>
+
+record-config-section-web =
+    .servers = Serveurs Web
+
+record-config-mail-heading = Configurer le courriel pour le domaine <strong>{ $name }</strong>
+
+record-config-section-mail =
+    .servers = Serveurs de courriel
+    .security = Sécurité
+
+button-save-configuration = Sauvegarder la configuration

templates/pages/new_record/configure_record.html

@@ -1,9 +1,9 @@
 {% if config == "web" %}
 
-<h2>Configure a web site for the domain <strong>{{ new_record_name }}</strong></h2>
+<h2>{{ tr(msg="record-config-web-heading", name=new_record_name, lang=lang) }}</h2>
 
 <form method="post" action="">
-    <h3>Web servers</h3>
+    <h3>{{ tr(msg="record-config-section-web", attr="servers", lang=lang) }}</h3>
 
     <input name="addresses[_exist]" type="hidden" value="true">
 
@@ -58,31 +58,51 @@
 
 {% elif config == "mail" %}
 
-<h2>Configure e-mails for the domain <strong>{{ new_record_name }}</strong></h2>
+<h2>{{ tr(msg="record-config-mail-heading", name=new_record_name, lang=lang) }}</h2>
 
 <form method="post" action="">
-    <h3>Mail servers</h3>
+    <h3>{{ tr(msg="record-config-section-mail", attr="servers", lang=lang) }}</h3>
     <input name="mailservers[_exist]" type="hidden" value="true">
 
     {% for mailserver in input_data.mailservers.data.mailservers | default(value=[""]) %}
-        <fieldset>
+        <fieldset data-new-item-template="mailserver">
-            <legend>Mail server #{{ loop.index }}</legend>
+            <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">
-                    <label for="mailserver-mail_exchanger-{{ loop.index0 }}">Server name</label>
+                    <label
+                        for="mailserver-mail_exchanger-{{ loop.index0 }}"
+                        data-new-item-template-attr="for"
+                        data-template-for="mailserver-mail_exchanger-{i}"
+                    >
+                        {{ tr(msg="record-input-mailservers", attr="input-label-server-name", lang=lang) }}
+                    </label>
                     <input
                         name="mailservers[data][mailservers][{{ loop.index0 }}][mail_exchanger]"
                         id="mailserver-mail_exchanger-{{ loop.index0 }}"
+                        data-new-item-template-attr="name id"
+                        data-template-name="mailservers[data][mailservers][{i}][mail_exchanger]"
+                        data-template-id="mailserver-mail_exchanger-{i}"
                         type="text"
                         value="{{ mailserver.mail_exchanger | default(value="") }}"
                     >
                 </div>
 
                 <div class="form-input">
-                    <label for="mailserver-preference-{{ loop.index0 }}">Preference</label>
+                    <label
+                        for="mailserver-preference-{{ loop.index0 }}"
+                        data-new-item-template-attr="for"
+                        data-template-for="mailserver-preference-{i}"
+                    >
+                        {{ tr(msg="record-input-mailservers", attr="input-label-preference", lang=lang) }}
+                    </label>
                     <input
                         name="mailservers[data][mailservers][{{ loop.index0 }}][preference]"
                         id="mailserver-preference-{{ loop.index0 }}"
+                        data-new-item-template-attr="name id"
+                        data-template-name="mailservers[data][mailservers][{i}][preference]"
+                        data-template-id="mailserver-preference-{i}"
                         type="text"
                         value="{{ mailserver.preference | default(value="") }}"
                     >
@@ -91,30 +111,48 @@
         </fieldset>
     {% endfor %}
 
-    <h3>Security</h3>
+    <button class="form-new-item" type="button" data-new-item="mailserver">
+        <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-mailserver", lang=lang) }}
+    </button>
+
+    <h3>{{ tr(msg="record-config-section-mail", attr="security", lang=lang) }}</h3>
     <input name="spf[_exist]" type="hidden" value="true">
 
     <div class="form-input">
-        <label for="spf-policy">Sender policy (SPF)</label>
+        <label for="spf-policy">
+            {{ tr(msg="record-input-spf", attr="input-label", lang=lang) }}
+        </label>
         <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="dmarc">Error reporting policy (DMARC)</label>
+        <label for="dmarc">
+            {{ tr(msg="record-input-dmarc", attr="input-label", lang=lang) }}
+        </label>
         <input name="dmarc" id="dmarc" type="text">
     </div>
 
     <fieldset>
-        <legend>Cryptographic signature (DKIM) #1</legend>
+        <legend>
+            {{ tr(msg="record-input-dkim", attr="legend", index=1, lang=lang) }}
+        </legend>
 
         <div class="form-row">
             <div class="form-input">
-                <label for="dkim-selector">Selector</label>
+                <label for="dkim-selector">
+                    {{ tr(msg="record-input-dkim", attr="input-label-selector", lang=lang) }}
+                </label>
                 <input name="dkim-selector" id="dkim-selector" type="text">
             </div>
 
             <div class="form-input">
-                <label for="dkim-key">Signing key</label>
+                <label for="dkim-key">
+                    {{ tr(msg="record-input-dkim", attr="input-label-signing-key", lang=lang) }}
+                </label>
                 <textarea name="dkim-key" id="dkim-key"></textarea>
             </div>
         </div>

templates/pages/records.html

@@ -20,7 +20,7 @@
                 <header>
                     <h3 class="folder-tab">{{ node.name }}</h3>
                     <span class="sep"></span>
-                    <a href="{{ url }}/new?subdomain={{ node.name | trim_end_matches(pat=current_zone) | trim_end_matches(pat=".") }}" class="button">
+                    <a href="{{ url }}/new?name={{ node.name | trim_end_matches(pat=current_zone) | trim_end_matches(pat=".") }}" class="button">
                         <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"/>