From d8d1b891fd7afe88668d1ea0658e61a534932eb6 Mon Sep 17 00:00:00 2001
From: OE6DXD <oe6dxd@arcg.at>
Date: Mon, 16 Mar 2026 14:52:30 +0100
Subject: [PATCH] add top logout button in user settings page

Place a dedicated Logout button at the top of the Benutzer-Einstellungen page and wire it to the existing logout flow. Keep button state in sync with login status like the header menu logout action.
---
 public/app.js     | 7 +++++++
 public/index.html | 3 +++
 2 files changed, 10 insertions(+)

diff --git a/public/app.js b/public/app.js
index 5a455e4..b408fb2 100644
--- a/public/app.js
+++ b/public/app.js
@@ -104,6 +104,7 @@ const els = {
   reservationList: document.getElementById("reservationList"),
   reservationMessage: document.getElementById("reservationMessage"),
   logoutBtn: document.getElementById("logoutBtn"),
+  settingsLogoutTopBtn: document.getElementById("settingsLogoutTopBtn"),
   activationProgress: document.getElementById("activationProgress"),
   progressText: document.getElementById("progressText"),
   progressFill: document.getElementById("progressFill"),
@@ -505,6 +506,11 @@ function bindEvents() {
   els.logoutBtn.addEventListener("click", async () => {
     await logout();
   });
+  if (els.settingsLogoutTopBtn) {
+    els.settingsLogoutTopBtn.addEventListener("click", async () => {
+      await logout();
+    });
+  }
 
   els.themeToggle.addEventListener("click", () => {
     toggleTheme();
@@ -4091,6 +4097,7 @@ function updateUserUi() {
   setHidden(els.pageActivity, !rmsVisible || page !== "activity");
   setDisabled(els.loginBtn, loggedIn);
   setDisabled(els.logoutBtn, !loggedIn);
+  setDisabled(els.settingsLogoutTopBtn, !loggedIn);
   setDisabled(els.userMenuButton, !loggedIn);
   setDisabled(els.email, loggedIn);
   if (els.userMenuButton) {
diff --git a/public/index.html b/public/index.html
index f933146..51277f2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -257,6 +257,9 @@
 
         <section class="grid-layout" id="pageUser" hidden>
           <article class="card stagger" id="userSettingsCard">
+            <div class="actions" style="justify-content: flex-end; margin-bottom: 0.6rem;">
+              <button id="settingsLogoutTopBtn" type="button" class="danger">Logout</button>
+            </div>
             <h2>Benutzer-Einstellungen</h2>
             <p class="muted">Hier findest du nur deine persoenlichen Einstellungen.</p>
             <dl class="status-grid">