Kontrollverlust/frontend/src/components/AuthBox.tsx

import { useState, type FormEvent, type MouseEvent } from "react";
import { api, errMsg } from "../api";
import { useAuthChanged } from "../auth";

// AuthBox: Login und Registrierung im Wechsel. Die {" "} sind Absicht:
// Überschrift, Inputs und Knöpfe sind inline, der Abstand ist 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" />{" "}
        <label>
          Angemeldet bleiben für{" "}
          <select name="timeout" defaultValue="86400">
            <option value="3600">1 Stunde</option>
            <option value="86400">1 Tag</option>
            <option value="604800">1 Woche</option>
            <option value="31536000">1 Jahr</option>
          </select>
        </label>
        <br />
        <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>
  );
}