fix:M2-10378,M2-10381 (#2194)

Author: sricharan-varanasi

src/modules/Auth/utils/mfa.utils.test.ts

@@ -198,6 +198,15 @@ describe('MFA Utilities', () => {
     it('preserves existing hyphen position', () => {
       expect(formatRecoveryCode('ABCDE-12345')).toBe('ABCDE-12345');
     });
+
+    it('handles deletion from formatted code without double hyphens', () => {
+      // Simulate deleting from "ABCDE-12345" to "ABCD-12345"
+      expect(formatRecoveryCode('ABCD-12345')).toBe('ABCD1-2345');
+      // Simulate deleting all from second half: "ABCDE-" becomes "ABCDE"
+      expect(formatRecoveryCode('ABCDE-')).toBe('ABCDE');
+      // Simulate deleting from first half leaving hyphen: "ABC-12345"
+      expect(formatRecoveryCode('ABC-12345')).toBe('ABC12-345');
+    });
   });
 
   describe('isValidMFACode', () => {

src/modules/Dashboard/features/AccountSettings/RemoveMFA/RemoveMFAConfirmation.styles.ts

@@ -102,7 +102,7 @@ export const StyledButton = styled('button')`
   padding: 10px 24px;
   display: flex;
   align-items: center;
-  justify-center;
+  justify-content: center;
 
   &.primary {
     background: ${variables.palette.error};

src/modules/Dashboard/features/AccountSettings/shared/ConfirmIdentityRecoveryCode.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { Box } from '@mui/material';
 
 import { Svg } from 'shared/components/Svg';
+import { formatRecoveryCode } from 'modules/Auth/utils/mfa.utils';
 
 import {
   StyledDialog,
@@ -57,19 +58,9 @@ export const ConfirmIdentityRecoveryCode = ({
   const shouldDisableInput = !!onRetry;
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value.toUpperCase();
-    // Allow only alphanumeric characters and dash
-    const sanitized = value.replace(/[^A-Z0-9-]/g, '');
-
-    // Auto-insert hyphen after 5 characters (format: XXXXX-XXXXX)
-    if (sanitized.length === 5 && !sanitized.includes('-')) {
-      setRecoveryCode(`${sanitized}-`);
-    } else if (sanitized.length === 6 && sanitized.charAt(5) !== '-') {
-      // If user pastes or types through, ensure hyphen is at position 5
-      setRecoveryCode(`${sanitized.slice(0, 5)}-${sanitized.slice(5)}`);
-    } else {
-      setRecoveryCode(sanitized);
-    }
+    // Use the same formatting utility as login flow to avoid double-hyphen issues
+    const formatted = formatRecoveryCode(e.target.value);
+    setRecoveryCode(formatted);
   };
 
   return (