Files
supabase/apps/studio/components/interfaces/Account
Gildas Garcia c2d8b08299 MFA Recovery codes: UI tweaks (#50488)
## What kind of change does this PR introduce?

Admonition is not the right UI to tell users how many are still
available.

## What is the current behavior?

No recovery codes yet:

<img width="724" height="499" alt="image"
src="https://github.com/user-attachments/assets/db9d47af-3a81-42d2-8cf0-9302816ceb21"
/>

After:
<img width="758" height="525" alt="image"
src="https://github.com/user-attachments/assets/68acc4bf-372f-4472-a3e4-a8263a8993d0"
/>

## What is the new behavior?

No recovery codes yet:
<img width="720" height="556" alt="image"
src="https://github.com/user-attachments/assets/48ce08a7-9650-428b-be5d-b8bb7ef5b720"
/>

After:
<img width="720" height="541" alt="image"
src="https://github.com/user-attachments/assets/35a8698d-9a6f-44cb-91c8-2ddb8d0f3a7b"
/>

When low number of codes available:
<img width="733" height="548" alt="image"
src="https://github.com/user-attachments/assets/d60017ba-ada6-47bb-9f83-a2a65674f800"
/>



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Improvements**
- Recovery codes now appear in a dedicated section when enabled,
separate from multi-factor authentication settings.
- Recovery-code status updates are announced to screen readers for
improved accessibility.
- Available recovery codes are displayed in a clearer card-based layout
once status information is available.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-17 09:36:19 +02:00
..