fix(signup): show multiple signup errors at once

Author: Theodore Li

apps/sim/app/(auth)/reset-password/reset-password-form.tsx

@@ -104,38 +104,38 @@ export function SetNewPasswordForm({
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
 
+    const errors: string[] = []
+
     if (password.length < 8) {
-      setValidationMessage('Password must be at least 8 characters long')
-      return
+      errors.push('Password must be at least 8 characters long')
     }
 
     if (password.length > 100) {
-      setValidationMessage('Password must not exceed 100 characters')
-      return
+      errors.push('Password must not exceed 100 characters')
     }
 
     if (!/[A-Z]/.test(password)) {
-      setValidationMessage('Password must contain at least one uppercase letter')
-      return
+      errors.push('Password must contain at least one uppercase letter')
     }
 
     if (!/[a-z]/.test(password)) {
-      setValidationMessage('Password must contain at least one lowercase letter')
-      return
+      errors.push('Password must contain at least one lowercase letter')
     }
 
     if (!/[0-9]/.test(password)) {
-      setValidationMessage('Password must contain at least one number')
-      return
+      errors.push('Password must contain at least one number')
     }
 
     if (!/[^A-Za-z0-9]/.test(password)) {
-      setValidationMessage('Password must contain at least one special character')
-      return
+      errors.push('Password must contain at least one special character')
     }
 
     if (password !== confirmPassword) {
-      setValidationMessage('Passwords do not match')
+      errors.push('Passwords do not match')
+    }
+
+    if (errors.length > 0) {
+      setValidationMessage(errors.join(' '))
       return
     }
 

apps/sim/app/(auth)/signup/signup-form.tsx

@@ -229,15 +229,12 @@ function SignupFormContent({
         errors.length > 0
       ) {
         if (nameValidationErrors.length > 0) {
-          setNameErrors([nameValidationErrors[0]])
           setShowNameValidationError(true)
         }
         if (emailValidationErrors.length > 0) {
-          setEmailErrors([emailValidationErrors[0]])
           setShowEmailValidationError(true)
         }
         if (errors.length > 0) {
-          setPasswordErrors([errors[0]])
           setShowValidationError(true)
         }
         setIsLoading(false)
@@ -400,7 +397,7 @@ function SignupFormContent({
                 />
                 <div
                   className={cn(
-                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                    'grid transition-[grid-template-rows] duration-200 ease-out',
                     showNameValidationError && nameErrors.length > 0
                       ? 'grid-rows-[1fr]'
                       : 'grid-rows-[0fr]'
@@ -438,7 +435,7 @@ function SignupFormContent({
                 />
                 <div
                   className={cn(
-                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                    'grid transition-[grid-template-rows] duration-200 ease-out',
                     (showEmailValidationError && emailErrors.length > 0) ||
                       (emailError && !showEmailValidationError)
                       ? 'grid-rows-[1fr]'
@@ -497,7 +494,7 @@ function SignupFormContent({
                 </div>
                 <div
                   className={cn(
-                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                    'grid transition-[grid-template-rows] duration-200 ease-out',
                     showValidationError && passwordErrors.length > 0
                       ? 'grid-rows-[1fr]'
                       : 'grid-rows-[0fr]'

apps/sim/app/api/auth/reset-password/route.ts

@@ -26,8 +26,7 @@ export async function POST(request: NextRequest) {
     const validationResult = resetPasswordSchema.safeParse(body)
 
     if (!validationResult.success) {
-      const firstError = validationResult.error.errors[0]
-      const errorMessage = firstError?.message || 'Invalid request data'
+      const errorMessage = validationResult.error.errors.map((e) => e.message).join(' ')
 
       logger.warn('Invalid password reset request data', {
         errors: validationResult.error.format(),