diff --git a/packages/twenty-front/src/hooks/useCaptchaScript.ts b/packages/twenty-front/src/hooks/useCaptchaScript.ts deleted file mode 100644 index c187a87c1eb5..000000000000 --- a/packages/twenty-front/src/hooks/useCaptchaScript.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { useRecoilState, useRecoilValue } from 'recoil'; - -import { isCaptchaLoadedState } from '@/auth/states/isCaptchaLoadedState'; -import { captchaProviderState } from '@/client-config/states/captchaProviderState'; -import { getCaptchaUrlByProvider } from '~/utils/captcha'; -import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; - -export const useCaptchaScript = () => { - const captchaProvider = useRecoilValue(captchaProviderState); - const [isCaptchaLoaded, setIsCaptchaLoaded] = - useRecoilState(isCaptchaLoadedState); - - const scriptElementId = 'captcha-script'; - let scriptElement: HTMLScriptElement | null = document.getElementById( - scriptElementId, - ) as HTMLScriptElement | null; - - const loadCaptchaScript = () => { - if ( - isUndefinedOrNull(captchaProvider) || - isUndefinedOrNull(captchaProvider.provider) || - isUndefinedOrNull(captchaProvider.siteKey) - ) { - return false; - } - const scriptUrl = getCaptchaUrlByProvider( - captchaProvider.provider, - captchaProvider.siteKey, - ); - if (!scriptUrl) { - return false; - } - - if (isUndefinedOrNull(scriptElement)) { - scriptElement = document.createElement('script'); - scriptElement.id = scriptElementId; - scriptElement.src = scriptUrl; - scriptElement.onload = () => { - setIsCaptchaLoaded(true); - }; - document.body.appendChild(scriptElement); - } - return isCaptchaLoaded; - }; - - const unloadCaptchaScript = () => { - if (!isUndefinedOrNull(scriptElement)) { - scriptElement.remove(); - } - - try { - if (!isUndefinedOrNull(window.grecaptcha)) { - window.grecaptcha.reset(scriptElementId); - } - if (!isUndefinedOrNull(window.turnstile)) { - window.turnstile.reset('#' + scriptElementId); - } - if (!isUndefinedOrNull(window.hcaptcha)) { - window.hcaptcha.reset(scriptElementId); - } - } catch (error) { - // There is no official method to unload - // so the closest is to call a reset that will fail - } - - delete window.grecaptcha; - delete window.turnstile; - delete window.hcaptcha; - - setIsCaptchaLoaded(false); - - return isCaptchaLoaded; - }; - - return { loadCaptchaScript, unloadCaptchaScript }; -}; diff --git a/packages/twenty-front/src/hooks/useInsertCaptchaScript.ts b/packages/twenty-front/src/hooks/useInsertCaptchaScript.ts new file mode 100644 index 000000000000..da5f4a89e0e4 --- /dev/null +++ b/packages/twenty-front/src/hooks/useInsertCaptchaScript.ts @@ -0,0 +1,40 @@ +import { useEffect } from 'react'; +import { useRecoilState, useRecoilValue } from 'recoil'; + +import { isCaptchaLoadedState } from '@/auth/states/isCaptchaLoadedState'; +import { captchaProviderState } from '@/client-config/states/captchaProviderState'; +import { getCaptchaUrlByProvider } from '~/utils/captcha'; + +export const useInsertCaptchaScript = () => { + const captchaProvider = useRecoilValue(captchaProviderState); + const [isCaptchaLoaded, setIsCaptchaLoaded] = + useRecoilState(isCaptchaLoadedState); + + useEffect(() => { + if (!captchaProvider?.provider || !captchaProvider.siteKey) { + return; + } + + const scriptUrl = getCaptchaUrlByProvider( + captchaProvider.provider, + captchaProvider.siteKey, + ); + if (!scriptUrl) { + return; + } + + let scriptElement: HTMLScriptElement | null = document.querySelector( + `script[src="${scriptUrl}"]`, + ); + if (!scriptElement) { + scriptElement = document.createElement('script'); + scriptElement.src = scriptUrl; + scriptElement.onload = () => { + setIsCaptchaLoaded(true); + }; + document.body.appendChild(scriptElement); + } + }, [captchaProvider?.provider, captchaProvider?.siteKey, setIsCaptchaLoaded]); + + return isCaptchaLoaded; +}; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx index 5482ed69149b..9c9bf4a7293c 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx @@ -7,7 +7,7 @@ import { useNavigateAfterSignInUp } from '@/auth/sign-in-up/hooks/useNavigateAft import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm'; import { AppPath } from '@/types/AppPath'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; -import { useCaptchaScript } from '~/hooks/useCaptchaScript'; +import { useInsertCaptchaScript } from '~/hooks/useInsertCaptchaScript'; import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; @@ -51,7 +51,7 @@ export const useSignInUp = (form: UseFormReturn