dns-witch/nomilo
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip: record creation form

Browse source
This commit is contained in:
Hannaeko 2025-06-21 21:30:39 +01:00
parent 0a44b333a0
commit 07b4b37a0a
7 changed files with 122 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
assets/styles/main.css
View file

@ -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;
}

4
templates/macros/display_rrset.html
View file

@ -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">
<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>
{{ icons::pencil() }}
</a>
</div>
</div>

51
templates/macros/form.html Normal file
View file

@ -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 %}

12
templates/macros/icons.html Normal file
View file

@ -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 %}

5
templates/pages/new_record.html
View file

@ -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 %}

112
templates/pages/new_record/configure_record.html
View file

@ -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) }}
</label>
<div>
<input
type="text"
inputmode="numeric"
name="addresses[ttl]"
id="addresses-ttl"
aria-describedby="ttl-help{% if ttl_error %} ttl-error{% endif %}"
value="{{ input_data.addresses.ttl | default(value="") }}"
>
{% 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>
{{
form::input(
id="address-ttl",
name="addresses[ttl]",
value=address.address | default(value=""),
type="number",
errors=[ ttl_error ],
error_msg_id="record-input-ttl",
description=tr(msg="record-input-ttl", attr="help", lang=lang),
label=tr(msg="record-input-ttl", attr="input-label", lang=lang),
label_attributes=[],
attributes=[],
)
}}
</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 }}"
data-new-item-template-attr="for"
data-template-for="address-{i}"
data-new-item-template-content="{{ tr(msg="record-input-addresses", attr="input-label", index="{i}", lang=lang) }}"
>
{{ 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]"
id="address-{{ loop.index0 }}"
data-new-item-template-attr="name id"
data-template-name="addresses[data][addresses][{i}][address]"
data-template-id="address-{i}"
aria-describedby="{% if address_error %}address-{{ loop.index0 }}-error{% endif %}"
{% if address_error %}aria-invalid="true"{% endif %}
value="{{ address.address | default(value="") }}"
>
{% if global_address_error or address_error %}
<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>
{{
form::input(
id="address-" ~ loop.index0,
name="addresses[data][addresses][" ~loop.index0 ~ "][address]",
value=address.address | default(value=""),
type="text",
errors=[
global_address_error,
address_error,
],
error_msg_id="record-input-addresses",
label=tr(msg="record-input-addresses", attr="input-label", index=loop.index, lang=lang),
label_attributes=[
"data-new-item-template-attr", "for",
"data-template-for", "address-{i}",
"data-new-item-template-content", tr(msg="record-input-addresses", attr="input-label", index="{i}", lang=lang),
],
attributes=[
"data-new-item-template-attr", "name id",
"data-template-name", "addresses[data][addresses][{i}][address]",
"data-template-id", "address-{i}",
]
)
}}
</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"/>
<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>
{{ icons::plus_circle() }}
{{ 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">
<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>
{{ icons::plus_circle() }}
{{ 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">
<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>
{{ icons::plus_circle() }}
{{ tr(msg="button-add-dkim-key", lang=lang) }}
</button>

7
templates/pages/records.html
View file

@ -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">
<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>
{{ icons::plus_circle() }}
{{ tr(msg="zone-content-new-record-button", lang=lang) }}
</a>
</header>