fix : Check double-click behavior when entering 2FA code (#14286)

disable the button when a request is in progress. 

Fixes #14278

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -16,6 +16,7 @@ import { AppPath } from '@/types/AppPath';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { OTPInput, type SlotProps } from 'input-otp';
+import { useState } from 'react';
 import { Controller } from 'react-hook-form';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { MainButton } from 'twenty-ui/input';
@@ -176,6 +177,8 @@ const StyledActionBackLinkContainer = styled.div`
 `;
 
 export const SignInUpTOTPVerification = () => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
   const { getAuthTokensFromOTP } = useAuth();
   const { enqueueErrorSnackBar } = useSnackBar();
 
@@ -188,6 +191,7 @@ export const SignInUpTOTPVerification = () => {
   const { form } = useTwoFactorAuthenticationForm();
 
   const submitOTP = async (values: OTPFormValues) => {
+    setIsLoading(true);
     try {
       const captchaToken = await readCaptchaToken();
 
@@ -205,6 +209,8 @@ export const SignInUpTOTPVerification = () => {
           dedupeKey: 'invalid-otp-dedupe-key',
         },
       });
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -257,7 +263,13 @@ export const SignInUpTOTPVerification = () => {
           )}
         />
       </StyledMainContentContainer>
-      <MainButton title={t`Submit`} type="submit" variant="primary" fullWidth />
+      <MainButton
+        title={t`Submit`}
+        type="submit"
+        variant="primary"
+        fullWidth
+        disabled={isLoading}
+      />
       <StyledActionBackLinkContainer>
         <ClickToActionLink onClick={handleBack}>
           <Trans>Back</Trans>