feat(auth): auto submit email confirmation code form on paste (non-sync only)

Because:

* we want to automatically submit email confirmation code form when a valid code is pasted.

This commit:

* implements such feature for email registration in non-sync flows.

Closes #FXA-11671

Author: MagentaManifold

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

@@ -26,3 +26,9 @@ export const WithCustomErrorMessage = () => (
     <Subject localizedCustomCodeRequiredMessage="This is a spoofed custom error" />
   </AppLayout>
 );
+
+export const SubmitOnPasteDisabled = () => (
+  <AppLayout>
+    <Subject submitFormOnPaste={false} />
+  </AppLayout>
+);

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 userEvent from '@testing-library/user-event';
 
 jest.mock('../../lib/metrics', () => ({
   logViewEvent: jest.fn(),
@@ -28,5 +29,48 @@ describe('FormVerifyCode component', () => {
     screen.getByRole('button', { name: 'Check that code' });
   });
 
+  it('submits when a valid code is pasted', async () => {
+    const user = userEvent.setup();
+    const verifyCode = jest.fn();
+    renderWithLocalizationProvider(<Subject verifyCode={verifyCode} />);
+    const input = screen.getByRole('textbox', {
+      name: 'Enter your 4-digit code',
+    });
+    input.focus();
+    await user.keyboard('1'); // should submit regardless of existing value
+    await user.paste('1234');
+    expect(verifyCode).toHaveBeenCalledWith('1234');
+  });
+
+  it('handles pasted content normally when an invalid code is pasted', async () => {
+    const user = userEvent.setup();
+    const verifyCode = jest.fn();
+    renderWithLocalizationProvider(<Subject verifyCode={verifyCode} />);
+    const input = screen.getByRole('textbox', {
+      name: 'Enter your 4-digit code',
+    });
+    input.focus();
+    await user.keyboard('1');
+    await user.paste('123');
+    // should not submit even though the value after pasting is valid
+    // because we only care about pasted content here.
+    expect(input).toHaveValue('1123');
+    expect(verifyCode).not.toHaveBeenCalled();
+  });
+
+  it('does not submit on paste when submitFormOnPaste is false', async () => {
+    const user = userEvent.setup();
+    const verifyCode = jest.fn();
+    renderWithLocalizationProvider(
+      <Subject verifyCode={verifyCode} submitFormOnPaste={false} />
+    );
+    const input = screen.getByRole('textbox', {
+      name: 'Enter your 4-digit code',
+    });
+    input.focus();
+    await user.paste('1234');
+    expect(verifyCode).not.toHaveBeenCalled();
+  });
+
   // TODO Add tests for (engage, success, etc.) metrics events once submit button enabled
 });

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

@@ -44,6 +44,7 @@ export type FormVerifyCodeProps = {
   setClearMessages?: React.Dispatch<React.SetStateAction<boolean>>;
   isLoading?: boolean;
   gleanDataAttrs?: GleanClickEventDataAttrs;
+  submitFormOnPaste?: boolean;
 };
 
 type FormData = {
@@ -59,6 +60,7 @@ const FormVerifyCode = ({
   setCodeErrorMessage,
   setClearMessages,
   gleanDataAttrs,
+  submitFormOnPaste,
 }: FormVerifyCodeProps) => {
   const [isFocused, setIsFocused] = useState<boolean>(false);
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -109,6 +111,14 @@ const FormVerifyCode = ({
     setIsSubmitting(false);
   };
 
+  const onPaste = async (event: React.ClipboardEvent<HTMLInputElement>) => {
+    const pastedText = event.clipboardData.getData('text').trim();
+    const isValid = new RegExp(formAttributes.pattern).test(pastedText);
+    if (isValid) {
+      onSubmit({ code: pastedText });
+    }
+  };
+
   return (
     <form
       noValidate
@@ -128,6 +138,7 @@ const FormVerifyCode = ({
             : () => setCodeErrorMessage('')
         }
         onFocusCb={viewName ? onFocus : undefined}
+        onPaste={submitFormOnPaste ? onPaste : undefined}
         errorText={codeErrorMessage}
         autoFocus
         pattern={formAttributes.pattern}
@@ -138,7 +149,9 @@ const FormVerifyCode = ({
         spellCheck={false}
         prefixDataTestId={viewName}
         tooltipPosition="bottom"
-        inputRef={register({ required: true })}
+        inputRef={register({
+          required: true,
+        })}
       />
 
       <FtlMsg id={formAttributes.submitButtonFtlId}>

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

@@ -5,8 +5,14 @@
 import React, { useState } from 'react';
 import FormVerifyCode, { FormAttributes, FormVerifyCodeProps } from '.';
 
+const onFormSubmit = async () => {
+  alert('Trying to submit');
+};
+
 export const Subject = ({
   localizedCustomCodeRequiredMessage = '',
+  verifyCode = onFormSubmit,
+  submitFormOnPaste = true,
 }: Partial<FormVerifyCodeProps>) => {
   const [codeErrorMessage, setCodeErrorMessage] = useState<string>('');
 
@@ -19,17 +25,14 @@ export const Subject = ({
     submitButtonText: 'Check that code',
   };
 
-  const onFormSubmit = async () => {
-    alert('Trying to submit');
-  };
-
   return (
     <FormVerifyCode
-      verifyCode={onFormSubmit}
       viewName="default-view"
       {...{
         formAttributes,
         localizedCustomCodeRequiredMessage,
+        verifyCode,
+        submitFormOnPaste,
         codeErrorMessage,
         setCodeErrorMessage,
       }}

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

@@ -28,6 +28,7 @@ export type InputTextProps = {
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   onFocusCb?: () => void;
   onBlurCb?: () => void;
+  onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
   type?: 'text' | 'email' | 'tel' | 'number' | 'url' | 'password';
   name?: string;
   prefixDataTestId?: string;
@@ -59,6 +60,7 @@ export const InputText = ({
   onChange,
   onFocusCb,
   onBlurCb,
+  onPaste,
   hasErrors,
   errorText,
   className = '',
@@ -174,12 +176,12 @@ export const InputText = ({
           data-testid={formatDataTestId('input-field')}
           onChange={textFieldChange}
           ref={combinedRef}
-          // ref={inputRef}
           {...{
             name,
             disabled,
             onFocus,
             onBlur,
+            onPaste,
             placeholder,
             type,
             autoFocus,

packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/index.test.tsx

@@ -35,6 +35,7 @@ import { OAUTH_ERRORS } from '../../../lib/oauth';
 import firefox from '../../../lib/channels/firefox';
 import { AuthUiErrors } from '../../../lib/auth-errors/auth-errors';
 import { mockWebIntegration } from '../../Signin/SigninRecoveryCode/mocks';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('../../../lib/metrics', () => ({
   usePageViewEvent: jest.fn(),
@@ -268,6 +269,24 @@ describe('ConfirmSignupCode page', () => {
       });
       expect(screen.queryByText(serviceRelayText)).not.toBeInTheDocument();
     });
+
+    it('submits when a valid code is pasted', async () => {
+      const user = userEvent.setup();
+      renderWithSession({
+        session,
+        integration,
+        finishOAuthFlowHandler: jest.fn(),
+      });
+      const input = screen.getByRole('textbox', {
+        name: 'Enter 6-digit code',
+      });
+      input.focus();
+      await user.paste('123456');
+      expect(session.verifySession).toHaveBeenCalledWith(
+        '123456',
+        expect.anything()
+      );
+    });
   });
 
   describe('OAuth native integration', () => {
@@ -315,6 +334,22 @@ describe('ConfirmSignupCode page', () => {
         });
       });
     });
+
+    it('does not submit on paste when service=sync', async () => {
+      const user = userEvent.setup();
+      const integration = createMockOAuthNativeIntegration();
+      renderWithSession({
+        session,
+        integration,
+        finishOAuthFlowHandler: mockFinishOAuthFlowHandler,
+      });
+      const input = screen.getByRole('textbox', {
+        name: 'Enter 6-digit code',
+      });
+      input.focus();
+      await user.paste('123456');
+      expect(session.verifySession).not.toHaveBeenCalled();
+    });
   });
 
   describe('Web integration on submission', () => {

packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/index.tsx

@@ -68,6 +68,7 @@ const ConfirmSignupCode = ({
   const navigateWithQuery = useNavigateWithQuery();
   const webRedirectCheck = useWebRedirect(integration.data.redirectTo);
   const isDesktopRelay = integration.isDesktopRelay();
+  const submitFormOnPaste = !integration.isSync();
 
   // Make sure data is valid. If it isn't fail fast.
   integration.data.validate();
@@ -327,6 +328,7 @@ const ConfirmSignupCode = ({
           localizedCustomCodeRequiredMessage,
           codeErrorMessage,
           setCodeErrorMessage,
+          submitFormOnPaste,
         }}
       />
 

packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/interfaces.ts

@@ -39,7 +39,7 @@ export interface ConfirmSignupCodeFormData {
 
 export type ConfirmSignupCodeBaseIntegration = Pick<
   Integration,
-  'type' | 'data' | 'getService' | 'getClientId' | 'isDesktopRelay'
+  'type' | 'data' | 'getService' | 'getClientId' | 'isDesktopRelay' | 'isSync'
 >;
 
 export type ConfirmSignupCodeOAuthIntegration = Pick<

packages/fxa-settings/src/pages/Signup/ConfirmSignupCode/mocks.tsx

@@ -78,6 +78,7 @@ export function createMockWebIntegration({
     expect(integration.getService()).toEqual(MozServices.Default);
     expect(integration.getClientId()).toBeUndefined();
     expect(integration.isDesktopRelay()).toBeFalsy();
+    expect(integration.isSync()).toBeFalsy();
   }
 
   return integration;