supabase / supabase / 27754395559

73%

push

github

Improve UI for org invites if MFA is enforced (#47067)

## 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-fa... (continued)

1023 of 1419 branches covered (72.09%)

Branch coverage included in aggregate %.

1552 of 2110 relevant lines covered (73.55%)

248.23 hits per line