feat: allow users to sign up and fill out public forms

config/tsconfig/nextjs.json

@@ -3,7 +3,6 @@
 	"display": "Next.js",
 	"extends": "./base.json",
 	"compilerOptions": {
-		"plugins": [{ "name": "next" }],
 		"allowImportingTsExtensions": true,
 		"target": "es2018",
 		"lib": ["dom", "dom.iterable", "esnext"],

core/app/(user)/signup/page.tsx

@@ -1,7 +1,7 @@
 import { AuthTokenType } from "db/public";
 
 import { getLoginData } from "~/lib/authentication/loginData";
-import { SignupForm } from "./SignupForm";
+import { LegacySignupForm } from "../../components/Signup/LegacySignupForm";
 
 export default async function Page() {
 	const { user, session } = await getLoginData({
@@ -19,7 +19,7 @@ export default async function Page() {
 
 	return (
 		<div className="m-auto max-w-lg">
-			<SignupForm user={user} />
+			<LegacySignupForm user={user} />
 		</div>
 	);
 }

core/app/c/(public)/[communitySlug]/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 
+import { notFound } from "next/navigation";
+
 import { CommunityProvider } from "~/app/components/providers/CommunityProvider";
 import { getLoginData } from "~/lib/authentication/loginData";
 import { getCommunityRole } from "~/lib/authentication/roles";
@@ -30,20 +32,10 @@ export default async function MainLayout(props: Props) {
 
 	const { children } = props;
 
-	const { user } = await getLoginData();
-
 	const community = await findCommunityBySlug(params.communitySlug);
 
 	if (!community) {
-		return null;
-	}
-
-	const role = getCommunityRole(user, { slug: params.communitySlug });
-
-	// the user is logged in, but not a member of the community
-	// we should bar them from accessing the page
-	if (user && !role) {
-		return null;
+		return notFound();
 	}
 
 	return <CommunityProvider community={community}>{children}</CommunityProvider>;

core/app/c/(public)/[communitySlug]/public/forms/[formSlug]/fill/page.tsx

@@ -3,10 +3,10 @@ import { randomUUID } from "crypto";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
 
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 
 import type { Communities, PubsId } from "db/public";
-import { ElementType, MemberRole } from "db/public";
+import { ElementType, FormAccessType, MemberRole } from "db/public";
 import { expect } from "utils";
 
 import type { Form } from "~/lib/server/form";
@@ -164,6 +164,13 @@ export default async function FormPage(props: {
 	}
 
 	if (!user && !session) {
+		if (form.access === "public") {
+			// redirect user to signup/login
+			redirect(
+				`/c/${params.communitySlug}/public/signup?redirectTo=/c/${params.communitySlug}/public/forms/${params.formSlug}/fill`
+			);
+		}
+
 		const result = await handleFormToken({
 			params,
 			searchParams,
@@ -184,12 +191,18 @@ export default async function FormPage(props: {
 
 	const role = getCommunityRole(user, { slug: params.communitySlug });
 	if (!role) {
+		// user is not a member of the community, but is logged in, and the form is public
+		if (form.access === "public") {
+			redirect(
+				`/c/${params.communitySlug}/public/signup?redirectTo=/c/${params.communitySlug}/public/forms/${params.formSlug}/fill`
+			);
+		}
 		// TODO: show no access page
 		return notFound();
 	}
 
 	// all other roles always have access to the form
-	if (role === MemberRole.contributor) {
+	if (role === MemberRole.contributor && form.access !== FormAccessType.public) {
 		const memberHasAccessToForm = await userHasPermissionToForm({
 			formSlug: params.formSlug,
 			userId: user.id,

core/app/c/(public)/[communitySlug]/public/signup/page.tsx

@@ -0,0 +1,72 @@
+import { notFound, redirect, RedirectType, unstable_rethrow } from "next/navigation";
+
+import { MemberRole } from "db/public";
+import { logger } from "logger";
+
+import { JoinCommunityForm } from "~/app/components/Signup/JoinCommunityForm";
+import { PublicSignupForm } from "~/app/components/Signup/PublicSignupForm";
+import { getLoginData } from "~/lib/authentication/loginData";
+import { findCommunityBySlug } from "~/lib/server/community";
+import { publicSignupsAllowed } from "~/lib/server/user";
+
+export default async function Page({
+	params,
+	searchParams,
+}: {
+	params: Promise<{ communitySlug: string }>;
+	searchParams: Promise<{ redirectTo?: string }>;
+}) {
+	const [community, { user }] = await Promise.all([findCommunityBySlug(), getLoginData()]);
+
+	if (!community) {
+		logger.debug({
+			msg: "Community not found on signup page",
+			communitySlug: (await params).communitySlug,
+		});
+		notFound();
+	}
+
+	const isAllowedToSignup = await publicSignupsAllowed(community.id);
+
+	if (!isAllowedToSignup) {
+		// this community does not allow public signups
+		notFound();
+	}
+
+	const { redirectTo } = await searchParams;
+
+	if (user) {
+		if (user.memberships.some((m) => m.communityId === community.id)) {
+			redirect(redirectTo ?? `/c/${community.slug}/stages`);
+			// TODO: redirect to wherever they were redirected to before signing up
+			throw new Error("User is already member of community");
+		}
+
+		// TODO: figure this out based on the invite
+		const joinRole = MemberRole.contributor;
+
+		return (
+			<Wrapper>
+				<JoinCommunityForm community={community} role={joinRole} redirectTo={redirectTo} />
+			</Wrapper>
+		);
+	}
+
+	return (
+		<Wrapper>
+			<PublicSignupForm communityId={community.id} redirectTo={redirectTo} />
+		</Wrapper>
+	);
+}
+
+/**
+ * just a wrapper that centers stuff on the page.
+ * could be put in a layout later
+ */
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+	return (
+		<div className="m-auto mt-16 flex min-h-[50vh] max-w-lg flex-col items-center justify-center">
+			{children}
+		</div>
+	);
+};

core/app/c/[communitySlug]/pubs/[pubId]/edit/page.tsx

@@ -131,6 +131,7 @@ export default async function Page(props: {
 		>
 			<div className="flex justify-center py-10">
 				<div className="max-w-prose flex-1">
+					{/** TODO: Add suspense */}
 					<PubEditor
 						searchParams={searchParams}
 						pubId={pub.id}

core/app/components/FormBuilder/ElementPanel/ButtonConfigurationForm.tsx

@@ -126,7 +126,7 @@ export const ButtonConfigurationForm = ({
 					e.stopPropagation(); //prevent submission from propagating to parent form
 					form.handleSubmit(onSubmit)(e);
 				}}
-				className="flex h-full flex-col justify-between gap-2 pt-2"
+				className="flex h-full flex-col gap-4 pt-2"
 			>
 				<ButtonOption label={labelValue} readOnly />
 				<FormField

core/app/components/FormBuilder/ElementPanel/SelectAccess.tsx

@@ -8,23 +8,17 @@ import { Contact, Lock, Users } from "ui/icon";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "ui/select";
 
 const iconsAndCopy = {
-	[FormAccessType.inviteOnly]: {
-		Icon: Contact,
-		description: "Accessible via URL with tracked submissions",
-		name: "Invite Only",
-		help: "Community members & invited contributors can submit",
-	},
 	[FormAccessType.private]: {
 		Icon: Lock,
 		description: "Only accessible via Pub editor",
 		name: "Private",
-		help: "Only community members can create and edit",
+		help: "Only community members or invitees can create and edit",
 	},
 	[FormAccessType.public]: {
 		Icon: Users,
 		description: "Accessible via URL with untracked submissions",
 		name: "Public",
-		help: "Anyone with the link can submit",
+		help: "Anyone with the link can signup can submit. NOTE: this enables public signups to your community.",
 	},
 };
 

core/app/(user)/signup/SignupForm.tsx → core/app/components/Signup/BaseSignupForm.tsx

@@ -1,63 +1,49 @@
 "use client";
 
-import type { Static } from "@sinclair/typebox";
-
-import React, { useCallback, useMemo } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useMemo } from "react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
 import { typeboxResolver } from "@hookform/resolvers/typebox";
-import { Type } from "@sinclair/typebox";
 import { useForm } from "react-hook-form";
 import { registerFormats } from "schemas";
 
 import type { Users } from "db/public";
 import { Button } from "ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "ui/card";
-import { Form, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "ui/form";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "ui/card";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "ui/form";
 import { Input } from "ui/input";
 
-import { signup } from "~/lib/authentication/actions";
-import { isClientException, useServerAction } from "~/lib/serverActions";
-
-registerFormats();
-
-const formSchema = Type.Object({
-	firstName: Type.String(),
-	lastName: Type.String(),
-	email: Type.String({ format: "email" }),
-	password: Type.String({
-		minLength: 8,
-		maxLength: 72,
-	}),
-});
+import type { SignupFormSchema } from "./schema";
+import { FormSubmitButton } from "../SubmitButton";
+import { compiledSignupFormSchema } from "./schema";
 
-export function SignupForm(props: {
-	user: Pick<Users, "firstName" | "lastName" | "email" | "id">;
+export function BaseSignupForm(props: {
+	user: Pick<Users, "firstName" | "lastName" | "email" | "id"> | null;
+	onSubmit: (data: SignupFormSchema) => Promise<void>;
+	redirectTo?: string;
 }) {
-	const runSignup = useServerAction(signup);
+	const searchParams = useSearchParams();
+
+	const redirectTo = props.redirectTo ?? searchParams.get("redirectTo");
 
-	const resolver = useMemo(() => typeboxResolver(formSchema), []);
+	const resolver = useMemo(() => typeboxResolver(compiledSignupFormSchema), []);
 
-	const form = useForm<Static<typeof formSchema>>({
+	const form = useForm<SignupFormSchema>({
 		resolver,
-		defaultValues: { ...props.user, lastName: props.user.lastName ?? undefined },
+		defaultValues: { ...(props?.user ?? {}), lastName: props.user?.lastName ?? undefined },
 	});
 
-	const searchParams = useSearchParams();
-
-	const handleSubmit = useCallback(async (data: Static<typeof formSchema>) => {
-		await runSignup({
-			id: props.user.id,
-			firstName: data.firstName,
-			lastName: data.lastName,
-			email: data.email,
-			password: data.password,
-			redirect: searchParams.get("redirectTo"),
-		});
-	}, []);
-
 	return (
 		<Form {...form}>
-			<form onSubmit={form.handleSubmit(handleSubmit)}>
+			<form onSubmit={form.handleSubmit(props.onSubmit)}>
 				<Card className="mx-auto max-w-sm">
 					<CardHeader>
 						<CardTitle className="text-xl">Sign Up</CardTitle>
@@ -74,8 +60,9 @@ export function SignupForm(props: {
 									render={({ field }) => (
 										<FormItem>
 											<FormLabel>First name</FormLabel>
-
-											<Input {...field} placeholder="Max" required />
+											<FormControl>
+												<Input {...field} placeholder="Max" required />
+											</FormControl>
 											<FormMessage />
 										</FormItem>
 									)}
@@ -86,7 +73,9 @@ export function SignupForm(props: {
 									render={({ field }) => (
 										<FormItem>
 											<FormLabel>Last name</FormLabel>
-											<Input {...field} placeholder="Robinson" required />
+											<FormControl>
+												<Input {...field} placeholder="Robinson" required />
+											</FormControl>
 											<FormMessage />
 										</FormItem>
 									)}
@@ -102,12 +91,14 @@ export function SignupForm(props: {
 											If you change this, we will ask you to confirm your
 											email again.
 										</FormDescription>
-										<Input
-											{...field}
-											type="email"
-											placeholder="m@example.com"
-											required
-										/>
+										<FormControl>
+											<Input
+												{...field}
+												type="email"
+												placeholder="mail@example.com"
+												required
+											/>
+										</FormControl>
 										<FormMessage />
 									</FormItem>
 								)}
@@ -119,15 +110,19 @@ export function SignupForm(props: {
 								render={({ field }) => (
 									<FormItem>
 										<FormLabel>Password</FormLabel>
-										<Input {...field} type="password" />
+										<FormControl>
+											<Input {...field} type="password" />
+										</FormControl>
 										<FormMessage />
 									</FormItem>
 								)}
 							/>
 
-							<Button type="submit" className="w-full">
-								Finish sign up
-							</Button>
+							<FormSubmitButton
+								formState={form.formState}
+								className="w-full"
+								idleText="Finish sign up"
+							/>
 						</div>
 						{/* <div className="mt-4 text-center text-sm">
 							Already have an account?{" "}
@@ -136,6 +131,16 @@ export function SignupForm(props: {
 							</Link>
 						</div> */}
 					</CardContent>
+					<CardFooter>
+						Or{" "}
+						<Link
+							href={`/login${redirectTo ? `?redirectTo=${redirectTo}` : ""}`}
+							className="mx-1 font-semibold underline"
+						>
+							sign in
+						</Link>{" "}
+						if you already have an account
+					</CardFooter>
 				</Card>
 			</form>
 		</Form>