const [captcha, setCapthca] = useState({pattern : '', block: []})
const [userCaptchaInput, setUserCaptchaInput] = useState('')
useEffect(() => {
generateCaptcha();
}, []);
const generateCaptcha = () => {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < 6; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
setCapthca( {pattern: result, block : result.split('')} );
};
if(userCaptchaInput != captcha?.pattern)
{
setErrorMessage("Incorrect Captcha !")
return
}
return (
<div className="bg-gray-200 h-[40px] w-full my-5 px-5 flex items-center justify-evenly relative">
{captcha?.block?.map((item, index) => (
<span key={`captcha-${index}`} className="font-bold">{item}</span>
))}
<span className="absolute -right-4 top-3 cursor-pointer" onClick={generateCaptcha}><GrPowerReset className="hover:text-gray-600" /></span>
</div>
)