MM2-1553 Fix: add validation for fields in register schema

src/components/molecules/RegisterForm/RegisterForm.tsx

@@ -15,6 +15,7 @@ import { useState } from "react"
 import { Container } from "@medusajs/ui"
 import Link from "next/link"
 import { PasswordValidator } from "@/components/cells/PasswordValidator/PasswordValidator"
+import { toast } from "@/lib/helpers/toast"
 
 export const RegisterForm = () => {
   const methods = useForm<RegisterFormData>({
@@ -43,25 +44,30 @@ const Form = () => {
     "8chars": false,
     symbolOrDigit: false,
   })
-  const [error, setError] = useState()
   const {
     handleSubmit,
     register,
     watch,
     formState: { errors, isSubmitting },
-  } = useFormContext()
+  } = useFormContext<RegisterFormData>()
+
+  const submit = async (data: RegisterFormData) => {
+    if (!passwordError.isValid) {
+      return
+    }
 
-  const submit = async (data: FieldValues) => {
     const formData = new FormData()
     formData.append("email", data.email)
     formData.append("password", data.password)
     formData.append("first_name", data.firstName)
     formData.append("last_name", data.lastName)
     formData.append("phone", data.phone)
 
-    const res = passwordError.isValid && (await signup(formData))
+    const res = await signup(formData)
 
-    if (res && !res?.id) setError(res)
+    if (res && !res?.id) {
+      toast.error({ title: res })
+    }
   }
 
   return (
@@ -118,7 +124,6 @@ const Form = () => {
             />
           </div>
 
-          {error && <p className="label-md text-negative">{error}</p>}
           <Button
             className="w-full flex justify-center mt-8 uppercase"
             disabled={isSubmitting}

src/components/molecules/RegisterForm/schema.ts

@@ -1,21 +1,22 @@
 import { z } from "zod"
 
 export const registerFormSchema = z.object({
-  firstName: z.string().nonempty("Please enter first name"),
-  lastName: z.string().nonempty("Please enter last name"),
-  email: z.string().nonempty("Please enter email").email("Invalid email"),
+  firstName: z.string().nonempty("Please enter first name").max(50, "First name must contain up to 50 characters"),
+  lastName: z.string().nonempty("Please enter last name").max(50, "Last name must contain up to 50 characters"),
+  email: z.string().nonempty("Please enter email").email("Invalid email").max(60, "Email must contain up to 60 characters"),
   password: z
     .string()
     .nonempty("Please enter password")
     .min(8, "Password must be at least 8 characters long")
     .regex(/^(?=.*[A-Z])(?=.*[!@#$%^&*])/, {
       message:
         "Password must contain at least one uppercase letter and one special character",
-    }),
+    }).max(64, "Password must contain up to 64 characters"),
   phone: z
     .string()
     .min(6, "Please enter phone number")
-    .regex(/^\+?\d+$/, { message: "Mobile phone must contain digits only" }),
+    .regex(/^\+?\d+$/, { message: "Mobile phone must contain digits only" })
+    .max(20, "Phone number must contain up to 20 characters"),
 })
 
 export type RegisterFormData = z.infer<typeof registerFormSchema>