<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latest Project</title>
<%- include('./partials/csslinks') %>
</head>
<body>
<%- include('./partials/header') %>
<section class="portfolio-section">
<div class="container d-flex flex-column justify-content-center align-items-center" data-aos="fade-up"
data-aos-duration="3200" data-aos-easing="ease-in-sine">
<div class="row justify-content-center w-100">
<div class="col-lg-8 col-12">
<!-- NO 1 portfolio WORKS STARTS HERE -->
<div class="portfolio_width_setting portfolio-form w-100">
<form method="POST" action="/api/auth/password/verify-otp" class="row g-4">
<div class="col-12">
<div class="text-center">
<h1 class="fw-bold">Verify OTP</h1>
<h6>Please enter the 6-digit verification code we sent to your email. If you don't see it, be sure to check your spam folder.</h6>
</div>
</div>
<input type="hidden" id="otp-inp" name="code">
<div class="col-12 portfolio-form-design">
<div class="otp-input">
<input type="number" min="0" max="9" required>
<input type="number" min="0" max="9" required>
<input type="number" min="0" max="9" required>
<input type="number" min="0" max="9" required>
<input type="number" min="0" max="9" required>
<input type="number" min="0" max="9" required>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="submit" class="submit-btn-portfolio verify-otp" disabled>Verify</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<%- include('./partials/query') %>
<%- include('./partials/footer') %>
<%- include('./partials/scriptlinks') %>
<script>
const otpBtn = $(".verify-otp")
const inputs = document.querySelectorAll('.otp-input input');
inputs.forEach((input, index) => {
input.addEventListener('input', (e) => {
if (e.target.value.length > 1) {
e.target.value = e.target.value.slice(0, 1);
}
if (e.target.value.length === 1) {
if (index < inputs.length - 1) {
inputs[index + 1].focus();
}
}
$(otpBtn).attr('disabled',true)
let filled = true
let otpCode = ''
$(inputs).each((ind,elem)=>{
if(!$(elem).val()){
filled = false
}else{
otpCode += $(elem).val()
}
})
$("#otp-inp").val(otpCode)
if(filled){
$(otpBtn).removeAttr('disabled')
}
});
input.addEventListener('keydown', (e) => {
if (e.key === 'Backspace' && !e.target.value) {
if (index > 0) {
inputs[index - 1].focus();
}
}
if (e.key === 'e') {
e.preventDefault();
}
});
});
</script>
<script>
$(document).ready(function() {
$('.otp-input input').on('paste', function(event) {
// Prevent the default paste behavior
event.preventDefault();
// Get the pasted data from the clipboard
var pasteData = (event.originalEvent || event).clipboardData.getData('text');
// Format the string (e.g., remove whitespace, make it uppercase, etc.)
var formattedData = pasteData.replace(/\s+/g, ''); // Example: removing whitespace
formattedData.split('').forEach((str, ind) => {
$('.otp-input input')[ind].value = str
})
$("#otp-inp").val(formattedData)
$(".verify-otp").removeAttr('disabled')
});
})
</script>
</body>
</html>