Fix mail layouts, /invite form-reset, profile validation
Mail templates (6 templates touched): - New shared `_styles.ts` exports a robust font stack starting with Arial/Helvetica so mail readers that lack -apple-system and BlinkMacSystemFont don't fall back to Monospace (observed in at least one webmail client). - `fontFamily` is now set on every text-bearing element, not only on `<Body>`, because some clients (Outlook, several webmail readers) do not inherit body CSS into nested sections. - ASCII substitutions are gone: "Ueber" → "Über", "fuer" → "für", "bestaetigen" → "bestätigen", "uebernehmen" → "übernehmen", "verlaesslich" → "verlässlich". - InviteEmail + NewsEmail buttons switch from the off-brand yellow (#f0b84b) to the brand dark green so the CTA matches the header. /invite form: - InviteState gains an `attempt` counter plus echoed checkbox `values`, mirroring the /register and /onboarding fix from earlier branches. A failed submit no longer wipes the Datenschutz / Adressbuch-Opt-In ticks. Passwords stay empty for security. - Field error <p> elements gain role="alert" + aria-live="polite" so screen readers announce validation failures on submit. Inputs use aria-describedby to link to error / helper text. Profile validation: - Telephone numbers must match a permissive pattern that still rejects obvious garbage (previously "abc-123-not-a-phone" was accepted). - Postal codes must match an alphanumeric pattern of 3–10 chars (previously "ABCDE" was accepted). - Child date-of-birth is now validated via superRefine: it must be a parseable date, not in the future, and not before 1900. Previously a kid born in 2030 was accepted. - The three Profil server actions now surface the first Zod issue message instead of generic "Ungültige Eingabedaten." toasts. Misc: - "fuer" → "für" in the Adressbuch page subtitle. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
t.indorf
@@ -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 };
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user