From 7edfa615714df310f0d2f616f2e8317866f07057 Mon Sep 17 00:00:00 2001
From: ZiaCodes <72739794+Khaan25@users.noreply.github.com>
Date: Fri, 25 Oct 2024 00:30:54 +0500
Subject: [PATCH] feat: Disable Continue Button for Invalid Email in Sign
 in/Sign up (#8022)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR fixes #7967

Here's a preview of the working solution:


https://github.com/user-attachments/assets/8918e0ac-c45a-48d2-ac90-004b05ec76f3

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
---
 .../modules/auth/sign-in-up/components/SignInUpForm.tsx   | 8 ++++++--
 .../src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts  | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
index bed04b2e8..c75a35834 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
@@ -2,7 +2,10 @@ import { FooterNote } from '@/auth/sign-in-up/components/FooterNote';
 import { HorizontalSeparator } from '@/auth/sign-in-up/components/HorizontalSeparator';
 import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword';
 import { SignInUpMode, useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
-import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
+import {
+  useSignInUpForm,
+  validationSchema,
+} from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle';
 import { useSignInWithMicrosoft } from '@/auth/sign-in-up/hooks/useSignInWithMicrosoft';
 import { SignInUpStep } from '@/auth/states/signInUpStepState';
@@ -127,7 +130,8 @@ export const SignInUpForm = () => {
 
   const isEmailStepSubmitButtonDisabledCondition =
     signInUpStep === SignInUpStep.Email &&
-    (form.watch('email')?.length === 0 || shouldWaitForCaptchaToken);
+    (!validationSchema.shape.email.safeParse(form.watch('email')).success ||
+      shouldWaitForCaptchaToken);
 
   // TODO: isValid is actually a proxy function. If it is not rendered the first time, react might not trigger re-renders
   // We make the isValid check synchronous and update a reactState to make sure this does not happen
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts
index 817b27667..07e2aaf7b 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts
@@ -1,13 +1,13 @@
+import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { useRecoilValue } from 'recoil';
 import { z } from 'zod';
 
 import { PASSWORD_REGEX } from '@/auth/utils/passwordRegex';
 import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
 
-const validationSchema = z
+export const validationSchema = z
   .object({
     exist: z.boolean(),
     email: z.string().trim().email('Email must be a valid email'),