Fix signup submit disabled when waiting for captcha without provider (#9796)

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -16,7 +16,6 @@ import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadingStat
 import { isVerifyPendingState } from '@/auth/states/isVerifyPendingState';
 import { workspacesState } from '@/auth/states/workspaces';
 import { billingState } from '@/client-config/states/billingState';
-import { captchaProviderState } from '@/client-config/states/captchaProviderState';
 import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { supportChatState } from '@/client-config/states/supportChatState';
@@ -51,6 +50,7 @@ import {
 } from '@/auth/states/signInUpStepState';
 import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
 import { BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
+import { captchaState } from '@/client-config/states/captchaState';
 import { isEmailVerificationRequiredState } from '@/client-config/states/isEmailVerificationRequiredState';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { useIsCurrentLocationOnAWorkspaceSubdomain } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspaceSubdomain';
@@ -126,9 +126,7 @@ export const useAuth = () => {
           .getValue();
         const supportChat = snapshot.getLoadable(supportChatState).getValue();
         const isDebugMode = snapshot.getLoadable(isDebugModeState).getValue();
-        const captchaProvider = snapshot
+        const captcha = snapshot.getLoadable(captchaState).getValue();
-          .getLoadable(captchaProviderState)
-          .getValue();
         const clientConfigApiStatus = snapshot
           .getLoadable(clientConfigApiStatusState)
           .getValue();
@@ -151,7 +149,7 @@ export const useAuth = () => {
           );
           set(supportChatState, supportChat);
           set(isDebugModeState, isDebugMode);
-          set(captchaProviderState, captchaProvider);
+          set(captchaState, captcha);
           set(clientConfigApiStatusState, clientConfigApiStatus);
           set(isCurrentUserLoadedState, isCurrentUserLoaded);
           set(isMultiWorkspaceEnabledState, isMultiWorkspaceEnabled);

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx

@@ -1,21 +1,21 @@
+import { useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
+import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import {
   SignInUpStep,
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
-import { useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
-import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 
+import { SignInUpEmailField } from '@/auth/sign-in-up/components/SignInUpEmailField';
+import { SignInUpPasswordField } from '@/auth/sign-in-up/components/SignInUpPasswordField';
+import { SignInUpMode } from '@/auth/types/signInUpMode';
+import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
+import { captchaState } from '@/client-config/states/captchaState';
+import styled from '@emotion/styled';
+import { useMemo, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useRecoilValue } from 'recoil';
 import { Loader, MainButton } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
-import { SignInUpEmailField } from '@/auth/sign-in-up/components/SignInUpEmailField';
-import { useRecoilValue } from 'recoil';
-import styled from '@emotion/styled';
-import { SignInUpPasswordField } from '@/auth/sign-in-up/components/SignInUpPasswordField';
-import { useState, useMemo } from 'react';
-import { captchaProviderState } from '@/client-config/states/captchaProviderState';
-import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
-import { useFormContext } from 'react-hook-form';
-import { SignInUpMode } from '@/auth/types/signInUpMode';
 
 const StyledForm = styled.form`
   align-items: center;
@@ -29,7 +29,7 @@ export const SignInUpWithCredentials = () => {
 
   const signInUpStep = useRecoilValue(signInUpStepState);
   const [showErrors, setShowErrors] = useState(false);
-  const captchaProvider = useRecoilValue(captchaProviderState);
+  const captcha = useRecoilValue(captchaState);
   const isRequestingCaptchaToken = useRecoilValue(
     isRequestingCaptchaTokenState,
   );
@@ -86,7 +86,7 @@ export const SignInUpWithCredentials = () => {
 
   const shouldWaitForCaptchaToken =
     signInUpStep !== SignInUpStep.Init &&
-    isDefined(captchaProvider?.provider) &&
+    isDefined(captcha?.provider) &&
     isRequestingCaptchaToken;
 
   const isEmailStepSubmitButtonDisabledCondition =

packages/twenty-front/src/modules/captcha/components/CaptchaProviderScriptLoaderEffect.tsx

@@ -3,23 +3,23 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
 import { getCaptchaUrlByProvider } from '@/captcha/utils/getCaptchaUrlByProvider';
-import { captchaProviderState } from '@/client-config/states/captchaProviderState';
+import { captchaState } from '@/client-config/states/captchaState';
 import { CaptchaDriverType } from '~/generated/graphql';
 
 export const CaptchaProviderScriptLoaderEffect = () => {
-  const captchaProvider = useRecoilValue(captchaProviderState);
+  const captcha = useRecoilValue(captchaState);
   const setIsCaptchaScriptLoaded = useSetRecoilState(
     isCaptchaScriptLoadedState,
   );
 
   useEffect(() => {
-    if (!captchaProvider?.provider || !captchaProvider.siteKey) {
+    if (!captcha?.provider || !captcha.siteKey) {
       return;
     }
 
     const scriptUrl = getCaptchaUrlByProvider(
-      captchaProvider.provider,
+      captcha.provider,
-      captchaProvider.siteKey,
+      captcha.siteKey,
     );
     if (!scriptUrl) {
       return;
@@ -32,7 +32,7 @@ export const CaptchaProviderScriptLoaderEffect = () => {
       scriptElement = document.createElement('script');
       scriptElement.src = scriptUrl;
       scriptElement.onload = () => {
-        if (captchaProvider.provider === CaptchaDriverType.GoogleRecaptcha) {
+        if (captcha.provider === CaptchaDriverType.GoogleRecaptcha) {
           window.grecaptcha?.ready(() => {
             setIsCaptchaScriptLoaded(true);
           });
@@ -42,11 +42,7 @@ export const CaptchaProviderScriptLoaderEffect = () => {
       };
       document.body.appendChild(scriptElement);
     }
-  }, [
+  }, [captcha?.provider, captcha?.siteKey, setIsCaptchaScriptLoaded]);
-    captchaProvider?.provider,
-    captchaProvider?.siteKey,
-    setIsCaptchaScriptLoaded,
-  ]);
 
   return <></>;
 };

packages/twenty-front/src/modules/captcha/hooks/useRequestFreshCaptchaToken.ts

@@ -2,7 +2,7 @@ import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
 import { captchaTokenState } from '@/captcha/states/captchaTokenState';
 import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
-import { captchaProviderState } from '@/client-config/states/captchaProviderState';
+import { captchaState } from '@/client-config/states/captchaState';
 import { CaptchaDriverType } from '~/generated-metadata/graphql';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
@@ -22,11 +22,9 @@ export const useRequestFreshCaptchaToken = () => {
   const requestFreshCaptchaToken = useRecoilCallback(
     ({ snapshot }) =>
       async () => {
-        const captchaProvider = snapshot
+        const captcha = snapshot.getLoadable(captchaState).getValue();
-          .getLoadable(captchaProviderState)
-          .getValue();
 
-        if (isUndefinedOrNull(captchaProvider)) {
+        if (isUndefinedOrNull(captcha?.provider)) {
           return;
         }
 
@@ -34,10 +32,10 @@ export const useRequestFreshCaptchaToken = () => {
 
         let captchaWidget: any;
 
-        switch (captchaProvider.provider) {
+        switch (captcha.provider) {
           case CaptchaDriverType.GoogleRecaptcha:
             window.grecaptcha
-              .execute(captchaProvider.siteKey, {
+              .execute(captcha.siteKey, {
                 action: 'submit',
               })
               .then((token: string) => {
@@ -49,7 +47,7 @@ export const useRequestFreshCaptchaToken = () => {
             // TODO: fix workspace-no-hardcoded-colors rule
             // eslint-disable-next-line @nx/workspace-no-hardcoded-colors
             captchaWidget = window.turnstile.render('#captcha-widget', {
-              sitekey: captchaProvider.siteKey,
+              sitekey: captcha.siteKey,
             });
             window.turnstile.execute(captchaWidget, {
               callback: (token: string) => {

packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx

@@ -2,7 +2,7 @@ import { apiConfigState } from '@/client-config/states/apiConfigState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { billingState } from '@/client-config/states/billingState';
 import { canManageFeatureFlagsState } from '@/client-config/states/canManageFeatureFlagsState';
-import { captchaProviderState } from '@/client-config/states/captchaProviderState';
+import { captchaState } from '@/client-config/states/captchaState';
 import { chromeExtensionIdState } from '@/client-config/states/chromeExtensionIdState';
 import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
 import { isAnalyticsEnabledState } from '@/client-config/states/isAnalyticsEnabledState';
@@ -43,7 +43,7 @@ export const ClientConfigProviderEffect = () => {
     clientConfigApiStatusState,
   );
 
-  const setCaptchaProvider = useSetRecoilState(captchaProviderState);
+  const setCaptcha = useSetRecoilState(captchaState);
 
   const setChromeExtensionId = useSetRecoilState(chromeExtensionIdState);
 
@@ -110,7 +110,7 @@ export const ClientConfigProviderEffect = () => {
       environment: data?.clientConfig?.sentry?.environment,
     });
 
-    setCaptchaProvider({
+    setCaptcha({
       provider: data?.clientConfig?.captcha?.provider,
       siteKey: data?.clientConfig?.captcha?.siteKey,
     });
@@ -134,7 +134,7 @@ export const ClientConfigProviderEffect = () => {
     setSentryConfig,
     loading,
     setClientConfigApiStatus,
-    setCaptchaProvider,
+    setCaptcha,
     setChromeExtensionId,
     setApiConfig,
     setIsAnalyticsEnabled,

packages/twenty-front/src/modules/client-config/states/captchaState.ts

@@ -2,7 +2,7 @@ import { createState } from '@ui/utilities/state/utils/createState';
 
 import { Captcha } from '~/generated/graphql';
 
-export const captchaProviderState = createState<Captcha | null>({
+export const captchaState = createState<Captcha | null>({
-  key: 'captchaProviderState',
+  key: 'captchaState',
   defaultValue: null,
 });