IAM-08: benutzerprofil-login-oberflaeche (login+2fa/passwort-reset/profil-backend-handler + web/account next.js-frontend auf shl-01)

2026-08-28 23:34:36 +02:00
parent f0139c889a
commit f627caaacb
19 changed files with 1407 additions and 0 deletions
@@ -0,0 +1,87 @@
+"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="username"
+          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>
+  );
+}