admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Implementing a paste functionality in OTP login where the user can directly paste the OTP.

Browse Source
This commit is contained in:
Kartik sharma 2025-07-11 11:24:29 +05:30
parent 0a0f0046cc
commit 3b92349cce
1 changed files with 95 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
src/pages/authentication/LoginWithOtp.jsx
View File

@ -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>