wip: record creation form

assets/styles/main.css

@@ -179,17 +179,6 @@ a.button {
 form h3 {
   margin: 0;
   margin-top: 2rem;
-  display: flex;
-  align-items: center;
-
-  &::after {
-    /*content: '';*/
-    height: 1px;
-    flex: 1;
-    display: block;
-    background-color: black;
-    margin-left: .5em;
-  }
 }
 
 fieldset {
@@ -210,10 +199,6 @@ fieldset {
     bottom: -.55em;
     margin-bottom: .5rem;
   }
-
-  & + button.form-new-item {
-    margin-top: 1rem;
-  }
 }
 
 input[type="text"] {
@@ -238,6 +223,16 @@ textarea {
     flex-direction: column;
   }
 
+  & > div.input-group {
+    flex-direction: row;
+    align-items: baseline;
+
+    input,
+    textarea {
+      flex: 1;
+    }
+  }
+
   label {
     margin-bottom: .5rem;
   }

templates/macros/display_rrset.html

@@ -12,9 +12,7 @@
         {% endif %}
         <div class="action">
             <a class="button icon" href="#">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
+                {{ icons::pencil() }}
-                    <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
-                </svg>
             </a>
         </div>
     </div>

templates/macros/form.html

@@ -0,0 +1,51 @@
+{% macro input(id, name, value, type="text", description="", errors, error_msg_id, label, label_attributes, attributes) %}
+
+{% set filtered_errors = [] %}
+
+{% for error in errors %}
+    {% if error %}
+        {% set_global filtered_errors = filtered_errors | concat(with=error) %}
+    {% endif %}
+{% endfor %}
+
+<label
+    for="{{ id }}"
+
+    {% for i in range(start=0, end=label_attributes|length, step_by=2) %}
+    {{ label_attributes[i] }}="{{ label_attributes | nth(n=i+1) }}"
+    {% endfor %}
+>
+    {{ label }}
+</label>
+<div>
+    <input
+        {% if type == "number" %}
+        type="text"
+        inputmode="numeric"
+        {% else %}
+        type="{{ type }}"
+        {% endif %}
+        name="{{ name }}"
+        id="{{ id }}"
+        {% for i in range(start=0, end=attributes|length, step_by=2) %}
+        {{ attributes[i] }}="{{ attributes | nth(n=i+1) }}"
+        {% endfor %}
+        aria-describedby="{% for error in filtered_errors %} {{ id }}-error-{{ loop.index0 }}{% endfor %}{% if description %} {{ id }}-description{%endif %}"
+        {% if filtered_errors %}aria-invalid="true"{% endif %}
+        value="{{ value }}"
+    >
+    {% for error in filtered_errors %}
+        <p class="error" id="{{ id }}-error-{{ loop.index0 }}" data-new-item-skip>
+            {{ tr(
+                msg=error_msg_id,
+                attr="error-" ~ error.code | replace(from=":", to="-"),
+                lang=lang) }}
+        </p>
+    {% endfor %}
+    {% if description %}
+        <p class="help" id="{{ id }}-description">
+            {{ description }}
+        </p>
+    {% endif %}
+</div>
+{% endmacro %}

templates/macros/icons.html

@@ -0,0 +1,12 @@
+{% macro plus_circle() %}
+<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>
+{% endmacro %}
+
+{% macro pencil() %}
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
+    <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
+</svg>
+{% endmacro %}

templates/pages/new_record.html

@@ -1,5 +1,8 @@
 {% extends "bases/app.html" %}
-{% import "macros/new_rrset.html" as new_rrset %}
+
+{% import "macros/icons.html" as icons %}
+{% import "macros/form.html" as form %}
+
 {% block title %}{{ tr(msg="new-record-title", lang=lang) }} – {{ current_zone }} ‑ {% endblock title %}
 
 {% block main %}

templates/pages/new_record/configure_record.html

@@ -9,29 +9,20 @@
 
     {% set ttl_error = errors | get(key="/addresses/ttl", default="") %}
     <div class="form-input">
-        <label for="addresses-ttl">
+        {{
-            {{ tr(msg="record-input-ttl", attr="input-label", lang=lang) }}
+            form::input(
-        </label>
+                id="address-ttl",
-        <div>
+                name="addresses[ttl]",
-            <input
+                value=address.address | default(value=""),
-                type="text"
+                type="number",
-                inputmode="numeric"
+                errors=[ ttl_error ],
-                name="addresses[ttl]"
+                error_msg_id="record-input-ttl",
-                id="addresses-ttl"
+                description=tr(msg="record-input-ttl", attr="help", lang=lang),
-                aria-describedby="ttl-help{% if ttl_error %} ttl-error{% endif %}"
+                label=tr(msg="record-input-ttl", attr="input-label", lang=lang),
-                value="{{ input_data.addresses.ttl | default(value="") }}"
+                label_attributes=[],
-            >
+                attributes=[],
-            {% if ttl_error %}
+            )
-                <p class="error" id="ttl-error">
+        }}
-                    {{ tr(
-                        msg="record-input-ttl",
-                        attr="error-" ~ ttl_error.code | replace(from=":", to="-"),
-                        lang=lang) }}
-                </p>
-            {% endif %}
-            <p class="help" id="ttl-help">
-                {{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
-            </p>
         </div>
     </div>
 
@@ -39,48 +30,33 @@
     {% for address in input_data.addresses.data.addresses | default(value=[""]) %}
         {% set address_error = errors | get(key="/addresses/data/addresses/" ~ loop.index0 ~ "/address", default="") %}
         <div class="form-input" data-new-item-template="address">
-            <label
+            {{
-                for="address-{{ loop.index0 }}"
+                form::input(
-                data-new-item-template-attr="for"
+                    id="address-" ~ loop.index0,
-                data-template-for="address-{i}"
+                    name="addresses[data][addresses][" ~loop.index0 ~ "][address]",
-                data-new-item-template-content="{{ tr(msg="record-input-addresses", attr="input-label", index="{i}", lang=lang) }}"
+                    value=address.address | default(value=""),
-            >
+                    type="text",
-                {{ tr(msg="record-input-addresses", attr="input-label", index=loop.index, lang=lang) }}
+                    errors=[
-            </label>
+                        global_address_error,
-            <div>
+                        address_error,
-                <input
+                    ],
-                    type="text"
+                    error_msg_id="record-input-addresses",
-                    name="addresses[data][addresses][{{ loop.index0 }}][address]"
+                    label=tr(msg="record-input-addresses", attr="input-label", index=loop.index, lang=lang),
-                    id="address-{{ loop.index0 }}"
+                    label_attributes=[
-                    data-new-item-template-attr="name id"
+                        "data-new-item-template-attr", "for",
-                    data-template-name="addresses[data][addresses][{i}][address]"
+                        "data-template-for", "address-{i}",
-                    data-template-id="address-{i}"
+                        "data-new-item-template-content", tr(msg="record-input-addresses", attr="input-label", index="{i}", lang=lang),
-                    aria-describedby="{% if address_error %}address-{{ loop.index0 }}-error{% endif %}"
+                    ],
-                    {% if address_error %}aria-invalid="true"{% endif %}
+                    attributes=[
-                    value="{{ address.address | default(value="") }}"
+                        "data-new-item-template-attr", "name id",
-                >
+                        "data-template-name", "addresses[data][addresses][{i}][address]",
-                {% if global_address_error or address_error %}
+                        "data-template-id", "address-{i}",
-                    <p class="error" id="address-{{ loop.index0 }}-error" data-new-item-skip>
+                    ]
-                        {% if global_address_error %}
+                )
-                            {{ tr(
+            }}
-                                msg="record-input-addresses",
-                                attr="error-" ~ global_address_error.code | replace(from=":", to="-"),
-                                lang=lang) }}
-                        {% else %}
-                            {{ tr(
-                                msg="record-input-addresses",
-                                attr="error-" ~ address_error.code | replace(from=":", to="-"),
-                                lang=lang) }}
-                        {% endif %}
-                    </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">
+            {{ icons::plus_circle() }}
-                <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-address", lang=lang) }}
         </button>
     {% endfor %}
@@ -158,10 +134,7 @@
     {% endfor %}
 
     <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">
+        {{ icons::plus_circle() }}
-            <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>
 
@@ -249,10 +222,7 @@
     </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">
+        {{ icons::plus_circle() }}
-            <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>
 

templates/pages/records.html

@@ -1,4 +1,6 @@
 {% import "macros/display_rrset.html" as rrset %}
+{% import "macros/icons.html" as icons %}
+
 {% extends "bases/app.html" %}
 
 {% block title %}{{ tr(msg="zone-content-title", lang=lang) }} – {{ current_zone }} – {% endblock title %}
@@ -21,10 +23,7 @@
                     <h3 class="folder-tab">{{ node.name }}</h3>
                     <span class="sep"></span>
                     <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">
+                        {{ icons::plus_circle() }}
-                            <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="zone-content-new-record-button", lang=lang) }}
                     </a>
                 </header>