54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { TextField } from "@nexarch/shl";
|
|
import { requestPasswordReset } from "../../../lib/api";
|
|
|
|
export default function PasswordResetRequestPage() {
|
|
const [email, setEmail] = useState("");
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
setSubmitting(true);
|
|
try {
|
|
// Antwort ist absichtlich IMMER dieselbe (Backend-Garantie,
|
|
// Akzeptanzkriterium 3) — das Frontend erfindet keine differenzierte
|
|
// Anzeige je nachdem ob das Konto existiert.
|
|
const result = await requestPasswordReset(email);
|
|
setMessage(result.message);
|
|
} catch {
|
|
setMessage("Falls ein Konto mit dieser E-Mail-Adresse existiert, wurde eine Nachricht mit weiteren Schritten verschickt.");
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main style={{ maxWidth: 400, margin: "80px auto", padding: "0 16px" }}>
|
|
<h1>Passwort zurücksetzen</h1>
|
|
{message ? (
|
|
<p role="status">{message}</p>
|
|
) : (
|
|
<form onSubmit={onSubmit} noValidate>
|
|
<TextField
|
|
label="E-Mail-Adresse"
|
|
type="email"
|
|
autoComplete="username"
|
|
required
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
<button type="submit" disabled={submitting}>
|
|
{submitting ? "Wird gesendet…" : "Link anfordern"}
|
|
</button>
|
|
</form>
|
|
)}
|
|
<p>
|
|
<a href="/login">Zurück zur Anmeldung</a>
|
|
</p>
|
|
</main>
|
|
);
|
|
}
|