[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>
This commit is contained in:
2026-02-13 08:44:52 +01:00
parent 9d3b690aca
commit 8b9da52fe7
2 changed files with 26 additions and 0 deletions
@@ -86,14 +86,23 @@ function updateAuthUI() {
const btn = document.getElementById("logout-btn"); const btn = document.getElementById("logout-btn");
const badge = document.getElementById("auth-badge"); const badge = document.getElementById("auth-badge");
const badgeRole = document.getElementById("auth-role-badge"); const badgeRole = document.getElementById("auth-role-badge");
const headerAuthBtn = document.getElementById("header-auth-btn");
if (authRole) { if (authRole) {
btn.style.display = "block"; btn.style.display = "block";
badge.style.display = "block"; badge.style.display = "block";
badgeRole.textContent = authRole === "control" ? "Control (full access)" : "RX (read-only)"; badgeRole.textContent = authRole === "control" ? "Control (full access)" : "RX (read-only)";
if (headerAuthBtn) {
headerAuthBtn.textContent = "Logout";
headerAuthBtn.style.display = "block";
}
} else { } else {
btn.style.display = "none"; btn.style.display = "none";
badge.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 // Start the app
initializeApp(); initializeApp();
window.addEventListener("resize", resizeHeaderSignalCanvas); window.addEventListener("resize", resizeHeaderSignalCanvas);
@@ -23,6 +23,7 @@
<div class="header-right"> <div class="header-right">
<img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" /> <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="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>
</div> </div>
<!-- Auth gate (hidden by default, shown if auth is required) --> <!-- Auth gate (hidden by default, shown if auth is required) -->