From 30b0bf84819bc3b7fa4560dda806bf748013816a Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Mon, 2 Feb 2026 17:41:37 +0100
Subject: [PATCH] Simplify auth UI with single toggle and headings

---
 wwwroot/app.js     | 18 ++++++++++++------
 wwwroot/index.html |  6 +++---
 wwwroot/js/i18n.js |  8 ++++++++
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/wwwroot/app.js b/wwwroot/app.js
index 4b55855..066d1dc 100644
--- a/wwwroot/app.js
+++ b/wwwroot/app.js
@@ -53,9 +53,14 @@ function setAuthMode(mode) {
   document.querySelectorAll(".auth-form").forEach(form => {
     form.classList.toggle("hidden", form.dataset.mode !== mode);
   });
-  document.querySelectorAll("[data-auth-tab]").forEach(btn => {
-    btn.classList.toggle("active", btn.dataset.authTab === mode);
-  });
+  const title = $("auth-title");
+  const toggleBtn = $("auth-toggle");
+  if (title) {
+    title.textContent = mode === "login" ? t("auth.loginHeading") : t("auth.registerHeading");
+  }
+  if (toggleBtn) {
+    toggleBtn.textContent = mode === "login" ? t("auth.switchToRegister") : t("auth.switchToLogin");
+  }
 }
 
 function clearUserState() {
@@ -299,9 +304,10 @@ function renderPhaseTitles() {
 }
 
 function setupHandlers() {
-  document.querySelectorAll("[data-auth-tab]").forEach(btn => {
-    btn.addEventListener("click", () => setAuthMode(btn.dataset.authTab));
-  });
+  const toggleAuth = $("auth-toggle");
+  if (toggleAuth) {
+    toggleAuth.addEventListener("click", () => setAuthMode(state.authMode === "login" ? "register" : "login"));
+  }
   setAuthMode(state.authMode);
 
   const langSelects = Array.from(document.querySelectorAll(".lang-select"));
diff --git a/wwwroot/index.html b/wwwroot/index.html
index f798211..3a8e0c5 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -16,9 +16,9 @@
     <div class="auth-logo">
       <img src="logo.png" alt="CoopGameChooser logo" />
     </div>
-    <div class="stack horizontal">
-      <button class="ghost active" data-auth-tab="login" type="button" data-i18n="auth.loginTab">Log in</button>
-      <button class="ghost" data-auth-tab="register" type="button" data-i18n="auth.registerTab">Register</button>
+    <div class="stack">
+      <h2 id="auth-title" data-i18n="auth.loginHeading">Log in</h2>
+      <button class="ghost" id="auth-toggle" type="button" data-i18n="auth.switchToRegister">Need an account? Register</button>
     </div>
     <div class="stack lang-field">
       <span class="label" data-i18n="lang.label">Language</span>
diff --git a/wwwroot/js/i18n.js b/wwwroot/js/i18n.js
index 360b457..ba1b124 100644
--- a/wwwroot/js/i18n.js
+++ b/wwwroot/js/i18n.js
@@ -12,6 +12,10 @@ const translations = {
     "auth.adminKey": "Admin key (optional)",
     "auth.loginSubmit": "Log in",
     "auth.registerSubmit": "Create account",
+    "auth.loginHeading": "Log in",
+    "auth.registerHeading": "Create account",
+    "auth.switchToRegister": "Need an account? Register",
+    "auth.switchToLogin": "Have an account? Log in",
     "auth.logout": "Logout",
     "auth.welcome": "Welcome, {name}!",
     "auth.defaultName": "Player",
@@ -111,6 +115,10 @@ const translations = {
     "auth.adminKey": "Admin-Schlüssel (optional)",
     "auth.loginSubmit": "Anmelden",
     "auth.registerSubmit": "Konto erstellen",
+    "auth.loginHeading": "Anmelden",
+    "auth.registerHeading": "Konto erstellen",
+    "auth.switchToRegister": "Noch kein Konto? Registrieren",
+    "auth.switchToLogin": "Schon ein Konto? Anmelden",
     "auth.logout": "Abmelden",
     "auth.welcome": "Willkommen, {name}!",
     "auth.defaultName": "Spieler",