admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
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 { HorizontalSeparator } from '@/auth/sign-in-up/components/HorizontalSeparator';
import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword'; import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword';
import { SignInUpMode, useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp'; 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 { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle';
import { useSignInWithMicrosoft } from '@/auth/sign-in-up/hooks/useSignInWithMicrosoft'; import { useSignInWithMicrosoft } from '@/auth/sign-in-up/hooks/useSignInWithMicrosoft';
import { SignInUpStep } from '@/auth/states/signInUpStepState'; import { SignInUpStep } from '@/auth/states/signInUpStepState';
@ -127,7 +130,8 @@ export const SignInUpForm = () => {
const isEmailStepSubmitButtonDisabledCondition = const isEmailStepSubmitButtonDisabledCondition =
signInUpStep === SignInUpStep.Email && 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 // 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 // We make the isValid check synchronous and update a reactState to make sure this does not happen

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

@ -1,13 +1,13 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { z } from 'zod'; import { z } from 'zod';
import { PASSWORD_REGEX } from '@/auth/utils/passwordRegex'; import { PASSWORD_REGEX } from '@/auth/utils/passwordRegex';
import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState'; import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
const validationSchema = z export const validationSchema = z
.object({ .object({
exist: z.boolean(), exist: z.boolean(),
email: z.string().trim().email('Email must be a valid email'), email: z.string().trim().email('Email must be a valid email'),