Frontend: Registrierung angebunden (POST /auth/newuser)

- Umschalter Login <-> Registrieren im Auth-Bereich
- Fehlerlisten-Anzeige ({"errors": [...]}) fuer newuser
- nach erfolgreicher Registrierung automatischer Login
- Logout setzt Ansicht auf Login zurueck

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/css/app.css

@@ -72,6 +72,8 @@ button:hover { opacity: 0.9; }
 .entry a { color: var(--accent); }
 
 .msg { color: #ff6b6b; font-size: 0.9rem; min-height: 1.2em; }
+.switch { color: var(--muted); font-size: 0.9rem; margin: 0.6rem 0 0; }
+.switch a { color: var(--accent); }
 .end { text-align: center; color: var(--muted); padding: 2rem 0; }
 
 .interactions {

web/index.html

@@ -21,7 +21,18 @@
         <input name="pass" type="password" placeholder="Passwort" autocomplete="current-password">
         <input name="timeout" type="hidden" value="86400">
         <button type="submit">Einloggen</button>
+        <p class="switch">Noch kein Konto? <a href="#" id="show-register">Registrieren</a></p>
       </form>
+
+      <form id="register-form" hidden>
+        <h2>Registrieren</h2>
+        <input name="user" placeholder="Nutzername" autocomplete="username">
+        <input name="pass1" type="password" placeholder="Passwort" autocomplete="new-password">
+        <input name="pass2" type="password" placeholder="Passwort wiederholen" autocomplete="new-password">
+        <button type="submit">Konto erstellen</button>
+        <p class="switch">Schon registriert? <a href="#" id="show-login">Zum Login</a></p>
+      </form>
+
       <p class="msg" id="auth-msg"></p>
     </section>
 

web/js/app.js

@@ -34,22 +34,59 @@ async function refreshHeader() {
     });
   } else {
     bar.innerHTML = "";
+    showAuth("login");
   }
 }
 
-// --- Login ---
+// --- Login / Registrierung ---
-document.getElementById("login-form").addEventListener("submit", async (e) => {
+const loginForm = document.getElementById("login-form");
+const registerForm = document.getElementById("register-form");
+const authMsg = document.getElementById("auth-msg");
+
+function showAuth(which) {
+  loginForm.hidden = which !== "login";
+  registerForm.hidden = which !== "register";
+  authMsg.textContent = "";
+}
+
+document.getElementById("show-register").addEventListener("click", (e) => {
+  e.preventDefault();
+  showAuth("register");
+});
+document.getElementById("show-login").addEventListener("click", (e) => {
+  e.preventDefault();
+  showAuth("login");
+});
+
+loginForm.addEventListener("submit", async (e) => {
   e.preventDefault();
   const res = await api.post("/auth/login", new FormData(e.target));
-  const msg = document.getElementById("auth-msg");
   if (res.ok) {
-    msg.textContent = "";
     await refreshHeader();
   } else {
-    msg.textContent = res.data.error || "Login fehlgeschlagen.";
+    authMsg.textContent = res.data.error || "Login fehlgeschlagen.";
   }
 });
 
+registerForm.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  const data = new FormData(e.target);
+  const res = await api.post("/auth/newuser", data);
+  if (!res.ok) {
+    // newuser liefert eine Fehlerliste ({"errors": [...]}).
+    const errors = res.data.errors || [res.data.error || "Registrierung fehlgeschlagen."];
+    authMsg.textContent = errors.join(" ");
+    return;
+  }
+  // Direkt mit denselben Daten einloggen, damit der Nutzer gleich drin ist.
+  const login = new FormData();
+  login.append("user", data.get("user"));
+  login.append("pass", data.get("pass1"));
+  login.append("timeout", "86400");
+  await api.post("/auth/login", login);
+  await refreshHeader();
+});
+
 // --- Neuer Beitrag ---
 document.getElementById("entry-form").addEventListener("submit", async (e) => {
   e.preventDefault();