Implementing a paste functionality in OTP login where the user can directly paste the OTP.
This commit is contained in:
parent
0a0f0046cc
commit
3b92349cce
@ -18,9 +18,9 @@ const otpSchema = z.object({
|
|||||||
const LoginWithOtp = () => {
|
const LoginWithOtp = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const [ loading, setLoading ] = useState( false );
|
const [loading, setLoading] = useState(false);
|
||||||
const [ timeLeft, setTimeLeft ] = useState( 0 );
|
const [timeLeft, setTimeLeft] = useState(0);
|
||||||
|
|
||||||
|
|
||||||
const inputRefs = useRef([]);
|
const inputRefs = useRef([]);
|
||||||
|
|
||||||
@ -29,68 +29,97 @@ const LoginWithOtp = () => {
|
|||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors, isSubmitted },
|
formState: { errors, isSubmitted },
|
||||||
getValues,
|
getValues,
|
||||||
|
setValue,
|
||||||
|
trigger,
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(otpSchema),
|
resolver: zodResolver(otpSchema),
|
||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = async (data) => {
|
const onSubmit = async (data) => {
|
||||||
const finalOtp = data.otp1 + data.otp2 + data.otp3 + data.otp4;
|
const finalOtp = data.otp1 + data.otp2 + data.otp3 + data.otp4;
|
||||||
const username = localStorage.getItem( "otpUsername" );
|
const username = localStorage.getItem("otpUsername");
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
let requestedData = {
|
let requestedData = {
|
||||||
email: username,
|
email: username,
|
||||||
otp:finalOtp
|
otp: finalOtp
|
||||||
}
|
}
|
||||||
const response = await AuthRepository.verifyOTP( requestedData )
|
const response = await AuthRepository.verifyOTP(requestedData)
|
||||||
|
|
||||||
localStorage.setItem("jwtToken", response.data.token);
|
localStorage.setItem("jwtToken", response.data.token);
|
||||||
localStorage.setItem("refreshToken", response.data.refreshToken);
|
localStorage.setItem("refreshToken", response.data.refreshToken);
|
||||||
setLoading( false );
|
setLoading(false);
|
||||||
localStorage.removeItem( "otpUsername" );
|
localStorage.removeItem("otpUsername");
|
||||||
localStorage.removeItem( "otpSentTime" );
|
localStorage.removeItem("otpSentTime");
|
||||||
navigate( "/dashboard" );
|
navigate("/dashboard");
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
showToast( "Invalid or expired OTP.", "error" );
|
showToast("Invalid or expired OTP.", "error");
|
||||||
|
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const formatTime = (seconds) => {
|
const formatTime = (seconds) => {
|
||||||
const min = Math.floor(seconds / 60).toString().padStart(2, "0");
|
const min = Math.floor(seconds / 60).toString().padStart(2, "0");
|
||||||
const sec = (seconds % 60).toString().padStart(2, "0");
|
const sec = (seconds % 60).toString().padStart(2, "0");
|
||||||
return `${min}:${sec}`;
|
return `${min}:${sec}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
// Time Logic for OTP expiry
|
||||||
const otpSentTime = localStorage.getItem("otpSentTime");
|
useEffect(() => {
|
||||||
const now = Date.now();
|
const otpSentTime = localStorage.getItem("otpSentTime");
|
||||||
|
const now = Date.now();
|
||||||
|
|
||||||
if (otpSentTime) {
|
if (otpSentTime) {
|
||||||
const elapsed = Math.floor((now - Number(otpSentTime)) / 1000); // in seconds
|
const elapsed = Math.floor((now - Number(otpSentTime)) / 1000); //in seconds
|
||||||
const remaining = Math.max(OTP_EXPIRY_SECONDS - elapsed, 0); // prevent negatives
|
const remaining = Math.max(OTP_EXPIRY_SECONDS - elapsed, 0); //prevent negatives
|
||||||
setTimeLeft(remaining);
|
setTimeLeft(remaining);
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
useEffect(() => {
|
|
||||||
if (timeLeft <= 0) return;
|
|
||||||
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
setTimeLeft((prev) => {
|
useEffect(() => {
|
||||||
if (prev <= 1) {
|
if (timeLeft <= 0) return;
|
||||||
clearInterval(timer);
|
|
||||||
localStorage.removeItem( "otpSentTime" );
|
const timer = setInterval(() => {
|
||||||
localStorage.removeItem("otpUsername");
|
setTimeLeft((prev) => {
|
||||||
return 0;
|
if (prev <= 1) {
|
||||||
|
clearInterval(timer);
|
||||||
|
localStorage.removeItem("otpSentTime");
|
||||||
|
localStorage.removeItem("otpUsername");
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return prev - 1;
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
return () => clearInterval(timer);
|
||||||
|
}, [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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return prev - 1;
|
trigger(["otp1", "otp2", "otp3", "otp4"]);
|
||||||
});
|
} else {
|
||||||
}, 1000);
|
showToast("Invalid OTP format pasted. Please enter 4 digits")
|
||||||
|
|
||||||
return () => clearInterval(timer);
|
for (let i = 0; i < 4; i++) {
|
||||||
}, [timeLeft]);
|
setValue(`otp${i + 1}`, "")
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -109,9 +138,8 @@ 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;
|
||||||
ref(el);
|
ref(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}
|
||||||
/>
|
/>
|
||||||
@ -163,17 +196,17 @@ useEffect(() => {
|
|||||||
>
|
>
|
||||||
This OTP will expire in <strong>{formatTime(timeLeft)}</strong>
|
This OTP will expire in <strong>{formatTime(timeLeft)}</strong>
|
||||||
</p>
|
</p>
|
||||||
) : (
|
) : (
|
||||||
<div>
|
<div>
|
||||||
<p
|
<p
|
||||||
className="text-center text-danger mt-2 text small-text m-0"
|
className="text-center text-danger mt-2 text small-text m-0"
|
||||||
|
|
||||||
>
|
>
|
||||||
OTP has expired. Please request a new one.
|
OTP has expired. Please request a new one.
|
||||||
</p>
|
</p>
|
||||||
<a className="text-primary cursor-pointer" onClick={()=>navigate('/auth/login')}>Try Again</a>
|
<a className="text-primary cursor-pointer" onClick={() => navigate('/auth/login')}>Try Again</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
)}
|
)}
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user