Problem
The 2FA setup flow presents users with a raw QR code and no instructions. There is no multi-step guide to help users scan and verify their authenticator app.
Proposed Solution
Create frontend/cntr/TwoFactorSetup/TwoFactorSetupWizard.tsx — a 3-step wizard. Step 1: intro and "Begin Setup" button. Step 2: QR code image + manual key with a CopyButton. Step 3: 6-digit OTP input for verification. Props: qrCodeUrl: string, manualKey: string, onVerify: (code: string) => Promise<boolean>, onComplete: () => void. All implementation must live inside frontend/cntr/.
Acceptance Criteria
Problem
The 2FA setup flow presents users with a raw QR code and no instructions. There is no multi-step guide to help users scan and verify their authenticator app.
Proposed Solution
Create
frontend/cntr/TwoFactorSetup/TwoFactorSetupWizard.tsx— a 3-step wizard. Step 1: intro and "Begin Setup" button. Step 2: QR code image + manual key with a CopyButton. Step 3: 6-digit OTP input for verification. Props:qrCodeUrl: string,manualKey: string,onVerify: (code: string) => Promise<boolean>,onComplete: () => void. All implementation must live insidefrontend/cntr/.Acceptance Criteria
frontend/cntr/TwoFactorSetup/TwoFactorSetupWizard.tsx<img src={qrCodeUrl} alt="Scan with your authenticator app">CopyButtonfor themanualKey(reuse fromfrontend/cntr/CopyButton/)onVerifyreturnsfalsefrontend/cntr/TwoFactorSetup/TwoFactorSetupWizard.test.tsx