chore: bump version to 2.21.8 in package.json and update captcha messages in auth components

- Updated application version from 2.21.7 to 2.21.8 in package.json.
- Modified "verifyingCaptcha" message in auth.json for clearer user feedback during captcha verification.
- Enhanced conditional rendering for captcha loading states in PasswordSignInForm and PasswordSignUpForm components to improve user experience during authentication processes.

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

@@ -10,7 +10,7 @@
   "signOut": "Sign out",
   "signingIn": "Signing in...",
   "signingUp": "Signing up...",
-  "verifyingCaptcha": "Verifying...",
+  "verifyingCaptcha": "Checking you're not a robot...",
   "doNotHaveAccountYet": "Do not have an account yet?",
   "alreadyHaveAnAccount": "Already have an account?",
   "signUpToAcceptInvite": "Please sign in/up to accept the invite",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-supabase-saas-kit-turbo",
-  "version": "2.21.7",
+  "version": "2.21.8",
   "private": true,
   "sideEffects": false,
   "engines": {

packages/features/auth/src/components/password-sign-in-form.tsx

@@ -114,7 +114,7 @@ export function PasswordSignInForm({
           data-test="auth-submit-button"
           className={'group w-full'}
           type="submit"
-          disabled={loading || redirecting}
+          disabled={loading || redirecting || captchaLoading}
         >
           <If condition={redirecting}>
             <span className={'animate-in fade-in slide-in-from-bottom-24'}>
@@ -135,7 +135,11 @@ export function PasswordSignInForm({
           </If>
 
           <If condition={!redirecting && !loading && !captchaLoading}>
-            <span className={'animate-out fade-out flex items-center'}>
+            <span
+              className={
+                'animate-in fade-in slide-in-from-bottom-24 flex items-center'
+              }
+            >
               <Trans i18nKey={'auth:signInWithEmail'} />
 
               <ArrowRight

packages/features/auth/src/components/password-sign-up-form.tsx

@@ -122,15 +122,23 @@ export function PasswordSignUpForm({
           disabled={loading || captchaLoading}
         >
           <If condition={captchaLoading}>
-            <Trans i18nKey={'auth:verifyingCaptcha'} />
+            <span className={'animate-in fade-in slide-in-from-bottom-24'}>
+              <Trans i18nKey={'auth:verifyingCaptcha'} />
+            </span>
           </If>
 
           <If condition={loading && !captchaLoading}>
-            <Trans i18nKey={'auth:signingUp'} />
+            <span className={'animate-in fade-in slide-in-from-bottom-24'}>
+              <Trans i18nKey={'auth:signingUp'} />
+            </span>
           </If>
 
           <If condition={!loading && !captchaLoading}>
-            <>
+            <span
+              className={
+                'animate-in fade-in slide-in-from-bottom-24 flex items-center'
+              }
+            >
               <Trans i18nKey={'auth:signUpWithEmail'} />
 
               <ArrowRight
@@ -138,7 +146,7 @@ export function PasswordSignUpForm({
                   'zoom-in animate-in slide-in-from-left-2 fill-mode-both h-4 delay-500 duration-500'
                 }
               />
-            </>
+            </span>
           </If>
         </Button>
       </form>