Implementing a paste functionality in OTP login where the user can directly paste the OTP.
This commit is contained in:
parent
0a0f0046cc
commit
3b92349cce
@ -29,6 +29,8 @@ const LoginWithOtp = () => {
|
|||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors, isSubmitted },
|
formState: { errors, isSubmitted },
|
||||||
getValues,
|
getValues,
|
||||||
|
setValue,
|
||||||
|
trigger,
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(otpSchema),
|
resolver: zodResolver(otpSchema),
|
||||||
});
|
});
|
||||||
@ -64,6 +66,7 @@ const formatTime = (seconds) => {
|
|||||||
return `${min}:${sec}`;
|
return `${min}:${sec}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Time Logic for OTP expiry
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const otpSentTime = localStorage.getItem("otpSentTime");
|
const otpSentTime = localStorage.getItem("otpSentTime");
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
@ -74,6 +77,8 @@ useEffect(() => {
|
|||||||
setTimeLeft(remaining);
|
setTimeLeft(remaining);
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (timeLeft <= 0) return;
|
if (timeLeft <= 0) return;
|
||||||
|
|
||||||
@ -92,6 +97,30 @@ useEffect(() => {
|
|||||||
return () => clearInterval(timer);
|
return () => clearInterval(timer);
|
||||||
}, [timeLeft]);
|
}, [timeLeft]);
|
||||||
|
|
||||||
|
// Handle Paste Event
|
||||||
|
const handlePaste = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const pastedData = e.clipboardData.getData("text/plain").trim();
|
||||||
|
if (pastedData.match(/^\d{4}$/)) {
|
||||||
|
for (let i = 0; i < pastedData.length; i++) {
|
||||||
|
setValue(`otp${i + 1}`, pastedData[i], { shouldValidate: true });
|
||||||
|
|
||||||
|
if (inputRefs.current[i + 1]) {
|
||||||
|
inputRefs.current[i + 1].focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
trigger(["otp1", "otp2", "otp3", "otp4"]);
|
||||||
|
} else {
|
||||||
|
showToast("Invalid OTP format pasted. Please enter 4 digits")
|
||||||
|
|
||||||
|
for (let i = 0; i < 4; i++) {
|
||||||
|
setValue(`otp${i + 1}`, "")
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AuthWrapper>
|
<AuthWrapper>
|
||||||
@ -109,8 +138,7 @@ useEffect(() => {
|
|||||||
key={num}
|
key={num}
|
||||||
type="text"
|
type="text"
|
||||||
maxLength={1}
|
maxLength={1}
|
||||||
className={`form-control text-center ${
|
className={`form-control text-center ${errors[`otp${num}`] ? "is-invalid" : ""
|
||||||
errors[`otp${num}`] ? "is-invalid" : ""
|
|
||||||
}`}
|
}`}
|
||||||
ref={(el) => {
|
ref={(el) => {
|
||||||
inputRefs.current[idx] = el;
|
inputRefs.current[idx] = el;
|
||||||
@ -121,6 +149,9 @@ useEffect(() => {
|
|||||||
onChange(e);
|
onChange(e);
|
||||||
if (/^\d$/.test(val) && idx < 3) {
|
if (/^\d$/.test(val) && idx < 3) {
|
||||||
inputRefs.current[idx + 1]?.focus();
|
inputRefs.current[idx + 1]?.focus();
|
||||||
|
|
||||||
|
} else if (val === "" && idx > 0) {
|
||||||
|
inputRefs.current[idx - 1]?.focus();
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onKeyDown={(e) => {
|
onKeyDown={(e) => {
|
||||||
@ -132,6 +163,8 @@ useEffect(() => {
|
|||||||
inputRefs.current[idx - 1]?.focus();
|
inputRefs.current[idx - 1]?.focus();
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|
||||||
|
onPaste={idx === 0 ? handlePaste : undefined}
|
||||||
style={{ width: "40px", height: "40px", fontSize: "15px" }}
|
style={{ width: "40px", height: "40px", fontSize: "15px" }}
|
||||||
{...rest}
|
{...rest}
|
||||||
/>
|
/>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user