🔒 Registration form hardening (#1160)

apps/web/src/app/[locale]/(auth)/register/register-page.tsx

@@ -1,6 +1,16 @@
 "use client";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "@rallly/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@rallly/ui/form";
 import { Input } from "@rallly/ui/input";
+import { TRPCClientError } from "@trpc/client";
 import Link from "next/link";
 import { useParams, useSearchParams } from "next/navigation";
 import { signIn } from "next-auth/react";
@@ -8,29 +18,32 @@ import { useTranslation } from "next-i18next";
 import { usePostHog } from "posthog-js/react";
 import React from "react";
 import { useForm } from "react-hook-form";
+import { z } from "zod";
 
 import { VerifyCode } from "@/components/auth/auth-forms";
 import { AuthCard } from "@/components/auth/auth-layout";
 import { Trans } from "@/components/trans";
 import { useDayjs } from "@/utils/dayjs";
-import { requiredString, validEmail } from "@/utils/form-validation";
 import { trpc } from "@/utils/trpc/client";
 
-type RegisterFormData = {
+const registerFormSchema = z.object({
-  name: string;
+  name: z.string().nonempty().max(100),
-  email: string;
+  email: z.string().email(),
-};
+});
+
+type RegisterFormData = z.infer<typeof registerFormSchema>;
 
 export const RegisterForm = () => {
   const { t } = useTranslation();
   const { timeZone } = useDayjs();
   const params = useParams<{ locale: string }>();
   const searchParams = useSearchParams();
-  const { register, handleSubmit, getValues, setError, formState } =
+  const form = useForm<RegisterFormData>({
-    useForm<RegisterFormData>({
+    defaultValues: { email: "", name: "" },
-      defaultValues: { email: "" },
+    resolver: zodResolver(registerFormSchema),
   });
 
+  const { handleSubmit, control, getValues, setError, formState } = form;
   const queryClient = trpc.useUtils();
   const requestRegistration = trpc.auth.requestRegistration.useMutation();
   const authenticateRegistration =
@@ -80,13 +93,17 @@ export const RegisterForm = () => {
   return (
     <div>
       <AuthCard>
+        <Form {...form}>
           <form
             onSubmit={handleSubmit(async (data) => {
-            const res = await requestRegistration.mutateAsync({
+              try {
+                await requestRegistration.mutateAsync(
+                  {
                     email: data.email,
                     name: data.name,
-            });
+                  },
-
+                  {
+                    onSuccess: (res) => {
                       if (!res.ok) {
                         switch (res.reason) {
                           case "userAlreadyExists":
@@ -98,58 +115,76 @@ export const RegisterForm = () => {
                             setError("email", {
                               message: t("emailNotAllowed"),
                             });
+                            break;
                         }
                       } else {
                         setToken(res.token);
                       }
+                    },
+                  },
+                );
+              } catch (error) {
+                if (error instanceof TRPCClientError) {
+                  setError("root", {
+                    message: error.shape.message,
+                  });
+                }
+              }
             })}
           >
-          <div className="mb-1 text-2xl font-bold">{t("createAnAccount")}</div>
+            <div className="mb-1 text-2xl font-bold">
-          <p className="mb-4 text-gray-500">
+              {t("createAnAccount")}
+            </div>
+            <p className="mb-6 text-gray-500">
               {t("stepSummary", {
                 current: 1,
                 total: 2,
               })}
             </p>
-          <fieldset className="mb-4">
+            <div className="space-y-4">
-            <label htmlFor="name" className="mb-1 text-gray-500">
+              <FormField
-              {t("name")}
+                control={control}
-            </label>
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel htmlFor="name">{t("name")}</FormLabel>
+                    <FormControl>
                       <Input
+                        {...field}
                         id="name"
-              className="w-full"
                         size="lg"
                         autoFocus={true}
                         error={!!formState.errors.name}
-              disabled={formState.isSubmitting}
                         placeholder={t("namePlaceholder")}
-              {...register("name", { validate: requiredString })}
+                        disabled={formState.isSubmitting}
                       />
-            {formState.errors.name?.message ? (
+                    </FormControl>
-              <div className="mt-2 text-sm text-rose-500">
+                    <FormMessage />
-                {formState.errors.name.message}
+                  </FormItem>
-              </div>
+                )}
-            ) : null}
+              />
-          </fieldset>
+              <FormField
-          <fieldset className="mb-4">
+                control={control}
-            <label htmlFor="email" className="mb-1 text-gray-500">
+                name="email"
-              {t("email")}
+                render={({ field }) => (
-            </label>
+                  <FormItem>
+                    <FormLabel htmlFor="email">{t("email")}</FormLabel>
+                    <FormControl>
                       <Input
-              className="w-full"
+                        {...field}
                         id="email"
                         size="lg"
                         error={!!formState.errors.email}
-              disabled={formState.isSubmitting}
                         placeholder={t("emailPlaceholder")}
-              {...register("email", { validate: validEmail })}
+                        disabled={formState.isSubmitting}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-            {formState.errors.email?.message ? (
-              <div className="mt-1 text-sm text-rose-500">
-                {formState.errors.email.message}
             </div>
-            ) : null}
+            <div className="mt-6">
-          </fieldset>
               <Button
                 loading={formState.isSubmitting}
                 type="submit"
@@ -158,9 +193,16 @@ export const RegisterForm = () => {
               >
                 {t("continue")}
               </Button>
+            </div>
+            {formState.errors.root ? (
+              <FormMessage className="mt-6">
+                {formState.errors.root.message}
+              </FormMessage>
+            ) : null}
           </form>
+        </Form>
       </AuthCard>
-      {!getValues("email") ? (
+      {!form.formState.isSubmitSuccessful ? (
         <div className="mt-4 pt-4 text-center text-gray-500 sm:text-base">
           <Trans
             i18nKey="alreadyRegistered"

apps/web/src/components/new-participant-modal.tsx

@@ -2,7 +2,9 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { VoteType } from "@rallly/database";
 import { Badge } from "@rallly/ui/badge";
 import { Button } from "@rallly/ui/button";
+import { FormMessage } from "@rallly/ui/form";
 import { Input } from "@rallly/ui/input";
+import { TRPCClientError } from "@trpc/client";
 import clsx from "clsx";
 import { useTranslation } from "next-i18next";
 import { useForm } from "react-hook-form";
@@ -16,13 +18,13 @@ import VoteIcon from "./poll/vote-icon";
 
 const requiredEmailSchema = z.object({
   requireEmail: z.literal(true),
-  name: z.string().trim().min(1),
+  name: z.string().nonempty().max(100),
   email: z.string().email(),
 });
 
 const optionalEmailSchema = z.object({
   requireEmail: z.literal(false),
-  name: z.string().trim().min(1),
+  name: z.string().nonempty().max(100),
   email: z.string().email().or(z.literal("")),
 });
 
@@ -87,7 +89,7 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
 
   const isEmailRequired = poll.requireParticipantEmail;
 
-  const { register, formState, setFocus, handleSubmit } =
+  const { register, setError, formState, setFocus, handleSubmit } =
     useForm<NewParticipantFormData>({
       resolver: zodResolver(schema),
       defaultValues: {
@@ -102,6 +104,7 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
   return (
     <form
       onSubmit={handleSubmit(async (data) => {
+        try {
           const newParticipant = await addParticipant.mutateAsync({
             name: data.name,
             votes: props.votes,
@@ -109,6 +112,13 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
             pollId: poll.id,
           });
           props.onSubmit?.(newParticipant);
+        } catch (error) {
+          if (error instanceof TRPCClientError) {
+            setError("root", {
+              message: error.shape.message,
+            });
+          }
+        }
       })}
       className="space-y-4"
     >
@@ -152,6 +162,9 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
         <label className="mb-1 text-gray-500">{t("response")}</label>
         <VoteSummary votes={props.votes} />
       </fieldset>
+      {formState.errors.root ? (
+        <FormMessage>{formState.errors.root.message}</FormMessage>
+      ) : null}
       <div className="flex gap-2">
         <Button onClick={props.onCancel}>{t("cancel")}</Button>
         <Button

packages/backend/trpc/routers/auth.ts

@@ -12,8 +12,8 @@ export const auth = router({
   requestRegistration: publicProcedure
     .input(
       z.object({
-        name: z.string(),
+        name: z.string().nonempty().max(100),
-        email: z.string(),
+        email: z.string().email(),
       }),
     )
     .mutation(

packages/backend/trpc/routers/polls/participants.ts

@@ -53,7 +53,7 @@ export const participants = router({
     .input(
       z.object({
         pollId: z.string(),
-        name: z.string().min(1, "Participant name is required"),
+        name: z.string().min(1, "Participant name is required").max(100),
         email: z.string().optional(),
         votes: z
           .object({

packages/ui/src/button.tsx

@@ -29,7 +29,7 @@ const buttonVariants = cva(
       size: {
         default: "h-9 px-2.5 gap-x-2.5 text-sm",
         sm: "h-7 text-sm px-1.5 gap-x-1.5 rounded-md",
-        lg: "h-11 text-sm gap-x-3 px-4 rounded-md",
+        lg: "h-11 text-base gap-x-3 px-4 rounded-md",
       },
     },
     defaultVariants: {