[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 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);