dhkatzandClaude Opus 5.5
64c552330b
apps/web: Next.js 16 (App Router), Tailwind 4 and shadcn/ui, light and dark from the system. Pages render on the server and call the API with Eden Treaty (typed by @t5de/api), forwarding the visitor's cookie; forms use server actions; sign-up, sign-in and sign-out use Better Auth's React client. /api is rewritten to the API so its cookies are first-party. Who's online follows the API's event stream (Next's gzip is off: it held the stream back). Standalone output with a Dockerfile; deploys to Vercel as is. Co-Authored-By: Claude Opus 5.5 <[email protected]>
86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
"use client";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
import { ErrorText } from "@/components/forms";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
import { authClient } from "@/lib/auth-client";
|
|
|
|
export function SignUpForm() {
|
|
const router = useRouter();
|
|
const [error, setError] = useState("");
|
|
const [pending, setPending] = useState(false);
|
|
|
|
async function submit(form: FormData) {
|
|
const username = String(form.get("username"));
|
|
const password = String(form.get("password"));
|
|
if (password !== form.get("password2")) {
|
|
setError("The passwords don't match.");
|
|
return;
|
|
}
|
|
setError("");
|
|
setPending(true);
|
|
const { error } = await authClient.signUp.email({
|
|
username,
|
|
name: username,
|
|
email: String(form.get("email")),
|
|
password,
|
|
});
|
|
if (error) {
|
|
setError(error.message ?? "That didn't work. Try again.");
|
|
setPending(false);
|
|
return;
|
|
}
|
|
router.push("/account?welcome=1");
|
|
router.refresh();
|
|
}
|
|
|
|
return (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
void submit(new FormData(e.currentTarget));
|
|
}}
|
|
>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="username">Username</FieldLabel>
|
|
<Input
|
|
id="username"
|
|
name="username"
|
|
autoComplete="username"
|
|
required
|
|
autoFocus
|
|
pattern="[A-Za-z0-9_]{3,32}"
|
|
title="3 to 32 letters, digits or underscores"
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="email">Email</FieldLabel>
|
|
<Input id="email" name="email" type="email" autoComplete="email" required />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="password">Password</FieldLabel>
|
|
<Input id="password" name="password" type="password" autoComplete="new-password" required minLength={10} />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="password2">Password again</FieldLabel>
|
|
<Input id="password2" name="password2" type="password" autoComplete="new-password" required minLength={10} />
|
|
<FieldDescription>Not your IMVU password: use a new one.</FieldDescription>
|
|
</Field>
|
|
{error && <ErrorText>{error}</ErrorText>}
|
|
<Field>
|
|
<Button type="submit" disabled={pending}>
|
|
{pending ? "Creating account…" : "Create account"}
|
|
</Button>
|
|
<FieldDescription className="text-center">
|
|
Have one? <Link href="/signin">Sign in</Link>
|
|
</FieldDescription>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
);
|
|
}
|