fix(auth): reset signInUp state when email change (#9990)

When you use a prefilled email the web app checks the db to know if the
user exists. If not the web app enter in signUp mode.
If you changed your email after, the signup mode was not reset.

This PR fixes that.

Fix the error with the message "Invalid sign in up params".

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

@@ -3,6 +3,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm';
+import { isDefined } from 'twenty-shared';
 
 const StyledFullWidthMotionDiv = styled(motion.div)`
   width: 100%;
@@ -12,7 +13,13 @@ const StyledInputContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(3)};
 `;
 
-export const SignInUpEmailField = ({ showErrors }: { showErrors: boolean }) => {
+export const SignInUpEmailField = ({
+  showErrors,
+  onInputChange,
+}: {
+  showErrors: boolean;
+  onInputChange?: (value: string) => void;
+}) => {
   const form = useFormContext<Form>();
 
   return (
@@ -38,7 +45,10 @@ export const SignInUpEmailField = ({ showErrors }: { showErrors: boolean }) => {
               value={value}
               placeholder="Email"
               onBlur={onBlur}
-              onChange={onChange}
+              onChange={(email: string) => {
+                if (isDefined(onInputChange)) onInputChange(email);
+                onChange(email);
+              }}
               error={showErrors ? error?.message : undefined}
               fullWidth
             />

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

@@ -105,6 +105,12 @@ export const SignInUpGlobalScopeForm = () => {
     });
   };
 
+  const onEmailChange = (email: string) => {
+    if (email !== form.getValues('email')) {
+      setSignInUpStep(SignInUpStep.Email);
+    }
+  };
+
   return (
     <>
       <StyledContentContainer>
@@ -116,7 +122,10 @@ export const SignInUpGlobalScopeForm = () => {
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <FormProvider {...form}>
           <StyledForm onSubmit={form.handleSubmit(handleSubmit)}>
-            <SignInUpEmailField showErrors={showErrors} />
+            <SignInUpEmailField
+              showErrors={showErrors}
+              onInputChange={onEmailChange}
+            />
             {signInUpStep === SignInUpStep.Password && (
               <SignInUpPasswordField
                 showErrors={showErrors}

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

@@ -14,7 +14,7 @@ import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import { Loader, MainButton } from 'twenty-ui';
 
@@ -29,7 +29,7 @@ export const SignInUpWithCredentials = () => {
   const { t } = useLingui();
   const form = useFormContext<Form>();
 
-  const signInUpStep = useRecoilValue(signInUpStepState);
+  const [signInUpStep, setSignInUpStep] = useRecoilState(signInUpStepState);
   const [showErrors, setShowErrors] = useState(false);
   const captcha = useRecoilValue(captchaState);
   const isRequestingCaptchaToken = useRecoilValue(
@@ -64,6 +64,12 @@ export const SignInUpWithCredentials = () => {
     }
   };
 
+  const onEmailChange = (email: string) => {
+    if (email !== form.getValues('email')) {
+      setSignInUpStep(SignInUpStep.Email);
+    }
+  };
+
   const buttonTitle = useMemo(() => {
     if (signInUpStep === SignInUpStep.Init) {
       return t`Continue with Email`;
@@ -114,7 +120,10 @@ export const SignInUpWithCredentials = () => {
         signInUpStep === SignInUpStep.Init) && (
         <StyledForm onSubmit={handleSubmit}>
           {signInUpStep !== SignInUpStep.Init && (
-            <SignInUpEmailField showErrors={showErrors} />
+            <SignInUpEmailField
+              showErrors={showErrors}
+              onInputChange={onEmailChange}
+            />
           )}
           {signInUpStep === SignInUpStep.Password && (
             <SignInUpPasswordField