Fix bug in 2FA error message

Related to #3933

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/formbricks/formbricks/issues/3933?shareId=XXXX-XXXX-XXXX-XXXX).

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/DisableTwoFactorModal.tsx

@@ -121,13 +121,20 @@ export const DisableTwoFactorModal = ({ open, setOpen }: TDisableTwoFactorModalP
                 <Controller
                   name="code"
                   control={control}
-                  render={({ field }) => (
+                  render={({ field, formState: { errors } }) => (
-                    <OTPInput
+                    <>
-                      value={field.value}
+                      <OTPInput
-                      valueLength={6}
+                        value={field.value}
-                      onChange={field.onChange}
+                        valueLength={6}
-                      containerClassName="justify-start mt-4"
+                        onChange={field.onChange}
-                    />
+                        containerClassName="justify-start mt-4"
+                      />
+                      {errors.code && (
+                        <p className="mt-2 text-sm text-red-600" id="code-error">
+                          {errors.code.message}
+                        </p>
+                      )}
+                    </>
                   )}
                 />
               )}

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/EnableTwoFactorModal.tsx

@@ -148,7 +148,7 @@ type TEnableCodeProps = {
   refreshData: () => void;
 };
 const EnterCode = ({ setCurrentStep, setOpen, refreshData }: TEnableCodeProps) => {
-  const { control, handleSubmit } = useForm<TEnterCodeFormState>({
+  const { control, handleSubmit, setError } = useForm<TEnterCodeFormState>({
     defaultValues: {
       code: "",
     },
@@ -163,6 +163,9 @@ const EnterCode = ({ setCurrentStep, setOpen, refreshData }: TEnableCodeProps) =
 
         // refresh data to update the UI
         refreshData();
+      } else {
+        const errorMessage = getFormattedErrorMessage(enableTwoFactorAuthResponse);
+        setError("code", { message: errorMessage });
       }
     } catch (err) {
       toast.error(err.message);

apps/web/app/(auth)/auth/login/components/TwoFactor.tsx

@@ -5,7 +5,7 @@ import { Controller, useFormContext } from "react-hook-form";
 import { OTPInput } from "@formbricks/ui/components/OTPInput";
 
 export const TwoFactor = () => {
-  const { control } = useFormContext();
+  const { control, formState: { errors } } = useFormContext();
 
   return (
     <>
@@ -18,7 +18,14 @@ export const TwoFactor = () => {
           control={control}
           name="totpCode"
           render={({ field }) => (
-            <OTPInput value={field.value ?? ""} onChange={field.onChange} valueLength={6} />
+            <>
+              <OTPInput value={field.value ?? ""} onChange={field.onChange} valueLength={6} />
+              {errors.totpCode && (
+                <p className="mt-2 text-sm text-red-600" id="totpCode-error">
+                  {errors.totpCode.message}
+                </p>
+              )}
+            </>
           )}
         />
       </div>