Merge claude/profil-and-mail-fixes into main

Fix mail layouts, /invite form-reset, profile validation
This commit is contained in:
t.indorf
2026-05-17 23:54:07 +02:00
11 changed files with 304 additions and 69 deletions
+1 -1
View File
@@ -124,7 +124,7 @@ export default async function AdressbuchPage() {
<div className="flex flex-col gap-1">
<h1 className="text-2xl font-bold tracking-tight">Adressbuch</h1>
<p className="max-w-2xl text-sm text-muted-foreground">
Haushalte und Kontaktdaten, die explizit fuer das interne
Haushalte und Kontaktdaten, die explizit für das interne
Kita-Adressbuch freigegeben wurden.
</p>
</div>
+76 -10
View File
@@ -6,20 +6,76 @@ import { z } from "zod";
import { requireKitaSession } from "@/lib/auth-utils";
import { prisma } from "@/lib/prisma";
const childSchema = z.object({
firstName: z.string().min(1, "Vorname ist erforderlich.").max(100).trim(),
lastName: z.string().min(1, "Nachname ist erforderlich.").max(100).trim(),
dateOfBirth: z.string().optional(),
});
// Telefonnummern: führendes "+" optional, dann Ziffern, Leerzeichen, Bindestriche,
// Klammern oder Schrägstriche. Mindestens 6 Ziffern damit es plausibel ist.
// Schließt damit "abc-123-not-a-phone" aus, lässt aber internationale Formate zu.
const phonePattern = /^[+]?[0-9][\d\s\-()/.]{4,}$/;
// PLZ: Ziffern/Buchstaben/Leerzeichen/Bindestriche, 310 Zeichen.
// Kein striktes DE-Format (5 Ziffern), damit auch AT/CH/UK denkbar sind.
const postalCodePattern = /^[0-9A-Za-z][0-9A-Za-z\s-]{2,9}$/;
const childSchema = z
.object({
firstName: z.string().min(1, "Vorname ist erforderlich.").max(100).trim(),
lastName: z.string().min(1, "Nachname ist erforderlich.").max(100).trim(),
dateOfBirth: z.string().optional(),
})
.superRefine((data, ctx) => {
if (!data.dateOfBirth) return;
const parsed = new Date(`${data.dateOfBirth}T00:00:00`);
if (Number.isNaN(parsed.getTime())) {
ctx.addIssue({
path: ["dateOfBirth"],
code: "custom",
message: "Bitte ein gültiges Datum angeben.",
});
return;
}
// In der Zukunft geborene Kinder existieren nicht.
const today = new Date();
today.setHours(23, 59, 59, 999);
if (parsed > today) {
ctx.addIssue({
path: ["dateOfBirth"],
code: "custom",
message: "Geburtsdatum darf nicht in der Zukunft liegen.",
});
}
// Schutz vor offensichtlichen Tippfehlern (1899 statt 1989 o.ä.).
if (parsed.getFullYear() < 1900) {
ctx.addIssue({
path: ["dateOfBirth"],
code: "custom",
message: "Bitte ein realistisches Geburtsdatum angeben.",
});
}
});
const familySchema = z.object({
familyName: z.string().min(1, "Familienname ist erforderlich.").max(120).trim(),
});
const contactSchema = z.object({
phone: z.string().trim().max(50).optional(),
phone: z
.string()
.trim()
.max(50)
.optional()
.refine(
(v) => !v || phonePattern.test(v),
"Bitte eine gültige Telefonnummer angeben.",
),
street: z.string().trim().max(120).optional(),
postalCode: z.string().trim().max(20).optional(),
postalCode: z
.string()
.trim()
.max(20)
.optional()
.refine(
(v) => !v || postalCodePattern.test(v),
"Bitte eine gültige Postleitzahl angeben.",
),
city: z.string().trim().max(100).optional(),
});
@@ -30,6 +86,16 @@ function parseDateInput(value?: string) {
return Number.isNaN(date.getTime()) ? null : date;
}
// Gibt die erste konkrete Field-Error-Message aus einem Zod-Fehler zurück,
// damit der User nicht nur "Ungültige Eingabedaten" sieht.
function firstZodMessage(
error: z.ZodError,
fallback: string,
): string {
const issue = error.issues[0];
return issue?.message || fallback;
}
async function requireOwnFamilyChild(
childId: string,
familyId: string | null,
@@ -51,7 +117,7 @@ export async function createMyChild(rawPayload: unknown) {
}
if (!parsed.success) {
return { error: "Ungültige Eingabedaten." };
return { error: firstZodMessage(parsed.error, "Ungültige Eingabedaten.") };
}
try {
@@ -117,7 +183,7 @@ export async function updateMyContact(rawPayload: unknown) {
const parsed = contactSchema.safeParse(rawPayload);
if (!parsed.success) {
return { error: "Ungültige Kontaktdaten." };
return { error: firstZodMessage(parsed.error, "Ungültige Kontaktdaten.") };
}
try {
@@ -146,7 +212,7 @@ export async function updateMyChild(childId: string, rawPayload: unknown) {
const parsed = childSchema.safeParse(rawPayload);
if (!parsed.success) {
return { error: "Ungültige Eingabedaten." };
return { error: firstZodMessage(parsed.error, "Ungültige Eingabedaten.") };
}
try {
+39 -5
View File
@@ -34,6 +34,16 @@ const inviteSchema = z
const PRIVACY_POLICY_VERSION = "2026-05-01";
export type InviteState = {
// Bumped per call so the client can key uncontrolled inputs and force a
// remount after a failed submit (React's <form action> wipes them
// otherwise).
attempt: number;
// Echoed checkbox states so failed submits don't lose the user's consent
// ticks. Passwords are NEVER echoed back from the server.
values?: {
acceptPrivacyPolicy?: boolean;
directoryOptIn?: boolean;
};
errors?: {
password?: string[];
confirmPassword?: string[];
@@ -43,10 +53,22 @@ export type InviteState = {
};
};
export const initialInviteState: InviteState = { attempt: 0 };
function echoCheckboxValues(formData: FormData): InviteState["values"] {
return {
acceptPrivacyPolicy: formData.get("acceptPrivacyPolicy") === "on",
directoryOptIn: formData.get("directoryOptIn") === "on",
};
}
export async function acceptInviteAction(
_prev: InviteState,
prev: InviteState,
formData: FormData,
): Promise<InviteState> {
const attempt = prev.attempt + 1;
const values = echoCheckboxValues(formData);
const parsed = inviteSchema.safeParse({
token: formData.get("token"),
password: formData.get("password"),
@@ -56,7 +78,7 @@ export async function acceptInviteAction(
});
if (!parsed.success) {
return { errors: parsed.error.flatten().fieldErrors };
return { attempt, values, errors: parsed.error.flatten().fieldErrors };
}
const { token, password, directoryOptIn } = parsed.data;
@@ -68,10 +90,16 @@ export async function acceptInviteAction(
});
if (!verificationToken) {
return { errors: { _form: ["Einladungslink ist ungültig."] } };
return {
attempt,
values,
errors: { _form: ["Einladungslink ist ungültig."] },
};
}
if (verificationToken.expires < now) {
return {
attempt,
values,
errors: {
_form: [
"Dieser Einladungslink ist abgelaufen. Bitte wende dich an deinen Administrator.",
@@ -89,11 +117,17 @@ export async function acceptInviteAction(
});
if (!user) {
return { errors: { _form: ["Benutzer nicht gefunden."] } };
return {
attempt,
values,
errors: { _form: ["Benutzer nicht gefunden."] },
};
}
if (user.passwordHash !== "") {
// Invite wurde bereits eingelöst
return {
attempt,
values,
errors: {
_form: [
"Dieser Einladungslink wurde bereits verwendet. Bitte melde dich an.",
@@ -131,5 +165,5 @@ export async function acceptInviteAction(
});
// Unreachable signIn redirected.
return {};
return { attempt };
}
+54 -9
View File
@@ -6,9 +6,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { acceptInviteAction, type InviteState } from "./actions";
const initialState: InviteState = {};
import { acceptInviteAction, initialInviteState } from "./actions";
// =====================================================================
// InviteForm · Client Component
@@ -27,9 +25,14 @@ export function InviteForm({
}) {
const [state, formAction, pending] = useActionState(
acceptInviteAction,
initialState,
initialInviteState,
);
// Bumping the key on each attempt forces uncontrolled inputs (including
// checkboxes) to remount with the echoed defaultChecked values after a
// failed submit. Passwords stay empty for security.
const attemptKey = state.attempt;
return (
<form action={formAction} className="space-y-5">
{/* Token als verstecktes Feld */}
@@ -45,17 +48,30 @@ export function InviteForm({
<div className="space-y-1.5">
<Label htmlFor="password">Passwort wählen</Label>
<Input
key={`password-${attemptKey}`}
id="password"
name="password"
type="password"
autoComplete="new-password"
required
aria-invalid={!!state.errors?.password}
aria-describedby={
state.errors?.password ? "password-error" : "password-helper"
}
/>
{state.errors?.password?.[0] ? (
<p className="text-xs text-destructive">{state.errors.password[0]}</p>
<p
id="password-error"
role="alert"
aria-live="polite"
className="text-xs text-destructive"
>
{state.errors.password[0]}
</p>
) : (
<p className="text-xs text-muted-foreground">Mindestens 8 Zeichen.</p>
<p id="password-helper" className="text-xs text-muted-foreground">
Mindestens 8 Zeichen.
</p>
)}
</div>
@@ -63,15 +79,26 @@ export function InviteForm({
<div className="space-y-1.5">
<Label htmlFor="confirmPassword">Passwort bestätigen</Label>
<Input
key={`confirmPassword-${attemptKey}`}
id="confirmPassword"
name="confirmPassword"
type="password"
autoComplete="new-password"
required
aria-invalid={!!state.errors?.confirmPassword}
aria-describedby={
state.errors?.confirmPassword
? "confirmPassword-error"
: undefined
}
/>
{state.errors?.confirmPassword?.[0] && (
<p className="text-xs text-destructive">
<p
id="confirmPassword-error"
role="alert"
aria-live="polite"
className="text-xs text-destructive"
>
{state.errors.confirmPassword[0]}
</p>
)}
@@ -85,10 +112,17 @@ export function InviteForm({
<div className="flex items-start gap-3">
<Checkbox
key={`acceptPrivacyPolicy-${attemptKey}`}
id="acceptPrivacyPolicy"
name="acceptPrivacyPolicy"
required
defaultChecked={state.values?.acceptPrivacyPolicy === true}
aria-invalid={!!state.errors?.acceptPrivacyPolicy}
aria-describedby={
state.errors?.acceptPrivacyPolicy
? "acceptPrivacyPolicy-error"
: undefined
}
/>
<div className="space-y-0.5">
<Label htmlFor="acceptPrivacyPolicy" className="text-sm font-normal">
@@ -104,7 +138,12 @@ export function InviteForm({
gelesen und akzeptiere sie. <span className="text-destructive">*</span>
</Label>
{state.errors?.acceptPrivacyPolicy?.[0] && (
<p className="text-xs text-destructive">
<p
id="acceptPrivacyPolicy-error"
role="alert"
aria-live="polite"
className="text-xs text-destructive"
>
{state.errors.acceptPrivacyPolicy[0]}
</p>
)}
@@ -113,8 +152,10 @@ export function InviteForm({
<div className="flex items-start gap-3">
<Checkbox
key={`directoryOptIn-${attemptKey}`}
id="directoryOptIn"
name="directoryOptIn"
defaultChecked={state.values?.directoryOptIn === true}
aria-invalid={!!state.errors?.directoryOptIn}
/>
<div className="space-y-0.5">
@@ -128,7 +169,11 @@ export function InviteForm({
{/* Globaler Fehler */}
{state.errors?._form?.[0] && (
<p className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
<p
role="alert"
aria-live="polite"
className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive"
>
{state.errors._form[0]}
</p>
)}