Simplify auth UI with single toggle and headings

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 => {
+  const title = $("auth-title");
-    btn.classList.toggle("active", btn.dataset.authTab === mode);
+  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 => {
+  const toggleAuth = $("auth-toggle");
-    btn.addEventListener("click", () => setAuthMode(btn.dataset.authTab));
+  if (toggleAuth) {
-  });
+    toggleAuth.addEventListener("click", () => setAuthMode(state.authMode === "login" ? "register" : "login"));
+  }
   setAuthMode(state.authMode);
 
   const langSelects = Array.from(document.querySelectorAll(".lang-select"));

wwwroot/index.html

@@ -16,9 +16,9 @@
     <div class="auth-logo">
       <img src="logo.png" alt="CoopGameChooser logo" />
     </div>
-    <div class="stack horizontal">
+    <div class="stack">
-      <button class="ghost active" data-auth-tab="login" type="button" data-i18n="auth.loginTab">Log in</button>
+      <h2 id="auth-title" data-i18n="auth.loginHeading">Log in</h2>
-      <button class="ghost" data-auth-tab="register" type="button" data-i18n="auth.registerTab">Register</button>
+      <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>

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",