"use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Fingerprint, TerminalSquare, CheckCircle2, XCircle, Cpu } from "lucide-react"; /** * Aegis Hardware OTP v3 * A radical departure from standard centered inputs. * Features an asymmetric industrial/hardware interface, inset "LCD" style inputs, * and mechanical status LEDs. Built for high-security, brutalist aesthetics. */ export default function AegisHardwareOtp() { const [otp, setOtp] = useState(Array(6).fill("")); const [activeIndex, setActiveIndex] = useState(0); const [status, setStatus] = useState<"awaiting" | "processing" | "verified" | "rejected">("awaiting"); const inputRefs = useRef<(HTMLInputElement | null)[]>([]); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); if (inputRefs.current[0]) inputRefs.current[0].focus(); }, []); const handleChange = (e: React.ChangeEvent, index: number) => { if (status === "processing" || status === "verified") return; const value = e.target.value; if (isNaN(Number(value))) return; const newOtp = [...otp]; newOtp[index] = value.substring(value.length - 1); setOtp(newOtp); if (value && index < 5) { setActiveIndex(index + 1); inputRefs.current[index + 1]?.focus(); } if (value && index === 5 && newOtp.every((digit) => digit !== "")) { handleValidate(newOtp.join("")); } }; const handleKeyDown = (e: React.KeyboardEvent, index: number) => { if (status === "processing" || status === "verified") return; if (e.key === "Backspace") { if (!otp[index] && index > 0) { setActiveIndex(index - 1); inputRefs.current[index - 1]?.focus(); } else { const newOtp = [...otp]; newOtp[index] = ""; setOtp(newOtp); } } else if (e.key === "ArrowLeft" && index > 0) { setActiveIndex(index - 1); inputRefs.current[index - 1]?.focus(); } else if (e.key === "ArrowRight" && index < 5) { setActiveIndex(index + 1); inputRefs.current[index + 1]?.focus(); } }; const handlePaste = (e: React.ClipboardEvent) => { e.preventDefault(); if (status === "processing" || status === "verified") return; const pastedData = e.clipboardData.getData("text/plain").trim().slice(0, 6); if (!/^\d+$/.test(pastedData)) return; const newOtp = [...otp]; for (let i = 0; i < pastedData.length; i++) { newOtp[i] = pastedData[i]; } setOtp(newOtp); const nextIndex = Math.min(pastedData.length, 5); setActiveIndex(nextIndex); inputRefs.current[nextIndex]?.focus(); if (pastedData.length === 6) { handleValidate(pastedData); } }; const handleValidate = (code: string) => { setStatus("processing"); inputRefs.current.forEach(input => input?.blur()); // Simulate hardware validation latency setTimeout(() => { if (code === "000000") { setStatus("rejected"); setTimeout(() => { setOtp(Array(6).fill("")); setStatus("awaiting"); setActiveIndex(0); inputRefs.current[0]?.focus(); }, 2000); } else { setStatus("verified"); } }, 2500); }; if (!mounted) return null; const StatusLED = ({ color, active, pulse }: { color: string, active: boolean, pulse?: boolean }) => (

); return (

{/* Asymmetric Hardware Interface */}

{/* Left Panel: Telemetry & Instructions */}

{/* Decorative Hardware Notches */}

AEGIS_SECURE_MODULE

Terminal
Lockout

Input the physical authorization token. Any unauthorized brute-force attempts will trigger localized data purging.

System Status

{status === "awaiting" && <> Awaiting Input...} {status === "processing" && <> Decrypting Hash...} {status === "verified" && <> Access Granted} {status === "rejected" && <> Invalid Token}

{/* Right Panel: The Ledger */}

{/* LCD/LED Input Array */}

{/* Scanline overlay */} {status === "processing" && ( )} {otp.map((digit, index) => { const isActive = activeIndex === index && status === "awaiting"; const isFilled = digit !== ""; let digitColor = "text-zinc-800"; // Empty if (status === "verified") digitColor = "text-emerald-500 drop-shadow-[0_0_10px_rgba(16,185,129,0.8)]"; else if (status === "rejected") digitColor = "text-rose-500 drop-shadow-[0_0_10px_rgba(244,63,94,0.8)]"; else if (status === "processing") digitColor = "text-cyan-500 drop-shadow-[0_0_10px_rgba(6,182,212,0.8)]"; else if (isFilled) digitColor = "text-amber-500 drop-shadow-[0_0_10px_rgba(245,158,11,0.5)]"; return (

{ inputRefs.current[index] = el; }} type="text" inputMode="numeric" autoComplete="one-time-code" maxLength={1} value={digit} onChange={(e) => handleChange(e, index)} onKeyDown={(e) => handleKeyDown(e, index)} onPaste={handlePaste} onFocus={() => setActiveIndex(index)} readOnly={status !== "awaiting"} className={`relative z-10 w-10 h-16 @2xl:w-16 @2xl:h-24 bg-[#050505] border-t-4 border-b-4 text-center text-3xl @2xl:text-5xl font-mono font-black transition-all duration-200 focus:outline-none cursor-default ${digitColor} ${ isActive ? 'border-t-amber-500 border-b-amber-500 shadow-inner' : 'border-t-zinc-900 border-b-zinc-800' }`} /> {/* Under-digit mechanical lines */}

); })}

{/* Bottom Action Area */}

SEQ_0X9F

); }

TerminalLockout

Terminal
Lockout