Konto-Seite: eigenen Namen, E-Mail, Passwort und Passkeys selbst verwalten
- Klick auf den Benutzernamen im Header (Kantinen- und Admin-Bereich) öffnet /konto - Name-Änderung per RLS-Policy mit spaltenscharfem Grant (nur full_name), Rolle bleibt ausschließlich über die Admin-API änderbar - E-Mail-Änderung über supabase.auth.updateUser mit Bestätigungslink; Trigger synchronisiert profiles.email nach Bestätigung - Passwortänderung verlangt zur Verifizierung das aktuelle Passwort (Re-Login-Check) plus Wiederholung des neuen Passworts - Passkey-Verwaltung aus /intern/konto hierher verschoben
This commit is contained in:
@@ -0,0 +1,262 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { createClient } from "@/lib/supabase/client";
|
||||
import PasskeyManager from "@/components/PasskeyManager";
|
||||
|
||||
const ROLE_LABELS: Record<string, string> = {
|
||||
admin: "Administrator",
|
||||
staff: "Kantinenmitarbeiter",
|
||||
};
|
||||
|
||||
function germanAuthError(message: string): string {
|
||||
if (/invalid login credentials/i.test(message))
|
||||
return "Das aktuelle Passwort ist falsch.";
|
||||
if (/should be at least/i.test(message))
|
||||
return "Das neue Passwort ist zu kurz (mindestens 8 Zeichen).";
|
||||
if (/email.*already|already.*registered/i.test(message))
|
||||
return "Diese E-Mail-Adresse wird bereits verwendet.";
|
||||
return message;
|
||||
}
|
||||
|
||||
export default function AccountManager({
|
||||
role,
|
||||
initialFullName,
|
||||
initialEmail,
|
||||
}: {
|
||||
role: string;
|
||||
initialFullName: string;
|
||||
initialEmail: string;
|
||||
}) {
|
||||
const supabase = useMemo(() => createClient(), []);
|
||||
const router = useRouter();
|
||||
|
||||
// Persönliche Daten
|
||||
const [fullName, setFullName] = useState(initialFullName);
|
||||
const [nameError, setNameError] = useState<string | null>(null);
|
||||
const [nameInfo, setNameInfo] = useState<string | null>(null);
|
||||
const [nameBusy, setNameBusy] = useState(false);
|
||||
|
||||
// E-Mail-Adresse
|
||||
const [email, setEmail] = useState(initialEmail);
|
||||
const [emailError, setEmailError] = useState<string | null>(null);
|
||||
const [emailInfo, setEmailInfo] = useState<string | null>(null);
|
||||
const [emailBusy, setEmailBusy] = useState(false);
|
||||
|
||||
// Passwort
|
||||
const [currentPassword, setCurrentPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [newPasswordRepeat, setNewPasswordRepeat] = useState("");
|
||||
const [pwError, setPwError] = useState<string | null>(null);
|
||||
const [pwInfo, setPwInfo] = useState<string | null>(null);
|
||||
const [pwBusy, setPwBusy] = useState(false);
|
||||
|
||||
async function saveName(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setNameError(null);
|
||||
setNameInfo(null);
|
||||
const name = fullName.trim();
|
||||
if (!name) {
|
||||
setNameError("Bitte einen Namen angeben.");
|
||||
return;
|
||||
}
|
||||
setNameBusy(true);
|
||||
const { error } = await supabase
|
||||
.from("profiles")
|
||||
.update({ full_name: name })
|
||||
.eq("id", (await supabase.auth.getUser()).data.user?.id ?? "");
|
||||
if (error) setNameError(`Speichern fehlgeschlagen: ${error.message}`);
|
||||
else {
|
||||
setNameInfo("Name gespeichert.");
|
||||
router.refresh();
|
||||
}
|
||||
setNameBusy(false);
|
||||
}
|
||||
|
||||
async function saveEmail(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setEmailError(null);
|
||||
setEmailInfo(null);
|
||||
const next = email.trim();
|
||||
if (!next || next === initialEmail) return;
|
||||
setEmailBusy(true);
|
||||
const { error } = await supabase.auth.updateUser({ email: next });
|
||||
if (error) {
|
||||
setEmailError(`Ändern fehlgeschlagen: ${germanAuthError(error.message)}`);
|
||||
} else {
|
||||
setEmailInfo(
|
||||
"Bestätigungs-E-Mails wurden verschickt. Die neue Adresse wird erst nach Bestätigung des Links aktiv."
|
||||
);
|
||||
}
|
||||
setEmailBusy(false);
|
||||
}
|
||||
|
||||
async function savePassword(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setPwError(null);
|
||||
setPwInfo(null);
|
||||
if (newPassword.length < 8) {
|
||||
setPwError("Das neue Passwort muss mindestens 8 Zeichen lang sein.");
|
||||
return;
|
||||
}
|
||||
if (newPassword !== newPasswordRepeat) {
|
||||
setPwError("Die Passwörter stimmen nicht überein.");
|
||||
return;
|
||||
}
|
||||
setPwBusy(true);
|
||||
|
||||
// Zur Verifizierung: aktuelles Passwort gegenprüfen, bevor geändert wird.
|
||||
const { error: verifyError } = await supabase.auth.signInWithPassword({
|
||||
email: initialEmail,
|
||||
password: currentPassword,
|
||||
});
|
||||
if (verifyError) {
|
||||
setPwError(germanAuthError(verifyError.message));
|
||||
setPwBusy(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const { error } = await supabase.auth.updateUser({ password: newPassword });
|
||||
if (error) {
|
||||
setPwError(`Ändern fehlgeschlagen: ${germanAuthError(error.message)}`);
|
||||
} else {
|
||||
setPwInfo("Passwort geändert.");
|
||||
setCurrentPassword("");
|
||||
setNewPassword("");
|
||||
setNewPasswordRepeat("");
|
||||
}
|
||||
setPwBusy(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl space-y-6">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-[var(--c-primary)]">Mein Konto</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
{initialEmail} – {ROLE_LABELS[role] ?? role}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section className="card">
|
||||
<h2 className="font-semibold mb-3">Persönliche Daten</h2>
|
||||
<form onSubmit={saveName} className="space-y-3">
|
||||
<div className="max-w-80">
|
||||
<label className="label" htmlFor="account-name">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
id="account-name"
|
||||
className="input"
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{nameError && (
|
||||
<p className="text-sm text-[var(--c-del)]" role="alert">
|
||||
{nameError}
|
||||
</p>
|
||||
)}
|
||||
{nameInfo && <p className="text-sm text-green-700">{nameInfo}</p>}
|
||||
<button type="submit" className="btn btn-add" disabled={nameBusy}>
|
||||
Name speichern
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<h2 className="font-semibold mb-3">E-Mail-Adresse</h2>
|
||||
<form onSubmit={saveEmail} className="space-y-3">
|
||||
<div className="max-w-80">
|
||||
<label className="label" htmlFor="account-email">
|
||||
E-Mail-Adresse
|
||||
</label>
|
||||
<input
|
||||
id="account-email"
|
||||
type="email"
|
||||
className="input"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{emailError && (
|
||||
<p className="text-sm text-[var(--c-del)]" role="alert">
|
||||
{emailError}
|
||||
</p>
|
||||
)}
|
||||
{emailInfo && <p className="text-sm text-green-700">{emailInfo}</p>}
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-add"
|
||||
disabled={emailBusy || email.trim() === initialEmail}
|
||||
>
|
||||
E-Mail-Adresse ändern
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<h2 className="font-semibold mb-3">Passwort ändern</h2>
|
||||
<form onSubmit={savePassword} className="space-y-3">
|
||||
<div className="max-w-80">
|
||||
<label className="label" htmlFor="account-current-password">
|
||||
Aktuelles Passwort (zur Verifizierung)
|
||||
</label>
|
||||
<input
|
||||
id="account-current-password"
|
||||
type="password"
|
||||
className="input"
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="max-w-80">
|
||||
<label className="label" htmlFor="account-new-password">
|
||||
Neues Passwort
|
||||
</label>
|
||||
<input
|
||||
id="account-new-password"
|
||||
type="password"
|
||||
className="input"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
autoComplete="new-password"
|
||||
minLength={8}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="max-w-80">
|
||||
<label className="label" htmlFor="account-new-password-repeat">
|
||||
Neues Passwort wiederholen
|
||||
</label>
|
||||
<input
|
||||
id="account-new-password-repeat"
|
||||
type="password"
|
||||
className="input"
|
||||
value={newPasswordRepeat}
|
||||
onChange={(e) => setNewPasswordRepeat(e.target.value)}
|
||||
autoComplete="new-password"
|
||||
minLength={8}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{pwError && (
|
||||
<p className="text-sm text-[var(--c-del)]" role="alert">
|
||||
{pwError}
|
||||
</p>
|
||||
)}
|
||||
{pwInfo && <p className="text-sm text-green-700">{pwInfo}</p>}
|
||||
<button type="submit" className="btn btn-add" disabled={pwBusy}>
|
||||
Passwort ändern
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<PasskeyManager />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user