[V0_FILE]typescriptreact:file="totp-setup.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { CheckCircle2, AlertCircle, Smartphone } from "lucide-react" export default function TOTPSetup() { const [verificationCode, setVerificationCode] = useState("") const [status, setStatus] = useState<"idle" | "error" | "success">("idle") const handleVerify = () => { // Mock verification - in a real app, this would verify against the server if (verificationCode.length === 6) { setStatus("success") } else { setStatus("error") } } return (

Set up two-factor authentication Secure your account with two-factor authentication using an authenticator app

{/* This would be replaced with an actual QR code in production */}

Scan this QR code with your authenticator app

Using an authenticator app

1. Open your authenticator app
2. Tap the + icon or "Add account"
3. Scan the QR code above

Verification code setVerificationCode(e.target.value.replace(/[^0-9]/g, ""))} className="text-center text-lg tracking-widest" />

{status === "error" && ( Invalid verification code. Please try again. )} {status === "success" && ( Two-factor authentication has been enabled successfully! )}

) } [V0_FILE]typescriptreact:file="components/icons.tsx" isMerged="true" // This is just a stub for the icons import export const Icons = { spinner: () => null, } [V0_FILE]typescriptreact:file="totp-success.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { CheckCircle2, Copy, Download, Shield } from "lucide-react" export default function TOTPSuccess() { const [copied, setCopied] = useState(false) // Mock recovery codes - in production these would come from the server const recoveryCodes = [ "4F7D-A91B-CC31", "K4NM-9J2H-PLQ7", "X8WP-VNR5-YT6M", "2ZKL-H8JS-UE3G", "9BMC-D4VF-AW5N", "R6TH-Q7YG-X1C8", ] const handleCopy = async () => { try { await navigator.clipboard.writeText(recoveryCodes.join("\n")) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch (err) { console.error("Failed to copy:", err) } } const handleDownload = () => { const blob = new Blob([recoveryCodes.join("\n")], { type: "text/plain" }) const url = window.URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = "recovery-codes.txt" document.body.appendChild(a) a.click() window.URL.revokeObjectURL(url) document.body.removeChild(a) } return (

Two-factor authentication enabled Your account is now more secure Save these recovery codes in a secure place. You'll need them to access your account if you lose your authentication device.

{recoveryCodes.map((code, index) => (

{code}

))}

Make sure to store your recovery codes before leaving this page

) } [V0_FILE]typescriptreact:file="totp-auth.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { AlertCircle, KeyRound, Timer } from "lucide-react" export default function TOTPAuth() { const [code, setCode] = useState("") const [error, setError] = useState(false) const [timeLeft, setTimeLeft] = useState(30) const [isLoading, setIsLoading] = useState(false) // Handle countdown timer for TOTP code expiration useEffect(() => { const timer = setInterval(() => { setTimeLeft((prev) => (prev > 0 ? prev - 1 : 30)) }, 1000) return () => clearInterval(timer) }, []) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(false) // Mock verification - in production, this would call your auth API await new Promise((resolve) => setTimeout(resolve, 1000)) if (code.length === 6) { // Mock successful authentication window.location.href = "/dashboard" } else { setError(true) setIsLoading(false) } } const handleCodeChange = (e: React.ChangeEvent) => { const value = e.target.value.replace(/[^0-9]/g, "") setCode(value) setError(false) } return (

Two-factor authentication Enter the 6-digit code from your authenticator app

) } [V0_FILE]typescriptreact:file="recovery-code.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { AlertCircle, KeySquare, ArrowLeft } from "lucide-react" export default function RecoveryCodeAuth() { const [recoveryCode, setRecoveryCode] = useState("") const [error, setError] = useState(false) const [isLoading, setIsLoading] = useState(false) const formatRecoveryCode = (code: string) => { // Remove any existing dashes and non-alphanumeric characters const cleaned = code.replace(/[^A-Z0-9]/gi, "").toUpperCase() // Format with dashes after every 4 characters if (cleaned.length <= 4) return cleaned if (cleaned.length <= 8) return `${cleaned.slice(0, 4)}-${cleaned.slice(4)}` return `${cleaned.slice(0, 4)}-${cleaned.slice(4, 8)}-${cleaned.slice(8, 12)}` } const handleCodeChange = (e: React.ChangeEvent) => { const value = e.target.value // Only allow alphanumeric characters const alphanumeric = value.replace(/[^A-Z0-9-]/gi, "") const formatted = formatRecoveryCode(alphanumeric) setRecoveryCode(formatted) setError(false) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(false) // Mock verification - in production, this would call your auth API await new Promise((resolve) => setTimeout(resolve, 1000)) // Check if the code matches the expected format (without dashes) const cleanCode = recoveryCode.replace(/-/g, "") if (cleanCode.length === 12) { // Mock successful authentication window.location.href = "/dashboard" } else { setError(true) setIsLoading(false) } } return (

Enter recovery code Use one of your recovery codes to access your account

) }