wip: improve form email config

This commit is contained in:
Hannaeko 2025-06-19 18:48:38 +01:00
parent a306f6002b
commit 0a44b333a0
5 changed files with 143 additions and 126 deletions

View file

@ -208,6 +208,7 @@ fieldset {
position: relative;
bottom: -.55em;
margin-bottom: .5rem;
}
& + button.form-new-item {
@ -224,9 +225,18 @@ textarea {
}
.form-input {
display: grid;
grid-auto-flow: column;
grid-template-rows: auto auto;
grid-auto-columns: 1fr;
column-gap: 1rem;
margin-top: 1rem;
& > div {
width: 100%;
display: flex;
flex-direction: column;
margin-top: 1rem;
}
label {
margin-bottom: .5rem;
@ -257,8 +267,9 @@ textarea {
.help {
margin: 0;
margin-bottom: .15rem;
margin-top: .15rem;
font-style: oblique;
font-size: .9rem;
}
input,
@ -268,24 +279,6 @@ textarea {
}
}
.form-row {
display: flex;
width: 100%;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1rem;
align-items: end;
.form-input {
margin-top: 0;
flex: 1;
}
.form-input.width-2 {
flex-grow: 2;
}
}
.form-action {
margin-top: 1rem;
}

View file

@ -44,8 +44,8 @@ record-input-name =
button-create-record-next-step = Next step
record-input-ttl =
.input-label = Duration in cache (TTL), in seconds
.help = Optional, default to 1 hour (3600 secondes)
.input-label = Duration in cache (TTL)
.help = In seconds, optional, default to 1 hour
.error-input-type_error = The duration in cache must be a positif integer number.
.error-record-parse-number = The duration in cache must be a positif integer number.
@ -66,10 +66,12 @@ record-input-mailservers =
button-add-mailserver = Add an other mailserver
record-input-spf =
.input-label = Sender policy (SPF)
.legend = Sender policy (SPF)
.input-label = Sender policy
record-input-dmarc =
.input-label = Error reporting policy (DMARC)
.legend = Error reporting policy (DMARC)
.input-label = Error reporting policy
record-input-dkim =
.legend = Cryptographic signature key (DKIM) #{ $index }

View file

@ -44,8 +44,8 @@ record-input-name =
button-create-record-next-step = Étape suivante
record-input-ttl =
.input-label = Durée dans le cache (TTL), en seconde
.help = Optionnel, 1 heure par défaut (3600 secondes)
.input-label = Durée dans le cache (TTL)
.help = En secondes, optionnel, 1 heure par défaut
.error-input-type_error = La durée dans le cache doit être un nombre entier positif.
.error-record-parse-number = La durée dans le cache doit être un nombre entier positif.
@ -66,13 +66,15 @@ record-input-mailservers =
button-add-mailserver = Ajouter un autre serveur de courriel
record-input-spf =
.input-label = Politique denvoi (SPF)
.input-label = Politique denvoi
.legend = Politique denvoi (SPF)
record-input-dmarc =
.input-label = Politique de signalement derreurs (DMARC)
.legend = Politique de signalement derreurs (DMARC)
.input-label = Politique de signalement derreurs
record-input-dkim =
.legend = Clé de signature cryptographique (DKIM) #{ $index }
.legend = Clé de signature cryptographique #{ $index }
.input-label-selector = Sélecteur
.input-label-signing-key = Clé de signature
@ -88,6 +90,6 @@ record-config-mail-heading = Configurer le courriel pour le domaine <strong>{ $n
record-config-section-mail =
.servers = Serveurs de courriel
.security = Sécurité
.dkim = Signature cryptographique
.dkim = Signature cryptographique (DKIM)
button-save-configuration = Sauvegarder la configuration

View file

@ -5,7 +5,7 @@
{% block main %}
<h1>{{ tr(msg="record-creation-process-heading", zone=current_zone, lang=lang) }}</h1>
<!-- {{ errors | json_encode(pretty=true) }} -->
{{ errors | json_encode(pretty=true) }}
{% set domain_error = errors | get(key="/name", default="") %}

View file

@ -12,9 +12,7 @@
<label for="addresses-ttl">
{{ tr(msg="record-input-ttl", attr="input-label", lang=lang) }}
</label>
<p class="help" id="ttl-help">
{{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
</p>
<div>
<input
type="text"
inputmode="numeric"
@ -31,6 +29,10 @@
lang=lang) }}
</p>
{% endif %}
<p class="help" id="ttl-help">
{{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
</p>
</div>
</div>
{% set global_address_error = errors | get(key="/addresses/data", default="") %}
@ -45,6 +47,7 @@
>
{{ 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]"
@ -72,6 +75,7 @@
</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">
<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"/>
@ -98,7 +102,12 @@
<label for="mailservers-ttl">
{{ tr(msg="record-input-ttl", attr="input-label", lang=lang) }}
</label>
<input name="mailservers[ttl]" id="mailservers-ttl" type="text" value="{{ input_data.mailservers.ttl | default(value="") }}">
<div>
<input name="mailservers[ttl]" id="mailservers-ttl" type="text" value="{{ input_data.mailservers.ttl | default(value="") }}" aria-describedby="mailservers-ttl">
<p class="help" id="mailservers-ttl-help">
{{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
</p>
</div>
</div>
{% for mailserver in input_data.mailservers.data.mailservers | default(value=[""]) %}
@ -106,8 +115,7 @@
<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 width-2">
<div class="form-input">
<label
for="mailserver-mail_exchanger-{{ loop.index0 }}"
data-new-item-template-attr="for"
@ -115,6 +123,7 @@
>
{{ tr(msg="record-input-mailservers", attr="input-label-server-name", lang=lang) }}
</label>
<div>
<input
name="mailservers[data][mailservers][{{ loop.index0 }}][mail_exchanger]"
id="mailserver-mail_exchanger-{{ loop.index0 }}"
@ -126,7 +135,6 @@
>
</div>
<div class="form-input">
<label
for="mailserver-preference-{{ loop.index0 }}"
data-new-item-template-attr="for"
@ -134,6 +142,7 @@
>
{{ tr(msg="record-input-mailservers", attr="input-label-preference", lang=lang) }}
</label>
<div>
<input
name="mailservers[data][mailservers][{{ loop.index0 }}][preference]"
id="mailserver-preference-{{ loop.index0 }}"
@ -160,39 +169,45 @@
<input name="spf[_exist]" type="hidden" value="true">
<fieldset>
<legend>Sender policy</legend>
<div class="form-row">
<div class="form-input width-2">
<legend>{{ tr(msg="record-input-spf", attr="legend", lang=lang) }}</legend>
<div class="form-input">
<label for="spf-policy">
{{ tr(msg="record-input-spf", attr="input-label", lang=lang) }}
</label>
<div>
<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="spf-ttl">
{{ tr(msg="record-input-ttl", attr="input-label", lang=lang) }}
</label>
<input name="spf[ttl]" id="spf-ttl" type="text" value="{{ input_data.spf.ttl | default(value="") }}">
<div>
<input name="spf[ttl]" id="spf-ttl" type="text" value="{{ input_data.spf.ttl | default(value="") }}" aria-describedby="spf-ttl-help">
<p class="help" id="spf-ttl-help">
{{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
</p>
</div>
</div>
</fieldset>
<fieldset>
<legend>Error reporting policy</legend>
<div class="form-row">
<div class="form-input width-2">
<legend>{{ tr(msg="record-input-dmarc", attr="legend", lang=lang) }}</legend>
<div class="form-input">
<label for="dmarc">
{{ tr(msg="record-input-dmarc", attr="input-label", lang=lang) }}
</label>
<div>
<input name="dmarc" id="dmarc" type="text">
</div>
<div class="form-input">
<label for="dmarc-ttl">
{{ tr(msg="record-input-ttl", attr="input-label", lang=lang) }}
</label>
<input name="dmarc[ttl]" id="dmarc-ttl" type="text" value="{{ input_data.dmarc.ttl | default(value="") }}">
<div>
<input name="dmarc[ttl]" id="dmarc-ttl" type="text" value="{{ input_data.dmarc.ttl | default(value="") }}" aria-describedby="dmac-ttl-help">
<p class="help" id="dmarc-ttl-help">
{{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
</p>
</div>
</div>
</fieldset>
@ -203,7 +218,12 @@
<label for="dkim-ttl">
{{ tr(msg="record-input-ttl", attr="input-label", lang=lang) }}
</label>
<input name="dkim[ttl]" id="dkim-ttl" type="text" value="{{ input_data.dkim.ttl | default(value="") }}">
<div>
<input name="dkim[ttl]" id="dkim-ttl" type="text" value="{{ input_data.dkim.ttl | default(value="") }}" aria-describedby="dkim-ttl-help">
<p class="help" id="dkim-ttl-help">
{{ tr(msg="record-input-ttl", attr="help", lang=lang) }}
</p>
</div>
</div>
<fieldset>
@ -211,18 +231,18 @@
{{ tr(msg="record-input-dkim", attr="legend", index=1, lang=lang) }}
</legend>
<div class="form-row">
<div class="form-input">
<label for="dkim-selector">
{{ tr(msg="record-input-dkim", attr="input-label-selector", lang=lang) }}
</label>
<div>
<input name="dkim-selector" id="dkim-selector" type="text">
</div>
<div class="form-input">
<label for="dkim-key">
{{ tr(msg="record-input-dkim", attr="input-label-signing-key", lang=lang) }}
</label>
<div>
<textarea name="dkim-key" id="dkim-key"></textarea>
</div>
</div>