feat: Disable Continue Button for Invalid Email in Sign in/Sign up (#8022)

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>
This commit is contained in:
ZiaCodes
2024-10-25 00:30:54 +05:00
committed by GitHub
parent 9a62bed748
commit 7edfa61571
2 changed files with 8 additions and 4 deletions

View File

@ -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