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

frontend/src/Layout.tsx

@@ -1,4 +1,6 @@
 import { Link, Outlet, useLocation } from "react-router";
+import { api } from "./api";
+import { useAuthChanged, useMe } from "./auth";
 
 // Tage ohne Datenverlust (fester Startpunkt, Kontinuität seit der alten
 // Version).
@@ -30,7 +32,7 @@ export function Layout() {
             <p id="stats" className="tagline">
               Ohne Datenverlust seit {plural(days, "Tag", "Tagen")}
             </p>
-            <div id="headerbar"></div>
+            <Headerbar />
           </>
         ) : (
           <div id="headerbar"><Link className="button" to="/">zurück zum Feed</Link></div>
@@ -43,3 +45,22 @@ export function Layout() {
     </>
   );
 }
+
+// Headerbar der Startseite: angemeldet Profil-Link und Logout, sonst leer.
+function Headerbar() {
+  const me = useMe().data;
+  const authChanged = useAuthChanged();
+  if (!me) return <div id="headerbar"></div>;
+
+  // POST statt GET: als GET wäre Logout per fremdem Link auslösbar (CSRF).
+  const logout = async () => {
+    await api.post("/auth/logout").catch(() => undefined);
+    await authChanged();
+  };
+  return (
+    <div id="headerbar">
+      <Link className="button" to={`/u/${encodeURIComponent(me.username)}`}>mein Profil</Link>{" "}
+      <button id="logout-btn" onClick={logout}>Logout</button>
+    </div>
+  );
+}

frontend/src/auth.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { ApiError, api } from "./api";
 import type { Me } from "./types";
 
@@ -19,3 +19,15 @@ export function useMe() {
     },
   });
 }
+
+// useAuthChanged liefert die Aktion nach Login/Logout: alles, was vom
+// Anmeldestatus abhängt, neu laden -- das eigene Konto und die eigene Auswahl
+// bei den Votes.
+export function useAuthChanged() {
+  const qc = useQueryClient();
+  return () =>
+    Promise.all([
+      qc.invalidateQueries({ queryKey: meKey }),
+      qc.invalidateQueries({ queryKey: ["votes"] }),
+    ]);
+}

frontend/src/components/AuthBox.tsx

@@ -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>
+  );
+}

frontend/src/components/Compose.tsx

@@ -0,0 +1,45 @@
+import { useState, type FormEvent } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { api, errMsg } from "../api";
+import { pasteImage } from "../paste";
+import type { CreatedEntry } from "../types";
+
+// Compose: neuer Beitrag. Nach Erfolg springt der Feed zurück auf Seite 0,
+// damit der eigene Beitrag oben steht.
+export function Compose() {
+  const qc = useQueryClient();
+  const [pasteMsg, setPasteMsg] = useState("");
+  const create = useMutation({
+    mutationFn: (fd: FormData) => api.post<CreatedEntry>("/entry/create", fd),
+  });
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const form = e.currentTarget;
+    create.mutate(new FormData(form), {
+      onSuccess: () => {
+        form.reset();
+        setPasteMsg("");
+        qc.resetQueries({ queryKey: ["feed"] });
+      },
+    });
+  };
+
+  return (
+    <section id="compose">
+      <form
+        id="entry-form"
+        onSubmit={onSubmit}
+        onPaste={(e) => {
+          if (pasteImage(e)) setPasteMsg("Bild aus Zwischenablage übernommen.");
+        }}
+      >
+        <textarea name="content" rows={4} maxLength={1000} placeholder="Was gibt's Neues?"></textarea>{" "}
+        <p className="muted" id="paste-msg">{pasteMsg}</p>{" "}
+        <input name="file" type="file" accept="image/*" />{" "}
+        <button type="submit" disabled={create.isPending}>Eintrag erstellen</button>
+      </form>
+      <p className="msg" id="entry-msg">{create.isError ? errMsg(create.error, "Beitrag fehlgeschlagen.") : ""}</p>
+    </section>
+  );
+}

frontend/src/pages/FeedPage.tsx

@@ -1,6 +1,16 @@
+import { useMe } from "../auth";
+import { AuthBox } from "../components/AuthBox";
+import { Compose } from "../components/Compose";
 import { Feed } from "../components/Feed";
 
-// Login/Registrierung und das Formular für neue Beiträge folgen in Schritt 4.
+// Solange der Anmeldestatus noch lädt, weder Login noch Formular zeigen --
+// sonst blitzt bei Angemeldeten kurz die Login-Box auf.
 export function FeedPage() {
-  return <Feed queryKey={["feed"]} urlFor={(page) => `/entry/feed/${page}`} />;
+  const me = useMe();
+  return (
+    <>
+      {me.isSuccess && (me.data ? <Compose /> : <AuthBox />)}
+      <Feed queryKey={["feed"]} urlFor={(page) => `/entry/feed/${page}`} />
+    </>
+  );
 }