## Context
When opening an invite to join an organization that's enforced MFA for
their members, if a member does not have MFA enabled yet, they'll see
this UI which is confusing as there's no clear direction on what to do
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/ca2d1047-20bf-40ca-a9ea-91e81c390e40"
/>
## Changes involved
- Updating the UI to consider this error message and prompt users to set
up MFA
<img width="501" height="317" alt="image"
src="https://github.com/user-attachments/assets/d074ac6d-fd74-4fe0-9078-473fd2401045"
/>
- Small UI nudges to account security page
- Tight copywriting to explicitly say MFA
- Opt to use Card instead of Collapsible (collapsible seems unnecessary
given that this is the only UI on this page)
- Before:
<img width="811" height="360" alt="image"
src="https://github.com/user-attachments/assets/1412da3b-3903-4966-85ea-46e0ff443177"
/>
- After:
<img width="817" height="370" alt="image"
src="https://github.com/user-attachments/assets/02d5a2f5-8c1f-4f78-8a20-10c7a4ff563c"
/>
- Tiny change to the user dropdown, say "account" instead of "account
preferences" + change icon
- This imo aligns better as the account page covers more than just
preferences
- Before:
<img width="307" height="178" alt="image"
src="https://github.com/user-attachments/assets/fea43cac-9b0c-4fe4-94a3-946ed0925901"
/>
- After:
<img width="300" height="183" alt="image"
src="https://github.com/user-attachments/assets/800357fe-222f-49b8-b52b-ce4fabff7b95"
/>
## To test
- [ ] Have an organization on paid plan with MFA enforced
- [ ] Invite a user that doesn't have MFA enabled
- [ ] Try to join the organization with that user
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Organization invites now detect and handle MFA requirements with
specific error messaging
* Redesigned Multi-factor authentication section on account security
page
* **Improvements**
* Updated TOTP authenticator help text for clarity
* Updated account menu navigation label
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
## What kind of change does this PR introduce?
Code cleanup. Follow-up to #45774.
## What is the current behavior?
The organisation invite interstitial derives invite states, titles, and
descriptions from nested conditional logic in the component. That makes
the component harder to scan and pushes too much state coverage into
render tests.
## What is the new behavior?
See #45774 for screenshots of the general UI before-and-after (which
this one builds upon). That PR also contains testing instructions.
Extracts the invite status and content decisions into small pure
helpers, then covers those helpers with focused unit tests.
The component keeps the user-facing render and interaction coverage,
including the invalid lookup regression where a 404 should render the
invalid invite state instead of raw backend copy.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Improved organization invite flow with enhanced error state handling
for expired, invalid, and wrong-account scenarios.
* Better consistency in error messages and user guidance throughout the
invite process.
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45813)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Joshen Lim
