From d6b702e35a95c0d7921bd16fc6d9475d144813df Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Wed, 11 Mar 2026 16:42:34 -0400
Subject: [PATCH] device: add copyToClipboard and fix regenerate token HTMX
 button

Phase 3: Complete device page functionality fixes

- Add copyToClipboard function to device-management.ts:
  - Uses navigator.clipboard.writeText() for copying
  - Shows success/error toast notifications
  - Already exported in Alpine.store, now properly defined
- Fix typo in devices.templ: change 'regerate-token' to 'regenerate-token'
- Add HTMX support to RegenerateDeviceToken handler:
  - Returns HTML with reload script for HTMX requests
  - Preserves JSON response for API calls

The regenerate token button now works via HTMX (hx-put) instead of
Alpine.js, matching the pattern used elsewhere in the app.
---
 internal/handlers/devices.go |   5 +
 templates/devices.templ      |   3 +-
 web/src/device-management.ts | 272 ++++++++++++++++++++++++++---------
 3 files changed, 211 insertions(+), 69 deletions(-)

diff --git a/internal/handlers/devices.go b/internal/handlers/devices.go
index 8aa68bd..0234e00 100644
--- a/internal/handlers/devices.go
+++ b/internal/handlers/devices.go
@@ -554,6 +554,11 @@ func (h *DeviceHandler) RegenerateDeviceToken(c *echo.Context) error {
 		syncURLs["bookmarks"] = fmt.Sprintf("%s/api/sync/koreader/bookmarks", baseURL)
 	}
 
+	// Handle HTMX requests - return HTML with page reload script
+	if c.Request().Header.Get("HX-Request") == "true" {
+		html := fmt.Sprintf(`<div class="text-green-500">Token regenerated! Reloading ... </div><script>window.location.reload();`)
+		return c.HTML(http.StatusOK, html)
+	}
 	return c.JSON(http.StatusOK, map[string]interface{}{
 		"message":    "Token regenerated successfully",
 		"auth_token": newToken,
diff --git a/templates/devices.templ b/templates/devices.templ
index 6a66552..5e1ee84 100644
--- a/templates/devices.templ
+++ b/templates/devices.templ
@@ -148,7 +148,8 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 										}
 										<!-- Regenerate Token Button -->
 										<button
-											@click="regenerateDeviceToken('{ device.ID }', $event)"
+											hx-put={ "/api/devices/" + device.ID.String() + "/regenerate-token" }
+											hx-confirm="⚠️ Old token will immediately stop working. Regenerate anyway?"
 											class="w-full px-3 py-2 text-xs rounded border hover:opacity-80"
 											style="border-color: var(--border); color: var(--text-secondary); background-color: var(--bg-primary);"
 										>
diff --git a/web/src/device-management.ts b/web/src/device-management.ts
index 8db5866..65cca89 100644
--- a/web/src/device-management.ts
+++ b/web/src/device-management.ts
@@ -30,9 +30,15 @@ async function handleAddDevice(event: Event): Promise<void> {
   const token = getToken();
   if (!token) return;
 
-  const deviceNameInput = document.getElementById("device-name") as HTMLInputElement;
-  const deviceTypeInput = document.getElementById("device-type") as HTMLSelectElement;
-  const deviceIdentifierInput = document.getElementById("device-identifier") as HTMLInputElement;
+  const deviceNameInput = document.getElementById(
+    "device-name",
+  ) as HTMLInputElement;
+  const deviceTypeInput = document.getElementById(
+    "device-type",
+  ) as HTMLSelectElement;
+  const deviceIdentifierInput = document.getElementById(
+    "device-identifier",
+  ) as HTMLInputElement;
 
   if (!deviceNameInput || !deviceTypeInput || !deviceIdentifierInput) return;
 
@@ -53,7 +59,10 @@ async function handleAddDevice(event: Event): Promise<void> {
     });
 
     if (response.ok) {
-      showToast("Device registered! Check your device for sync instructions.", "success");
+      showToast(
+        "Device registered! Check your device for sync instructions.",
+        "success",
+      );
       hideAddDeviceModal();
       window.location.reload();
     } else {
@@ -67,12 +76,24 @@ async function handleAddDevice(event: Event): Promise<void> {
 
 function showDeviceSettings(deviceId: string): void {
   const modal = document.getElementById("device-settings-modal");
-  const deviceIdInput = document.getElementById("settings-device-id") as HTMLInputElement;
-  const deviceTypeInput = document.getElementById("settings-device-type") as HTMLInputElement;
-  const deviceNameInput = document.getElementById("settings-device-name") as HTMLInputElement;
-  const syncEnabledInput = document.getElementById("settings-sync-enabled") as HTMLInputElement;
-  const autoSyncInput = document.getElementById("settings-auto-sync") as HTMLInputElement;
-  const syncFrequencyInput = document.getElementById("settings-sync-frequency") as HTMLInputElement;
+  const deviceIdInput = document.getElementById(
+    "settings-device-id",
+  ) as HTMLInputElement;
+  const deviceTypeInput = document.getElementById(
+    "settings-device-type",
+  ) as HTMLInputElement;
+  const deviceNameInput = document.getElementById(
+    "settings-device-name",
+  ) as HTMLInputElement;
+  const syncEnabledInput = document.getElementById(
+    "settings-sync-enabled",
+  ) as HTMLInputElement;
+  const autoSyncInput = document.getElementById(
+    "settings-auto-sync",
+  ) as HTMLInputElement;
+  const syncFrequencyInput = document.getElementById(
+    "settings-sync-frequency",
+  ) as HTMLInputElement;
 
   if (!modal || !deviceIdInput) return;
 
@@ -88,9 +109,11 @@ function showDeviceSettings(deviceId: string): void {
     .then((device) => {
       if (deviceTypeInput) deviceTypeInput.value = device.device_type || "";
       if (deviceNameInput) deviceNameInput.value = device.device_name || "";
-      if (syncEnabledInput) syncEnabledInput.checked = device.sync_enabled || false;
+      if (syncEnabledInput)
+        syncEnabledInput.checked = device.sync_enabled || false;
       if (autoSyncInput) autoSyncInput.checked = device.auto_sync || false;
-      if (syncFrequencyInput) syncFrequencyInput.value = String(device.sync_frequency_minutes || 60);
+      if (syncFrequencyInput)
+        syncFrequencyInput.value = String(device.sync_frequency_minutes || 60);
 
       const deviceType = device.device_type;
       return fetch("/api/collections", {
@@ -104,17 +127,32 @@ function showDeviceSettings(deviceId: string): void {
         const viewSettings = firstCollection.view_settings || {};
         const deviceSettings = viewSettings[deviceType] || {};
 
-        const viewModeInput = document.getElementById("settings-view-mode") as HTMLInputElement;
-        const sortOrderInput = document.getElementById("settings-sort-order") as HTMLInputElement;
-        const itemsPerPageInput = document.getElementById("settings-items-per-page") as HTMLInputElement;
-        const showCoversInput = document.getElementById("settings-show-covers") as HTMLInputElement;
-        const showProgressInput = document.getElementById("settings-show-progress") as HTMLInputElement;
+        const viewModeInput = document.getElementById(
+          "settings-view-mode",
+        ) as HTMLInputElement;
+        const sortOrderInput = document.getElementById(
+          "settings-sort-order",
+        ) as HTMLInputElement;
+        const itemsPerPageInput = document.getElementById(
+          "settings-items-per-page",
+        ) as HTMLInputElement;
+        const showCoversInput = document.getElementById(
+          "settings-show-covers",
+        ) as HTMLInputElement;
+        const showProgressInput = document.getElementById(
+          "settings-show-progress",
+        ) as HTMLInputElement;
 
-        if (viewModeInput) viewModeInput.value = deviceSettings.view_mode || "grid";
-        if (sortOrderInput) sortOrderInput.value = deviceSettings.sort_order || "name";
-        if (itemsPerPageInput) itemsPerPageInput.value = String(deviceSettings.items_per_page || 24);
-        if (showCoversInput) showCoversInput.checked = deviceSettings.show_covers !== false;
-        if (showProgressInput) showProgressInput.checked = deviceSettings.show_progress || false;
+        if (viewModeInput)
+          viewModeInput.value = deviceSettings.view_mode || "grid";
+        if (sortOrderInput)
+          sortOrderInput.value = deviceSettings.sort_order || "name";
+        if (itemsPerPageInput)
+          itemsPerPageInput.value = String(deviceSettings.items_per_page || 24);
+        if (showCoversInput)
+          showCoversInput.checked = deviceSettings.show_covers !== false;
+        if (showProgressInput)
+          showProgressInput.checked = deviceSettings.show_progress || false;
       }
     })
     .catch((error) => {
@@ -125,7 +163,9 @@ function showDeviceSettings(deviceId: string): void {
 }
 
 function showShelfMappings(deviceId: string): void {
-  const mappingsDeviceIdInput = document.getElementById("mappings-device-id") as HTMLInputElement;
+  const mappingsDeviceIdInput = document.getElementById(
+    "mappings-device-id",
+  ) as HTMLInputElement;
   const modal = document.getElementById("shelf-mappings-modal");
 
   if (mappingsDeviceIdInput) mappingsDeviceIdInput.value = deviceId;
@@ -180,29 +220,45 @@ async function loadShelfMappings(deviceId: string): Promise<void> {
         )
         .join("");
     } else {
-      container.innerHTML = '<p style="color: var(--text-secondary)">No shelf mappings configured. Click "Add Mapping" to create one.</p>';
+      container.innerHTML =
+        '<p style="color: var(--text-secondary)">No shelf mappings configured. Click "Add Mapping" to create one.</p>';
     }
   } catch (error) {
-    container.innerHTML = '<p style="color: var(--error)">Failed to load mappings</p>';
+    container.innerHTML =
+      '<p style="color: var(--error)">Failed to load mappings</p>';
   }
 }
 
 function showAddMappingModal(): void {
-  const mappingsDeviceIdInput = document.getElementById("mappings-device-id") as HTMLInputElement;
-  const mappingIdInput = document.getElementById("mapping-id") as HTMLInputElement;
-  const mappingCollectionInput = document.getElementById("mapping-collection") as HTMLSelectElement;
-  const mappingShelfNameInput = document.getElementById("mapping-shelf-name") as HTMLInputElement;
-  const mappingSyncDirectionInput = document.getElementById("mapping-sync-direction") as HTMLSelectElement;
+  const mappingsDeviceIdInput = document.getElementById(
+    "mappings-device-id",
+  ) as HTMLInputElement;
+  const mappingIdInput = document.getElementById(
+    "mapping-id",
+  ) as HTMLInputElement;
+  const mappingCollectionInput = document.getElementById(
+    "mapping-collection",
+  ) as HTMLSelectElement;
+  const mappingShelfNameInput = document.getElementById(
+    "mapping-shelf-name",
+  ) as HTMLInputElement;
+  const mappingSyncDirectionInput = document.getElementById(
+    "mapping-sync-direction",
+  ) as HTMLSelectElement;
   const modal = document.getElementById("add-mapping-modal");
 
   if (mappingsDeviceIdInput) {
-    const mappingDeviceIdInput = document.getElementById("mapping-device-id") as HTMLInputElement;
-    if (mappingDeviceIdInput) mappingDeviceIdInput.value = mappingsDeviceIdInput.value;
+    const mappingDeviceIdInput = document.getElementById(
+      "mapping-device-id",
+    ) as HTMLInputElement;
+    if (mappingDeviceIdInput)
+      mappingDeviceIdInput.value = mappingsDeviceIdInput.value;
   }
   if (mappingIdInput) mappingIdInput.value = "";
   if (mappingCollectionInput) mappingCollectionInput.value = "";
   if (mappingShelfNameInput) mappingShelfNameInput.value = "";
-  if (mappingSyncDirectionInput) mappingSyncDirectionInput.value = "bidirectional";
+  if (mappingSyncDirectionInput)
+    mappingSyncDirectionInput.value = "bidirectional";
 
   loadCollections();
   if (modal) modal.classList.remove("hidden");
@@ -216,7 +272,9 @@ function hideAddMappingModal(): void {
 }
 
 async function loadCollections(): Promise<void> {
-  const select = document.getElementById("mapping-collection") as HTMLSelectElement;
+  const select = document.getElementById(
+    "mapping-collection",
+  ) as HTMLSelectElement;
   const token = getToken();
   if (!select || !token) return;
 
@@ -229,24 +287,40 @@ async function loadCollections(): Promise<void> {
     if (result.collections) {
       select.innerHTML =
         '<option value="">Select collection...</option>' +
-        result.collections.map((col: any) => `<option value="${col.id}">${col.name}</option>`).join("");
+        result.collections
+          .map((col: any) => `<option value="${col.id}">${col.name}</option>`)
+          .join("");
     }
   } catch (error) {
     console.error("Failed to load collections", error);
   }
 }
 
-function editMapping(mappingId: string, collectionId: string, shelfName: string, syncDirection: string): void {
-  const mappingIdInput = document.getElementById("mapping-id") as HTMLInputElement;
-  const mappingCollectionInput = document.getElementById("mapping-collection") as HTMLSelectElement;
-  const mappingShelfNameInput = document.getElementById("mapping-shelf-name") as HTMLInputElement;
-  const mappingSyncDirectionInput = document.getElementById("mapping-sync-direction") as HTMLSelectElement;
+function editMapping(
+  mappingId: string,
+  collectionId: string,
+  shelfName: string,
+  syncDirection: string,
+): void {
+  const mappingIdInput = document.getElementById(
+    "mapping-id",
+  ) as HTMLInputElement;
+  const mappingCollectionInput = document.getElementById(
+    "mapping-collection",
+  ) as HTMLSelectElement;
+  const mappingShelfNameInput = document.getElementById(
+    "mapping-shelf-name",
+  ) as HTMLInputElement;
+  const mappingSyncDirectionInput = document.getElementById(
+    "mapping-sync-direction",
+  ) as HTMLSelectElement;
   const modal = document.getElementById("add-mapping-modal");
 
   if (mappingIdInput) mappingIdInput.value = mappingId;
   if (mappingCollectionInput) mappingCollectionInput.value = collectionId;
   if (mappingShelfNameInput) mappingShelfNameInput.value = shelfName;
-  if (mappingSyncDirectionInput) mappingSyncDirectionInput.value = syncDirection;
+  if (mappingSyncDirectionInput)
+    mappingSyncDirectionInput.value = syncDirection;
 
   if (modal) modal.classList.remove("hidden");
 }
@@ -255,13 +329,30 @@ async function handleSaveMapping(event: Event): Promise<void> {
   event.preventDefault();
 
   const token = getToken();
-  const mappingsDeviceIdInput = document.getElementById("mapping-device-id") as HTMLInputElement;
-  const mappingIdInput = document.getElementById("mapping-id") as HTMLInputElement;
-  const mappingCollectionInput = document.getElementById("mapping-collection") as HTMLSelectElement;
-  const mappingShelfNameInput = document.getElementById("mapping-shelf-name") as HTMLInputElement;
-  const mappingSyncDirectionInput = document.getElementById("mapping-sync-direction") as HTMLSelectElement;
+  const mappingsDeviceIdInput = document.getElementById(
+    "mapping-device-id",
+  ) as HTMLInputElement;
+  const mappingIdInput = document.getElementById(
+    "mapping-id",
+  ) as HTMLInputElement;
+  const mappingCollectionInput = document.getElementById(
+    "mapping-collection",
+  ) as HTMLSelectElement;
+  const mappingShelfNameInput = document.getElementById(
+    "mapping-shelf-name",
+  ) as HTMLInputElement;
+  const mappingSyncDirectionInput = document.getElementById(
+    "mapping-sync-direction",
+  ) as HTMLSelectElement;
 
-  if (!token || !mappingsDeviceIdInput || !mappingCollectionInput || !mappingShelfNameInput || !mappingSyncDirectionInput) return;
+  if (
+    !token ||
+    !mappingsDeviceIdInput ||
+    !mappingCollectionInput ||
+    !mappingShelfNameInput ||
+    !mappingSyncDirectionInput
+  )
+    return;
 
   const deviceId = mappingsDeviceIdInput.value;
   const mappingId = mappingIdInput.value;
@@ -305,16 +396,21 @@ async function deleteMapping(mappingId: string): Promise<void> {
   if (!confirm("Are you sure you want to delete this mapping?")) return;
 
   const token = getToken();
-  const mappingsDeviceIdInput = document.getElementById("mappings-device-id") as HTMLInputElement;
+  const mappingsDeviceIdInput = document.getElementById(
+    "mappings-device-id",
+  ) as HTMLInputElement;
   if (!token || !mappingsDeviceIdInput) return;
 
   const deviceId = mappingsDeviceIdInput.value;
 
   try {
-    const response = await fetch(`/api/devices/${deviceId}/collections/${mappingId}`, {
-      method: "DELETE",
-      headers: { Authorization: `Bearer ${token}` },
-    });
+    const response = await fetch(
+      `/api/devices/${deviceId}/collections/${mappingId}`,
+      {
+        method: "DELETE",
+        headers: { Authorization: `Bearer ${token}` },
+      },
+    );
 
     if (response.ok) {
       showToast("Mapping deleted", "success");
@@ -337,12 +433,24 @@ async function handleSaveDeviceSettings(event: Event): Promise<void> {
   event.preventDefault();
 
   const token = getToken();
-  const settingsDeviceIdInput = document.getElementById("settings-device-id") as HTMLInputElement;
-  const settingsDeviceTypeInput = document.getElementById("settings-device-type") as HTMLInputElement;
-  const settingsDeviceNameInput = document.getElementById("settings-device-name") as HTMLInputElement;
-  const settingsSyncEnabledInput = document.getElementById("settings-sync-enabled") as HTMLInputElement;
-  const settingsAutoSyncInput = document.getElementById("settings-auto-sync") as HTMLInputElement;
-  const settingsSyncFrequencyInput = document.getElementById("settings-sync-frequency") as HTMLInputElement;
+  const settingsDeviceIdInput = document.getElementById(
+    "settings-device-id",
+  ) as HTMLInputElement;
+  const settingsDeviceTypeInput = document.getElementById(
+    "settings-device-type",
+  ) as HTMLInputElement;
+  const settingsDeviceNameInput = document.getElementById(
+    "settings-device-name",
+  ) as HTMLInputElement;
+  const settingsSyncEnabledInput = document.getElementById(
+    "settings-sync-enabled",
+  ) as HTMLInputElement;
+  const settingsAutoSyncInput = document.getElementById(
+    "settings-auto-sync",
+  ) as HTMLInputElement;
+  const settingsSyncFrequencyInput = document.getElementById(
+    "settings-sync-frequency",
+  ) as HTMLInputElement;
 
   if (!token || !settingsDeviceIdInput || !settingsDeviceNameInput) return;
 
@@ -353,14 +461,27 @@ async function handleSaveDeviceSettings(event: Event): Promise<void> {
     device_name: settingsDeviceNameInput.value,
     sync_enabled: settingsSyncEnabledInput?.checked || false,
     auto_sync: settingsAutoSyncInput?.checked || false,
-    sync_frequency_minutes: parseInt(settingsSyncFrequencyInput?.value || "60", 10),
+    sync_frequency_minutes: parseInt(
+      settingsSyncFrequencyInput?.value || "60",
+      10,
+    ),
   };
 
-  const viewModeInput = document.getElementById("settings-view-mode") as HTMLSelectElement;
-  const sortOrderInput = document.getElementById("settings-sort-order") as HTMLSelectElement;
-  const itemsPerPageInput = document.getElementById("settings-items-per-page") as HTMLInputElement;
-  const showCoversInput = document.getElementById("settings-show-covers") as HTMLInputElement;
-  const showProgressInput = document.getElementById("settings-show-progress") as HTMLInputElement;
+  const viewModeInput = document.getElementById(
+    "settings-view-mode",
+  ) as HTMLSelectElement;
+  const sortOrderInput = document.getElementById(
+    "settings-sort-order",
+  ) as HTMLSelectElement;
+  const itemsPerPageInput = document.getElementById(
+    "settings-items-per-page",
+  ) as HTMLInputElement;
+  const showCoversInput = document.getElementById(
+    "settings-show-covers",
+  ) as HTMLInputElement;
+  const showProgressInput = document.getElementById(
+    "settings-show-progress",
+  ) as HTMLInputElement;
 
   const viewSettings = {
     view_mode: viewModeInput?.value || "grid",
@@ -413,12 +534,29 @@ async function handleSaveDeviceSettings(event: Event): Promise<void> {
   }
 }
 
+async function copyToClipboard(text: string, description: string): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(text);
+    showToast(`${description} copied!`, "success");
+  } catch (error) {
+    console.error("Failed to copy to clipboard", error);
+    showToast("Failed to copy to clipboard", "error");
+  }
+}
+
 async function handleRevokeDevice(): Promise<void> {
   const token = getToken();
-  const settingsDeviceIdInput = document.getElementById("settings-device-id") as HTMLInputElement;
+  const settingsDeviceIdInput = document.getElementById(
+    "settings-device-id",
+  ) as HTMLInputElement;
   if (!token || !settingsDeviceIdInput) return;
 
-  if (!confirm("Are you sure you want to revoke this device? It will no longer be able to sync.")) return;
+  if (
+    !confirm(
+      "Are you sure you want to revoke this device? It will no longer be able to sync.",
+    )
+  )
+    return;
 
   const deviceId = settingsDeviceIdInput.value;
 
@@ -547,7 +685,6 @@ export {
   hideShelfMappingsModal,
   loadCollections,
   loadShelfMappings,
-  regenerateDeviceToken,
   rejectDevice,
   setupEventDelegation,
   showAddDeviceModal,
@@ -573,7 +710,6 @@ Alpine.store("devices", {
   hideShelfMappingsModal,
   loadCollections,
   loadShelfMappings,
-  regenerateDeviceToken,
   rejectDevice,
   setupEventDelegation,
   showAddDeviceModal,