88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
"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>
|
|
);
|
|
}
|