From 2d381286dc16b9be6a6a3668881b2ca28c944e77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Thu, 25 Apr 2024 15:56:01 +0200 Subject: [PATCH] Revert "Start unload Script" This reverts commit 34d373cd01884729d0ce6bb0c3c304fb1790b83a. --- .../src/hooks/useCaptchaScript.ts | 76 ------------------- .../src/hooks/useInsertCaptchaScript.ts | 40 ++++++++++ .../auth/sign-in-up/hooks/useSignInUp.tsx | 11 ++- packages/twenty-front/src/utils/captcha.ts | 9 ++- 4 files changed, 50 insertions(+), 86 deletions(-) delete mode 100644 packages/twenty-front/src/hooks/useCaptchaScript.ts create mode 100644 packages/twenty-front/src/hooks/useInsertCaptchaScript.ts 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
) => { checkUserExists: { checkUserExistsQuery }, } = useAuth(); - const { loadCaptchaScript, unloadCaptchaScript } = useCaptchaScript(); + const isCaptchaScriptLoaded = useInsertCaptchaScript(); const { generateCaptchaToken } = useGenerateCaptchaToken(); const [isGeneratingCaptchaToken, setIsGeneratingCaptchaToken] = @@ -60,8 +60,9 @@ export const useSignInUp = (form: UseFormReturn) => { const getCaptchaToken = useCallback(async () => { setIsGeneratingCaptchaToken(true); try { - const isCaptchaScriptLoaded = loadCaptchaScript(); + console.log(isCaptchaScriptLoaded); const captchaToken = await generateCaptchaToken(isCaptchaScriptLoaded); + console.log(captchaToken); if (!isUndefinedOrNull(captchaToken)) { form.setValue('captchaToken', captchaToken); } @@ -79,7 +80,7 @@ export const useSignInUp = (form: UseFormReturn) => { } finally { setIsGeneratingCaptchaToken(false); } - }, [form, generateCaptchaToken, loadCaptchaScript, enqueueSnackBar]); + }, [form, generateCaptchaToken, isCaptchaScriptLoaded, enqueueSnackBar]); const continueWithEmail = useCallback(() => { setSignInUpStep(SignInUpStep.Email); @@ -139,7 +140,6 @@ export const useSignInUp = (form: UseFormReturn) => { data.captchaToken, ); - unloadCaptchaScript(); navigateAfterSignInUp(currentWorkspace, currentWorkspaceMember); } catch (err: any) { enqueueSnackBar(err?.message, { @@ -155,7 +155,6 @@ export const useSignInUp = (form: UseFormReturn) => { workspaceInviteHash, navigateAfterSignInUp, enqueueSnackBar, - unloadCaptchaScript, ], ); diff --git a/packages/twenty-front/src/utils/captcha.ts b/packages/twenty-front/src/utils/captcha.ts index 6cc9b2bbd095..95921ee162ec 100644 --- a/packages/twenty-front/src/utils/captcha.ts +++ b/packages/twenty-front/src/utils/captcha.ts @@ -1,9 +1,10 @@ import { CaptchaDriverType } from '~/generated-metadata/graphql'; -export const getCaptchaUrlByProvider = ( - name: CaptchaDriverType, - siteKey: string, -) => { +export const getCaptchaUrlByProvider = (name: string, siteKey: string) => { + if (!name) { + return ''; + } + switch (name) { case CaptchaDriverType.GoogleRecatpcha: return `https://www.google.com/recaptcha/api.js?render=${siteKey}`;