🐛 Fix issues with email change flow (#1495)

apps/web/public/locales/en/app.json

@@ -289,5 +289,5 @@
   "emailChangeRequestSentDescription": "To complete the change, please check your email for a verification link.",
   "profileEmailAddress": "Email Address",
   "profileEmailAddressDescription": "Your email address is used to log in to your account",
-  "emailAlreadyInUse": "Email already in use. Please try a different one or delete the existing account."
+  "emailAlreadyInUse": "This email address is already associated with another account. Please use a different email address."
 }

apps/web/src/app/[locale]/(admin)/settings/profile/profile-email-address.tsx

@@ -1,3 +1,4 @@
+import { zodResolver } from "@hookform/resolvers/zod";
 import { usePostHog } from "@rallly/posthog/client";
 import { Alert, AlertDescription, AlertTitle } from "@rallly/ui/alert";
 import { Button } from "@rallly/ui/button";
@@ -16,23 +17,26 @@ import { InfoIcon } from "lucide-react";
 import React from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { z } from "zod";
 
 import { Trans } from "@/components/trans";
 import { useUser } from "@/components/user-provider";
 import { trpc } from "@/trpc/client";
 
+const emailChangeFormData = z.object({
+  email: z.string().email(),
+});
+
+type EmailChangeFormData = z.infer<typeof emailChangeFormData>;
 export const ProfileEmailAddress = () => {
   const { user, refresh } = useUser();
   const requestEmailChange = trpc.user.requestEmailChange.useMutation();
   const posthog = usePostHog();
-  const form = useForm<{
-    name: string;
-    email: string;
-  }>({
+  const form = useForm<EmailChangeFormData>({
     defaultValues: {
-      name: user.isGuest ? "" : user.name,
       email: user.email ?? "",
     },
+    resolver: zodResolver(emailChangeFormData),
   });
   const { t } = useTranslation("app");
   const { toast } = useToast();
@@ -82,7 +86,6 @@ export const ProfileEmailAddress = () => {
       <Form {...form}>
         <form
           onSubmit={handleSubmit(async (data) => {
-            reset(data);
             if (data.email !== user.email) {
               posthog.capture("email change requested");
               const res = await requestEmailChange.mutateAsync({
@@ -99,9 +102,9 @@ export const ProfileEmailAddress = () => {
                 }
               } else {
                 setDidRequestEmailChange(true);
+                reset(data);
               }
             }
-            await refresh();
           })}
         >
           <div className="flex flex-col gap-y-4">

apps/web/src/app/[locale]/(admin)/settings/profile/profile-settings.tsx

@@ -1,3 +1,4 @@
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "@rallly/ui/button";
 import {
   Form,
@@ -5,27 +6,32 @@ import {
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
 } from "@rallly/ui/form";
 import { Input } from "@rallly/ui/input";
 import { useForm } from "react-hook-form";
+import { z } from "zod";
 
 import { ProfilePicture } from "@/app/[locale]/(admin)/settings/profile/profile-picture";
 import { Trans } from "@/components/trans";
 import { useUser } from "@/components/user-provider";
 import { trpc } from "@/trpc/client";
 
+const profileSettingsFormData = z.object({
+  name: z.string().min(1).max(100),
+});
+
+type ProfileSettingsFormData = z.infer<typeof profileSettingsFormData>;
+
 export const ProfileSettings = () => {
   const { user, refresh } = useUser();
   const changeName = trpc.user.changeName.useMutation();
 
-  const form = useForm<{
-    name: string;
-    email: string;
-  }>({
+  const form = useForm<ProfileSettingsFormData>({
     defaultValues: {
       name: user.isGuest ? "" : user.name,
-      email: user.email ?? "",
     },
+    resolver: zodResolver(profileSettingsFormData),
   });
 
   const { control, handleSubmit, formState, reset } = form;
@@ -54,6 +60,7 @@ export const ProfileSettings = () => {
                   <FormControl>
                     <Input id="name" {...field} />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />

packages/emails/locales/en/emails.json

@@ -52,6 +52,6 @@
   "changeEmailRequest_text2": "To complete this change, please click the button below:",
   "changeEmailRequest_button": "Verify Email Address",
   "changeEmailRequest_subject": "Verify your new email address",
-  "changeEmailRequest_text3": "This link will expire in 10 minutes. If you did not request this change, please contact support.",
+  "changeEmailRequest_text3": "This link will expire in 10 minutes. If you did not request this change, please ignore this email.",
   "changeEmailRequest_text1": "We've received a request to change the email address for your account from <b>{{fromEmail}}</b> to <b>{{toEmail}}</b>."
 }