LG-6314: Add Start Over and Cancel links to password confirmation

app/controllers/verify_controller.rb

@@ -24,6 +24,8 @@ def app_data
 
     {
       base_path: idv_app_path,
+      start_over_url: idv_session_path,
+      cancel_url: idv_cancel_path,
       completion_url: completion_url,
       initial_values: initial_values,
       enabled_step_names: IdentityConfig.store.idv_api_enabled_steps,

app/javascript/packages/components/button-to.spec.tsx

@@ -0,0 +1,67 @@
+import sinon from 'sinon';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ButtonTo from './button-to';
+
+describe('ButtonTo', () => {
+  beforeEach(() => {
+    const csrf = document.createElement('meta');
+    csrf.name = 'csrf-token';
+    csrf.content = 'token-value';
+    document.body.appendChild(csrf);
+  });
+
+  it('renders props passed through to Button', () => {
+    const { getByRole } = render(
+      <ButtonTo url="" method="" isUnstyled>
+        Click me
+      </ButtonTo>,
+    );
+
+    const button = getByRole('button', { name: 'Click me' }) as HTMLButtonElement;
+
+    expect(button.type).to.equal('button');
+    expect(button.classList.contains('usa-button')).to.be.true();
+    expect(button.classList.contains('usa-button--unstyled')).to.be.true();
+  });
+
+  it('creates a form in the body outside the root container', () => {
+    const { container, getByRole } = render(
+      <ButtonTo url="/" method="delete" isUnstyled>
+        Click me
+      </ButtonTo>,
+    );
+
+    const form = document.querySelector('form')!;
+    expect(form).to.be.ok();
+    expect(container.contains(form)).to.be.false();
+    return Promise.all([
+      new Promise<void>((resolve) => {
+        form.addEventListener('submit', (event) => {
+          event.preventDefault();
+          expect(Object.fromEntries(new window.FormData(form))).to.deep.equal({
+            _method: 'delete',
+            authenticity_token: 'token-value',
+          });
+          resolve();
+        });
+      }),
+      userEvent.click(getByRole('button')),
+    ]);
+  });
+
+  it('submits to form on click', async () => {
+    const { getByRole } = render(
+      <ButtonTo url="" method="" isUnstyled>
+        Click me
+      </ButtonTo>,
+    );
+
+    const form = document.querySelector('form')!;
+    sinon.stub(form, 'submit');
+
+    await userEvent.click(getByRole('button'));
+
+    expect(form.submit).to.have.been.calledOnce();
+  });
+});

app/javascript/packages/components/button-to.tsx

@@ -0,0 +1,49 @@
+import { useRef } from 'react';
+import { createPortal } from 'react-dom';
+import Button from './button';
+import type { ButtonProps } from './button';
+
+interface ButtonToProps extends ButtonProps {
+  /**
+   * URL to which the user should navigate.
+   */
+  url: string;
+
+  /**
+   * Form method button should submit as.
+   */
+  method: string;
+}
+
+/**
+ * Component which renders a button that navigates to the specified URL via form, with method
+ * parameterized as a hidden input and including authenticity token. The form is rendered to the
+ * document root, to avoid conflicts with nested forms.
+ */
+function ButtonTo({ url, method, children, ...buttonProps }: ButtonToProps) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const csrfRef = useRef<HTMLInputElement>(null);
+
+  function submitForm() {
+    const csrf = document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content;
+    if (csrf && csrfRef.current) {
+      csrfRef.current.value = csrf;
+    }
+    formRef.current?.submit();
+  }
+
+  return (
+    <Button {...buttonProps} onClick={submitForm}>
+      {children}
+      {createPortal(
+        <form ref={formRef} method="post" action={url}>
+          <input type="hidden" name="_method" value={method} />
+          <input ref={csrfRef} type="hidden" name="authenticity_token" />
+        </form>,
+        document.body,
+      )}
+    </Button>
+  );
+}
+
+export default ButtonTo;

app/javascript/packages/components/index.ts

@@ -1,5 +1,6 @@
 export { default as Alert } from './alert';
 export { default as Button } from './button';
+export { default as ButtonTo } from './button-to';
 export { default as BlockLink } from './block-link';
 export { default as Icon } from './icon';
 export { default as FullScreen } from './full-screen';

app/javascript/packages/document-capture/components/start-over-or-cancel.spec.tsx

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import { Provider as UploadContextProvider } from '../context/upload';
+import StartOverOrCancel from './start-over-or-cancel';
+
+describe('StartOverOrCancel', () => {
+  it('omits start over link when in hybrid flow', () => {
+    const { getByText } = render(
+      <UploadContextProvider
+        flowPath="hybrid"
+        endpoint=""
+        csrf=""
+        method="POST"
+        backgroundUploadURLs={{}}
+      >
+        <StartOverOrCancel />
+      </UploadContextProvider>,
+    );
+
+    expect(() => getByText('doc_auth.buttons.start_over')).to.throw();
+    expect(getByText('links.cancel')).to.be.ok();
+  });
+});

app/javascript/packages/document-capture/components/start-over-or-cancel.tsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { StartOverOrCancel as FlowStartOverOrCancel } from '@18f/identity-verify-flow';
+import UploadContext from '../context/upload';
+
+function StartOverOrCancel() {
+  const { flowPath } = useContext(UploadContext);
+
+  return <FlowStartOverOrCancel canStartOver={flowPath !== 'hybrid'} />;
+}
+
+export default StartOverOrCancel;

