diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx index b78b82320..0d1fd5d17 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx @@ -21,12 +21,12 @@ import { import { SignInUpMode } from '@/auth/types/signInUpMode'; import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken'; import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken'; +import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState'; import { authProvidersState } from '@/client-config/states/authProvidersState'; import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain'; import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { isDefined } from '~/utils/isDefined'; -import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState'; const StyledContentContainer = styled(motion.div)` margin-bottom: ${({ theme }) => theme.spacing(8)}; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect.tsx index 00a7831f1..894b4eacc 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect.tsx @@ -1,15 +1,22 @@ import { useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp'; import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm'; import { SignInUpStep } from '@/auth/states/signInUpStepState'; +import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState'; +import { captchaState } from '@/client-config/states/captchaState'; import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState'; import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { isDefined } from '~/utils/isDefined'; -import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState'; const searchParams = new URLSearchParams(window.location.search); const email = searchParams.get('email'); +enum LoadingStatus { + Loading = 'loading', + RequestingCaptchaToken = 'requestingCaptchaToken', + Done = 'done', +} + export const SignInUpWorkspaceScopeFormEffect = () => { const workspaceAuthProviders = useRecoilValue(workspaceAuthProvidersState); @@ -17,7 +24,11 @@ export const SignInUpWorkspaceScopeFormEffect = () => { isRequestingCaptchaTokenState, ); - const [isInitialLoading, setIsInitialLoading] = useState(false); + const captcha = useRecoilValue(captchaState); + + const [loadingStatus, setLoadingStatus] = useState( + LoadingStatus.Loading, + ); const { form } = useSignInUpForm(); @@ -25,10 +36,26 @@ export const SignInUpWorkspaceScopeFormEffect = () => { useSignInUp(form); useEffect(() => { - if (!isRequestingCaptchaToken) { - setIsInitialLoading(true); + if (loadingStatus === LoadingStatus.Done) { + return; } - }, [isRequestingCaptchaToken]); + + if (!isDefined(captcha?.provider)) { + setLoadingStatus(LoadingStatus.Done); + return; + } + + if (isRequestingCaptchaToken) { + setLoadingStatus(LoadingStatus.RequestingCaptchaToken); + } + + if ( + !isRequestingCaptchaToken && + loadingStatus === LoadingStatus.RequestingCaptchaToken + ) { + setLoadingStatus(LoadingStatus.Done); + } + }, [captcha?.provider, isRequestingCaptchaToken, loadingStatus]); useEffect(() => { if ( @@ -44,7 +71,7 @@ export const SignInUpWorkspaceScopeFormEffect = () => { if ( isDefined(email) && workspaceAuthProviders.password && - isInitialLoading + loadingStatus === LoadingStatus.Done ) { continueWithCredentials(); } @@ -56,7 +83,7 @@ export const SignInUpWorkspaceScopeFormEffect = () => { workspaceAuthProviders.password, continueWithEmail, continueWithCredentials, - isInitialLoading, + loadingStatus, ]); return <>;