/* eslint-disable @typescript-eslint/no-explicit-any */ "use client"; import { useRef } from "react"; import { Head, router, useForm, usePage, } from "@inertiajs/react"; import { LoaderCircle } from "lucide-react"; import logo from "../../../images/logo-white.png"; import TextLink from "@/components/text-link"; import InputError from "@/components/input-error"; import { Button } from "@/components/ui/button"; import styles from "./email-verification.module.scss"; export default function EmailVerification() { const { flash } = usePage().props; const inputs = useRef< (HTMLInputElement | null)[] >([]); const { data, setData, post, processing, errors, } = useForm({ otp: "", }); const otpArray = data.otp .padEnd(6, " ") .split("") .slice(0, 6); const handleChange = ( value: string, index: number ) => { if (!/^\d*$/.test(value)) return; const current = data.otp .padEnd(6, " ") .split(""); current[index] = value.slice(-1); const updated = current .join("") .replace(/\s/g, ""); setData("otp", updated); if (value && index < 5) { inputs.current[index + 1]?.focus(); } }; const handleKeyDown = ( e: React.KeyboardEvent, index: number ) => { if ( e.key === "Backspace" && !otpArray[index] && index > 0 ) { inputs.current[index - 1]?.focus(); } }; const handlePaste = ( e: React.ClipboardEvent ) => { e.preventDefault(); const pasted = e.clipboardData .getData("text") .replace(/\D/g, "") .slice(0, 6); setData("otp", pasted); const focusIndex = pasted.length >= 6 ? 5 : pasted.length; inputs.current[focusIndex]?.focus(); }; const verifyOtp = () => { post( route("register.verify-otp") ); }; const resendOtp = () => { router.post( route("register.resend-otp") ); }; return ( <>
{/* HEADER */}
TraderPlus Back
{/* CONTENT */}
{/* COPY */}
EMAIL VERIFICATION

Verify your email to continue

{/* FLASHES */} {flash?.success && (
{ flash.success }
)} {flash?.error && (
{ flash.error }
)}
{/* OTP */}
{otpArray.map( ( digit, index ) => ( { inputs.current[ index ] = el; }} type="text" inputMode="numeric" maxLength={ 1 } value={ digit === " " ? "" : digit } onPaste={ handlePaste } onKeyDown={( e ) => handleKeyDown( e, index ) } onChange={( e ) => handleChange( e .target .value, index ) } /> ) )}
{/* BUTTON */} {/* FOOTER */}
Didn't receive the code?
); }