Changes of custom captcha module
This commit is contained in:
priyanshuvish
176
components/MathVerificationPopup.tsx
Normal file
176
components/MathVerificationPopup.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Button } from "./ui/button";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
interface MathVerificationPopupProps {
|
||||
isOpen: boolean;
|
||||
onVerify: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const MathVerificationPopup: React.FC<MathVerificationPopupProps> = ({
|
||||
isOpen,
|
||||
onVerify,
|
||||
onClose,
|
||||
}) => {
|
||||
const [num1, setNum1] = useState(0);
|
||||
const [num2, setNum2] = useState(0);
|
||||
const [operator, setOperator] = useState<"+" | "-">("+");
|
||||
const [userAnswer, setUserAnswer] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [attempts, setAttempts] = useState(0);
|
||||
|
||||
const generateNewProblem = () => {
|
||||
let newNum1 = Math.floor(Math.random() * 10) + 1;
|
||||
let newNum2 = Math.floor(Math.random() * 10) + 1;
|
||||
const newOperator = Math.random() > 0.5 ? "+" : "-";
|
||||
|
||||
// Ensure subtraction always has the larger number first
|
||||
if (newOperator === "-" && newNum1 < newNum2) {
|
||||
[newNum1, newNum2] = [newNum2, newNum1];
|
||||
}
|
||||
|
||||
setNum1(newNum1);
|
||||
setNum2(newNum2);
|
||||
setOperator(newOperator);
|
||||
setUserAnswer("");
|
||||
setError("");
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
generateNewProblem();
|
||||
setAttempts(0);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const correctAnswer = operator === "+" ? num1 + num2 : num1 - num2;
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!userAnswer.trim()) {
|
||||
setError("Please enter your answer");
|
||||
return;
|
||||
}
|
||||
|
||||
const answer = parseInt(userAnswer);
|
||||
if (isNaN(answer)) {
|
||||
setError("Please enter a valid number");
|
||||
return;
|
||||
}
|
||||
|
||||
if (answer === correctAnswer) {
|
||||
onVerify();
|
||||
} else {
|
||||
const newAttempts = attempts + 1;
|
||||
setAttempts(newAttempts);
|
||||
setError(`Incorrect answer. Attempt ${newAttempts} of 3.`);
|
||||
|
||||
if (newAttempts >= 3) {
|
||||
generateNewProblem();
|
||||
setAttempts(0);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleOverlayClick = (e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4"
|
||||
onClick={handleOverlayClick}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
className="bg-gray-900 border border-gray-700 rounded-2xl max-w-md w-full p-6 shadow-2xl"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
Verify You're Human
|
||||
</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-white"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="text-center">
|
||||
<p className="text-gray-300 mb-4">
|
||||
Solve this simple math problem to continue:
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center space-x-4 text-3xl font-bold text-white mb-6">
|
||||
<span className="bg-gray-800 px-4 py-3 rounded-lg min-w-[60px] text-center">
|
||||
{num1}
|
||||
</span>
|
||||
<span className="text-[#E5195E]">{operator}</span>
|
||||
<span className="bg-gray-800 px-4 py-3 rounded-lg min-w-[60px] text-center">
|
||||
{num2}
|
||||
</span>
|
||||
<span>=</span>
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
value={userAnswer}
|
||||
onChange={(e) => {
|
||||
setUserAnswer(e.target.value.replace(/[^0-9-]/g, ""));
|
||||
setError("");
|
||||
}}
|
||||
className="bg-gray-800 border border-gray-600 rounded-lg px-4 py-3 text-center w-20 text-white focus:outline-none focus:border-[#E5195E]"
|
||||
autoFocus
|
||||
maxLength={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-red-400 text-sm mt-2">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={generateNewProblem}
|
||||
className="flex-1 border-gray-600 text-gray-300 hover:text-white"
|
||||
>
|
||||
New Problem
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="flex-1 bg-[#E5195E] hover:bg-[#c41450] text-white"
|
||||
>
|
||||
Verify Answer
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500 text-center">
|
||||
This helps us prevent spam and automated submissions.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user