LG-6314: Add Start Over and Cancel links to password confirmation by aduth · Pull Request #6350 · 18F/identity-idp

aduth · 2022-05-13T18:25:14Z

Why: For feature parity with the existing screen, a user should have the option to start over or cancel the proofing process.

Testing Instructions:

You will need to set the step as enabled in your local config/application.yml:

development:
  idv_api_enabled_steps: '["password_confirm","personal_key","personal_key_confirm"]'

Navigate to http://localhost:3000
Sign in
Navigate to http://localhost:3000/verify
Complete proofing flow up to password confirmation step
Observe "Start Over" and "Cancel" links at the bottom of the page
Click "Cancel"
Observe you are navigated to the cancel confirmation screen, including ?step=password_confirm in the URL
Click "Go back"
Observe you are returned to the password confirmation screen
Click "Start over"
Observe you are returned to the start of the proofing process

Implementation Notes:

This includes quite a bit of shuffling of components already implemented in document capture, so that they can be reused in both places.

This also implements a new "flow context", whose purpose overlaps with the one being introduced by @nprimak in #6323.

Screenshots:

Before	After

**Why**: For feature parity with the existing screen, a user should have the option to start over or cancel the proofing process. changelog: Upcoming Features, Identity Verification, Add password confirmation step

zachmargolis

LGTM

zachmargolis · 2022-05-13T18:42:29Z

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

+          <input type="hidden" name="_method" value={method} />
+          <input ref={csrfRef} type="hidden" name="authenticity_token" />
+        </form>,
+        document.body,


do we need some sort of key to reference these at the document body? so that two ButtonTo's on the same page don't overwrite each other's forms?

do we need some sort of key to reference these at the document body? so that two ButtonTo's on the same page don't overwrite each other's forms?

If there were two ButtonTo, each would have and submit their own form, so I don't think they'd conflict with each other.

The markup would look like...

<body> <div id="app-root"> <button></button> <button></button> </div> <form></form> <form></form> </body>

zachmargolis · 2022-05-13T18:43:34Z

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

-  startOverURL: /** @type {string} */ (''),
-  cancelURL: /** @type {string} */ (''),


awesome that we can clean up the existing flow by using this too

zachmargolis · 2022-05-13T18:45:02Z

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

+import Button from './button';
+import type { ButtonProps } from './button';
+
+interface ButtonToProps extends ButtonProps {


would we ever need to add params here that could be posted? or is that the kind of thing we'd add if/when we need it?

would we ever need to add params here that could be posted? or is that the kind of thing we'd add if/when we need it?

Possibly? I liken this to Rails' button_to, which (TIL) supports a params hash for just that purpose. But I heavily subscribe to the school of YAGNI, so I'm not in any hurry to add it.

zachmargolis · 2022-05-13T18:47:42Z

app/javascript/packages/url/index.ts

-  let searchParams: URLSearchParams;
-
-  try {
-    parsedURLOrParams = new URL(urlOrParams);


is there a reason we moved away from the URL class? I'd love to be able to rely on something like that instead of having to build our own

is there a reason we moved away from the URL class? I'd love to be able to rely on something like that instead of having to build our own

I went through a few iterations of this. The main problem with the URL class is that this function is meant to be quite flexible with its input values (absolute URLs, paths, querystring-only), and it's hard to map each of those to a corresponding return value of the same form using URL.

That being said, I couldn't actually find any existing usage of the querystring parameter input, so we could adjust this to assume that both the input and output would be a full URL.

Also, to be more specific about why it was changed here: We had been initializing startOverURL and cancelURL with paths. A URL constructor won't parse a path fragment on its own (new URL('/foo') throws). We could adjust this to parse relative to the current URL (e.g. new URL('/foo', window.location.href)), but at that point is when it becomes harder to determine the logic around how to return the expected value (parsedURL.href ? parsedURL.pathname + parsedURL.search ? How do we determine which to use?).

That being said, I couldn't actually find any existing usage of the querystring parameter input, so we could adjust this to assume that both the input and output would be a full URL.

Simplifying supports simplifies the implementation! 0f3f511

To simplify specs, avoid needing to specify them

Simplify supported use-cases to only those we care about, so that we can simplify the implementation #6350 (comment)

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

6c7beeb

**Why**: For feature parity with the existing screen, a user should have the option to start over or cancel the proofing process. changelog: Upcoming Features, Identity Verification, Add password confirmation step

aduth requested a review from a team May 13, 2022 18:25

zachmargolis approved these changes May 13, 2022

View reviewed changes

aduth added 3 commits May 13, 2022 15:40

Add default URLs for startOverURL, cancelURL

88100cc

To simplify specs, avoid needing to specify them

Use URL constructor, full URLs for addSearchParams

0f3f511

Simplify supported use-cases to only those we care about, so that we can simplify the implementation #6350 (comment)

Update specs for expecting full URL

52f1f14

aduth merged commit cc6364b into main May 16, 2022

aduth deleted the aduth-lg-6314-start-over-cancel branch May 16, 2022 12:37

aduth mentioned this pull request May 16, 2022

Adjust page footer spacing to match layout design specs #6352

Merged

zachmargolis mentioned this pull request May 17, 2022

Deploy RC 191 to Prod #6365

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

LG-6314: Add Start Over and Cancel links to password confirmation#6350
aduth merged 4 commits intomainfrom
aduth-lg-6314-start-over-cancel

aduth commented May 13, 2022

Uh oh!

zachmargolis left a comment

Uh oh!

zachmargolis May 13, 2022

Uh oh!

aduth May 13, 2022

Uh oh!

zachmargolis May 13, 2022

Uh oh!

zachmargolis May 13, 2022

Uh oh!

aduth May 13, 2022

Uh oh!

zachmargolis May 13, 2022

Uh oh!

zachmargolis May 13, 2022

Uh oh!

aduth May 13, 2022 •

edited

Loading

Uh oh!

aduth May 13, 2022 •

edited

Loading

Uh oh!

aduth May 13, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		startOverURL: /** @type {string} */ (''),
		cancelURL: /** @type {string} */ (''),

Conversation

aduth commented May 13, 2022

Uh oh!

zachmargolis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aduth May 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aduth May 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

aduth May 13, 2022 •

edited

Loading

aduth May 13, 2022 •

edited

Loading