review(): from PR #8656 (#8870)

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx

@@ -31,7 +31,7 @@ import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
 import { signInUpModeState } from '@/auth/states/signInUpModeState';
 import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
 import { useUrlManager } from '@/url-manager/hooks/useUrlManager';
-import { SignInUpMode } from '@/auth/types/signInUpMode.type';
+import { SignInUpMode } from '@/auth/types/signInUpMode';
 
 const StyledContentContainer = styled(motion.div)`
   margin-bottom: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpPasswordField.tsx

@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
 import { StyledText } from 'twenty-ui';
 import { useTheme } from '@emotion/react';
 import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm';
-import { SignInUpMode } from '@/auth/types/signInUpMode.type';
+import { SignInUpMode } from '@/auth/types/signInUpMode';
 
 const StyledFullWidthMotionDiv = styled(motion.div)`
   width: 100%;

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx

@@ -14,7 +14,7 @@ import { useState, useMemo } from 'react';
 import { captchaProviderState } from '@/client-config/states/captchaProviderState';
 import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
 import { FormProvider } from 'react-hook-form';
-import { SignInUpMode } from '@/auth/types/signInUpMode.type';
+import { SignInUpMode } from '@/auth/types/signInUpMode';
 
 const StyledForm = styled.form`
   align-items: center;

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx

@@ -4,15 +4,12 @@ import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { SignInUpStep } from '@/auth/states/signInUpStepState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import styled from '@emotion/styled';
-import { useCallback, useEffect } from 'react';
 import { useRecoilState } from 'recoil';
 import { ActionLink, HorizontalSeparator } from 'twenty-ui';
 import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/SignInUpWithGoogle';
 import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/SignInUpWithMicrosoft';
 import { SignInUpWithSSO } from '@/auth/sign-in-up/components/SignInUpWithSSO';
 import { SignInUpWithCredentials } from '@/auth/sign-in-up/components/SignInUpWithCredentials';
-import { useLocation } from 'react-router-dom';
-import { isDefined } from '~/utils/isDefined';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};
@@ -25,38 +22,7 @@ export const SignInUpWorkspaceScopeForm = () => {
   const { form } = useSignInUpForm();
   const { handleResetPassword } = useHandleResetPassword();
 
-  const { signInUpStep, continueWithEmail, continueWithCredentials } =
-    useSignInUp(form);
-  const location = useLocation();
-
-  const checkAuthProviders = useCallback(() => {
-    if (
-      signInUpStep === SignInUpStep.Init &&
-      !authProviders.google &&
-      !authProviders.microsoft &&
-      !authProviders.sso
-    ) {
-      return continueWithEmail();
-    }
-    const searchParams = new URLSearchParams(location.search);
-    const email = searchParams.get('email');
-    if (isDefined(email) && authProviders.password) {
-      return continueWithCredentials();
-    }
-  }, [
-    continueWithCredentials,
-    location.search,
-    authProviders.google,
-    authProviders.microsoft,
-    authProviders.password,
-    authProviders.sso,
-    continueWithEmail,
-    signInUpStep,
-  ]);
-
-  useEffect(() => {
-    checkAuthProviders();
-  }, [checkAuthProviders]);
+  const { signInUpStep } = useSignInUp(form);
 
   return (
     <>

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect.tsx

@@ -0,0 +1,48 @@
+import { SignInUpStep } from '@/auth/states/signInUpStepState';
+import { isDefined } from '~/utils/isDefined';
+import { useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
+import { authProvidersState } from '@/client-config/states/authProvidersState';
+import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
+import { useRecoilState } from 'recoil';
+import { useCallback, useEffect } from 'react';
+
+const searchParams = new URLSearchParams(window.location.search);
+const email = searchParams.get('email');
+
+export const SignInUpWorkspaceScopeFormEffect = () => {
+  const [authProviders] = useRecoilState(authProvidersState);
+
+  const { form } = useSignInUpForm();
+
+  const { signInUpStep, continueWithEmail, continueWithCredentials } =
+    useSignInUp(form);
+
+  const checkAuthProviders = useCallback(() => {
+    if (
+      signInUpStep === SignInUpStep.Init &&
+      !authProviders.google &&
+      !authProviders.microsoft &&
+      !authProviders.sso
+    ) {
+      return continueWithEmail();
+    }
+
+    if (isDefined(email) && authProviders.password) {
+      return continueWithCredentials();
+    }
+  }, [
+    signInUpStep,
+    authProviders.google,
+    authProviders.microsoft,
+    authProviders.sso,
+    authProviders.password,
+    continueWithEmail,
+    continueWithCredentials,
+  ]);
+
+  useEffect(() => {
+    checkAuthProviders();
+  }, [checkAuthProviders]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx

@@ -16,7 +16,7 @@ import {
 import { AppPath } from '@/types/AppPath';
 import { useAuth } from '../../hooks/useAuth';
 import { signInUpModeState } from '@/auth/states/signInUpModeState';
-import { SignInUpMode } from '@/auth/types/signInUpMode.type';
+import { SignInUpMode } from '@/auth/types/signInUpMode';
 
 export const useSignInUp = (form: UseFormReturn<Form>) => {
   const { enqueueSnackBar } = useSnackBar();

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts

@@ -58,8 +58,10 @@ export const useSignInUpForm = () => {
   useEffect(() => {
     if (isDefined(prefilledEmail)) {
       form.setValue('email', prefilledEmail);
-    } else if (isDeveloperDefaultSignInPrefilled === true) {
-      form.setValue('email', 'tim@apple.dev');
+    }
+
+    if (isDeveloperDefaultSignInPrefilled === true) {
+      form.setValue('email', prefilledEmail ?? 'tim@apple.dev');
       form.setValue('password', 'Applecar2025');
     }
   }, [
@@ -68,5 +70,5 @@ export const useSignInUpForm = () => {
     prefilledEmail,
     location.search,
   ]);
-  return { form, validationSchema };
+  return { form: form, validationSchema };
 };

packages/twenty-front/src/modules/auth/states/signInUpModeState.ts

@@ -1,5 +1,5 @@
 import { createState } from 'twenty-ui';
-import { SignInUpMode } from '@/auth/types/signInUpMode.type';
+import { SignInUpMode } from '@/auth/types/signInUpMode';
 
 export const signInUpModeState = createState<SignInUpMode>({
   key: 'signInUpModeState',