Fixed: No notification shown when invalid OTP is entered (#9667)

public/locale/en.json

@@ -1013,6 +1013,7 @@
   "invalid_email": "Please enter a valid email address",
   "invalid_ip_address": "Invalid IP Address",
   "invalid_link_msg": "It appears that the password reset link you have used is either invalid or expired. Please request a new password reset link.",
+  "invalid_otp": "Invalid OTP, Please check the OPT and try Again",
   "invalid_password": "Password doesn't meet the requirements",
   "invalid_password_reset_link": "Invalid password reset link",
   "invalid_patient_data": "Invalid Patient Data",

src/components/Auth/Login.tsx

@@ -167,19 +167,24 @@ const Login = (props: { forgot?: boolean }) => {
         }, 200);
       }
     },
+
+    //Invalid OTP error handling
     onError: (error: HTTPError) => {
-      const errorData = error.cause as { errors: Array<{ otp: string }> };
-      const errors = errorData?.errors;
-      if (Array.isArray(errors) && errors.length > 0) {
-        // BE returns a different format for invalid OTP
-        // TODO: fix this
-        //const firstError = errors[0] as OtpError;
-        //setOtpError(firstError.msg);
-        const firstError = errors[0];
-        setOtpValidationError(firstError.otp);
-      } else {
-        setOtpValidationError(t("invalid_otp"));
+      let errorMessage = t("invalid_otp");
+      if (
+        error.cause &&
+        Array.isArray(error.cause.errors) &&
+        error.cause.errors.length > 0
+      ) {
+        const otpError = error.cause.errors.find((e) => e.otp);
+        if (otpError && otpError.otp) {
+          errorMessage = otpError.otp;
+        }
+      } else if (error.message) {
+        errorMessage = error.message;
       }
+      setOtpValidationError(errorMessage);
+      Notification.Error({ msg: errorMessage });
     },
   });