feat(dgsi/js): Add data- driven listeners

This commit is contained in:
Tom Hubrecht 2025-01-31 09:57:32 +01:00
parent 561d5c60d7
commit 2e13205720
Signed by: thubrecht
SSH key fingerprint: SHA256:r+nK/SIcWlJ0zFZJGHtlAoRwq1Rm+WcKAm5ADYMoQPc
2 changed files with 30 additions and 6 deletions

View file

@ -24,8 +24,7 @@
</h3>
{% if user.kanidm.radius_secret %}
<input id="radius-secret"
onclick="document.querySelector('#radius-secret').select()"
<input data-select
class="button is-fullwidth is-primary is-size-4"
value="{{ user.kanidm.radius_secret }}"
readonly />
@ -43,16 +42,19 @@
{% if user.kanidm %}
<h2 class="subtitle mt-4">
{% trans "Informations techniques" %}
<a class="tag is-medium is-primary is-light is-pulled-right"
onclick="document.querySelector('#technical-info').classList.toggle('is-hidden')">{% trans "Afficher" %}</a>
<a class="button is-small is-primary is-light is-pulled-right"
data-toggle="on"
data-target="#technical-info"
data-class="is-hidden"
data-on-html="<span>{% trans "Afficher" %}</span>"
data-off-html="<span>{% trans "Cacher" %}</span>">{% trans "Afficher" %}</a>
</h2>
<hr>
<div id="technical-info" class="is-hidden">
<h3 class="has-text-weight-bold mb-3">{% trans "Identifiant interne :" %}</h3>
<input id="uuid"
onclick="document.querySelector('#uuid').select()"
<input data-select
class="button is-fullwidth is-light"
value="{{ user.kanidm.person.uuid }}"
readonly />

View file

@ -8,4 +8,26 @@ document.addEventListener("DOMContentLoaded", () => {
setTimeout(dismiss, 15000);
},
);
(document.querySelectorAll("[data-toggle]") || []).forEach(($toggle) => {
const target = document.querySelector($toggle.dataset.target);
$toggle.addEventListener("click", () => {
if ($toggle.dataset.toggle === "on") {
$toggle.dataset.toggle = "off";
$toggle.innerHTML = $toggle.dataset.offHtml;
target.classList.remove($toggle.dataset.class);
} else {
$toggle.dataset.toggle = "on";
$toggle.innerHTML = $toggle.dataset.onHtml;
target.classList.add($toggle.dataset.class);
}
});
});
(document.querySelectorAll("[data-select]") || []).forEach(($input) => {
$input.addEventListener("click", () => {
$input.select();
});
});
});