improve new record page
This commit is contained in:
parent
5f73738465
commit
54eb6206c9
6 changed files with 135 additions and 22 deletions
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"/>
|
||||
|
|
Loading…
Reference in a new issue