From 005762c240c2e1592dcfff80130042280585200e Mon Sep 17 00:00:00 2001
From: Antoine Moreaux <moreaux.antoine@gmail.com>
Date: Thu, 6 Feb 2025 19:53:31 +0100
Subject: [PATCH] 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".
---
 .../sign-in-up/components/SignInUpEmailField.tsx  | 14 ++++++++++++--
 .../components/SignInUpGlobalScopeForm.tsx        | 11 ++++++++++-
 .../components/SignInUpWithCredentials.tsx        | 15 ++++++++++++---
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpEmailField.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpEmailField.tsx
index 7c7dee0cd..458ed3c64 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpEmailField.tsx
+++ b/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
             />
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
index 7d7bd58b7..ee7bf7ef0 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
+++ b/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}
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx
index efae60c7c..ae6e16ef1 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx
+++ b/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