Compare commits
No commits in common. "b389839b9470d969ab078bc6552ae750afb88c21" and "9a9ff4460f721407763e0c22691a75980663ce46" have entirely different histories.
b389839b94
...
9a9ff4460f
@ -29,8 +29,6 @@ const LoginWithOtp = () => {
|
|||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors, isSubmitted },
|
formState: { errors, isSubmitted },
|
||||||
getValues,
|
getValues,
|
||||||
setValue,
|
|
||||||
trigger,
|
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(otpSchema),
|
resolver: zodResolver(otpSchema),
|
||||||
});
|
});
|
||||||
@ -66,7 +64,6 @@ const LoginWithOtp = () => {
|
|||||||
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();
|
||||||
@ -77,8 +74,6 @@ const LoginWithOtp = () => {
|
|||||||
setTimeLeft(remaining);
|
setTimeLeft(remaining);
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (timeLeft <= 0) return;
|
if (timeLeft <= 0) return;
|
||||||
|
|
||||||
@ -97,30 +92,6 @@ const LoginWithOtp = () => {
|
|||||||
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>
|
||||||
@ -138,7 +109,8 @@ const LoginWithOtp = () => {
|
|||||||
key={num}
|
key={num}
|
||||||
type="text"
|
type="text"
|
||||||
maxLength={1}
|
maxLength={1}
|
||||||
className={`form-control text-center ${errors[`otp${num}`] ? "is-invalid" : ""
|
className={`form-control text-center ${
|
||||||
|
errors[`otp${num}`] ? "is-invalid" : ""
|
||||||
}`}
|
}`}
|
||||||
ref={(el) => {
|
ref={(el) => {
|
||||||
inputRefs.current[idx] = el;
|
inputRefs.current[idx] = el;
|
||||||
@ -149,9 +121,6 @@ const LoginWithOtp = () => {
|
|||||||
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) => {
|
||||||
@ -163,8 +132,6 @@ const LoginWithOtp = () => {
|
|||||||
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