Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b5eb288104 | |||
| ce1a5c9e42 | |||
| 6c79e0a8e1 | |||
| 935845ce56 | |||
| cb4f7409bc | |||
| fa06da324c | |||
| 211bb9e300 | |||
| af2c3b245a | |||
| 8640001f6f |
@@ -3,3 +3,9 @@
|
|||||||
|
|
||||||
This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
|
This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
|
||||||
<!-- END:nextjs-agent-rules -->
|
<!-- END:nextjs-agent-rules -->
|
||||||
|
|
||||||
|
<!-- BEGIN:codex-workflow-rules -->
|
||||||
|
# Codex workflow
|
||||||
|
|
||||||
|
Before making repository changes, Codex should work from a dedicated branch in the Codex worktree. Prefer a `codex/...` branch name when Git refs allow it; if an existing ref blocks that namespace, use a `codex-...` branch name instead.
|
||||||
|
<!-- END:codex-workflow-rules -->
|
||||||
|
|||||||
@@ -124,7 +124,7 @@ export default async function AdressbuchPage() {
|
|||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<h1 className="text-2xl font-bold tracking-tight">Adressbuch</h1>
|
<h1 className="text-2xl font-bold tracking-tight">Adressbuch</h1>
|
||||||
<p className="max-w-2xl text-sm text-muted-foreground">
|
<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.
|
Kita-Adressbuch freigegeben wurden.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -6,20 +6,76 @@ import { z } from "zod";
|
|||||||
import { requireKitaSession } from "@/lib/auth-utils";
|
import { requireKitaSession } from "@/lib/auth-utils";
|
||||||
import { prisma } from "@/lib/prisma";
|
import { prisma } from "@/lib/prisma";
|
||||||
|
|
||||||
const childSchema = z.object({
|
// Telefonnummern: führendes "+" optional, dann Ziffern, Leerzeichen, Bindestriche,
|
||||||
firstName: z.string().min(1, "Vorname ist erforderlich.").max(100).trim(),
|
// Klammern oder Schrägstriche. Mindestens 6 Ziffern damit es plausibel ist.
|
||||||
lastName: z.string().min(1, "Nachname ist erforderlich.").max(100).trim(),
|
// Schließt damit "abc-123-not-a-phone" aus, lässt aber internationale Formate zu.
|
||||||
dateOfBirth: z.string().optional(),
|
const phonePattern = /^[+]?[0-9][\d\s\-()/.]{4,}$/;
|
||||||
});
|
|
||||||
|
// PLZ: Ziffern/Buchstaben/Leerzeichen/Bindestriche, 3–10 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({
|
const familySchema = z.object({
|
||||||
familyName: z.string().min(1, "Familienname ist erforderlich.").max(120).trim(),
|
familyName: z.string().min(1, "Familienname ist erforderlich.").max(120).trim(),
|
||||||
});
|
});
|
||||||
|
|
||||||
const contactSchema = z.object({
|
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(),
|
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(),
|
city: z.string().trim().max(100).optional(),
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -30,6 +86,16 @@ function parseDateInput(value?: string) {
|
|||||||
return Number.isNaN(date.getTime()) ? null : date;
|
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(
|
async function requireOwnFamilyChild(
|
||||||
childId: string,
|
childId: string,
|
||||||
familyId: string | null,
|
familyId: string | null,
|
||||||
@@ -51,7 +117,7 @@ export async function createMyChild(rawPayload: unknown) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!parsed.success) {
|
if (!parsed.success) {
|
||||||
return { error: "Ungültige Eingabedaten." };
|
return { error: firstZodMessage(parsed.error, "Ungültige Eingabedaten.") };
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -117,7 +183,7 @@ export async function updateMyContact(rawPayload: unknown) {
|
|||||||
const parsed = contactSchema.safeParse(rawPayload);
|
const parsed = contactSchema.safeParse(rawPayload);
|
||||||
|
|
||||||
if (!parsed.success) {
|
if (!parsed.success) {
|
||||||
return { error: "Ungültige Kontaktdaten." };
|
return { error: firstZodMessage(parsed.error, "Ungültige Kontaktdaten.") };
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -146,7 +212,7 @@ export async function updateMyChild(childId: string, rawPayload: unknown) {
|
|||||||
const parsed = childSchema.safeParse(rawPayload);
|
const parsed = childSchema.safeParse(rawPayload);
|
||||||
|
|
||||||
if (!parsed.success) {
|
if (!parsed.success) {
|
||||||
return { error: "Ungültige Eingabedaten." };
|
return { error: firstZodMessage(parsed.error, "Ungültige Eingabedaten.") };
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -34,6 +34,16 @@ const inviteSchema = z
|
|||||||
const PRIVACY_POLICY_VERSION = "2026-05-01";
|
const PRIVACY_POLICY_VERSION = "2026-05-01";
|
||||||
|
|
||||||
export type InviteState = {
|
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?: {
|
errors?: {
|
||||||
password?: string[];
|
password?: string[];
|
||||||
confirmPassword?: 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(
|
export async function acceptInviteAction(
|
||||||
_prev: InviteState,
|
prev: InviteState,
|
||||||
formData: FormData,
|
formData: FormData,
|
||||||
): Promise<InviteState> {
|
): Promise<InviteState> {
|
||||||
|
const attempt = prev.attempt + 1;
|
||||||
|
const values = echoCheckboxValues(formData);
|
||||||
|
|
||||||
const parsed = inviteSchema.safeParse({
|
const parsed = inviteSchema.safeParse({
|
||||||
token: formData.get("token"),
|
token: formData.get("token"),
|
||||||
password: formData.get("password"),
|
password: formData.get("password"),
|
||||||
@@ -56,7 +78,7 @@ export async function acceptInviteAction(
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (!parsed.success) {
|
if (!parsed.success) {
|
||||||
return { errors: parsed.error.flatten().fieldErrors };
|
return { attempt, values, errors: parsed.error.flatten().fieldErrors };
|
||||||
}
|
}
|
||||||
|
|
||||||
const { token, password, directoryOptIn } = parsed.data;
|
const { token, password, directoryOptIn } = parsed.data;
|
||||||
@@ -68,10 +90,16 @@ export async function acceptInviteAction(
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (!verificationToken) {
|
if (!verificationToken) {
|
||||||
return { errors: { _form: ["Einladungslink ist ungültig."] } };
|
return {
|
||||||
|
attempt,
|
||||||
|
values,
|
||||||
|
errors: { _form: ["Einladungslink ist ungültig."] },
|
||||||
|
};
|
||||||
}
|
}
|
||||||
if (verificationToken.expires < now) {
|
if (verificationToken.expires < now) {
|
||||||
return {
|
return {
|
||||||
|
attempt,
|
||||||
|
values,
|
||||||
errors: {
|
errors: {
|
||||||
_form: [
|
_form: [
|
||||||
"Dieser Einladungslink ist abgelaufen. Bitte wende dich an deinen Administrator.",
|
"Dieser Einladungslink ist abgelaufen. Bitte wende dich an deinen Administrator.",
|
||||||
@@ -89,11 +117,17 @@ export async function acceptInviteAction(
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (!user) {
|
if (!user) {
|
||||||
return { errors: { _form: ["Benutzer nicht gefunden."] } };
|
return {
|
||||||
|
attempt,
|
||||||
|
values,
|
||||||
|
errors: { _form: ["Benutzer nicht gefunden."] },
|
||||||
|
};
|
||||||
}
|
}
|
||||||
if (user.passwordHash !== "") {
|
if (user.passwordHash !== "") {
|
||||||
// Invite wurde bereits eingelöst
|
// Invite wurde bereits eingelöst
|
||||||
return {
|
return {
|
||||||
|
attempt,
|
||||||
|
values,
|
||||||
errors: {
|
errors: {
|
||||||
_form: [
|
_form: [
|
||||||
"Dieser Einladungslink wurde bereits verwendet. Bitte melde dich an.",
|
"Dieser Einladungslink wurde bereits verwendet. Bitte melde dich an.",
|
||||||
@@ -131,5 +165,5 @@ export async function acceptInviteAction(
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Unreachable – signIn redirected.
|
// Unreachable – signIn redirected.
|
||||||
return {};
|
return { attempt };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,9 +6,7 @@ import { Button } from "@/components/ui/button";
|
|||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
import { Checkbox } from "@/components/ui/checkbox";
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
import { acceptInviteAction, type InviteState } from "./actions";
|
import { acceptInviteAction, initialInviteState } from "./actions";
|
||||||
|
|
||||||
const initialState: InviteState = {};
|
|
||||||
|
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
// InviteForm · Client Component
|
// InviteForm · Client Component
|
||||||
@@ -27,9 +25,14 @@ export function InviteForm({
|
|||||||
}) {
|
}) {
|
||||||
const [state, formAction, pending] = useActionState(
|
const [state, formAction, pending] = useActionState(
|
||||||
acceptInviteAction,
|
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 (
|
return (
|
||||||
<form action={formAction} className="space-y-5">
|
<form action={formAction} className="space-y-5">
|
||||||
{/* Token als verstecktes Feld */}
|
{/* Token als verstecktes Feld */}
|
||||||
@@ -45,17 +48,30 @@ export function InviteForm({
|
|||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<Label htmlFor="password">Passwort wählen</Label>
|
<Label htmlFor="password">Passwort wählen</Label>
|
||||||
<Input
|
<Input
|
||||||
|
key={`password-${attemptKey}`}
|
||||||
id="password"
|
id="password"
|
||||||
name="password"
|
name="password"
|
||||||
type="password"
|
type="password"
|
||||||
autoComplete="new-password"
|
autoComplete="new-password"
|
||||||
required
|
required
|
||||||
aria-invalid={!!state.errors?.password}
|
aria-invalid={!!state.errors?.password}
|
||||||
|
aria-describedby={
|
||||||
|
state.errors?.password ? "password-error" : "password-helper"
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
{state.errors?.password?.[0] ? (
|
{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>
|
</div>
|
||||||
|
|
||||||
@@ -63,15 +79,26 @@ export function InviteForm({
|
|||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<Label htmlFor="confirmPassword">Passwort bestätigen</Label>
|
<Label htmlFor="confirmPassword">Passwort bestätigen</Label>
|
||||||
<Input
|
<Input
|
||||||
|
key={`confirmPassword-${attemptKey}`}
|
||||||
id="confirmPassword"
|
id="confirmPassword"
|
||||||
name="confirmPassword"
|
name="confirmPassword"
|
||||||
type="password"
|
type="password"
|
||||||
autoComplete="new-password"
|
autoComplete="new-password"
|
||||||
required
|
required
|
||||||
aria-invalid={!!state.errors?.confirmPassword}
|
aria-invalid={!!state.errors?.confirmPassword}
|
||||||
|
aria-describedby={
|
||||||
|
state.errors?.confirmPassword
|
||||||
|
? "confirmPassword-error"
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
{state.errors?.confirmPassword?.[0] && (
|
{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]}
|
{state.errors.confirmPassword[0]}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
@@ -85,10 +112,17 @@ export function InviteForm({
|
|||||||
|
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
|
key={`acceptPrivacyPolicy-${attemptKey}`}
|
||||||
id="acceptPrivacyPolicy"
|
id="acceptPrivacyPolicy"
|
||||||
name="acceptPrivacyPolicy"
|
name="acceptPrivacyPolicy"
|
||||||
required
|
required
|
||||||
|
defaultChecked={state.values?.acceptPrivacyPolicy === true}
|
||||||
aria-invalid={!!state.errors?.acceptPrivacyPolicy}
|
aria-invalid={!!state.errors?.acceptPrivacyPolicy}
|
||||||
|
aria-describedby={
|
||||||
|
state.errors?.acceptPrivacyPolicy
|
||||||
|
? "acceptPrivacyPolicy-error"
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<div className="space-y-0.5">
|
<div className="space-y-0.5">
|
||||||
<Label htmlFor="acceptPrivacyPolicy" className="text-sm font-normal">
|
<Label htmlFor="acceptPrivacyPolicy" className="text-sm font-normal">
|
||||||
@@ -104,7 +138,12 @@ export function InviteForm({
|
|||||||
gelesen und akzeptiere sie. <span className="text-destructive">*</span>
|
gelesen und akzeptiere sie. <span className="text-destructive">*</span>
|
||||||
</Label>
|
</Label>
|
||||||
{state.errors?.acceptPrivacyPolicy?.[0] && (
|
{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]}
|
{state.errors.acceptPrivacyPolicy[0]}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
@@ -113,8 +152,10 @@ export function InviteForm({
|
|||||||
|
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
|
key={`directoryOptIn-${attemptKey}`}
|
||||||
id="directoryOptIn"
|
id="directoryOptIn"
|
||||||
name="directoryOptIn"
|
name="directoryOptIn"
|
||||||
|
defaultChecked={state.values?.directoryOptIn === true}
|
||||||
aria-invalid={!!state.errors?.directoryOptIn}
|
aria-invalid={!!state.errors?.directoryOptIn}
|
||||||
/>
|
/>
|
||||||
<div className="space-y-0.5">
|
<div className="space-y-0.5">
|
||||||
@@ -128,7 +169,11 @@ export function InviteForm({
|
|||||||
|
|
||||||
{/* Globaler Fehler */}
|
{/* Globaler Fehler */}
|
||||||
{state.errors?._form?.[0] && (
|
{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]}
|
{state.errors._form[0]}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|||||||
+1
-1
@@ -16,7 +16,7 @@ const geistMono = Geist_Mono({
|
|||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
metadataBase: new URL(
|
metadataBase: new URL(
|
||||||
process.env.NEXT_PUBLIC_SITE_URL ?? "https://kita-planer.example.com",
|
process.env.NEXT_PUBLIC_SITE_URL ?? "https://mein-kitaplaner.de",
|
||||||
),
|
),
|
||||||
title: {
|
title: {
|
||||||
default: "Der digitale Kita-Planer für Elternvereine",
|
default: "Der digitale Kita-Planer für Elternvereine",
|
||||||
|
|||||||
@@ -16,21 +16,35 @@ import { prisma } from "@/lib/prisma";
|
|||||||
// — kein "halb-eingerichteter" Zwischenzustand.
|
// — kein "halb-eingerichteter" Zwischenzustand.
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
|
|
||||||
const onboardingSchema = z.object({
|
const onboardingSchema = z
|
||||||
kitaName: z
|
.object({
|
||||||
.string()
|
kitaName: z
|
||||||
.min(2, "Mindestens 2 Zeichen.")
|
.string()
|
||||||
.max(120, "Maximal 120 Zeichen.")
|
.trim()
|
||||||
.trim(),
|
.min(2, "Bitte mindestens 2 Zeichen angeben.")
|
||||||
notdienstModuleEnabled: z.preprocess(checkboxToBool, z.boolean()),
|
.max(120, "Maximal 120 Zeichen."),
|
||||||
terminModuleEnabled: z.preprocess(checkboxToBool, z.boolean()),
|
notdienstModuleEnabled: z.preprocess(checkboxToBool, z.boolean()),
|
||||||
adressbuchModuleEnabled: z.preprocess(checkboxToBool, z.boolean()),
|
terminModuleEnabled: z.preprocess(checkboxToBool, z.boolean()),
|
||||||
notdienstMinPerChildPerMonth: z.coerce
|
adressbuchModuleEnabled: z.preprocess(checkboxToBool, z.boolean()),
|
||||||
.number()
|
notdienstMinPerChildPerMonth: z.coerce
|
||||||
.int("Bitte ganze Zahl.")
|
.number()
|
||||||
.min(0, "Nicht negativ.")
|
.int("Bitte eine ganze Zahl angeben.")
|
||||||
.max(31, "Maximal 31 Tage pro Monat."),
|
.min(0, "Bitte einen Wert von 0 oder mehr angeben.")
|
||||||
});
|
.max(31, "Maximal 31 Tage pro Monat."),
|
||||||
|
})
|
||||||
|
.superRefine((data, ctx) => {
|
||||||
|
// Mindest-Verfügbarkeit nur relevant, wenn das Notdienst-Modul aktiv ist.
|
||||||
|
// Bei aktivem Modul muss mindestens 1 Tag eingetragen sein — 0 wäre
|
||||||
|
// fachlich sinnlos und würde den Planer leerlaufen lassen.
|
||||||
|
if (data.notdienstModuleEnabled && data.notdienstMinPerChildPerMonth < 1) {
|
||||||
|
ctx.addIssue({
|
||||||
|
path: ["notdienstMinPerChildPerMonth"],
|
||||||
|
code: "custom",
|
||||||
|
message:
|
||||||
|
"Bei aktivem Notdienst-Modul: mindestens 1 Tag pro Monat angeben.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
function checkboxToBool(value: unknown): boolean {
|
function checkboxToBool(value: unknown): boolean {
|
||||||
// HTML-Checkbox: "on" wenn aktiviert, sonst nicht im FormData.
|
// HTML-Checkbox: "on" wenn aktiviert, sonst nicht im FormData.
|
||||||
@@ -38,6 +52,17 @@ function checkboxToBool(value: unknown): boolean {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export type OnboardingState = {
|
export type OnboardingState = {
|
||||||
|
// Bumped after every action call so the client can key uncontrolled inputs
|
||||||
|
// and force a remount with the echoed values from a failed submit.
|
||||||
|
attempt: number;
|
||||||
|
// Echoed inputs so a failed submit doesn't wipe the form.
|
||||||
|
values?: {
|
||||||
|
kitaName?: string;
|
||||||
|
notdienstModuleEnabled?: boolean;
|
||||||
|
terminModuleEnabled?: boolean;
|
||||||
|
adressbuchModuleEnabled?: boolean;
|
||||||
|
notdienstMinPerChildPerMonth?: number;
|
||||||
|
};
|
||||||
errors?: {
|
errors?: {
|
||||||
kitaName?: string[];
|
kitaName?: string[];
|
||||||
notdienstMinPerChildPerMonth?: string[];
|
notdienstMinPerChildPerMonth?: string[];
|
||||||
@@ -45,10 +70,25 @@ export type OnboardingState = {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const initialOnboardingState: OnboardingState = { attempt: 0 };
|
||||||
|
|
||||||
|
function echoValues(formData: FormData): OnboardingState["values"] {
|
||||||
|
const min = formData.get("notdienstMinPerChildPerMonth");
|
||||||
|
return {
|
||||||
|
kitaName: String(formData.get("kitaName") ?? ""),
|
||||||
|
notdienstModuleEnabled: formData.get("notdienstModuleEnabled") === "on",
|
||||||
|
terminModuleEnabled: formData.get("terminModuleEnabled") === "on",
|
||||||
|
adressbuchModuleEnabled: formData.get("adressbuchModuleEnabled") === "on",
|
||||||
|
notdienstMinPerChildPerMonth:
|
||||||
|
min === null || min === "" ? undefined : Number(min),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export async function completeOnboardingAction(
|
export async function completeOnboardingAction(
|
||||||
_prev: OnboardingState,
|
prev: OnboardingState,
|
||||||
formData: FormData,
|
formData: FormData,
|
||||||
): Promise<OnboardingState> {
|
): Promise<OnboardingState> {
|
||||||
|
const attempt = prev.attempt + 1;
|
||||||
const session = await auth();
|
const session = await auth();
|
||||||
if (!session?.user) {
|
if (!session?.user) {
|
||||||
redirect("/login");
|
redirect("/login");
|
||||||
@@ -61,7 +101,11 @@ export async function completeOnboardingAction(
|
|||||||
|
|
||||||
const parsed = onboardingSchema.safeParse(Object.fromEntries(formData));
|
const parsed = onboardingSchema.safeParse(Object.fromEntries(formData));
|
||||||
if (!parsed.success) {
|
if (!parsed.success) {
|
||||||
return { errors: parsed.error.flatten().fieldErrors };
|
return {
|
||||||
|
attempt,
|
||||||
|
values: echoValues(formData),
|
||||||
|
errors: parsed.error.flatten().fieldErrors,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
const data = parsed.data;
|
const data = parsed.data;
|
||||||
|
|
||||||
@@ -99,6 +143,8 @@ export async function completeOnboardingAction(
|
|||||||
}
|
}
|
||||||
if (err instanceof Prisma.PrismaClientKnownRequestError) {
|
if (err instanceof Prisma.PrismaClientKnownRequestError) {
|
||||||
return {
|
return {
|
||||||
|
attempt,
|
||||||
|
values: echoValues(formData),
|
||||||
errors: { _form: ["Datenbankfehler — bitte erneut versuchen."] },
|
errors: { _form: ["Datenbankfehler — bitte erneut versuchen."] },
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,22 +1,31 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useActionState } from "react";
|
import { useActionState, useId } from "react";
|
||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Checkbox } from "@/components/ui/checkbox";
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
|
|
||||||
import { completeOnboardingAction, type OnboardingState } from "./actions";
|
import {
|
||||||
|
completeOnboardingAction,
|
||||||
const initialState: OnboardingState = {};
|
initialOnboardingState,
|
||||||
|
} from "./actions";
|
||||||
|
|
||||||
export function OnboardingForm() {
|
export function OnboardingForm() {
|
||||||
const [state, formAction, pending] = useActionState(
|
const [state, formAction, pending] = useActionState(
|
||||||
completeOnboardingAction,
|
completeOnboardingAction,
|
||||||
initialState,
|
initialOnboardingState,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Bumping the key on each attempt forces uncontrolled inputs to remount with
|
||||||
|
// the echoed defaultValue from the server — otherwise React's <form action>
|
||||||
|
// semantics would wipe them after a failed submit.
|
||||||
|
const attemptKey = state.attempt;
|
||||||
|
|
||||||
|
const kitaError = state.errors?.kitaName?.[0];
|
||||||
|
const minError = state.errors?.notdienstMinPerChildPerMonth?.[0];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form action={formAction} className="space-y-8">
|
<form action={formAction} className="space-y-8">
|
||||||
{/* ----- Schritt 1: Name ----- */}
|
{/* ----- Schritt 1: Name ----- */}
|
||||||
@@ -27,14 +36,24 @@ export function OnboardingForm() {
|
|||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<Label htmlFor="kitaName">Name des Elternvereins / der Kita</Label>
|
<Label htmlFor="kitaName">Name des Elternvereins / der Kita</Label>
|
||||||
<Input
|
<Input
|
||||||
|
key={`kitaName-${attemptKey}`}
|
||||||
id="kitaName"
|
id="kitaName"
|
||||||
name="kitaName"
|
name="kitaName"
|
||||||
required
|
required
|
||||||
placeholder="z.B. Waldameisen e.V."
|
placeholder="z.B. Waldameisen e.V."
|
||||||
aria-invalid={!!state.errors?.kitaName}
|
defaultValue={state.values?.kitaName ?? ""}
|
||||||
|
aria-invalid={!!kitaError}
|
||||||
|
aria-describedby={kitaError ? "kitaName-error" : undefined}
|
||||||
/>
|
/>
|
||||||
{state.errors?.kitaName?.[0] && (
|
{kitaError && (
|
||||||
<p className="text-xs text-destructive">{state.errors.kitaName[0]}</p>
|
<p
|
||||||
|
id="kitaName-error"
|
||||||
|
role="alert"
|
||||||
|
aria-live="polite"
|
||||||
|
className="text-xs text-destructive"
|
||||||
|
>
|
||||||
|
{kitaError}
|
||||||
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
@@ -45,22 +64,25 @@ export function OnboardingForm() {
|
|||||||
Schritt 2 · Module aktivieren
|
Schritt 2 · Module aktivieren
|
||||||
</legend>
|
</legend>
|
||||||
<ModuleCheckbox
|
<ModuleCheckbox
|
||||||
|
key={`notdienstModuleEnabled-${attemptKey}`}
|
||||||
name="notdienstModuleEnabled"
|
name="notdienstModuleEnabled"
|
||||||
label="Notdienst-Planung"
|
label="Notdienst-Planung"
|
||||||
description="Verfügbarkeiten erfassen, Plan generieren, bei Krankheitsausfall alarmieren."
|
description="Verfügbarkeiten erfassen, Plan generieren, bei Krankheitsausfall alarmieren."
|
||||||
defaultChecked
|
defaultChecked={state.values?.notdienstModuleEnabled ?? true}
|
||||||
/>
|
/>
|
||||||
<ModuleCheckbox
|
<ModuleCheckbox
|
||||||
|
key={`terminModuleEnabled-${attemptKey}`}
|
||||||
name="terminModuleEnabled"
|
name="terminModuleEnabled"
|
||||||
label="Terminkalender"
|
label="Terminkalender"
|
||||||
description="Kita-Feste, Schließtage und private Anfragen koordinieren."
|
description="Kita-Feste, Schließtage und private Anfragen koordinieren."
|
||||||
defaultChecked
|
defaultChecked={state.values?.terminModuleEnabled ?? true}
|
||||||
/>
|
/>
|
||||||
<ModuleCheckbox
|
<ModuleCheckbox
|
||||||
|
key={`adressbuchModuleEnabled-${attemptKey}`}
|
||||||
name="adressbuchModuleEnabled"
|
name="adressbuchModuleEnabled"
|
||||||
label="Eltern-Adressbuch"
|
label="Eltern-Adressbuch"
|
||||||
description="Eltern können sich auf Opt-In-Basis untereinander finden."
|
description="Eltern können sich auf Opt-In-Basis untereinander finden."
|
||||||
defaultChecked
|
defaultChecked={state.values?.adressbuchModuleEnabled ?? true}
|
||||||
/>
|
/>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
@@ -74,29 +96,49 @@ export function OnboardingForm() {
|
|||||||
Mindest-Verfügbarkeiten pro Kind und Monat
|
Mindest-Verfügbarkeiten pro Kind und Monat
|
||||||
</Label>
|
</Label>
|
||||||
<Input
|
<Input
|
||||||
|
key={`notdienstMinPerChildPerMonth-${attemptKey}`}
|
||||||
id="notdienstMinPerChildPerMonth"
|
id="notdienstMinPerChildPerMonth"
|
||||||
name="notdienstMinPerChildPerMonth"
|
name="notdienstMinPerChildPerMonth"
|
||||||
type="number"
|
type="number"
|
||||||
min={0}
|
min={0}
|
||||||
max={31}
|
max={31}
|
||||||
defaultValue={2}
|
defaultValue={state.values?.notdienstMinPerChildPerMonth ?? 2}
|
||||||
required
|
required
|
||||||
aria-invalid={!!state.errors?.notdienstMinPerChildPerMonth}
|
aria-invalid={!!minError}
|
||||||
|
aria-describedby={
|
||||||
|
minError
|
||||||
|
? "notdienstMinPerChildPerMonth-error"
|
||||||
|
: "notdienstMinPerChildPerMonth-helper"
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<p className="text-xs text-muted-foreground">
|
{!minError && (
|
||||||
Wie viele Tage müssen Eltern pro Monat als verfügbar markieren?
|
<p
|
||||||
Diesen Wert kannst du später jederzeit ändern.
|
id="notdienstMinPerChildPerMonth-helper"
|
||||||
</p>
|
className="text-xs text-muted-foreground"
|
||||||
{state.errors?.notdienstMinPerChildPerMonth?.[0] && (
|
>
|
||||||
<p className="text-xs text-destructive">
|
Wie viele Tage müssen Eltern pro Monat als verfügbar markieren?
|
||||||
{state.errors.notdienstMinPerChildPerMonth[0]}
|
Diesen Wert kannst du später jederzeit ändern.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{minError && (
|
||||||
|
<p
|
||||||
|
id="notdienstMinPerChildPerMonth-error"
|
||||||
|
role="alert"
|
||||||
|
aria-live="polite"
|
||||||
|
className="text-xs text-destructive"
|
||||||
|
>
|
||||||
|
{minError}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
{state.errors?._form?.[0] && (
|
{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]}
|
{state.errors._form[0]}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
@@ -119,12 +161,34 @@ function ModuleCheckbox({
|
|||||||
description: string;
|
description: string;
|
||||||
defaultChecked?: boolean;
|
defaultChecked?: boolean;
|
||||||
}) {
|
}) {
|
||||||
|
const id = useId();
|
||||||
|
const titleId = `${id}-title`;
|
||||||
|
const descId = `${id}-desc`;
|
||||||
return (
|
return (
|
||||||
<label className="flex items-start gap-3 rounded-md border p-4 transition-colors hover:bg-muted/40">
|
// The wrapping <label htmlFor> keeps the whole card clickable to toggle
|
||||||
<Checkbox name={name} defaultChecked={defaultChecked} className="mt-0.5" />
|
// the checkbox. aria-labelledby narrows the accessible name to just the
|
||||||
|
// module title, with the description exposed via aria-describedby so
|
||||||
|
// screen readers can present it as secondary info rather than as part of
|
||||||
|
// the primary label.
|
||||||
|
<label
|
||||||
|
htmlFor={id}
|
||||||
|
className="flex cursor-pointer items-start gap-3 rounded-md border p-4 transition-colors hover:bg-muted/40"
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id={id}
|
||||||
|
name={name}
|
||||||
|
defaultChecked={defaultChecked}
|
||||||
|
aria-labelledby={titleId}
|
||||||
|
aria-describedby={descId}
|
||||||
|
className="mt-0.5"
|
||||||
|
/>
|
||||||
<div className="grid gap-1 leading-none">
|
<div className="grid gap-1 leading-none">
|
||||||
<span className="text-sm font-medium">{label}</span>
|
<span id={titleId} className="text-sm font-medium">
|
||||||
<span className="text-xs text-muted-foreground">{description}</span>
|
{label}
|
||||||
|
</span>
|
||||||
|
<span id={descId} className="text-xs text-muted-foreground">
|
||||||
|
{description}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -30,7 +30,9 @@ export default async function OnboardingPage() {
|
|||||||
<div className="flex min-h-screen items-center justify-center bg-muted/30 px-4 py-12">
|
<div className="flex min-h-screen items-center justify-center bg-muted/30 px-4 py-12">
|
||||||
<Card className="w-full max-w-2xl">
|
<Card className="w-full max-w-2xl">
|
||||||
<CardHeader className="space-y-2">
|
<CardHeader className="space-y-2">
|
||||||
<CardTitle>Willkommen, {session.user.name?.split(" ")[0] ?? "Gründer:in"}!</CardTitle>
|
<CardTitle as="h1">
|
||||||
|
Willkommen, {session.user.name?.split(" ")[0] ?? "Gründer:in"}!
|
||||||
|
</CardTitle>
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
Lass uns deine Kita in 3 kurzen Schritten einrichten. Du kannst alle
|
Lass uns deine Kita in 3 kurzen Schritten einrichten. Du kannst alle
|
||||||
Einstellungen später noch anpassen.
|
Einstellungen später noch anpassen.
|
||||||
|
|||||||
+4
-10
@@ -1,7 +1,6 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { redirect } from "next/navigation";
|
|
||||||
import {
|
import {
|
||||||
ArrowRight,
|
ArrowRight,
|
||||||
CheckCircle2,
|
CheckCircle2,
|
||||||
@@ -23,8 +22,6 @@ import {
|
|||||||
UsersRound,
|
UsersRound,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
|
||||||
import { auth } from "@/auth";
|
|
||||||
import { getPostLoginRedirect } from "@/lib/post-login-redirect";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
@@ -41,6 +38,9 @@ export const metadata: Metadata = {
|
|||||||
title: "Kita-Planer für Elterninitiativen und Kita-Vereine",
|
title: "Kita-Planer für Elterninitiativen und Kita-Vereine",
|
||||||
description:
|
description:
|
||||||
"Die einfache Plattform für Elterninitiativen, freie Kitas und Kita-Vereine: organisiert Dienste, Termine, Krankmeldungen und offizielle Kommunikation an einem Ort.",
|
"Die einfache Plattform für Elterninitiativen, freie Kitas und Kita-Vereine: organisiert Dienste, Termine, Krankmeldungen und offizielle Kommunikation an einem Ort.",
|
||||||
|
alternates: {
|
||||||
|
canonical: "/",
|
||||||
|
},
|
||||||
openGraph: {
|
openGraph: {
|
||||||
title: "Kita-Planer für Elterninitiativen und Kita-Vereine",
|
title: "Kita-Planer für Elterninitiativen und Kita-Vereine",
|
||||||
description:
|
description:
|
||||||
@@ -172,13 +172,7 @@ const onboardingSteps = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// Eingeloggte User von der Landingpage direkt weiterleiten.
|
export default function LandingPage() {
|
||||||
export default async function LandingPage() {
|
|
||||||
const session = await auth();
|
|
||||||
if (session?.user?.id) {
|
|
||||||
redirect(getPostLoginRedirect(session.user));
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-[#f8faf8] text-slate-950">
|
<div className="min-h-screen bg-[#f8faf8] text-slate-950">
|
||||||
<header className="absolute left-0 right-0 top-0 z-20">
|
<header className="absolute left-0 right-0 top-0 z-20">
|
||||||
|
|||||||
@@ -32,6 +32,16 @@ const registerSchema = z.object({
|
|||||||
const PRIVACY_POLICY_VERSION = "2026-05-01";
|
const PRIVACY_POLICY_VERSION = "2026-05-01";
|
||||||
|
|
||||||
export type RegisterState = {
|
export type RegisterState = {
|
||||||
|
// Bumped after every action call so the client can key uncontrolled inputs
|
||||||
|
// and force a remount with the echoed values from a failed submit.
|
||||||
|
attempt: number;
|
||||||
|
// Echoed inputs (sans password) so failed submits don't wipe the form.
|
||||||
|
values?: {
|
||||||
|
firstName?: string;
|
||||||
|
lastName?: string;
|
||||||
|
email?: string;
|
||||||
|
acceptPrivacyPolicy?: boolean;
|
||||||
|
};
|
||||||
errors?: {
|
errors?: {
|
||||||
email?: string[];
|
email?: string[];
|
||||||
password?: string[];
|
password?: string[];
|
||||||
@@ -42,13 +52,29 @@ export type RegisterState = {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const initialRegisterState: RegisterState = { attempt: 0 };
|
||||||
|
|
||||||
|
function echoValues(formData: FormData): RegisterState["values"] {
|
||||||
|
return {
|
||||||
|
firstName: String(formData.get("firstName") ?? ""),
|
||||||
|
lastName: String(formData.get("lastName") ?? ""),
|
||||||
|
email: String(formData.get("email") ?? ""),
|
||||||
|
acceptPrivacyPolicy: formData.get("acceptPrivacyPolicy") === "on",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export async function registerAction(
|
export async function registerAction(
|
||||||
_prevState: RegisterState,
|
prevState: RegisterState,
|
||||||
formData: FormData,
|
formData: FormData,
|
||||||
): Promise<RegisterState> {
|
): Promise<RegisterState> {
|
||||||
|
const attempt = prevState.attempt + 1;
|
||||||
const parsed = registerSchema.safeParse(Object.fromEntries(formData));
|
const parsed = registerSchema.safeParse(Object.fromEntries(formData));
|
||||||
if (!parsed.success) {
|
if (!parsed.success) {
|
||||||
return { errors: parsed.error.flatten().fieldErrors };
|
return {
|
||||||
|
attempt,
|
||||||
|
values: echoValues(formData),
|
||||||
|
errors: parsed.error.flatten().fieldErrors,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
const { email, password, firstName, lastName } = parsed.data;
|
const { email, password, firstName, lastName } = parsed.data;
|
||||||
|
|
||||||
@@ -77,6 +103,8 @@ export async function registerAction(
|
|||||||
err.code === "P2002"
|
err.code === "P2002"
|
||||||
) {
|
) {
|
||||||
return {
|
return {
|
||||||
|
attempt,
|
||||||
|
values: echoValues(formData),
|
||||||
errors: {
|
errors: {
|
||||||
email: ["Mit dieser E-Mail-Adresse existiert bereits ein Account."],
|
email: ["Mit dieser E-Mail-Adresse existiert bereits ein Account."],
|
||||||
},
|
},
|
||||||
@@ -93,5 +121,5 @@ export async function registerAction(
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Unreachable – signIn redirected.
|
// Unreachable – signIn redirected.
|
||||||
return {};
|
return { attempt };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,45 +7,58 @@ import { Checkbox } from "@/components/ui/checkbox";
|
|||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
|
|
||||||
import { registerAction, type RegisterState } from "./actions";
|
import { initialRegisterState, registerAction } from "./actions";
|
||||||
|
|
||||||
const initialState: RegisterState = {};
|
|
||||||
|
|
||||||
export function RegisterForm() {
|
export function RegisterForm() {
|
||||||
const [state, formAction, pending] = useActionState(registerAction, initialState);
|
const [state, formAction, pending] = useActionState(
|
||||||
|
registerAction,
|
||||||
|
initialRegisterState,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Bumping the key on each attempt forces uncontrolled inputs to remount with
|
||||||
|
// the echoed defaultValue from the server — otherwise React's <form action>
|
||||||
|
// semantics would wipe them after a failed submit.
|
||||||
|
const attemptKey = state.attempt;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form action={formAction} className="space-y-4">
|
<form action={formAction} className="space-y-4">
|
||||||
<div className="grid gap-4 sm:grid-cols-2">
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
<FormField
|
<FormField
|
||||||
|
key={`firstName-${attemptKey}`}
|
||||||
id="firstName"
|
id="firstName"
|
||||||
name="firstName"
|
name="firstName"
|
||||||
label="Vorname"
|
label="Vorname"
|
||||||
autoComplete="given-name"
|
autoComplete="given-name"
|
||||||
required
|
required
|
||||||
|
defaultValue={state.values?.firstName ?? ""}
|
||||||
error={state.errors?.firstName?.[0]}
|
error={state.errors?.firstName?.[0]}
|
||||||
/>
|
/>
|
||||||
<FormField
|
<FormField
|
||||||
|
key={`lastName-${attemptKey}`}
|
||||||
id="lastName"
|
id="lastName"
|
||||||
name="lastName"
|
name="lastName"
|
||||||
label="Nachname"
|
label="Nachname"
|
||||||
autoComplete="family-name"
|
autoComplete="family-name"
|
||||||
required
|
required
|
||||||
|
defaultValue={state.values?.lastName ?? ""}
|
||||||
error={state.errors?.lastName?.[0]}
|
error={state.errors?.lastName?.[0]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FormField
|
<FormField
|
||||||
|
key={`email-${attemptKey}`}
|
||||||
id="email"
|
id="email"
|
||||||
name="email"
|
name="email"
|
||||||
type="email"
|
type="email"
|
||||||
label="E-Mail"
|
label="E-Mail"
|
||||||
autoComplete="email"
|
autoComplete="email"
|
||||||
required
|
required
|
||||||
|
defaultValue={state.values?.email ?? ""}
|
||||||
error={state.errors?.email?.[0]}
|
error={state.errors?.email?.[0]}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<FormField
|
<FormField
|
||||||
|
key={`password-${attemptKey}`}
|
||||||
id="password"
|
id="password"
|
||||||
name="password"
|
name="password"
|
||||||
type="password"
|
type="password"
|
||||||
@@ -57,23 +70,51 @@ export function RegisterForm() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="flex items-start gap-3 pt-2">
|
<div className="flex items-start gap-3 pt-2">
|
||||||
<Checkbox id="acceptPrivacyPolicy" name="acceptPrivacyPolicy" required />
|
<Checkbox
|
||||||
|
key={`acceptPrivacyPolicy-${attemptKey}`}
|
||||||
|
id="acceptPrivacyPolicy"
|
||||||
|
name="acceptPrivacyPolicy"
|
||||||
|
required
|
||||||
|
defaultChecked={state.values?.acceptPrivacyPolicy === true}
|
||||||
|
aria-invalid={!!state.errors?.acceptPrivacyPolicy?.[0]}
|
||||||
|
aria-describedby={
|
||||||
|
state.errors?.acceptPrivacyPolicy?.[0]
|
||||||
|
? "acceptPrivacyPolicy-error"
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
<div className="grid gap-1 leading-none">
|
<div className="grid gap-1 leading-none">
|
||||||
<Label htmlFor="acceptPrivacyPolicy" className="text-sm font-normal">
|
<Label htmlFor="acceptPrivacyPolicy" className="text-sm font-normal">
|
||||||
Ich habe die{" "}
|
Ich habe die{" "}
|
||||||
<a href="/datenschutz" className="underline" target="_blank" rel="noreferrer">
|
<a
|
||||||
|
href="/datenschutz"
|
||||||
|
className="underline"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
Datenschutzerklärung
|
Datenschutzerklärung
|
||||||
</a>{" "}
|
</a>{" "}
|
||||||
gelesen und akzeptiere sie.
|
gelesen und akzeptiere sie.
|
||||||
</Label>
|
</Label>
|
||||||
{state.errors?.acceptPrivacyPolicy?.[0] && (
|
{state.errors?.acceptPrivacyPolicy?.[0] && (
|
||||||
<p className="text-xs text-destructive">{state.errors.acceptPrivacyPolicy[0]}</p>
|
<p
|
||||||
|
id="acceptPrivacyPolicy-error"
|
||||||
|
role="alert"
|
||||||
|
aria-live="polite"
|
||||||
|
className="text-xs text-destructive"
|
||||||
|
>
|
||||||
|
{state.errors.acceptPrivacyPolicy[0]}
|
||||||
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{state.errors?._form?.[0] && (
|
{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]}
|
{state.errors._form[0]}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
@@ -93,6 +134,7 @@ function FormField({
|
|||||||
required,
|
required,
|
||||||
autoComplete,
|
autoComplete,
|
||||||
helperText,
|
helperText,
|
||||||
|
defaultValue,
|
||||||
error,
|
error,
|
||||||
}: {
|
}: {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -102,8 +144,11 @@ function FormField({
|
|||||||
required?: boolean;
|
required?: boolean;
|
||||||
autoComplete?: string;
|
autoComplete?: string;
|
||||||
helperText?: string;
|
helperText?: string;
|
||||||
|
defaultValue?: string;
|
||||||
error?: string;
|
error?: string;
|
||||||
}) {
|
}) {
|
||||||
|
const errorId = error ? `${id}-error` : undefined;
|
||||||
|
const helperId = !error && helperText ? `${id}-helper` : undefined;
|
||||||
return (
|
return (
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<Label htmlFor={id}>{label}</Label>
|
<Label htmlFor={id}>{label}</Label>
|
||||||
@@ -113,12 +158,23 @@ function FormField({
|
|||||||
type={type}
|
type={type}
|
||||||
required={required}
|
required={required}
|
||||||
autoComplete={autoComplete}
|
autoComplete={autoComplete}
|
||||||
|
defaultValue={defaultValue}
|
||||||
aria-invalid={!!error}
|
aria-invalid={!!error}
|
||||||
|
aria-describedby={errorId ?? helperId}
|
||||||
/>
|
/>
|
||||||
{error ? (
|
{error ? (
|
||||||
<p className="text-xs text-destructive">{error}</p>
|
<p
|
||||||
|
id={errorId}
|
||||||
|
role="alert"
|
||||||
|
aria-live="polite"
|
||||||
|
className="text-xs text-destructive"
|
||||||
|
>
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
) : helperText ? (
|
) : helperText ? (
|
||||||
<p className="text-xs text-muted-foreground">{helperText}</p>
|
<p id={helperId} className="text-xs text-muted-foreground">
|
||||||
|
{helperText}
|
||||||
|
</p>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
|
|||||||
CardHeader.displayName = "CardHeader";
|
CardHeader.displayName = "CardHeader";
|
||||||
|
|
||||||
type CardTitleProps = React.HTMLAttributes<HTMLElement> & {
|
type CardTitleProps = React.HTMLAttributes<HTMLElement> & {
|
||||||
as?: "div" | "h2" | "h3" | "h4" | "h5" | "h6";
|
as?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
||||||
};
|
};
|
||||||
|
|
||||||
const CardTitle = React.forwardRef<HTMLElement, CardTitleProps>(
|
const CardTitle = React.forwardRef<HTMLElement, CardTitleProps>(
|
||||||
|
|||||||
@@ -11,6 +11,8 @@ import {
|
|||||||
Text,
|
Text,
|
||||||
} from "@react-email/components";
|
} from "@react-email/components";
|
||||||
|
|
||||||
|
import { fontStack } from "./_styles";
|
||||||
|
|
||||||
type AlertEmailProps = {
|
type AlertEmailProps = {
|
||||||
date: string;
|
date: string;
|
||||||
childName: string;
|
childName: string;
|
||||||
@@ -25,26 +27,26 @@ export function AlertEmail({
|
|||||||
return (
|
return (
|
||||||
<Html lang="de">
|
<Html lang="de">
|
||||||
<Head />
|
<Head />
|
||||||
<Preview>Dringender Notdienst-Alarm fuer {date}</Preview>
|
<Preview>Dringender Notdienst-Alarm für {date}</Preview>
|
||||||
<Body style={styles.body}>
|
<Body style={styles.body}>
|
||||||
<Container style={styles.container}>
|
<Container style={styles.container}>
|
||||||
<Section style={styles.alertBar}>
|
<Section style={styles.alertBar}>
|
||||||
<Text style={styles.kicker}>Dringend</Text>
|
<Text style={styles.kicker}>Dringend</Text>
|
||||||
<Heading style={styles.heading}>Notdienst heute bestaetigen</Heading>
|
<Heading style={styles.heading}>Notdienst heute bestätigen</Heading>
|
||||||
<Text style={styles.lead}>
|
<Text style={styles.lead}>
|
||||||
Eine Fachkraft ist ausgefallen. Fuer {childName} ist ein
|
Eine Fachkraft ist ausgefallen. Für {childName} ist ein
|
||||||
Notdienst-Einsatz am {date} hinterlegt.
|
Notdienst-Einsatz am {date} hinterlegt.
|
||||||
</Text>
|
</Text>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
<Section style={styles.card}>
|
<Section style={styles.card}>
|
||||||
<Text style={styles.text}>
|
<Text style={styles.text}>
|
||||||
Bitte bestaetige schnell, ob du den Notdienst uebernehmen kannst,
|
Bitte bestätige schnell, ob du den Notdienst übernehmen kannst,
|
||||||
damit die Kita den Tag verlaesslich planen kann.
|
damit die Kita den Tag verlässlich planen kann.
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<Button href={confirmLink} style={styles.button}>
|
<Button href={confirmLink} style={styles.button}>
|
||||||
Notdienst bestaetigen
|
Notdienst bestätigen
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Section style={styles.detailBox}>
|
<Section style={styles.detailBox}>
|
||||||
@@ -75,8 +77,7 @@ const styles = {
|
|||||||
body: {
|
body: {
|
||||||
margin: 0,
|
margin: 0,
|
||||||
backgroundColor: "#fff7ed",
|
backgroundColor: "#fff7ed",
|
||||||
fontFamily:
|
fontFamily: fontStack,
|
||||||
'-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
|
||||||
color: "#30170f",
|
color: "#30170f",
|
||||||
},
|
},
|
||||||
container: {
|
container: {
|
||||||
@@ -108,12 +109,14 @@ const styles = {
|
|||||||
fontSize: "30px",
|
fontSize: "30px",
|
||||||
lineHeight: "1.16",
|
lineHeight: "1.16",
|
||||||
fontWeight: 850,
|
fontWeight: 850,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
lead: {
|
lead: {
|
||||||
margin: 0,
|
margin: 0,
|
||||||
color: "#ffe4e6",
|
color: "#ffe4e6",
|
||||||
fontSize: "16px",
|
fontSize: "16px",
|
||||||
lineHeight: "1.55",
|
lineHeight: "1.55",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
card: {
|
card: {
|
||||||
padding: "28px",
|
padding: "28px",
|
||||||
@@ -127,6 +130,7 @@ const styles = {
|
|||||||
color: "#44251a",
|
color: "#44251a",
|
||||||
fontSize: "16px",
|
fontSize: "16px",
|
||||||
lineHeight: "1.65",
|
lineHeight: "1.65",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
button: {
|
button: {
|
||||||
display: "inline-block",
|
display: "inline-block",
|
||||||
@@ -137,6 +141,7 @@ const styles = {
|
|||||||
fontSize: "15px",
|
fontSize: "15px",
|
||||||
fontWeight: 800,
|
fontWeight: 800,
|
||||||
textDecoration: "none",
|
textDecoration: "none",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
detailBox: {
|
detailBox: {
|
||||||
margin: "28px 0 0",
|
margin: "28px 0 0",
|
||||||
@@ -182,5 +187,6 @@ const styles = {
|
|||||||
fontSize: "12px",
|
fontSize: "12px",
|
||||||
lineHeight: "1.5",
|
lineHeight: "1.5",
|
||||||
textAlign: "center" as const,
|
textAlign: "center" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ import {
|
|||||||
contactRequestTypeLabels,
|
contactRequestTypeLabels,
|
||||||
type ContactRequestInput,
|
type ContactRequestInput,
|
||||||
} from "@/lib/contact-schema";
|
} from "@/lib/contact-schema";
|
||||||
|
import { fontStack } from "./_styles";
|
||||||
|
|
||||||
type ContactConfirmationEmailProps = ContactRequestInput;
|
type ContactConfirmationEmailProps = ContactRequestInput;
|
||||||
|
|
||||||
@@ -69,14 +70,14 @@ function InfoRow({ label, value }: { label: string; value: string }) {
|
|||||||
const body = {
|
const body = {
|
||||||
margin: 0,
|
margin: 0,
|
||||||
backgroundColor: "#f8faf8",
|
backgroundColor: "#f8faf8",
|
||||||
fontFamily:
|
fontFamily: fontStack,
|
||||||
'-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const container = {
|
const container = {
|
||||||
margin: "0 auto",
|
margin: "0 auto",
|
||||||
padding: "32px 24px",
|
padding: "32px 24px",
|
||||||
maxWidth: "620px",
|
maxWidth: "620px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const heading = {
|
const heading = {
|
||||||
@@ -84,6 +85,7 @@ const heading = {
|
|||||||
color: "#0f172a",
|
color: "#0f172a",
|
||||||
fontSize: "28px",
|
fontSize: "28px",
|
||||||
lineHeight: "34px",
|
lineHeight: "34px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const intro = {
|
const intro = {
|
||||||
@@ -91,6 +93,7 @@ const intro = {
|
|||||||
color: "#475569",
|
color: "#475569",
|
||||||
fontSize: "15px",
|
fontSize: "15px",
|
||||||
lineHeight: "24px",
|
lineHeight: "24px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const summaryBox = {
|
const summaryBox = {
|
||||||
@@ -98,6 +101,7 @@ const summaryBox = {
|
|||||||
borderRadius: "10px",
|
borderRadius: "10px",
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#ffffff",
|
||||||
padding: "18px",
|
padding: "18px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const label = {
|
const label = {
|
||||||
@@ -107,6 +111,7 @@ const label = {
|
|||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
letterSpacing: "0.04em",
|
letterSpacing: "0.04em",
|
||||||
textTransform: "uppercase" as const,
|
textTransform: "uppercase" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const row = {
|
const row = {
|
||||||
@@ -114,6 +119,7 @@ const row = {
|
|||||||
color: "#0f172a",
|
color: "#0f172a",
|
||||||
fontSize: "15px",
|
fontSize: "15px",
|
||||||
lineHeight: "22px",
|
lineHeight: "22px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const messageLabel = {
|
const messageLabel = {
|
||||||
@@ -123,6 +129,7 @@ const messageLabel = {
|
|||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
letterSpacing: "0.04em",
|
letterSpacing: "0.04em",
|
||||||
textTransform: "uppercase" as const,
|
textTransform: "uppercase" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const messageText = {
|
const messageText = {
|
||||||
@@ -131,6 +138,7 @@ const messageText = {
|
|||||||
fontSize: "15px",
|
fontSize: "15px",
|
||||||
lineHeight: "24px",
|
lineHeight: "24px",
|
||||||
whiteSpace: "pre-wrap" as const,
|
whiteSpace: "pre-wrap" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const footer = {
|
const footer = {
|
||||||
@@ -138,4 +146,5 @@ const footer = {
|
|||||||
color: "#64748b",
|
color: "#64748b",
|
||||||
fontSize: "13px",
|
fontSize: "13px",
|
||||||
lineHeight: "20px",
|
lineHeight: "20px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ import {
|
|||||||
contactRequestTypeLabels,
|
contactRequestTypeLabels,
|
||||||
type ContactRequestInput,
|
type ContactRequestInput,
|
||||||
} from "@/lib/contact-schema";
|
} from "@/lib/contact-schema";
|
||||||
|
import { fontStack } from "./_styles";
|
||||||
|
|
||||||
type ContactRequestEmailProps = ContactRequestInput;
|
type ContactRequestEmailProps = ContactRequestInput;
|
||||||
|
|
||||||
@@ -72,14 +73,14 @@ function InfoRow({ label, value }: { label: string; value: string }) {
|
|||||||
const body = {
|
const body = {
|
||||||
margin: 0,
|
margin: 0,
|
||||||
backgroundColor: "#f8faf8",
|
backgroundColor: "#f8faf8",
|
||||||
fontFamily:
|
fontFamily: fontStack,
|
||||||
'-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const container = {
|
const container = {
|
||||||
margin: "0 auto",
|
margin: "0 auto",
|
||||||
padding: "32px 24px",
|
padding: "32px 24px",
|
||||||
maxWidth: "620px",
|
maxWidth: "620px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const heading = {
|
const heading = {
|
||||||
@@ -87,6 +88,7 @@ const heading = {
|
|||||||
color: "#0f172a",
|
color: "#0f172a",
|
||||||
fontSize: "28px",
|
fontSize: "28px",
|
||||||
lineHeight: "34px",
|
lineHeight: "34px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const intro = {
|
const intro = {
|
||||||
@@ -94,6 +96,7 @@ const intro = {
|
|||||||
color: "#475569",
|
color: "#475569",
|
||||||
fontSize: "15px",
|
fontSize: "15px",
|
||||||
lineHeight: "24px",
|
lineHeight: "24px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const details = {
|
const details = {
|
||||||
@@ -101,6 +104,7 @@ const details = {
|
|||||||
borderRadius: "10px",
|
borderRadius: "10px",
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#ffffff",
|
||||||
padding: "18px",
|
padding: "18px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const row = {
|
const row = {
|
||||||
@@ -108,6 +112,7 @@ const row = {
|
|||||||
color: "#0f172a",
|
color: "#0f172a",
|
||||||
fontSize: "15px",
|
fontSize: "15px",
|
||||||
lineHeight: "22px",
|
lineHeight: "22px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const messageBox = {
|
const messageBox = {
|
||||||
@@ -116,6 +121,7 @@ const messageBox = {
|
|||||||
borderRadius: "10px",
|
borderRadius: "10px",
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#ffffff",
|
||||||
padding: "18px",
|
padding: "18px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const label = {
|
const label = {
|
||||||
@@ -125,6 +131,7 @@ const label = {
|
|||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
letterSpacing: "0.04em",
|
letterSpacing: "0.04em",
|
||||||
textTransform: "uppercase" as const,
|
textTransform: "uppercase" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const messageText = {
|
const messageText = {
|
||||||
@@ -133,6 +140,7 @@ const messageText = {
|
|||||||
fontSize: "15px",
|
fontSize: "15px",
|
||||||
lineHeight: "24px",
|
lineHeight: "24px",
|
||||||
whiteSpace: "pre-wrap" as const,
|
whiteSpace: "pre-wrap" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|
||||||
const footer = {
|
const footer = {
|
||||||
@@ -140,4 +148,5 @@ const footer = {
|
|||||||
color: "#64748b",
|
color: "#64748b",
|
||||||
fontSize: "13px",
|
fontSize: "13px",
|
||||||
lineHeight: "20px",
|
lineHeight: "20px",
|
||||||
|
fontFamily: fontStack,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -10,6 +10,8 @@ import {
|
|||||||
Text,
|
Text,
|
||||||
} from "@react-email/components";
|
} from "@react-email/components";
|
||||||
|
|
||||||
|
import { fontStack } from "./_styles";
|
||||||
|
|
||||||
type DutyReminderEmailProps = {
|
type DutyReminderEmailProps = {
|
||||||
familyName: string;
|
familyName: string;
|
||||||
dutyName: string;
|
dutyName: string;
|
||||||
@@ -25,15 +27,15 @@ export function DutyReminderEmail({
|
|||||||
<Html lang="de">
|
<Html lang="de">
|
||||||
<Head />
|
<Head />
|
||||||
<Preview>
|
<Preview>
|
||||||
Erinnerung: {familyName} ist diese Woche fuer {dutyName} eingeteilt.
|
Erinnerung: {familyName} ist diese Woche für {dutyName} eingeteilt.
|
||||||
</Preview>
|
</Preview>
|
||||||
<Body style={styles.body}>
|
<Body style={styles.body}>
|
||||||
<Container style={styles.container}>
|
<Container style={styles.container}>
|
||||||
<Section style={styles.header}>
|
<Section style={styles.header}>
|
||||||
<Text style={styles.kicker}>Elterndienst</Text>
|
<Text style={styles.kicker}>Elterndienst</Text>
|
||||||
<Heading style={styles.heading}>Danke fuer eure Hilfe</Heading>
|
<Heading style={styles.heading}>Danke für eure Hilfe</Heading>
|
||||||
<Text style={styles.lead}>
|
<Text style={styles.lead}>
|
||||||
Hallo {familyName}, diese Woche seid ihr fuer den Dienst{" "}
|
Hallo {familyName}, diese Woche seid ihr für den Dienst{" "}
|
||||||
<strong>{dutyName}</strong> eingeteilt.
|
<strong>{dutyName}</strong> eingeteilt.
|
||||||
</Text>
|
</Text>
|
||||||
</Section>
|
</Section>
|
||||||
@@ -43,7 +45,7 @@ export function DutyReminderEmail({
|
|||||||
Zeitraum: <strong>{weekLabel}</strong>
|
Zeitraum: <strong>{weekLabel}</strong>
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={styles.text}>
|
<Text style={styles.text}>
|
||||||
Danke, dass ihr mithelft, den Kita-Alltag verlaesslich zu
|
Danke, dass ihr mithelft, den Kita-Alltag verlässlich zu
|
||||||
organisieren.
|
organisieren.
|
||||||
</Text>
|
</Text>
|
||||||
</Section>
|
</Section>
|
||||||
@@ -62,7 +64,7 @@ const styles = {
|
|||||||
body: {
|
body: {
|
||||||
margin: 0,
|
margin: 0,
|
||||||
backgroundColor: "#f7f5ef",
|
backgroundColor: "#f7f5ef",
|
||||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
fontFamily: fontStack,
|
||||||
color: "#24231f",
|
color: "#24231f",
|
||||||
},
|
},
|
||||||
container: {
|
container: {
|
||||||
@@ -70,11 +72,13 @@ const styles = {
|
|||||||
maxWidth: "600px",
|
maxWidth: "600px",
|
||||||
margin: "0 auto",
|
margin: "0 auto",
|
||||||
padding: "32px 20px",
|
padding: "32px 20px",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
padding: "28px",
|
padding: "28px",
|
||||||
backgroundColor: "#27423a",
|
backgroundColor: "#27423a",
|
||||||
borderRadius: "8px 8px 0 0",
|
borderRadius: "8px 8px 0 0",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
kicker: {
|
kicker: {
|
||||||
margin: "0 0 20px",
|
margin: "0 0 20px",
|
||||||
@@ -83,6 +87,7 @@ const styles = {
|
|||||||
fontWeight: 800,
|
fontWeight: 800,
|
||||||
letterSpacing: "0.08em",
|
letterSpacing: "0.08em",
|
||||||
textTransform: "uppercase" as const,
|
textTransform: "uppercase" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
heading: {
|
heading: {
|
||||||
margin: "0 0 12px",
|
margin: "0 0 12px",
|
||||||
@@ -90,12 +95,14 @@ const styles = {
|
|||||||
fontSize: "30px",
|
fontSize: "30px",
|
||||||
lineHeight: "1.18",
|
lineHeight: "1.18",
|
||||||
fontWeight: 800,
|
fontWeight: 800,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
lead: {
|
lead: {
|
||||||
margin: 0,
|
margin: 0,
|
||||||
color: "#eef4eb",
|
color: "#eef4eb",
|
||||||
fontSize: "16px",
|
fontSize: "16px",
|
||||||
lineHeight: "1.55",
|
lineHeight: "1.55",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
card: {
|
card: {
|
||||||
padding: "28px",
|
padding: "28px",
|
||||||
@@ -103,12 +110,14 @@ const styles = {
|
|||||||
border: "1px solid #dde3d7",
|
border: "1px solid #dde3d7",
|
||||||
borderTop: "0",
|
borderTop: "0",
|
||||||
borderRadius: "0 0 8px 8px",
|
borderRadius: "0 0 8px 8px",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
margin: "0 0 16px",
|
margin: "0 0 16px",
|
||||||
color: "#3d423b",
|
color: "#3d423b",
|
||||||
fontSize: "16px",
|
fontSize: "16px",
|
||||||
lineHeight: "1.65",
|
lineHeight: "1.65",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
hr: {
|
hr: {
|
||||||
margin: "24px 0",
|
margin: "24px 0",
|
||||||
@@ -120,5 +129,6 @@ const styles = {
|
|||||||
fontSize: "12px",
|
fontSize: "12px",
|
||||||
lineHeight: "1.5",
|
lineHeight: "1.5",
|
||||||
textAlign: "center" as const,
|
textAlign: "center" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
+30
-23
@@ -11,6 +11,8 @@ import {
|
|||||||
Text,
|
Text,
|
||||||
} from "@react-email/components";
|
} from "@react-email/components";
|
||||||
|
|
||||||
|
import { baseBodyStyle, colors, fontStack } from "./_styles";
|
||||||
|
|
||||||
type InviteEmailProps = {
|
type InviteEmailProps = {
|
||||||
parentName: string;
|
parentName: string;
|
||||||
kitaName: string;
|
kitaName: string;
|
||||||
@@ -25,7 +27,7 @@ export function InviteEmail({
|
|||||||
return (
|
return (
|
||||||
<Html lang="de">
|
<Html lang="de">
|
||||||
<Head />
|
<Head />
|
||||||
<Preview>Aktiviere deinen Kita-Planer Account fuer {kitaName}</Preview>
|
<Preview>Aktiviere deinen Kita-Planer Account für {kitaName}</Preview>
|
||||||
<Body style={styles.body}>
|
<Body style={styles.body}>
|
||||||
<Container style={styles.container}>
|
<Container style={styles.container}>
|
||||||
<Section style={styles.header}>
|
<Section style={styles.header}>
|
||||||
@@ -38,7 +40,7 @@ export function InviteEmail({
|
|||||||
|
|
||||||
<Section style={styles.card}>
|
<Section style={styles.card}>
|
||||||
<Text style={styles.text}>
|
<Text style={styles.text}>
|
||||||
Ueber den folgenden Link kannst du dein Passwort setzen und deinen
|
Über den folgenden Link kannst du dein Passwort setzen und deinen
|
||||||
Account aktivieren. Danach hast du Zugriff auf die Kita-Planung,
|
Account aktivieren. Danach hast du Zugriff auf die Kita-Planung,
|
||||||
Termine und deine Familiendaten.
|
Termine und deine Familiendaten.
|
||||||
</Text>
|
</Text>
|
||||||
@@ -66,90 +68,95 @@ export function InviteEmail({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
body: {
|
body: baseBodyStyle,
|
||||||
margin: 0,
|
|
||||||
backgroundColor: "#f6f7f2",
|
|
||||||
fontFamily:
|
|
||||||
'-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
|
||||||
color: "#1f2a24",
|
|
||||||
},
|
|
||||||
container: {
|
container: {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
maxWidth: "600px",
|
maxWidth: "600px",
|
||||||
margin: "0 auto",
|
margin: "0 auto",
|
||||||
padding: "32px 20px",
|
padding: "32px 20px",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
padding: "28px 28px 20px",
|
padding: "28px 28px 20px",
|
||||||
backgroundColor: "#1f3b2d",
|
backgroundColor: colors.brandGreen,
|
||||||
borderRadius: "8px 8px 0 0",
|
borderRadius: "8px 8px 0 0",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
brand: {
|
brand: {
|
||||||
margin: "0 0 28px",
|
margin: "0 0 28px",
|
||||||
color: "#d8f2bd",
|
color: colors.eyebrow,
|
||||||
fontSize: "13px",
|
fontSize: "13px",
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
letterSpacing: "0.08em",
|
letterSpacing: "0.08em",
|
||||||
textTransform: "uppercase" as const,
|
textTransform: "uppercase" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
heading: {
|
heading: {
|
||||||
margin: "0 0 12px",
|
margin: "0 0 12px",
|
||||||
color: "#ffffff",
|
color: colors.textHeader,
|
||||||
fontSize: "30px",
|
fontSize: "30px",
|
||||||
lineHeight: "1.18",
|
lineHeight: "1.18",
|
||||||
fontWeight: 800,
|
fontWeight: 800,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
lead: {
|
lead: {
|
||||||
margin: 0,
|
margin: 0,
|
||||||
color: "#e7f3e6",
|
color: colors.lead,
|
||||||
fontSize: "16px",
|
fontSize: "16px",
|
||||||
lineHeight: "1.55",
|
lineHeight: "1.55",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
card: {
|
card: {
|
||||||
padding: "28px",
|
padding: "28px",
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: colors.cardBg,
|
||||||
borderRadius: "0 0 8px 8px",
|
borderRadius: "0 0 8px 8px",
|
||||||
border: "1px solid #e0e5dc",
|
border: `1px solid ${colors.border}`,
|
||||||
borderTop: "0",
|
borderTop: "0",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
margin: "0 0 24px",
|
margin: "0 0 24px",
|
||||||
color: "#344139",
|
color: colors.textBody,
|
||||||
fontSize: "16px",
|
fontSize: "16px",
|
||||||
lineHeight: "1.65",
|
lineHeight: "1.65",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
button: {
|
button: {
|
||||||
display: "inline-block",
|
display: "inline-block",
|
||||||
padding: "14px 22px",
|
padding: "14px 22px",
|
||||||
backgroundColor: "#f0b84b",
|
backgroundColor: colors.brandGreen,
|
||||||
color: "#172119",
|
color: "#ffffff",
|
||||||
borderRadius: "6px",
|
borderRadius: "6px",
|
||||||
fontSize: "15px",
|
fontSize: "15px",
|
||||||
fontWeight: 800,
|
fontWeight: 700,
|
||||||
textDecoration: "none",
|
textDecoration: "none",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
fallbackText: {
|
fallbackText: {
|
||||||
margin: "28px 0 8px",
|
margin: "28px 0 8px",
|
||||||
color: "#66736b",
|
color: colors.textMuted,
|
||||||
fontSize: "13px",
|
fontSize: "13px",
|
||||||
lineHeight: "1.5",
|
lineHeight: "1.5",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
linkText: {
|
linkText: {
|
||||||
margin: 0,
|
margin: 0,
|
||||||
color: "#2f6b4f",
|
color: colors.link,
|
||||||
fontSize: "13px",
|
fontSize: "13px",
|
||||||
lineHeight: "1.5",
|
lineHeight: "1.5",
|
||||||
wordBreak: "break-all" as const,
|
wordBreak: "break-all" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
hr: {
|
hr: {
|
||||||
margin: "24px 0",
|
margin: "24px 0",
|
||||||
borderColor: "#dfe5d9",
|
borderColor: colors.hr,
|
||||||
},
|
},
|
||||||
footer: {
|
footer: {
|
||||||
margin: 0,
|
margin: 0,
|
||||||
color: "#7b857d",
|
color: colors.textFaint,
|
||||||
fontSize: "12px",
|
fontSize: "12px",
|
||||||
lineHeight: "1.5",
|
lineHeight: "1.5",
|
||||||
textAlign: "center" as const,
|
textAlign: "center" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -11,6 +11,8 @@ import {
|
|||||||
Text,
|
Text,
|
||||||
} from "@react-email/components";
|
} from "@react-email/components";
|
||||||
|
|
||||||
|
import { fontStack } from "./_styles";
|
||||||
|
|
||||||
type NewsEmailProps = {
|
type NewsEmailProps = {
|
||||||
title: string;
|
title: string;
|
||||||
content: string;
|
content: string;
|
||||||
@@ -53,7 +55,7 @@ const styles = {
|
|||||||
body: {
|
body: {
|
||||||
margin: 0,
|
margin: 0,
|
||||||
backgroundColor: "#f5f3ee",
|
backgroundColor: "#f5f3ee",
|
||||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
fontFamily: fontStack,
|
||||||
color: "#25231f",
|
color: "#25231f",
|
||||||
},
|
},
|
||||||
container: {
|
container: {
|
||||||
@@ -61,11 +63,13 @@ const styles = {
|
|||||||
maxWidth: "600px",
|
maxWidth: "600px",
|
||||||
margin: "0 auto",
|
margin: "0 auto",
|
||||||
padding: "32px 20px",
|
padding: "32px 20px",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
padding: "28px",
|
padding: "28px",
|
||||||
backgroundColor: "#243b36",
|
backgroundColor: "#243b36",
|
||||||
borderRadius: "8px 8px 0 0",
|
borderRadius: "8px 8px 0 0",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
kicker: {
|
kicker: {
|
||||||
margin: "0 0 20px",
|
margin: "0 0 20px",
|
||||||
@@ -74,6 +78,7 @@ const styles = {
|
|||||||
fontWeight: 800,
|
fontWeight: 800,
|
||||||
letterSpacing: "0.08em",
|
letterSpacing: "0.08em",
|
||||||
textTransform: "uppercase" as const,
|
textTransform: "uppercase" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
heading: {
|
heading: {
|
||||||
margin: 0,
|
margin: 0,
|
||||||
@@ -81,6 +86,7 @@ const styles = {
|
|||||||
fontSize: "28px",
|
fontSize: "28px",
|
||||||
lineHeight: "1.2",
|
lineHeight: "1.2",
|
||||||
fontWeight: 800,
|
fontWeight: 800,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
card: {
|
card: {
|
||||||
padding: "28px",
|
padding: "28px",
|
||||||
@@ -88,6 +94,7 @@ const styles = {
|
|||||||
border: "1px solid #deded5",
|
border: "1px solid #deded5",
|
||||||
borderTop: "0",
|
borderTop: "0",
|
||||||
borderRadius: "0 0 8px 8px",
|
borderRadius: "0 0 8px 8px",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
margin: "0 0 24px",
|
margin: "0 0 24px",
|
||||||
@@ -95,16 +102,18 @@ const styles = {
|
|||||||
fontSize: "15px",
|
fontSize: "15px",
|
||||||
lineHeight: "1.65",
|
lineHeight: "1.65",
|
||||||
whiteSpace: "pre-wrap" as const,
|
whiteSpace: "pre-wrap" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
button: {
|
button: {
|
||||||
display: "inline-block",
|
display: "inline-block",
|
||||||
padding: "13px 20px",
|
padding: "13px 20px",
|
||||||
backgroundColor: "#f0b84b",
|
backgroundColor: "#243b36",
|
||||||
color: "#172119",
|
color: "#ffffff",
|
||||||
borderRadius: "6px",
|
borderRadius: "6px",
|
||||||
fontSize: "15px",
|
fontSize: "15px",
|
||||||
fontWeight: 800,
|
fontWeight: 700,
|
||||||
textDecoration: "none",
|
textDecoration: "none",
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
hr: {
|
hr: {
|
||||||
margin: "24px 0",
|
margin: "24px 0",
|
||||||
@@ -116,5 +125,6 @@ const styles = {
|
|||||||
fontSize: "12px",
|
fontSize: "12px",
|
||||||
lineHeight: "1.5",
|
lineHeight: "1.5",
|
||||||
textAlign: "center" as const,
|
textAlign: "center" as const,
|
||||||
|
fontFamily: fontStack,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -0,0 +1,39 @@
|
|||||||
|
// Gemeinsame Style-Tokens für alle E-Mail-Templates.
|
||||||
|
//
|
||||||
|
// Schriftart: Mail-Clients fallen unterschiedlich zurück, wenn ein Font nicht
|
||||||
|
// verfügbar ist. Manche (z.B. einige Web-Reader) wählen dann Monospace —
|
||||||
|
// deshalb erst Arial/Helvetica voranstellen, die praktisch überall existieren.
|
||||||
|
// Außerdem wird `fontFamily` auf einzelne Elemente gesetzt statt nur auf
|
||||||
|
// `<Body>`, weil Outlook & Co. die Body-CSS oft nicht erben.
|
||||||
|
export const fontStack =
|
||||||
|
'Arial, Helvetica, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif';
|
||||||
|
|
||||||
|
export const colors = {
|
||||||
|
brandGreen: "#1f3b2d",
|
||||||
|
brandGreenAccent: "#2f6b4f",
|
||||||
|
bgSoft: "#f6f7f2",
|
||||||
|
bgAlt: "#f8faf8",
|
||||||
|
cardBg: "#ffffff",
|
||||||
|
border: "#e0e5dc",
|
||||||
|
hr: "#dfe5d9",
|
||||||
|
textHeader: "#ffffff",
|
||||||
|
textPrimary: "#1f2a24",
|
||||||
|
textBody: "#344139",
|
||||||
|
textMuted: "#66736b",
|
||||||
|
textFaint: "#7b857d",
|
||||||
|
link: "#2f6b4f",
|
||||||
|
eyebrow: "#d8f2bd",
|
||||||
|
lead: "#e7f3e6",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const baseBodyStyle = {
|
||||||
|
margin: 0,
|
||||||
|
backgroundColor: colors.bgSoft,
|
||||||
|
fontFamily: fontStack,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const baseTextStyle = {
|
||||||
|
fontFamily: fontStack,
|
||||||
|
color: colors.textBody,
|
||||||
|
} as const;
|
||||||
+24
-4
@@ -14,14 +14,31 @@ import { auth } from "@/auth";
|
|||||||
// Eingeloggt + kein kitaId + nicht /onboarding → /onboarding
|
// Eingeloggt + kein kitaId + nicht /onboarding → /onboarding
|
||||||
// Eingeloggt + SUPERADMIN → /admin
|
// Eingeloggt + SUPERADMIN → /admin
|
||||||
// Eingeloggt + hat kitaId + auf /onboarding → /dashboard
|
// Eingeloggt + hat kitaId + auf /onboarding → /dashboard
|
||||||
// Eingeloggt + auf /login oder /register → /
|
// Eingeloggt + auf /login oder /register → Post-Login-Ziel
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
|
|
||||||
const ONBOARDING_ROUTE = "/onboarding";
|
const ONBOARDING_ROUTE = "/onboarding";
|
||||||
const PROTECTED_PREFIX = ["/dashboard", "/admin", "/onboarding"];
|
const PROTECTED_PREFIX = ["/dashboard", "/admin", "/onboarding"];
|
||||||
|
const PUBLIC_PATHS = new Set(["/", "/impressum", "/datenschutz"]);
|
||||||
|
const PUBLIC_PREFIX = ["/features"];
|
||||||
|
|
||||||
|
function getPostLoginPath(user: { role?: string; kitaId?: string | null }) {
|
||||||
|
if (user.role === "SUPERADMIN") {
|
||||||
|
return "/admin";
|
||||||
|
}
|
||||||
|
|
||||||
|
return user.kitaId ? "/dashboard" : ONBOARDING_ROUTE;
|
||||||
|
}
|
||||||
|
|
||||||
export async function proxy(request: NextRequest) {
|
export async function proxy(request: NextRequest) {
|
||||||
const { pathname } = request.nextUrl;
|
const { pathname } = request.nextUrl;
|
||||||
|
const isPublicRoute =
|
||||||
|
PUBLIC_PATHS.has(pathname) ||
|
||||||
|
PUBLIC_PREFIX.some((prefix) => pathname.startsWith(prefix));
|
||||||
|
|
||||||
|
if (isPublicRoute) {
|
||||||
|
return NextResponse.next();
|
||||||
|
}
|
||||||
|
|
||||||
// Auth.js liest den Session-JWT aus dem Cookie —
|
// Auth.js liest den Session-JWT aus dem Cookie —
|
||||||
// kein DB-Call, pure Token-Verifikation (Edge-sicher).
|
// kein DB-Call, pure Token-Verifikation (Edge-sicher).
|
||||||
@@ -43,10 +60,12 @@ export async function proxy(request: NextRequest) {
|
|||||||
|
|
||||||
// ── 2. Eingeloggt ───────────────────────────────────────────────────
|
// ── 2. Eingeloggt ───────────────────────────────────────────────────
|
||||||
if (hasValidUser && user) {
|
if (hasValidUser && user) {
|
||||||
// 2a. Eingeloggter User auf Login/Register-Seite → Startseite,
|
// 2a. Eingeloggter User auf Login/Register-Seite → direkt zum Ziel,
|
||||||
// die dann selbst zu /dashboard oder /onboarding redirectet.
|
// damit die öffentliche Startseite stabil indexierbar bleibt.
|
||||||
if (pathname === "/login" || pathname === "/register") {
|
if (pathname === "/login" || pathname === "/register") {
|
||||||
return NextResponse.redirect(new URL("/", request.nextUrl));
|
return NextResponse.redirect(
|
||||||
|
new URL(getPostLoginPath(user), request.nextUrl),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (user.role === "SUPERADMIN" && pathname === ONBOARDING_ROUTE) {
|
if (user.role === "SUPERADMIN" && pathname === ONBOARDING_ROUTE) {
|
||||||
@@ -58,6 +77,7 @@ export async function proxy(request: NextRequest) {
|
|||||||
if (
|
if (
|
||||||
!user.kitaId &&
|
!user.kitaId &&
|
||||||
user.role !== "SUPERADMIN" &&
|
user.role !== "SUPERADMIN" &&
|
||||||
|
isProtectedRoute &&
|
||||||
!pathname.startsWith(ONBOARDING_ROUTE)
|
!pathname.startsWith(ONBOARDING_ROUTE)
|
||||||
) {
|
) {
|
||||||
return NextResponse.redirect(new URL(ONBOARDING_ROUTE, request.nextUrl));
|
return NextResponse.redirect(new URL(ONBOARDING_ROUTE, request.nextUrl));
|
||||||
|
|||||||
Reference in New Issue
Block a user