[FE] - Add Passkey Flow UX Tweaks

This is to address follow up feedback from @sayobittencourt

Notes

Some of the requested changes have already been implemented in !211448 as part of FE - Add Passkey flow (Add Passkey Page) (#437809) • Fernando Cardenas • 18.6 • On track

This issue is to cover the remaining text copy and UX tweaks.

Requested Changes

Heya @fernando-c , thanks for this! 🙏 I only saw this now a bit more down on my to-do list (for good practices added to our handbook would you mind also adding a few steps on how to test this MR?) , but here are a few comments from myself testing it here:

  1. When I click "Add passkey":

    • I wasn't expecting to have to click "Set up new device", is this needed at all? It just adds so many unnecessary clicks for our users. I expected to just land on the new page and the Passkey modal appearing immediately - see Figma here.

    • Regardless, the UI in the demo page looks broken (screenshot below). Could we please update to match more with the Figma we have here? The changes should be:

      • Fix spacing
      • Add "Learn more about passkeys" in case users close the modal and end up on this page.
      • If the "Set up new device" button is necessary, update copy to "Add passkey"
      • Clicking "Cancel" should take users back to the authentication options page (where we show Passkeys and 2FA)

      image.png

  2. The error below:

    • Update "Try again?" to just "Try again".

    • There should a 24px space between the breadcrumbs line line and the banner.

    • Update error message to "Failed to connect to your device. Try again."

      image.png

  3. Simplify the page below** to match this Figma.**

    image.png

  4. Update success banner below:

    • Change design from an "Informational" blue variant to the "Success" green variant. This should be the rule for every successful setup of Passkeys and 2FA to be honest.

    • Also, if the user has 2FA = Disabled then the message should match this Figma.

      image.png

  5. When 2FA = Disabled we should show a tooltip if the user hovers or clicks the disabled button below. Here's the tooltip in Figma.

    image.png

  6. If the user already has the WebAuthn device as an existing Passkey then the error copy should match this Figma. image.png

  7. Updating our Delete 2FA methods modals:

    • When deleting any last 2FA method, we should lead with the most important message in the header which is "Disable two-factor authentication (2FA)?". Here's the Figma for reference.

    • If the user has Passkeys and is deleting their last 2FA method, their passkey will not work for 2FA anymore, so the last line in the Figma should appear depending on this condition.

      image.png

  8. Adding a Passkey when it already exists as a WebAuthn device:

    • Update error to match this Figma file.

    • Ideally I'd prefer we just take the user back to the authentication options page, like in the Figma - if this is not possible at all then just update the error message to what I have in the same Figma.

      image.png

  9. And last note - when a user goes past the recovery codes page (after successfully adding 2FA for the first time) I would like them to land on the Manage authentication page rather than the Account page. Could we update this in the recovery codes flow?

Thanks again! Any questions or anything that can't be done from my notes please let me know to make sure the Figmas are reflected accordingly.

Edited by Fernando Cardenas