leistungsbilanz-ts/src/frontend/components/LoginGate.tsx

"use client";

import { useState } from "react";
import { authApi } from "../utils/auth-api";
import { useAuth } from "./AuthProvider";

export function LoginGate({ children }: { children: React.ReactNode }) {
  const { status, user, reload } = useAuth();

  if (status === "loading") {
    return (
      <div className="login-gate-screen">
        <p>Lädt…</p>
      </div>
    );
  }

  if (status === "signed-out") {
    return (
      <div className="login-gate-screen">
        <LoginForm onSignedIn={reload} />
      </div>
    );
  }

  if (user?.mustChangePassword) {
    return (
      <div className="login-gate-screen">
        <ForcedPasswordChangeForm onChanged={reload} />
      </div>
    );
  }

  return <>{children}</>;
}

function LoginForm({ onSignedIn }: { onSignedIn: () => Promise<void> }) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    setSubmitting(true);
    setError(null);
    try {
      await authApi.login(username, password);
      await onSignedIn();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Anmeldung fehlgeschlagen.");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form className="login-gate-card card" onSubmit={handleSubmit}>
      <h1 className="h4 mb-3">Leistungsbilanz</h1>
      <div className="mb-3">
        <label className="form-label" htmlFor="login-username">
          Anmeldename
        </label>
        <input
          id="login-username"
          className="form-control"
          value={username}
          onChange={(event) => setUsername(event.target.value)}
          autoFocus
          autoComplete="username"
          required
        />
      </div>
      <div className="mb-3">
        <label className="form-label" htmlFor="login-password">
          Passwort
        </label>
        <input
          id="login-password"
          type="password"
          className="form-control"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
          autoComplete="current-password"
          required
        />
      </div>
      {error && <p className="text-danger">{error}</p>}
      <button type="submit" className="btn btn-primary" disabled={submitting}>
        {submitting ? "Meldet an…" : "Anmelden"}
      </button>
    </form>
  );
}

function ForcedPasswordChangeForm({ onChanged }: { onChanged: () => Promise<void> }) {
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [newPasswordRepeat, setNewPasswordRepeat] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    if (newPassword !== newPasswordRepeat) {
      setError("Die beiden neuen Passwörter stimmen nicht überein.");
      return;
    }
    setSubmitting(true);
    setError(null);
    try {
      await authApi.changePassword(currentPassword, newPassword);
      await onChanged();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Passwort konnte nicht geändert werden.");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form className="login-gate-card card" onSubmit={handleSubmit}>
      <h1 className="h4 mb-3">Neues Passwort setzen</h1>
      <p className="text-body-secondary">
        Dieser Zugang wurde mit einem Startpasswort angelegt. Bitte vor der
        weiteren Nutzung ein eigenes Passwort vergeben.
      </p>
      <div className="mb-3">
        <label className="form-label" htmlFor="force-current-password">
          Aktuelles (Start-)Passwort
        </label>
        <input
          id="force-current-password"
          type="password"
          className="form-control"
          value={currentPassword}
          onChange={(event) => setCurrentPassword(event.target.value)}
          autoComplete="current-password"
          autoFocus
          required
        />
      </div>
      <div className="mb-3">
        <label className="form-label" htmlFor="force-new-password">
          Neues Passwort
        </label>
        <input
          id="force-new-password"
          type="password"
          className="form-control"
          value={newPassword}
          onChange={(event) => setNewPassword(event.target.value)}
          autoComplete="new-password"
          minLength={8}
          required
        />
      </div>
      <div className="mb-3">
        <label className="form-label" htmlFor="force-new-password-repeat">
          Neues Passwort wiederholen
        </label>
        <input
          id="force-new-password-repeat"
          type="password"
          className="form-control"
          value={newPasswordRepeat}
          onChange={(event) => setNewPasswordRepeat(event.target.value)}
          autoComplete="new-password"
          minLength={8}
          required
        />
      </div>
      {error && <p className="text-danger">{error}</p>}
      <button type="submit" className="btn btn-primary" disabled={submitting}>
        {submitting ? "Speichert…" : "Passwort setzen"}
      </button>
    </form>
  );
}