## Problem
1. Recovery are displayed as returned by the backend
<img width="516" height="347" alt="image"
src="https://github.com/user-attachments/assets/c2599858-a65d-42d4-af3f-6bc738a810e1"
/>
2. Recovery codes are not displayed even if present when more than 1 MFA
is set up
## Solution
1. Format them as uppercased groups of 4 characters
<img width="541" height="394" alt="image"
src="https://github.com/user-attachments/assets/74c6b4eb-03c1-4de2-a772-b30ec4d7bb52"
/>
3. Fix the condition check to display recovery codes
## How to test
- Generate or regenerate your recovery codes: check the format is
correct
- If you haven't already, add a 2nd MFA: check recovery codes are still
displayed
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Improvements**
- Recovery codes are now displayed in uppercase with clear
hyphen-separated groups.
- Copied recovery codes use the same formatted presentation for easier
sharing and entry.
- The recovery codes section is available whenever recovery codes are
enabled, regardless of the number of authenticator apps configured.
- Codes that do not match the expected format remain unchanged.
- **Tests**
- Added coverage to verify consistent recovery code formatting and
clipboard behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
