diff --git a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts index dec0be5cb..b25b7cb3e 100644 --- a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts +++ b/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 - .getLoadable(captchaProviderState) - .getValue(); + const captcha = snapshot.getLoadable(captchaState).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); diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx index e385edd8c..29691cfa7 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx +++ b/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 = diff --git a/packages/twenty-front/src/modules/captcha/components/CaptchaProviderScriptLoaderEffect.tsx b/packages/twenty-front/src/modules/captcha/components/CaptchaProviderScriptLoaderEffect.tsx index aae90964f..8611436a8 100644 --- a/packages/twenty-front/src/modules/captcha/components/CaptchaProviderScriptLoaderEffect.tsx +++ b/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, - captchaProvider.siteKey, + captcha.provider, + 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); } - }, [ - captchaProvider?.provider, - captchaProvider?.siteKey, - setIsCaptchaScriptLoaded, - ]); + }, [captcha?.provider, captcha?.siteKey, setIsCaptchaScriptLoaded]); return <>; }; diff --git a/packages/twenty-front/src/modules/captcha/hooks/useRequestFreshCaptchaToken.ts b/packages/twenty-front/src/modules/captcha/hooks/useRequestFreshCaptchaToken.ts index 63e6ee725..13d1fe2c1 100644 --- a/packages/twenty-front/src/modules/captcha/hooks/useRequestFreshCaptchaToken.ts +++ b/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 - .getLoadable(captchaProviderState) - .getValue(); + const captcha = snapshot.getLoadable(captchaState).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) => { diff --git a/packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx b/packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx index 64171344e..ac34e0a6f 100644 --- a/packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx +++ b/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, diff --git a/packages/twenty-front/src/modules/client-config/states/captchaProviderState.ts b/packages/twenty-front/src/modules/client-config/states/captchaState.ts similarity index 59% rename from packages/twenty-front/src/modules/client-config/states/captchaProviderState.ts rename to packages/twenty-front/src/modules/client-config/states/captchaState.ts index ca312acf0..8d22c88f6 100644 --- a/packages/twenty-front/src/modules/client-config/states/captchaProviderState.ts +++ b/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({ - key: 'captchaProviderState', +export const captchaState = createState({ + key: 'captchaState', defaultValue: null, });