"use client"; import React, { useState, useRef, KeyboardEvent, ClipboardEvent } from "react"; import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion"; import { ShieldCheck, Check, Loader2 } from "lucide-react"; // --- TYPES --- export type AuthAccentColor = "orange" | "indigo" | "emerald"; export interface TwoFactorAuthProps extends Omit, "ref" | "children"> { title?: string; subtitle?: string; accent?: AuthAccentColor; onComplete?: (code: string) => Promise; /** React 19 native ref support */ ref?: React.Ref; } /** * Two Factor Auth Pro (v2.2 Ultra - Mobile Fixed) * A highly interactive, bimodal 2FA component. * Engineered with flex-1 inputs for flawless scaling on narrow mobile screens. */ export const TwoFactorAuth = ({ title = "Authentication", subtitle = "Enter the 6-digit code sent to your authenticator app.", accent = "orange", onComplete, className, ref, ...props }: TwoFactorAuthProps) => { const [code, setCode] = useState(["", "", "", "", "", ""]); const [status, setStatus] = useState<"idle" | "loading" | "success">("idle"); const inputRefs = useRef<(HTMLInputElement | null)[]>([]); const handleChange = (index: number, value: string) => { if (!/^\d*$/.test(value)) return; const newCode = [...code]; newCode[index] = value.slice(-1); setCode(newCode); // Auto-focus al siguiente input if (value && index < 5) { inputRefs.current[index + 1]?.focus(); } }; const handleKeyDown = (index: number, e: KeyboardEvent) => { if (e.key === "Backspace" && !code[index] && index > 0) { inputRefs.current[index - 1]?.focus(); } }; const handlePaste = (e: ClipboardEvent) => { e.preventDefault(); const pastedData = e.clipboardData.getData("text/plain").replace(/\D/g, "").slice(0, 6); if (pastedData) { const newCode = [...code]; for (let i = 0; i < pastedData.length; i++) { newCode[i] = pastedData[i]; } setCode(newCode); const focusIndex = Math.min(pastedData.length, 5); inputRefs.current[focusIndex]?.focus(); } }; const handleSubmit = async (e?: React.FormEvent) => { if (e) e.preventDefault(); const fullCode = code.join(""); if (fullCode.length < 6 || status !== "idle") return; setStatus("loading"); try { if (onComplete) { await onComplete(fullCode); } else { await new Promise(resolve => setTimeout(resolve, 1500)); // Demo delay } setStatus("success"); setTimeout(() => { setStatus("idle"); setCode(["", "", "", "", "", ""]); inputRefs.current[0]?.focus(); }, 3000); } catch (error) { setStatus("idle"); } }; // Safe Color Mapping for Tailwind JIT const themeMaps: Record = { orange: { iconBg: "bg-orange-500/10", iconText: "text-orange-500", inputFocus: "focus:border-orange-500 focus:ring-orange-500/15", btnActive: "hover:bg-orange-500 hover:text-white shadow-orange-500/20", textHover: "hover:text-orange-500" }, indigo: { iconBg: "bg-indigo-500/10", iconText: "text-indigo-500", inputFocus: "focus:border-indigo-500 focus:ring-indigo-500/15", btnActive: "hover:bg-indigo-500 hover:text-white shadow-indigo-500/20", textHover: "hover:text-indigo-500" }, emerald: { iconBg: "bg-emerald-500/10", iconText: "text-emerald-500", inputFocus: "focus:border-emerald-500 focus:ring-emerald-500/15", btnActive: "hover:bg-emerald-500 hover:text-white shadow-emerald-500/20", textHover: "hover:text-emerald-500" } }; const current = themeMaps[accent]; const isComplete = code.join("").length === 6; return (

{/* HEADER ICON */}

{/* TEXT */}

{title}

{subtitle}

{/* FORM */}

{/* INPUT GRID */} {/* FIX 2: Usamos flex gap-1.5 sm:gap-2 y flex-1 min-w-0 en los inputs */}

{code.map((digit, index) => ( { inputRefs.current[index] = el; }} type="text" inputMode="numeric" maxLength={1} value={digit} aria-label={`Digit ${index + 1}`} onChange={(e) => handleChange(index, e.target.value)} onKeyDown={(e) => handleKeyDown(index, e)} onPaste={handlePaste} className={` flex-1 min-w-0 max-w-[3rem] h-12 sm:h-16 text-center text-xl sm:text-2xl font-black text-neutral-900 dark:text-white bg-neutral-50 dark:bg-neutral-950/50 border border-neutral-200 dark:border-neutral-800 rounded-xl appearance-none outline-none focus:ring-4 transition-all duration-300 ${current.inputFocus} `} /> ))}

{/* SUBMIT BUTTON */} {status === "idle" && ( Verify Code )} {status === "loading" && ( )} {status === "success" && ( Verified )}

{/* RESEND LINK */}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function TwoFactorAuthDemo() { const handleVerify = async (code: string) => { console.log("Verifying code:", code); await new Promise(resolve => setTimeout(resolve, 2000)); }; return (

); }