Merge pull request #20199 from mozilla/fxa-13243

fix(fxa-settings): Restrict FormVerifyCode input to digits only on desktop

Author: vbudhram

.circleci/config.yml

@@ -876,6 +876,7 @@ jobs:
             sudo tee -a /etc/hosts \<<<'127.0.0.1 localhost'
             sudo cat /etc/hosts
       - wait-for-infrastructure
+      - ensure-glean-venv
       - run:
           name: Start services for playwright tests
           command: ./packages/functional-tests/scripts/start-services.sh

packages/fxa-settings/src/components/FormVerifyCode/index.test.tsx

@@ -7,6 +7,7 @@ import { screen } from '@testing-library/react';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider'; // import { getFtlBundle, testAllL10n } from 'fxa-react/lib/test-utils';
 // import { FluentBundle } from '@fluent/bundle';
 import { Subject } from './mocks';
+import { InputModeEnum } from '.';
 import userEvent from '@testing-library/user-event';
 
 jest.mock('../../lib/metrics', () => ({
@@ -200,5 +201,41 @@ describe('FormVerifyCode component', () => {
     });
   });
 
+  describe('Numeric input filtering', () => {
+    it('strips non-numeric characters when inputMode is numeric (default)', async () => {
+      const user = userEvent.setup();
+      renderWithLocalizationProvider(<Subject />);
+      const input = screen.getByRole('textbox', {
+        name: 'Enter your 4-digit code',
+      });
+
+      await user.type(input, 'ab12cd34');
+      expect(input).toHaveValue('1234');
+    });
+
+    it('allows alphanumeric characters when inputMode is text', async () => {
+      const user = userEvent.setup();
+      const alphanumericFormAttributes = {
+        inputFtlId: 'demo-input-label-id',
+        inputLabelText: 'Enter backup code',
+        inputMode: InputModeEnum.text,
+        pattern: '[a-zA-Z0-9]',
+        maxLength: 10,
+        submitButtonFtlId: 'demo-submit-button-id',
+        submitButtonText: 'Check that code',
+      };
+
+      renderWithLocalizationProvider(
+        <Subject formAttributes={alphanumericFormAttributes} />
+      );
+      const input = screen.getByRole('textbox', {
+        name: 'Enter backup code',
+      });
+
+      await user.type(input, 'abc123');
+      expect(input).toHaveValue('abc123');
+    });
+  });
+
   // TODO Add tests for (engage, success, etc.) metrics events once submit button enabled
 });

packages/fxa-settings/src/components/FormVerifyCode/index.tsx

@@ -69,6 +69,7 @@ const FormVerifyCode = ({
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const [isDisabled, setIsDisabled] = useState<boolean>(true);
 
+  const inputMode = formAttributes.inputMode || InputModeEnum.numeric;
   const ftlMsgResolver = useFtlMsgResolver();
   const localizedLabel = ftlMsgResolver.getMsg(
     formAttributes.inputFtlId,
@@ -145,13 +146,18 @@ const FormVerifyCode = ({
       <InputText
         name="code"
         type="text"
-        inputMode={formAttributes.inputMode || InputModeEnum.numeric}
+        inputMode={inputMode}
         label={localizedLabel}
-        onChange={
-          setClearMessages
-            ? () => setClearMessages(true)
-            : () => setCodeErrorMessage('')
-        }
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          if (inputMode === InputModeEnum.numeric) {
+            e.target.value = e.target.value.replace(/[^0-9]/g, '');
+          }
+          if (setClearMessages) {
+            setClearMessages(true);
+          } else {
+            setCodeErrorMessage('');
+          }
+        }}
         onFocusCb={viewName ? onFocus : undefined}
         onPaste={submitFormOnPaste ? onPaste : undefined}
         errorText={codeErrorMessage}