mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Joshen LimandAlaister Young
37b072aac2
## 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>
Writing pages
Rough guidelines
- Try to break down your pages into smaller building blocks - components which are tightly coupled to a page can be placed within the folder
components/interfaces/xxx/...(Refer to the README.md under the components folder) - Keep to using
useStatehooks for any UI related logic, do not create MobX local stores to handle UI logic.
Template for building pages
import { NextPage } from 'next'
import { withAuth } from 'hooks/misc/withAuth'
// Import the corresponding layout based on the page
import { Layout } from 'components/layouts'
// Import the main building blocks of the page
import { ... } from 'components/interfaces/xxx'
// Import reusable UI components if needed
import { ... } from 'components/ui/xxx'
// Name your page accordingly
const Page: NextPage = () => {
return (
<Layout>
<div>Page content</div>
</Layout>
)
}
export default withAuth(Page)