app/javascript/packages/document-capture/context/upload.jsx

@@ -9,8 +9,6 @@ const UploadContext = createContext({
   backgroundUploadURLs: /** @type {Record<string,string>} */ ({}),
   backgroundUploadEncryptKey: /** @type {CryptoKey=} */ (undefined),
   flowPath: /** @type {FlowPath} */ ('standard'),
-  startOverURL: /** @type {string} */ (''),
-  cancelURL: /** @type {string} */ (''),
   csrf: /** @type {string?} */ (null),
 });
 
@@ -76,8 +74,6 @@ UploadContext.displayName = 'UploadContext';
  * @prop {string?} csrf CSRF token to send as parameter to upload implementation.
  * @prop {Record<string,any>=} formData Extra form data to merge into the payload before uploading
  * @prop {FlowPath} flowPath The user's session flow path, one of "standard" or "hybrid".
- * @prop {string} startOverURL URL to application DELETE path for session restart.
- * @prop {string} cancelURL URL to application path for session cancel.
  * @prop {ReactNode} children Child elements.
  */
 
@@ -96,8 +92,6 @@ function UploadContextProvider({
   csrf,
   formData,
   flowPath,
-  startOverURL,
-  cancelURL,
   children,
 }) {
   const uploadWithCSRF = (payload) =>
@@ -117,8 +111,6 @@ function UploadContextProvider({
       backgroundUploadEncryptKey,
       isMockClient,
       flowPath,
-      startOverURL,
-      cancelURL,
       csrf,
     }),
     [
@@ -129,8 +121,6 @@ function UploadContextProvider({
       backgroundUploadEncryptKey,
       isMockClient,
       flowPath,
-      startOverURL,
-      cancelURL,
       csrf,
     ],
   );

app/javascript/packages/url/index.spec.js → app/javascript/packages/url/index.spec.ts

@@ -10,18 +10,18 @@ describe('addSearchParams', () => {
     expect(actual).to.equal(expected);
   });
 
-  it('adds search params to an existing search fragment', () => {
-    const params = '?a=1&b=1';
-    const expected = '?a=1&b=2&c=3';
+  it('accepts URL as a path', () => {
+    const url = '/example';
+    const expected = `${window.location.origin}/example?a=1&b=2&c=3`;
 
-    const actual = addSearchParams(params, { b: 2, c: 3 });
+    const actual = addSearchParams(url, { a: 1, b: 2, c: 3 });
 
     expect(actual).to.equal(expected);
   });
 
   it('adds search params to an empty URL', () => {
     const params = '';
-    const expected = '?a=1&b=2&c=3';
+    const expected = `${window.location.origin}/?a=1&b=2&c=3`;
 
     const actual = addSearchParams(params, { a: 1, b: 2, c: 3 });
 

app/javascript/packages/url/index.ts

@@ -2,25 +2,13 @@
  * Given a URL or a string fragment of search parameters and an object of parameters, returns a
  * new URL or search parameters with the parameters added.
  *
- * @param urlOrParams Original URL or search parameters.
+ * @param url Original URL.
  * @param params Search parameters to add.
  *
- * @return Modified URL or search parameters.
+ * @return Modified URL.
  */
-export function addSearchParams(urlOrParams: string, params: Record<string, any>): string {
-  let parsedURLOrParams: URL | URLSearchParams;
-  let searchParams: URLSearchParams;
-
-  try {
-    parsedURLOrParams = new URL(urlOrParams);
-    searchParams = parsedURLOrParams.searchParams;
-  } catch {
-    parsedURLOrParams = new URLSearchParams(urlOrParams);
-    searchParams = parsedURLOrParams;
-  }
-
-  Object.entries(params).forEach(([key, value]) => searchParams.set(key, value));
-
-  const result = parsedURLOrParams.toString();
-  return parsedURLOrParams instanceof URLSearchParams ? `?${result}` : result;
+export function addSearchParams(url: string, params: Record<string, any>): string {
+  const parsedURL = new URL(url, window.location.href);
+  Object.entries(params).forEach(([key, value]) => parsedURL.searchParams.set(key, value));
+  return parsedURL.toString();
 }

app/javascript/packages/verify-flow/context/flow-context.tsx

@@ -0,0 +1,22 @@
+import { createContext } from 'react';
+
+const FlowContext = createContext({
+  /**
+   * URL to path for session restart.
+   */
+  startOverURL: '',
+
+  /**
+   * URL to path for session cancel.
+   */
+  cancelURL: '',
+
+  /**
+   * Current step name.
+   */
+  currentStep: '',
+});
+
+FlowContext.displayName = 'FlowContext';
+
+export default FlowContext;

app/javascript/packages/verify-flow/context/secrets-context.tsx

@@ -29,6 +29,8 @@ const SecretsContext = createContext({
   setItems: (async () => {}) as SetItems,
 });
 
+SecretsContext.displayName = 'SecretsContext';
+
 const pick = (obj: object, keys: string[]) =>
   Object.fromEntries(keys.map((key) => [key, obj[key]]));
 

app/javascript/packages/verify-flow/index.ts

@@ -1,4 +1,6 @@
+export { default as FlowContext } from './context/flow-context';
 export { SecretsContextProvider } from './context/secrets-context';
+export { default as StartOverOrCancel } from './start-over-or-cancel';
 export { default as VerifyFlow } from './verify-flow';
 
 export type { SecretValues } from './context/secrets-context';