102 lines
3.4 KiB
TypeScript
102 lines
3.4 KiB
TypeScript
import Link from "next/link";
|
|
import { redirect } from "next/navigation";
|
|
import { StatusToastBridge } from "@/components/feedback/status-toast-bridge";
|
|
import { AuthPanel } from "@/components/auth/auth-panel";
|
|
import { signUpAction } from "@/app/auth-actions";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { buildPathWithQuery, sanitizeNextPath } from "@/lib/auth/navigation";
|
|
import { getAuthState } from "@/lib/auth/session";
|
|
import { getAuthStatusToast } from "@/lib/feedback/status-messages";
|
|
import { getParamValue, type PageSearchParams } from "@/lib/search-params";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
type SignUpPageProps = {
|
|
searchParams: Promise<PageSearchParams>;
|
|
};
|
|
|
|
export default async function SignUpPage({ searchParams }: SignUpPageProps) {
|
|
const authState = await getAuthState();
|
|
const resolvedSearchParams = await searchParams;
|
|
const next = sanitizeNextPath(getParamValue(resolvedSearchParams, "next"));
|
|
|
|
if (authState.isAuthenticated) {
|
|
redirect(next);
|
|
}
|
|
|
|
const statusToast = getAuthStatusToast(
|
|
getParamValue(resolvedSearchParams, "error"),
|
|
getParamValue(resolvedSearchParams, "status"),
|
|
);
|
|
const loginHref = buildPathWithQuery("/login", { next });
|
|
|
|
return (
|
|
<AuthPanel
|
|
eyebrow="Account aanmaken"
|
|
title="Maak je eerste account aan"
|
|
description="Release 1 gebruikt e-mail en wachtwoord als eenvoudige basis. Na registratie bevestig je eerst je e-mailadres."
|
|
footer={
|
|
<p>
|
|
Heb je al een account?{" "}
|
|
<Link href={loginHref} className="font-semibold text-primary underline-offset-4 hover:underline">
|
|
Log dan in
|
|
</Link>
|
|
</p>
|
|
}
|
|
>
|
|
<StatusToastBridge toast={statusToast} paramKeys={["error", "status"]} />
|
|
|
|
{!authState.isConfigured ? (
|
|
<Alert variant="info">
|
|
<AlertDescription className="leading-7 text-current">
|
|
Voeg eerst je Supabase-gegevens toe in `.env.local` op basis van `.env.example`.
|
|
</AlertDescription>
|
|
</Alert>
|
|
) : (
|
|
<form action={signUpAction} className="space-y-5">
|
|
<input type="hidden" name="next" value={next} />
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email" className="text-foreground">
|
|
E-mailadres
|
|
</Label>
|
|
<Input
|
|
id="email"
|
|
className="h-12 rounded-[1.25rem] bg-background/80 px-4 text-base md:text-base"
|
|
type="email"
|
|
name="email"
|
|
autoComplete="email"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password" className="text-foreground">
|
|
Wachtwoord
|
|
</Label>
|
|
<Input
|
|
id="password"
|
|
className="h-12 rounded-[1.25rem] bg-background/80 px-4 text-base md:text-base"
|
|
type="password"
|
|
name="password"
|
|
autoComplete="new-password"
|
|
minLength={8}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
size="lg"
|
|
className="w-full rounded-[1.25rem]"
|
|
>
|
|
Account aanmaken
|
|
</Button>
|
|
</form>
|
|
)}
|
|
</AuthPanel>
|
|
);
|
|
}
|