improve new record page

This commit is contained in:
Hannaeko 2025-06-10 12:48:08 +01:00
parent 5f73738465
commit 54eb6206c9
6 changed files with 135 additions and 22 deletions

View file

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

View file

@ -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;
font-size: 1.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 {

View file

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

View file

@ -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 denvoi (SPF)
record-input-dmarc =
.input-label = Politique de signalement derreurs (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

View file

@ -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>
<legend>Mail server #{{ loop.index }}</legend>
<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">
<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>

View file

@ -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"/>