Skip to content

Add loading, success and error feedback to passkey prompt tile#713

Merged
rzueger merged 1 commit intodevelopfrom
fix/passkey-prompt-feedback
Apr 19, 2026
Merged

Add loading, success and error feedback to passkey prompt tile#713
rzueger merged 1 commit intodevelopfrom
fix/passkey-prompt-feedback

Conversation

@rzueger
Copy link
Copy Markdown
Member

@rzueger rzueger commented Apr 19, 2026

Summary

The post-login passkey tile on the start page previously had three UX gaps during the registration flow:

  1. No loading feedback: button disabled on click but no spinner — user unsure if anything was happening.
  2. No success confirmation: on successful registration the tile silently disappeared — user could wonder whether it worked.
  3. No error display: on failure the button simply re-enabled with no explanation.

All three are now addressed.

Changes

  • Loading: replaces the custom styled button with the shared <Button> component using loading={submitting} — same spinner pattern as PasskeyLoginButton (login page) and PasskeyManager (profile page).
  • Success: on successful registration the card replaces its content with a brief confirmation — "Eingerichtet! Beim nächsten Mal melden Sie sich ohne E-Mail-Code an." — shown for 3.5s before auto-dismissing. Matches the original tile promise ("ohne auf den E-Mail-Code zu warten").
  • Failure: inline ErrorMessage below the button showing the existing profile.passkeysRegistrationFailure translation. Tile stays visible so the user can retry.

Test plan

  • 1932 tests pass, typecheck clean
  • Register a passkey via the tile on lszm-test
  • Cancel the biometric — tile shows error
  • Complete the biometric — tile shows success briefly, then dismisses
  • Reload the page — tile no longer appears (user has a passkey)

The post-login passkey tile previously disabled the CTA on click with
no spinner, silently hid itself on success, and ignored failures. All
three states are now surfaced:

- Loading: button label switches to "Einrichten…" while submitting.
- Success: card replaces its content with "Eingerichtet! Beim
  nächsten Mal melden Sie sich ohne E-Mail-Code an." for 3.5s before
  auto-dismissing.
- Failure: inline error notice below the button, tile stays visible
  so the user can retry.

Matches the feedback pattern already used by PasskeyManager on the
profile page.
@rzueger rzueger force-pushed the fix/passkey-prompt-feedback branch from 93c7bd6 to c402717 Compare April 19, 2026 10:14
@rzueger rzueger merged commit affae07 into develop Apr 19, 2026
4 of 6 checks passed
@rzueger rzueger deleted the fix/passkey-prompt-feedback branch April 19, 2026 10:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant