Refine WebAuthn visual design

[iandunn]

#95 stubbed in the rough code and UI, and #193 added real data/functionality.

In this PR we should refine that UI to match @jasmussen 's design. I think Steve's idea of a Primary indicator is helpful too.

Canonical Figma:

• checklist state 1
• checklist state 2
• security key flow
• animation

[iandunn]

Hey @jasmussen 👋🏻 I noticed a few differences between this and the TOTP flow:

• After setting up TOTP, the user is redirected to Backup Codes, but here they're redirected back to the Security Keys intro screen.
• TOTP adds a snackbar-esque notice on success, but this doesn't.
• TOTP has a button to disable it, but this doesn't.

Should the two screens be more consistent? What do you think about both screens redirecting to Backup Codes if they're not already setup, but back to the totp/security-key screen if backup codes are already setup?

[jasmussen]

Any discrepancies are very likely to mainly be my lack of full understanding of the flow, so no reason to make too big of a detour. If you can provide me with screenshots of the flow, I'm happy to adjust, provide the remaining screens, or give feedback if perhaps we can optimize a part of it.

[adamwoodnz]

If you can provide me with screenshots of the flow

@jasmussen here are the differences

TOTP has a button to disable it, but this doesn't.

The Disable security keys button below isn't shown in the designs, but to be consistent with TOTP we could add it.

TOTP	Security Keys

After setting up TOTP, the user is redirected to Backup Codes, but here they're redirected back to the Security Keys intro screen.
TOTP adds a snackbar-esque notice on success, but this doesn't.

After successfully adding an app or registering a key, the final destination screens look like this:

TOTP -> Backup codes	Security Keys -> list screen

[jasmussen]

From those screenshots, it looks like a decent enough starting point to me. I might have used the tertiary style for "Disable security keys" since it sits next to a primary button, but the secondary style works okay 👍 👍

[adamwoodnz]

@jasmussen what do you think about the end of the flow; should we redirect to the Backup Codes screen with the success notification (like TOTP), or is it better to stay on the list screen?

IMO a success notification feels like it should be added in both cases.

[jasmussen]

Is that partially covered by this sketch?

If yes, the idea there was to show a spiner, then a success animation, then after n seconds, redirect back.

[adamwoodnz]

show a spiner, then a success animation, then after n seconds, redirect back

Oh yes, let's go with that then, maybe the success animation can replace all the success notices we currently use

[jasmussen]

maybe the success animation can replace all the success notices we currently use

If the actions are small and not too substantial, I think a notice/snackbar can be fine.

In the flow suggested above, the animation exists because the action is a bit more substantial, i.e. connecting a security key. I imagine scanning a QR code is also a substantial action. Deleting a key, or something like that, would not be substantial and can just be confirmed more simply.