fix(2fa): Show text keyboard on inline_totp_setup recovery code confi…

…rmation Because: * We're showing a numeric keyboard in mobile when users need to confirm their backup code, which is alphanumeric This commit: * Shows the correct keyboard for this page fixes FXA-10687
mozilla · Nov 4, 2024 · 93d1661 · 93d1661
1 parent 3e8bbdc
commit 93d1661
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/packages/fxa-settings/src/components/FormVerifyCode/index.tsx b/packages/fxa-settings/src/components/FormVerifyCode/index.tsx
@@ -18,6 +18,12 @@ export enum InputModeEnum {
   numeric = 'numeric',
 }
 
+export const commonBackupCodeFormAttributes = {
+  inputMode: InputModeEnum.text,
+  pattern: '[a-zA-Z0-9]',
+  maxLength: 10,
+};
+
 export type FormAttributes = {
   inputLabelText: string;
   inputFtlId: string;

diff --git a/packages/fxa-settings/src/pages/InlineRecoverySetup/index.tsx b/packages/fxa-settings/src/pages/InlineRecoverySetup/index.tsx
@@ -12,7 +12,10 @@ import CardHeader from '../../components/CardHeader';
 import AppLayout from '../../components/AppLayout';
 import Banner, { BannerType } from '../../components/Banner';
 import { copyRecoveryCodes } from '../../lib/totp';
-import FormVerifyCode from '../../components/FormVerifyCode';
+import FormVerifyCode, {
+  commonBackupCodeFormAttributes,
+  InputModeEnum,
+} from '../../components/FormVerifyCode';
 import { AuthUiErrors } from '../../lib/auth-errors/auth-errors';
 import { InlineRecoverySetupProps } from './interfaces';
 import { getErrorFtlId, getLocalizedErrorMessage } from '../../lib/error-utils';
@@ -159,8 +162,7 @@ const InlineRecoverySetup = ({
                   inputFtlId: 'inline-recovery-backup-authentication-code',
                   submitButtonText: 'Confirm',
                   submitButtonFtlId: 'inline-recovery-confirm-button',
-                  pattern: '\\w{10}',
-                  maxLength: 10,
+                  ...commonBackupCodeFormAttributes,
                 }}
                 codeErrorMessage={recoveryCodeError}
                 setCodeErrorMessage={setRecoveryCodeError}

diff --git a/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/index.tsx b/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/index.tsx
@@ -8,8 +8,8 @@ import { useFtlMsgResolver } from '../../../models';
 import { FtlMsg, hardNavigate } from 'fxa-react/lib/utils';
 import protectionShieldIcon from '@fxa/shared/assets/images/protection-shield.svg';
 import FormVerifyCode, {
+  commonBackupCodeFormAttributes,
   FormAttributes,
-  InputModeEnum,
 } from '../../../components/FormVerifyCode';
 
 export type ConfirmTotpResetPasswordProps = {
@@ -40,11 +40,9 @@ const ConfirmTotpResetPassword = ({
   const recoveryCodeFormAttributes: FormAttributes = {
     inputFtlId: 'confirm-recovery-code-reset-password-input-label',
     inputLabelText: 'Enter 10-digit backup authentication code',
-    inputMode: InputModeEnum.text,
-    pattern: '[a-zA-Z0-9]',
-    maxLength: 10,
     submitButtonFtlId: 'confirm-totp-reset-password-confirm-button',
     submitButtonText: 'Confirm',
+    ...commonBackupCodeFormAttributes,
   };
 
   const localizedCustomCodeRequiredMessage = ftlMsgResolver.getMsg(