1export default function Page() {
2 return (
3 <div className="max-w-3xl mx-auto flex gap-4 items-center justify-center h-screen">
4 <div className="flex flex-col text-sm w-sm">
5 <p>Success.</p>
6 <p className="text-primary/60">
7 We sent a confirmation link to your email. Click it to continue.
8 </p>
9 </div>
10 </div>
11 );
12}
13
8 const { redirect } = await searchParams;910 return (11 <div className="max-w-3xl mx-auto flex gap-4 items-center justify-center h-screen">12 <LoginForm redirect={redirect} />13 </div>14 );15}168 const { redirect } = await searchParams;910 return (11 <div className="max-w-3xl mx-auto flex gap-4 items-center justify-center h-screen">12 <LoginForm redirect={redirect || "/home"} />13 </div>14 );15}1623export default function Page() {4 return (5 <div className="max-w-3xl mx-auto flex gap-4 items-center justify-center h-screen">6 <SignupForm />7 </div>8 );9}1023export default function Page() {4 return (5 <div className="max-w-3xl mx-auto flex gap-4 items-center justify-center h-screen">6 <SignupForm redirect={"/signup/success"} />7 </div>8 );9}1048 value={password}49 onChange={(e) => setPassword(e.target.value)}50 className="border-border border-b mb-2 ring-0 outline-0 focus:border-black transition-colors duration-150"51 />52 <input type="hidden" name="redirect" value={redirect || "/home"} />5354 <div className="flex flex-row w-full justify-between">55 <div className="flex">56 {state && "error" in state && (49 onChange={(e) => setPassword(e.target.value)}50 className="border-border border-b mb-2 ring-0 outline-0 focus:border-black transition-colors duration-150"51 />52 {redirect &&53 <input type="hidden" name="redirect" value={redirect} />54 }554import { signup } from "@/actions";5import { cn, validateEmail, validateUsername } from "@/util";6import { useIsTyping } from "@/hooks/use-is-typing";78export default function SignupForm() {9 const [state, formAction, isPending] = useActionState(signup, null);10 const [username, setUsername] = useState("");11 const [email, setEmail] = useState("");12 const [canSubmit, setCanSubmit] = useState(false);4import { signup } from "@/actions";5import { cn, validateEmail, validateUsername } from "@/util";6import { useIsTyping } from "@/hooks/use-is-typing";78export default function SignupForm({ redirect }: { redirect?: string }) {919 validateEmail(email) && validateUsername(username) && !isPending,20 );21 }22 }, [email, username, isTyping, isPending]);2324 if (state && "success" in state
47 if (e.key === 'Enter') {48 e.preventDefault();49 usernameRef.current?.focus();50 }51 }}..52 className="border-border border-b mb-2 ring-0 outline-0 focus:border-black transition-colors duration-150"53 />545563 formData: FormData,64): Promise<AuthActionResult> {65 const supabase = await createSupabaseClient();66 const email = formData.get("email") as string;67 const username = formData.get("username") as string;..6869 if (!validateEmail(email)) {70 return await delay(300, { error: "Invalid email" })71 };63 formData: FormData,64): Promise<AuthActionResult> {65 const supabase = await createSupabaseClient();66 const email = formData.get("email") as string;67 const username = formData.get("username") as string;68 const redirectTo = formData79 email,80 options: { shouldCreateUser: true },81 });8283 return error ? { error: error.message } : { success: true };84}8586async function validateUsername(username56
<div
className
=
"
flex flex-row w-full justify-between
"
>
57 <div className="flex">
const
[
state
,
formAction
,
isPending
] =
useActionState
(
signup
,
null
);
10 const [username, setUsername] = useState("");
11 const [email, setEmail] = useState("");
12 const [canSubmit, setCanSubmit] = useState(false);
)
{
25 return (
26 <div className="flex flex-col text-sm w-sm">
27 <p className="pb-2">Check your email.</p>
28 <p className="text-primary/60">
29 We sent a verification link to {email}. Click the link to verify your
30 account.
31 </p>
32 </div>
33 );
34 }
35
36 return (
37 <form action={formAction} className="flex flex-col text-sm w-sm" noValidate>
38 <p className="pb-2">Sign up.</p>
19 validateEmail(email) && validateUsername(username) && !isPending,20 );21 }22 }, [email, username, isTyping, isPending]);23......................24 return (25 <form action={formAction} className="flex flex-col text-sm w-sm" noValidate>26 <p className="pb-2">Sign up.</p>27 <input
47 value={username}48 onChange={(e) => setUsername(e.target.value)}49 className="border-border border-b mb-2 ring-0 outline-0 focus:border-black transition-colors duration-150"50 />5152 {redirect && <input type="hidden" name="redirect" value={redirect} /> }5354 <div className="flex flex-row w-full justify-between">55 <div className="flex">56 {state && "error" in state && (.
get
(
"
redirect
"
)
as
string
;
69
70 if (!validateEmail(email)) {
71 return await delay(300, { error: "Invalid email" })
72 };
:
string
):
Promise
<
string
|
null
> {
87 if (username.length < 2) {
80 email,81 options: { shouldCreateUser: true },82 });8384 if (error) return { error: error.message };85 if (redirectTo) redirect(redirectTo);86 return { success: true };87}88