form error style
This commit is contained in:
parent
a4e0c9a244
commit
3751827779
6 changed files with 97 additions and 14 deletions
|
|
@ -206,9 +206,46 @@ textarea {
|
|||
.form-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5rem;
|
||||
flex-grow: 1;
|
||||
margin-top: 1rem;
|
||||
|
||||
label {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: #a20000;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
margin-top: .15rem;
|
||||
padding: .25rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.error::before {
|
||||
content: '';
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-color: #fff;
|
||||
mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-exclamation-triangle' viewBox='0 0 16 16'><path d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z'/><path d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/></svg>");
|
||||
display: inline-block;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: cover;
|
||||
margin-right: .25rem;
|
||||
margin-bottom: -.05em;
|
||||
}
|
||||
|
||||
.help {
|
||||
margin: 0;
|
||||
margin-bottom: .15rem;
|
||||
font-style: oblique;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
padding: .25rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
|
|
@ -220,6 +257,7 @@ textarea {
|
|||
|
||||
.form-input {
|
||||
margin-top: 0;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,11 +43,18 @@ 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)
|
||||
.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.
|
||||
|
||||
record-input-addresses =
|
||||
.input-label = IP address #{ $index }
|
||||
.error-record-parse-ip = Unexpected IP address format. The IP address
|
||||
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>.
|
||||
.error-input-missing_value = At least one IP addresses is required.
|
||||
|
||||
button-add-address = Add an other address
|
||||
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@ zone-content-section-mail-header = Courriel
|
|||
zone-content-section-services-header = Services
|
||||
zone-content-section-general-header = Général
|
||||
|
||||
zone-content-record-type-address =
|
||||
zone-content-record-type-addresses =
|
||||
.type-name = Adresses IP
|
||||
|
||||
zone-content-record-type-mailserver =
|
||||
zone-content-record-type-mailservers =
|
||||
.type-name = Serveurs de courriel
|
||||
.data-preference = Préférence : { $preference }
|
||||
|
||||
zone-content-record-type-nameserver =
|
||||
zone-content-record-type-nameservers =
|
||||
.type-name = Serveurs de noms
|
||||
|
||||
zone-content-record-type-service =
|
||||
|
|
@ -43,11 +43,18 @@ 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)
|
||||
.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.
|
||||
|
||||
record-input-addresses =
|
||||
.input-label = Adresse IP #{ $index }
|
||||
.error-record-parse-ip = Format d’adresse IP inconnu. L’adresse IP doit être
|
||||
soit une adresse IPv4, comme <code>198.51.100.3</code>, soit une adresse IPv6,
|
||||
comme <code>2001:db8:cafe:bc68::2</code>.
|
||||
.error-input-missing_value = Au moins une adresse IP est requise.
|
||||
|
||||
button-add-address = Ajouter une autre adresse
|
||||
|
||||
|
|
|
|||
|
|
@ -171,6 +171,7 @@ pub struct ExtractLanguageService<S> {
|
|||
|
||||
impl<S> ExtractLanguageService<S> {
|
||||
// https://httpwg.org/specs/rfc9110.html#field.accept-language
|
||||
// TODO: Test language selection for compound locales (eg. fr-FR)
|
||||
pub fn language_from_header(&self, headers: &axum::http::HeaderMap) -> LanguageIdentifier {
|
||||
let lang_preferences = headers
|
||||
.get("Accept-Language")
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
{% block main %}
|
||||
<h1>{{ tr(msg="record-creation-process-heading", zone=current_zone, lang=lang) }}</h1>
|
||||
|
||||
<!-- {{ errors | json_encode(pretty=true) }} -->
|
||||
|
||||
{% set domain_error = errors | get(key="/name", default="") %}
|
||||
|
||||
{{ domain_error | json_encode(pretty=true) }}
|
||||
{% if not new_record_name or (new_record_name and domain_error) %}
|
||||
{% include "pages/new_record/choose_name.html" %}
|
||||
{% elif not config and not rtype %}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,33 @@
|
|||
|
||||
<input name="addresses[_exist]" type="hidden" value="true">
|
||||
|
||||
{% set ttl_error = errors | get(key="/addresses/ttl", default="") %}
|
||||
<div class="form-input">
|
||||
<label for="addresses-ttl">Duration in cache (TTL) (optional, default to 1 hour)</label>
|
||||
<input id="addresses-ttl" name="addresses[ttl]" type="text">
|
||||
<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>
|
||||
<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 %}
|
||||
</div>
|
||||
|
||||
{% set global_address_error = errors | get(key="/addresses/data", default="") %}
|
||||
{% 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">
|
||||
|
|
@ -30,15 +52,23 @@
|
|||
data-new-item-template-attr="name id"
|
||||
data-template-name="addresses[data][addresses][{i}][address]"
|
||||
data-template-id="address-{i}"
|
||||
{% if domain_error %}aria-invalid="true"{% endif %}
|
||||
aria-describedby="{% if address_error %}address-{{ loop.index0 }}-error{% endif %}"
|
||||
{% if address_error %}aria-invalid="true"{% endif %}
|
||||
value="{{ address.address | default(value="") }}"
|
||||
>
|
||||
{% if address_error %}
|
||||
{% 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue