Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat: add device token management UI

Browse Source 
- Display sync URLs for Kobo devices with copy button
- Display auth tokens for KOReader devices with copy button
- Add regenerate token button with confirmation
- Show warning about token invalidation
This commit is contained in:
john-okeefe
2026-02-13 12:12:38 -05:00
parent b1fcf2ce95
commit e9cd445ff3
3 changed files with 158 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/router/frontend.go
+1 -1
View File
@@ -168,7 +168,7 @@ func registerFrontendRoutes(cfg *Config) {
} }
pendingList := convertPending(pendingMaps) pendingList := convertPending(pendingMaps)
var buf bytes.Buffer var buf bytes.Buffer
err = templates.Devices(user, devices, pendingList).Render(c.Request().Context(), &buf) err = templates.Devices(user, devices, pendingList, cfg.Cfg.BaseURL).Render(c.Request().Context(), &buf)
if err != nil { if err != nil {
return err return err
} }
templates/devices.templ
+72 -6
View File
@@ -2,17 +2,18 @@ package templates
import "bookhoard/internal/handlers" import "bookhoard/internal/handlers"
templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []PendingRegistrationData) { templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []PendingRegistrationData, baseURL string) {
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Device Management - Bookhoard</title> <title>Device Management - Bookhoard</title>
<script src="/static/htmx.min.js"></script> <script src="/static/htmx.min.js"></script>
<script src="/static/toast.js"></script> <script src="/static/toast.js"></script>
<link href="/static/style.css" rel="stylesheet"/> <script src="/static/device-management.js"></script>
<script src="/static/theme.js"></script> <link href="/static/style.css" rel="stylesheet"/>
<script src="/static/theme.js"></script>
</head> </head>
<body class="theme-{ user.Theme }"> <body class="theme-{ user.Theme }">
@Header(user, "/devices") @Header(user, "/devices")
@@ -70,7 +71,7 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
</div> </div>
<h3 class="text-lg font-semibold mb-1" style="color: var(--text-primary)">{ device.DeviceName }</h3> <h3 class="text-lg font-semibold mb-1" style="color: var(--text-primary)">{ device.DeviceName }</h3>
<p class="text-sm mb-4" style="color: var(--text-secondary)">{ device.DeviceType }</p> <p class="text-sm mb-4" style="color: var(--text-secondary)">{ device.DeviceType }</p>
<div class="space-y-2 text-sm"> <div class="space-y-2 text-sm mb-4">
<div class="flex justify-between"> <div class="flex justify-between">
<span style="color: var(--text-secondary)">Sync Status</span> <span style="color: var(--text-secondary)">Sync Status</span>
if device.SyncEnabled { if device.SyncEnabled {
@@ -96,6 +97,71 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
} }
</div> </div>
</div> </div>
<!-- NEW: Sync URL & Token Management -->
<div class="border-t pt-4" style="border-color: var(--border);">
<p class="text-xs font-semibold mb-2" style="color: var(--text-secondary)">DEVICE SYNC CONFIGURATION</p>
if device.DeviceType == "kobo" {
<!-- Kobo: Copy Full Sync URL -->
<div class="mb-3">
<label class="block text-xs mb-1" style="color: var(--text-secondary)">Kobo Sync URL</label>
<div class="flex space-x-2">
<input
type="text"
id="sync-url-{ device.ID }"
readonly
value={ baseURL + "/api/sync/kobo/" + device.AuthToken }
class="flex-1 px-3 py-2 text-xs rounded border"
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
/>
<button
onclick="copyToClipboard(document.getElementById('sync-url-{ device.ID }').value, 'Kobo sync URL', event)"
class="px-3 py-2 text-xs rounded hover:opacity-80"
style="background-color: var(--accent); color: white;"
>
📋 Copy
</button>
</div>
<p class="text-xs mt-1" style="color: var(--text-secondary);">Paste this URL into Kobo's <code class="px-1 py-0.5 rounded" style="background-color: var(--bg-primary);">api_endpoint</code> setting</p>
</div>
}
if device.DeviceType == "koreader" {
<!-- KOReader: Copy Auth Token -->
<div class="mb-3">
<label class="block text-xs mb-1" style="color: var(--text-secondary)">Auth Token (for plugin)</label>
<div class="flex space-x-2">
<input
type="text"
id="auth-token-{ device.ID }"
readonly
value={ device.AuthToken }
class="flex-1 px-3 py-2 text-xs rounded border"
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border); font-family: monospace;"
/>
<button
onclick="copyToClipboard(document.getElementById('auth-token-{ device.ID }').value, 'Auth token', event)"
class="px-3 py-2 text-xs rounded hover:opacity-80"
style="background-color: var(--accent); color: white;"
>
📋 Copy
</button>
</div>
<p class="text-xs mt-1" style="color: var(--text-secondary);">Enter this token in the KOReader plugin settings</p>
</div>
}
<!-- Regenerate Token Button -->
<button
onclick="regenerateDeviceToken('{ device.ID }', event)"
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);"
>
🔄 Regenerate Token
</button>
<p class="text-xs mt-1" style="color: var(--text-secondary);">⚠️ Old token will immediately stop working</p>
</div>
</div> </div>
} }
</div> </div>
templates/devices_templ.go
+85 -43
View File
File diff suppressed because one or more lines are too long