fix(auth): show captcha errors as form-level message, not password error

Captcha failures were misleadingly displayed under the password field.
Added a dedicated formError state that renders above the submit button,
making it clear the issue is with verification, not the password.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: waleedlatif1

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

@@ -87,6 +87,7 @@ export default function LoginPage({
   const [password, setPassword] = useState('')
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const [showValidationError, setShowValidationError] = useState(false)
+  const [formError, setFormError] = useState<string | null>(null)
   const turnstileRef = useRef<TurnstileInstance>(null)
   const turnstileSiteKey = useMemo(() => getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'), [])
   const buttonClass = useBrandedButtonClass()
@@ -176,13 +177,13 @@ export default function LoginPage({
           turnstileRef.current.execute()
           token = await turnstileRef.current.getResponsePromise(15_000)
         } catch {
-          setPasswordErrors(['Captcha verification failed. Please try again.'])
-          setShowValidationError(true)
+          setFormError('Captcha verification failed. Please try again.')
           setIsLoading(false)
           return
         }
       }
 
+      setFormError(null)
       const result = await client.signIn.email(
         {
           email,
@@ -478,6 +479,12 @@ export default function LoginPage({
             />
           )}
 
+          {formError && (
+            <div className='text-red-400 text-xs'>
+              <p>{formError}</p>
+            </div>
+          )}
+
           <BrandedButton
             type='submit'
             disabled={isLoading}

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

@@ -91,6 +91,7 @@ function SignupFormContent({
   const [emailError, setEmailError] = useState('')
   const [emailErrors, setEmailErrors] = useState<string[]>([])
   const [showEmailValidationError, setShowEmailValidationError] = useState(false)
+  const [formError, setFormError] = useState<string | null>(null)
   const turnstileRef = useRef<TurnstileInstance>(null)
   const turnstileSiteKey = useMemo(() => getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'), [])
   const buttonClass = useBrandedButtonClass()
@@ -256,13 +257,13 @@ function SignupFormContent({
           turnstileRef.current.execute()
           token = await turnstileRef.current.getResponsePromise(15_000)
         } catch {
-          setPasswordErrors(['Captcha verification failed. Please try again.'])
-          setShowValidationError(true)
+          setFormError('Captcha verification failed. Please try again.')
           setIsLoading(false)
           return
         }
       }
 
+      setFormError(null)
       const response = await client.signUp.email(
         {
           email: emailValue,
@@ -484,6 +485,12 @@ function SignupFormContent({
             />
           )}
 
+          {formError && (
+            <div className='text-red-400 text-xs'>
+              <p>{formError}</p>
+            </div>
+          )}
+
           <BrandedButton
             type='submit'
             disabled={isLoading}