Revert "Start unload Script"

This reverts commit 34d373c.

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;
+};

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<Form>) => {
     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<Form>) => {
   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<Form>) => {
     } 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<Form>) => {
                 data.captchaToken,
               );
 
-        unloadCaptchaScript();
         navigateAfterSignInUp(currentWorkspace, currentWorkspaceMember);
       } catch (err: any) {
         enqueueSnackBar(err?.message, {
@@ -155,7 +155,6 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
       workspaceInviteHash,
       navigateAfterSignInUp,
       enqueueSnackBar,
-      unloadCaptchaScript,
     ],
   );
 

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}`;