Files
maternal-app/maternal-web
Andrei e1842f5c1a Add MFA Setup UI in Settings page
Implements user interface for setting up and managing two-factor authentication:

MFA Setup UI Features:
- MFASettings component with full MFA management UI
- TOTP setup dialog with QR code display
- Manual entry code for authenticator apps
- Backup codes display with copy functionality
- Verification code input for TOTP enabling
- Email MFA setup dialog with confirmation
- Disable MFA dialog with warning
- Real-time MFA status indicator (enabled/disabled)
- Method type chip (Authenticator App / Email)

User Experience:
- Step-by-step TOTP setup wizard
- QR code scanning for easy authenticator app setup
- Backup codes shown only once during setup
- Copy-to-clipboard for backup codes
- Visual feedback (success/error alerts)
- Loading states for all async operations
- Animated transitions with Framer Motion

API Integration:
- MFA API client in lib/api/mfa.ts
- Get MFA status
- Setup TOTP with QR code
- Verify and enable TOTP
- Setup Email MFA
- Disable MFA
- Regenerate backup codes

Settings Page Updates:
- Added Security section with MFA settings
- Integrated MFASettings component
- Maintains existing settings page structure

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-01 21:06:57 +00:00
..
2025-10-01 19:01:52 +00:00
2025-10-01 21:06:57 +00:00
2025-10-01 21:06:57 +00:00
2025-10-01 19:01:52 +00:00
2025-10-01 19:01:52 +00:00
2025-10-01 19:01:52 +00:00
2025-10-01 19:01:52 +00:00
2025-10-01 19:01:52 +00:00
2025-10-01 19:01:52 +00:00
2025-10-01 19:01:52 +00:00

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.