React-Frontend: Login, Registrierung, Header, neuer Beitrag

- AuthBox mit Login/Registrierung (Auto-Login nach Registrierung) - Compose mit Zwischenablage-Bild, Feed springt danach an den Anfang - Headerbar mit Profil-Link und Logout - useAuthChanged: me und Votes nach Login/Logout neu laden - kein Aufblitzen der Login-Box, solange der Anmeldestatus lädt Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TiXsPUqw7oeomZ8wZrQW5q
2026-09-26 23:38:03 +02:00
parent b82c432bce
commit ca65ddcacc
5 changed files with 165 additions and 4 deletions
@@ -0,0 +1,73 @@
+import { useState, type FormEvent, type MouseEvent } from "react";
+import { api, errMsg } from "../api";
+import { useAuthChanged } from "../auth";
+
+// AuthBox: Login und Registrierung im Wechsel. Die {" "} bilden die
+// Leerzeichen des alten Markups nach -- Überschrift, Inputs und Knöpfe sind
+// inline, der Abstand zwischen ihnen ist also sichtbar.
+export function AuthBox() {
+  const [mode, setMode] = useState<"login" | "register">("login");
+  const [msg, setMsg] = useState("");
+  const [busy, setBusy] = useState(false);
+  const authChanged = useAuthChanged();
+
+  const show = (which: "login" | "register") => (e: MouseEvent) => {
+    e.preventDefault();
+    setMode(which);
+    setMsg("");
+  };
+
+  // submit sperrt das Formular für die Dauer des Requests und zeigt einen
+  // Fehler als Meldung; action wirft bei Misserfolg (ApiError).
+  const submit = (action: (fd: FormData) => Promise<unknown>, fallback: string) =>
+    async (e: FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setBusy(true);
+      try {
+        await action(new FormData(e.currentTarget));
+        setMsg("");
+        await authChanged();
+      } catch (err) {
+        setMsg(errMsg(err, fallback));
+      } finally {
+        setBusy(false);
+      }
+    };
+
+  const login = submit((fd) => api.post("/auth/login", fd), "Login fehlgeschlagen.");
+
+  // Nach der Registrierung direkt mit denselben Daten einloggen, damit der
+  // Nutzer gleich drin ist. newuser meldet alle Feldfehler auf einmal.
+  const register = submit(async (fd) => {
+    await api.post("/auth/newuser", fd);
+    const creds = new FormData();
+    creds.append("user", String(fd.get("user")));
+    creds.append("pass", String(fd.get("pass1")));
+    creds.append("timeout", "86400");
+    await api.post("/auth/login", creds);
+  }, "Registrierung fehlgeschlagen.");
+
+  return (
+    <section id="auth-box">
+      <form id="login-form" hidden={mode !== "login"} onSubmit={login}>
+        <h2>Login</h2>{" "}
+        <input name="user" placeholder="Nutzername" autoComplete="username" />{" "}
+        <input name="pass" type="password" placeholder="Passwort" autoComplete="current-password" />{" "}
+        <input name="timeout" type="hidden" value="86400" />{" "}
+        <button type="submit" disabled={busy}>Einloggen</button>{" "}
+        <p className="muted">Noch kein Konto? <a href="#" onClick={show("register")}>Registrieren</a></p>
+      </form>
+
+      <form id="register-form" hidden={mode !== "register"} onSubmit={register}>
+        <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" disabled={busy}>Konto erstellen</button>{" "}
+        <p className="muted">Schon registriert? <a href="#" onClick={show("login")}>Zum Login</a></p>
+      </form>
+
+      <p className="msg" id="auth-msg">{msg}</p>
+    </section>
+  );
+}