feat: verfijn UX en borg Unraid deployment

static/js/app.js

@@ -55,6 +55,21 @@
     });
   });
 
+  const motionAllowed = !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (motionAllowed) {
+    document.querySelectorAll("[data-radar-illustration]").forEach((illustration) => {
+      illustration.addEventListener("pointermove", (event) => {
+        const bounds = illustration.getBoundingClientRect();
+        illustration.style.setProperty("--radar-x", `${((event.clientX - bounds.left) / bounds.width - .5) * 10}px`);
+        illustration.style.setProperty("--radar-y", `${((event.clientY - bounds.top) / bounds.height - .5) * 10}px`);
+      });
+      illustration.addEventListener("pointerleave", () => {
+        illustration.style.removeProperty("--radar-x");
+        illustration.style.removeProperty("--radar-y");
+      });
+    });
+  }
+
   document.addEventListener("keydown", (event) => {
     if (event.key === "Escape") closeNavigation();
     if (event.key === "/" && !/INPUT|TEXTAREA|SELECT/.test(document.activeElement?.tagName || "")) {

static/js/login.js

@@ -0,0 +1,28 @@
+(() => {
+  "use strict";
+
+  const toggle = document.querySelector("[data-pw-toggle]");
+  const password = document.getElementById("id_password");
+  if (toggle && password) {
+    const eye = toggle.querySelector("[data-eye]");
+    const eyeOff = toggle.querySelector("[data-eye-off]");
+    toggle.addEventListener("click", () => {
+      const show = password.type === "password";
+      password.type = show ? "text" : "password";
+      toggle.setAttribute("aria-label", show ? "Wachtwoord verbergen" : "Wachtwoord tonen");
+      if (eye && eyeOff) {
+        eye.hidden = show;
+        eyeOff.hidden = !show;
+      }
+    });
+  }
+
+  const form = document.querySelector("form.auth-form");
+  form?.addEventListener("submit", () => {
+    const button = form.querySelector("[data-submit]");
+    if (!button || button.dataset.busy || !form.checkValidity()) return;
+    button.dataset.busy = "1";
+    const label = button.querySelector("[data-label]");
+    if (label) label.textContent = "Bezig met inloggen…";
+  });
+})();