let otpGen;
let timer;
let secondsRemaining = 10;
function
OTPFn() {
const btn = document.getElementById(
'generateBtn'
);
btn.disabled =
true
;
clearFn();
otpGen = Math.floor(1000 + Math.random() * 9000);
const temp = document.getElementById(
'content'
);
const showOtp = document.createElement(
'div'
);
showOtp.classList.add(
'otp-display'
);
showOtp.innerHTML =
`<p class=
"otp-text"
>Generated OTP:
<span>${otpGen}</span>
</p>`;
temp.appendChild(showOtp);
document.getElementById(
'otpForm'
).
style.display =
'flex'
;
startTimer();
}
function
clearFn() {
const prevOtp =
document.querySelector(
'.otp-display'
);
if
(prevOtp) {
prevOtp.remove();
}
resetTimer();
document.
getElementById(
'errorMessage'
).innerText =
''
;
enableInputField();
}
function
OTPVerifyFn() {
const userOtp =
document.getElementById(
'userOTP'
).value;
if
(userOtp ===
""
) {
alert(
"Please enter OTP."
);
return
;
}
const enterOtp = parseInt(userOtp);
if
(!isNaN(enterOtp)) {
if
(secondsRemaining > 0) {
if
(enterOtp === otpGen) {
showMsgFn();
document.
getElementById(
'generateBtn'
).disabled =
false
;
resetTimer();
enableInputField();
}
else
{
document.getElementById(
'errorMessage'
).innerText =
'Invalid OTP. Please try again.'
;
}
}
else
{
document.getElementById(
'errorMessage'
).innerText =
'OTP Expired. Please generate a new OTP.'
;
resetTimer();
}
}
else
{
alert(
"Invalid OTP. Please try again."
);
}
}
function
showMsgFn() {
const successMessage =
document.getElementById(
'successMessage'
);
successMessage.style.animation =
'fadeIn 1s forwards'
;
successMessage.style.display =
'flex'
;
setTimeout(() => {
successMessage.style.display =
'none'
;
}, 3000);
}
function
startTimer() {
timer = setInterval(
function
() {
if
(secondsRemaining <= 0) {
clearInterval(timer);
document.getElementById(
'generateBtn'
).disabled =
false
;
document.getElementById(
'errorMessage'
).innerText =
'OTP Expired. Please generate a new OTP.'
;
resetTimer();
disableInputField();
}
else
{
document.getElementById(
'timer'
).innerText =
`Time Remaining: ${secondsRemaining} seconds`;
secondsRemaining--;
}
}, 1000);
}
function
resetTimer() {
clearInterval(timer);
document.getElementById(
'timer'
).innerText =
''
;
secondsRemaining = 10;
}
function
disableInputField() {
document.getElementById(
'userOTP'
).disabled =
true
;
}
function
enableInputField() {
document.getElementById(
'userOTP'
).disabled =
false
;
}
function
clearFields() {
document.getElementById(
'userOTP'
).value =
''
;
clearFn();
}