Add logout button to header

Adds a logout button in the top bar on authenticated pages. Posts to
/api/auth/logout to clear the server session, then redirects to login.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-07 23:14:02 -06:00
parent 36a53301a7
commit ca03f6e143
4 changed files with 34 additions and 3 deletions

View File

@@ -773,3 +773,19 @@ select {
color: var(--offline, #888);
font-weight: 600;
}
/* Logout button in top bar */
.logout-btn {
background: none;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--text-secondary);
font-size: 0.75rem;
padding: 0.25rem 0.6rem;
border-radius: 4px;
cursor: pointer;
min-height: 28px;
}
.logout-btn:active {
opacity: 0.7;
}

View File

@@ -9,6 +9,7 @@ const NextSnap = {
console.log(`NextSnap v${this.version} initializing...`);
this.setupConnectivityMonitoring();
this.setupServiceWorkerMessaging();
this.setupLogout();
this.checkHealth();
},
@@ -79,6 +80,17 @@ const NextSnap = {
}
},
setupLogout() {
const btn = document.getElementById('logoutBtn');
if (!btn) return;
btn.addEventListener('click', async () => {
try {
await fetch('/api/auth/logout', { method: 'POST' });
} catch (e) { /* offline - clear locally anyway */ }
window.location.href = '/login';
});
},
// Force service worker update
async updateServiceWorker() {
if ('serviceWorker' in navigator) {

View File

@@ -1,9 +1,9 @@
// NextSnap Service Worker
// Provides offline-first caching for the app shell
const CACHE_VERSION = 'nextsnap-v25';
const APP_SHELL_CACHE = 'nextsnap-shell-v21';
const RUNTIME_CACHE = 'nextsnap-runtime-v21';
const CACHE_VERSION = 'nextsnap-v27';
const APP_SHELL_CACHE = 'nextsnap-shell-v23';
const RUNTIME_CACHE = 'nextsnap-runtime-v23';
// Offline fallback page with bottom nav bar so user can navigate to cached pages
const OFFLINE_PAGE = `<!DOCTYPE html>

View File

@@ -29,6 +29,9 @@
<div class="pending-count" id="pendingCount" style="display: none;">
<span id="pendingCountValue">0</span>
</div>
{% if show_nav %}
<button class="logout-btn" id="logoutBtn" title="Log out">Logout</button>
{% endif %}
</div>
</div>
</header>