From 2e132057207af59b134513108bf92442af1ca78b Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@dgnum.eu>
Date: Fri, 31 Jan 2025 09:57:32 +0100
Subject: [PATCH] feat(dgsi/js): Add data- driven listeners

---
 src/dgsi/templates/dgsi/profile.html | 14 ++++++++------
 src/shared/static/js/dgsi.js         | 22 ++++++++++++++++++++++
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/dgsi/templates/dgsi/profile.html b/src/dgsi/templates/dgsi/profile.html
index 2343cb3..e1b6a20 100644
--- a/src/dgsi/templates/dgsi/profile.html
+++ b/src/dgsi/templates/dgsi/profile.html
@@ -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 />
diff --git a/src/shared/static/js/dgsi.js b/src/shared/static/js/dgsi.js
index 61f1234..89f9185 100644
--- a/src/shared/static/js/dgsi.js
+++ b/src/shared/static/js/dgsi.js
@@ -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();
+    });
+  });
 });