Simplify DDNS flow and polish UI

router_dyndns/routers/assets.py

@@ -60,6 +60,10 @@ THEME_JS = """
 
 CLIPBOARD_JS = """
 document.addEventListener("click", async (event) => {
+  document.querySelectorAll("details.copy-menu[open]").forEach((menu) => {
+    if (!menu.contains(event.target)) menu.removeAttribute("open");
+  });
+
   const toggle = event.target.closest("[data-secret-toggle]");
   if (toggle) {
     const group = toggle.closest(".copy-field");
@@ -84,13 +88,29 @@ document.addEventListener("click", async (event) => {
   if (!button) return;
   try {
     await navigator.clipboard.writeText(button.dataset.copy || "");
-    const old = button.textContent;
-    button.textContent = "Copied";
+    const label = button.querySelector("[data-copy-label]");
+    const oldLabel = label ? label.textContent : "";
+    button.classList.add("is-copied");
+    if (label) label.textContent = "Copied";
+    const menu = button.closest("details.copy-menu");
+    if (menu) {
+      setTimeout(() => {
+        menu.removeAttribute("open");
+      }, 250);
+    }
     setTimeout(() => {
-      button.textContent = old;
+      button.classList.remove("is-copied");
+      if (label) label.textContent = oldLabel;
     }, 1200);
   } catch (_) {}
 });
+
+document.addEventListener("keydown", (event) => {
+  if (event.key !== "Escape") return;
+  document.querySelectorAll("details.copy-menu[open]").forEach((menu) => {
+    menu.removeAttribute("open");
+  });
+});
 """.strip()