nexarch/web/account/app/login/page.tsx

"use client";

import { useState } from "react";
import { TextField, useToast } from "@nexarch/shl";
import { ApiError, login } from "../../lib/api";

export default function LoginPage() {
  const { push } = useToast();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [totpCode, setTotpCode] = useState("");
  const [needsSecondFactor, setNeedsSecondFactor] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    setSubmitting(true);
    try {
      await login(email, password, needsSecondFactor ? totpCode : undefined);
      push("Anmeldung erfolgreich.", "success");
      window.location.href = "/profile";
    } catch (err) {
      if (err instanceof ApiError) {
        // Akzeptanzkriterium 3 / Pruefung 1: nur die generische, vom Backend
        // gelieferte Meldung anzeigen — keine eigene, evtl. praezisere
        // Fehlerursache im Frontend herleiten oder ergaenzen.
        setError(err.message);
        if (err.code === "second_factor_required") {
          setNeedsSecondFactor(true);
        }
      } else {
        setError("Anmeldung fehlgeschlagen. Bitte versuchen Sie es erneut.");
      }
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <main style={{ maxWidth: 400, margin: "80px auto", padding: "0 16px" }}>
      <h1>Anmeldung</h1>
      <form onSubmit={onSubmit} noValidate>
        <TextField
          label="E-Mail-Adresse"
          type="email"
          autoComplete="email"
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <TextField
          label="Passwort"
          type="password"
          autoComplete="current-password"
          required
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        {needsSecondFactor && (
          <TextField
            label="Zweiter Faktor (Authenticator-Code oder Wiederherstellungscode)"
            type="text"
            inputMode="numeric"
            autoComplete="one-time-code"
            required
            value={totpCode}
            onChange={(e) => setTotpCode(e.target.value)}
            hint="Öffnen Sie Ihre Authenticator-App oder geben Sie einen Wiederherstellungscode ein."
          />
        )}
        {error && (
          <p role="alert" style={{ color: "var(--shl-color-danger)" }}>
            {error}
          </p>
        )}
        <button type="submit" disabled={submitting}>
          {submitting ? "Anmeldung läuft…" : "Anmelden"}
        </button>
      </form>
      <p>
        <a href="/password-reset/request">Passwort vergessen?</a>
      </p>
    </main>
  );
}