From 50b79cff3c690dac7c326c03d7eeb45de29c90a6 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Tue, 18 Jun 2024 11:02:04 +0100
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=94=92=EF=B8=8F=20Harden=20registrati?=
 =?UTF-8?q?on=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(auth)/register/register-page.tsx         | 190 ++++++++++--------
 packages/backend/trpc/routers/auth.ts         |   4 +-
 packages/ui/src/button.tsx                    |   2 +-
 3 files changed, 109 insertions(+), 87 deletions(-)

diff --git a/apps/web/src/app/[locale]/(auth)/register/register-page.tsx b/apps/web/src/app/[locale]/(auth)/register/register-page.tsx
index 5fbee726389..1381f81a9fc 100644
--- a/apps/web/src/app/[locale]/(auth)/register/register-page.tsx
+++ b/apps/web/src/app/[locale]/(auth)/register/register-page.tsx
@@ -1,5 +1,14 @@
 "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 Link from "next/link";
 import { useParams, useSearchParams } from "next/navigation";
@@ -8,29 +17,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 = {
-  name: string;
-  email: string;
-};
+const registerFormSchema = z.object({
+  name: z.string().nonempty().max(100),
+  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 } =
-    useForm<RegisterFormData>({
-      defaultValues: { email: "" },
-    });
+  const form = useForm<RegisterFormData>({
+    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,85 +92,95 @@ export const RegisterForm = () => {
   return (
     <div>
       <AuthCard>
-        <form
-          onSubmit={handleSubmit(async (data) => {
-            const res = await requestRegistration.mutateAsync({
-              email: data.email,
-              name: data.name,
-            });
+        <Form {...form}>
+          <form
+            onSubmit={handleSubmit(async (data) => {
+              const res = await requestRegistration.mutateAsync({
+                email: data.email,
+                name: data.name,
+              });
 
-            if (!res.ok) {
-              switch (res.reason) {
-                case "userAlreadyExists":
-                  setError("email", {
-                    message: t("userAlreadyExists"),
-                  });
-                  break;
-                case "emailNotAllowed":
-                  setError("email", {
-                    message: t("emailNotAllowed"),
-                  });
+              if (!res.ok) {
+                switch (res.reason) {
+                  case "userAlreadyExists":
+                    setError("email", {
+                      message: t("userAlreadyExists"),
+                    });
+                    break;
+                  case "emailNotAllowed":
+                    setError("email", {
+                      message: t("emailNotAllowed"),
+                    });
+                }
+              } else {
+                setToken(res.token);
               }
-            } else {
-              setToken(res.token);
-            }
-          })}
-        >
-          <div className="mb-1 text-2xl font-bold">{t("createAnAccount")}</div>
-          <p className="mb-4 text-gray-500">
-            {t("stepSummary", {
-              current: 1,
-              total: 2,
             })}
-          </p>
-          <fieldset className="mb-4">
-            <label htmlFor="name" className="mb-1 text-gray-500">
-              {t("name")}
-            </label>
-            <Input
-              id="name"
-              className="w-full"
-              size="lg"
-              autoFocus={true}
-              error={!!formState.errors.name}
-              disabled={formState.isSubmitting}
-              placeholder={t("namePlaceholder")}
-              {...register("name", { validate: requiredString })}
-            />
-            {formState.errors.name?.message ? (
-              <div className="mt-2 text-sm text-rose-500">
-                {formState.errors.name.message}
-              </div>
-            ) : null}
-          </fieldset>
-          <fieldset className="mb-4">
-            <label htmlFor="email" className="mb-1 text-gray-500">
-              {t("email")}
-            </label>
-            <Input
-              className="w-full"
-              id="email"
-              size="lg"
-              error={!!formState.errors.email}
-              disabled={formState.isSubmitting}
-              placeholder={t("emailPlaceholder")}
-              {...register("email", { validate: validEmail })}
-            />
-            {formState.errors.email?.message ? (
-              <div className="mt-1 text-sm text-rose-500">
-                {formState.errors.email.message}
-              </div>
-            ) : null}
-          </fieldset>
-          <Button
-            loading={formState.isSubmitting}
-            type="submit"
-            variant="primary"
-            size="lg"
           >
-            {t("continue")}
-          </Button>
-        </form>
+            <div className="mb-1 text-2xl font-bold">
+              {t("createAnAccount")}
+            </div>
+            <p className="mb-6 text-gray-500">
+              {t("stepSummary", {
+                current: 1,
+                total: 2,
+              })}
+            </p>
+            <div className="space-y-4">
+              <FormField
+                control={control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel htmlFor="name">{t("name")}</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        id="name"
+                        size="lg"
+                        autoFocus={true}
+                        error={!!formState.errors.name}
+                        placeholder={t("namePlaceholder")}
+                        disabled={formState.isSubmitting}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel htmlFor="email">{t("email")}</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        id="email"
+                        size="lg"
+                        error={!!formState.errors.email}
+                        placeholder={t("emailPlaceholder")}
+                        disabled={formState.isSubmitting}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className="mt-6">
+              <Button
+                loading={formState.isSubmitting}
+                type="submit"
+                variant="primary"
+                size="lg"
+              >
+                {t("continue")}
+              </Button>
+            </div>
+          </form>
+        </Form>
       </AuthCard>
       {!getValues("email") ? (
         <div className="mt-4 pt-4 text-center text-gray-500 sm:text-base">
diff --git a/packages/backend/trpc/routers/auth.ts b/packages/backend/trpc/routers/auth.ts
index f987c015560..bdff2d096c1 100644
--- a/packages/backend/trpc/routers/auth.ts
+++ b/packages/backend/trpc/routers/auth.ts
@@ -12,8 +12,8 @@ export const auth = router({
   requestRegistration: publicProcedure
     .input(
       z.object({
-        name: z.string(),
-        email: z.string(),
+        name: z.string().nonempty().max(100),
+        email: z.string().email(),
       }),
     )
     .mutation(
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index 9d64cc67220..67ba68b95cd 100644
--- a/packages/ui/src/button.tsx
+++ b/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: {

From 13af35beaf96d7e7052f9a1ece278188be9f23ba Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Tue, 18 Jun 2024 18:48:04 +0100
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=94=92=EF=B8=8F=20Error=20handling=20?=
 =?UTF-8?q?and=20form=20hardening?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(auth)/register/register-page.tsx         | 60 ++++++++++++-------
 .../src/components/new-participant-modal.tsx  | 33 ++++++----
 .../trpc/routers/polls/participants.ts        |  4 +-
 3 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/apps/web/src/app/[locale]/(auth)/register/register-page.tsx b/apps/web/src/app/[locale]/(auth)/register/register-page.tsx
index 1381f81a9fc..6dff74d6552 100644
--- a/apps/web/src/app/[locale]/(auth)/register/register-page.tsx
+++ b/apps/web/src/app/[locale]/(auth)/register/register-page.tsx
@@ -10,6 +10,7 @@ import {
   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";
@@ -38,7 +39,7 @@ export const RegisterForm = () => {
   const params = useParams<{ locale: string }>();
   const searchParams = useSearchParams();
   const form = useForm<RegisterFormData>({
-    defaultValues: { email: "" },
+    defaultValues: { email: "", name: "" },
     resolver: zodResolver(registerFormSchema),
   });
 
@@ -95,25 +96,39 @@ export const RegisterForm = () => {
         <Form {...form}>
           <form
             onSubmit={handleSubmit(async (data) => {
-              const res = await requestRegistration.mutateAsync({
-                email: data.email,
-                name: data.name,
-              });
-
-              if (!res.ok) {
-                switch (res.reason) {
-                  case "userAlreadyExists":
-                    setError("email", {
-                      message: t("userAlreadyExists"),
-                    });
-                    break;
-                  case "emailNotAllowed":
-                    setError("email", {
-                      message: t("emailNotAllowed"),
-                    });
+              try {
+                await requestRegistration.mutateAsync(
+                  {
+                    email: data.email,
+                    name: data.name,
+                  },
+                  {
+                    onSuccess: (res) => {
+                      if (!res.ok) {
+                        switch (res.reason) {
+                          case "userAlreadyExists":
+                            setError("email", {
+                              message: t("userAlreadyExists"),
+                            });
+                            break;
+                          case "emailNotAllowed":
+                            setError("email", {
+                              message: t("emailNotAllowed"),
+                            });
+                            break;
+                        }
+                      } else {
+                        setToken(res.token);
+                      }
+                    },
+                  },
+                );
+              } catch (error) {
+                if (error instanceof TRPCClientError) {
+                  setError("root", {
+                    message: error.shape.message,
+                  });
                 }
-              } else {
-                setToken(res.token);
               }
             })}
           >
@@ -179,10 +194,15 @@ 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"
diff --git a/apps/web/src/components/new-participant-modal.tsx b/apps/web/src/components/new-participant-modal.tsx
index fb3bfff7bbe..45b31c5a598 100644
--- a/apps/web/src/components/new-participant-modal.tsx
+++ b/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,13 +104,21 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
   return (
     <form
       onSubmit={handleSubmit(async (data) => {
-        const newParticipant = await addParticipant.mutateAsync({
-          name: data.name,
-          votes: props.votes,
-          email: data.email,
-          pollId: poll.id,
-        });
-        props.onSubmit?.(newParticipant);
+        try {
+          const newParticipant = await addParticipant.mutateAsync({
+            name: data.name,
+            votes: props.votes,
+            email: data.email,
+            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
diff --git a/packages/backend/trpc/routers/polls/participants.ts b/packages/backend/trpc/routers/polls/participants.ts
index 559ce228789..438dd8bce44 100644
--- a/packages/backend/trpc/routers/polls/participants.ts
+++ b/packages/backend/trpc/routers/polls/participants.ts
@@ -53,8 +53,8 @@ export const participants = router({
     .input(
       z.object({
         pollId: z.string(),
-        name: z.string().min(1, "Participant name is required"),
-        email: z.string().optional(),
+        name: z.string().min(1, "Participant name is required").max(100),
+        email: z.string().email().optional(),
         votes: z
           .object({
             optionId: z.string(),

From c49d16f94e7db14f21127b901037ff2f6c550935 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Tue, 18 Jun 2024 20:17:33 +0100
Subject: [PATCH 3/3] Fix

---
 packages/backend/trpc/routers/polls/participants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/backend/trpc/routers/polls/participants.ts b/packages/backend/trpc/routers/polls/participants.ts
index 438dd8bce44..aabd5b94340 100644
--- a/packages/backend/trpc/routers/polls/participants.ts
+++ b/packages/backend/trpc/routers/polls/participants.ts
@@ -54,7 +54,7 @@ export const participants = router({
       z.object({
         pollId: z.string(),
         name: z.string().min(1, "Participant name is required").max(100),
-        email: z.string().email().optional(),
+        email: z.string().optional(),
         votes: z
           .object({
             optionId: z.string(),