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

refactor(admin): move WebSocket from TypeScript to template with server-side token

Browse Source 
- Move WebSocket connection logic from admin.ts to admin.templ template
- Inject JWT token directly into WebSocket URL from server-side User.Token
- Remove createWebSocket import and related functions from admin.ts
- Embed complete WebSocket message handling in template script tag

Changes to admin.templ:
- Add inline <script> with WebSocket connection using server-injected token
- Implement scan_progress, scan_complete, and scan_error message handlers
- Include error handling for WebSocket failures

Changes to admin.ts:
- Remove createWebSocket import
- Remove connectWebSocket(), updateScanProgress(), showScanComplete(), showScanError() functions
- Keep stopScanStatusPolling() for Alpine.js integration
- Preserve all other admin functionality (scan triggering, stats loading, etc.)

This refactoring eliminates client-side localStorage dependencies for
WebSocket authentication, making the admin page consistent with the
SSR architecture. The token is now injected server-side on every page
load, ensuring WebSocket connections always work when the user is
authenticated via HttpOnly cookie.
This commit is contained in:
john-okeefe
2026-03-12 15:43:27 -04:00
parent 9bceef7b41
commit 40c447bd19
2 changed files with 59 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/admin.templ
+57 -1
View File
@@ -9,6 +9,62 @@ templ Admin(user User) {
<script src="/static/htmx.min.js"></script> <script src="/static/htmx.min.js"></script>
<script src="/static/main.js" defer></script> <script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/> <link href="/static/style.css" rel="stylesheet"/>
<script>
let scanWs = null;
function connectScanWebSocket() {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${protocol}//${window.location.host}/ws/sync?token={ user.Token }`;
scanWs = new WebSocket(wsUrl);
scanWs.onmessage = function(event) {
try {
const message = JSON.parse(event.data);
switch (message.type) {
case 'scan_progress':
updateScanProgress(message.data);
break;
case 'scan_complete':
showScanComplete(message.data);
stopScanStatusPolling();
break;
case 'scan_error':
showScanError(message.data);
break;
}
} catch (error) {
console.error('Failed to parse WebSocket message:', error);
}
};
scanWs.onerror = function(error) {
console.error('WebSocket error:', error);
};
}
function updateScanProgress(data) {
const progressBar = document.getElementById('scan-progress-bar');
if (progressBar) {
progressBar.style.width = (data.progress * 100) + '%';
}
const progressText = document.getElementById('scan-progress-text');
if (progressText) {
progressText.textContent = `${data.files_scanned} files scanned (${data.new_items} new)`;
}
}
function showScanComplete(data) {
console.log('Scan complete:', data);
}
function showScanError(data) {
console.error('Scan error:', data);
}
document.addEventListener('DOMContentLoaded', function() {
connectScanWebSocket();
});
</script>
</head> </head>
<body class="theme-tokyo-night" x-data="admin"> <body class="theme-tokyo-night" x-data="admin">
@Header(user, "/admin") @Header(user, "/admin")
@@ -97,7 +153,7 @@ templ Admin(user User) {
</div> </div>
<div class="mt-4 flex gap-2"> <div class="mt-4 flex gap-2">
<button <button
@click="$store.window.location.reload()" @click="window.location.reload()"
class="btn-primary px-4 py-2 rounded-lg" class="btn-primary px-4 py-2 rounded-lg"
> >
Refresh to View Books Refresh to View Books
web/src/admin.ts
+2 -47
View File
@@ -330,55 +330,10 @@ async function loadWatchStatus(): Promise<void> {
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
loadWatchStatus(); loadWatchStatus();
connectScanWebSocket();
}); });
let scanPollInterval: ReturnType<typeof setInterval> | undefined = undefined; let scanPollInterval: ReturnType<typeof setInterval> | undefined = undefined;
let scanWs: WebSocket | null = null;
function connectScanWebSocket(): void {
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
const wsUrl = `${protocol}//${window.location.host}/ws/sync`;
scanWs = new WebSocket(wsUrl);
scanWs.onmessage = (event) => {
const message = JSON.parse(event.data);
switch (message.type) {
case "scan_progress":
updateScanProgress(message.data);
break;
case "scan_complete":
showScanComplete(message.data);
stopScanStatusPolling(); // Optional: stop HTTP polling
break;
case "scan_error":
showScanError(message.data);
break;
}
};
}
function updateScanProgress(data: any): void {
// Update progress bar
const progressBar = document.getElementById(
"scan-progress-bar",
) as HTMLElement;
if (progressBar) {
progressBar.style.width = `${data.progress * 100}%`;
}
// Update text
const progressText = document.getElementById("scan-progress-text");
if (progressText) {
progressText.textContent = `${data.files_scanned} files scanned (${data.new_items} new)`;
}
}
function showScanComplete(data: any): void {
console.log("Scan complete:", data);
}
function showScanError(data: any): void {
console.error("Scan error:", data);
}
function stopScanStatusPolling(): void { function stopScanStatusPolling(): void {
if (scanPollInterval !== undefined) { if (scanPollInterval !== undefined) {
clearInterval(scanPollInterval); clearInterval(scanPollInterval);
@@ -396,7 +351,7 @@ export {
triggerQuickScan, triggerQuickScan,
}; };
Alpine.store("admin", { Alpine.data("admin", () => ({
hideScanProgress, hideScanProgress,
loadSystemStats, loadSystemStats,
loadWatchStatus, loadWatchStatus,
@@ -404,4 +359,4 @@ Alpine.store("admin", {
stopScanStatusPolling, stopScanStatusPolling,
triggerLibraryScan, triggerLibraryScan,
triggerQuickScan, triggerQuickScan,
}); }));