From 8b9da52fe7a6d3a710e9fb3f6a783d749bfdfd1c Mon Sep 17 00:00:00 2001
From: Stanislaw Grams <stanislawgrams@gmail.com>
Date: Fri, 13 Feb 2026 08:44:52 +0100
Subject: [PATCH] [feat](trx-frontend-http): add header auth button
 (Login/Logout)

Add a Login/Logout button in the header next to the theme toggle,
styled consistently with the theme button. Button behavior:

- When logged in: Shows "Logout" with confirmation
- When not logged in: Shows "Login" to open auth gate
- Visible when on main app (not in auth gate)
- Same theme-toggle-btn styling

Provides quick access to authentication controls without needing to
navigate to the About tab.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>
---
 .../trx-frontend-http/assets/web/app.js       | 25 +++++++++++++++++++
 .../trx-frontend-http/assets/web/index.html   |  1 +
 2 files changed, 26 insertions(+)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
index 543ec32..1fa03c6 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
@@ -86,14 +86,23 @@ function updateAuthUI() {
   const btn = document.getElementById("logout-btn");
   const badge = document.getElementById("auth-badge");
   const badgeRole = document.getElementById("auth-role-badge");
+  const headerAuthBtn = document.getElementById("header-auth-btn");
 
   if (authRole) {
     btn.style.display = "block";
     badge.style.display = "block";
     badgeRole.textContent = authRole === "control" ? "Control (full access)" : "RX (read-only)";
+    if (headerAuthBtn) {
+      headerAuthBtn.textContent = "Logout";
+      headerAuthBtn.style.display = "block";
+    }
   } else {
     btn.style.display = "none";
     badge.style.display = "none";
+    if (headerAuthBtn) {
+      headerAuthBtn.textContent = "Login";
+      headerAuthBtn.style.display = "block";
+    }
   }
 }
 
@@ -1220,6 +1229,22 @@ document.getElementById("logout-btn").addEventListener("click", async () => {
   }
 });
 
+// Setup header auth button (Login/Logout)
+const headerAuthBtn = document.getElementById("header-auth-btn");
+if (headerAuthBtn) {
+  headerAuthBtn.addEventListener("click", async () => {
+    if (authRole) {
+      // Logged in - show logout confirmation
+      if (confirm("Are you sure you want to logout?")) {
+        await authLogout();
+      }
+    } else {
+      // Not logged in - show auth gate
+      showAuthGate(false);
+    }
+  });
+}
+
 // Start the app
 initializeApp();
 window.addEventListener("resize", resizeHeaderSignalCanvas);
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index 82df840..9b07186 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -23,6 +23,7 @@
       <div class="header-right">
         <img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
         <button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
+        <button id="header-auth-btn" class="theme-toggle-btn" type="button" style="display:none;" aria-label="Login or Logout">Login</button>
       </div>
     </div>
     <!-- Auth gate (hidden by default, shown if auth is required) -->