JezK

Edit File: otpverification.php

<?php
$encodedToken = $_GET['token'];
$token = base64_decode($encodedToken);
$verifyStatus = $_GET['verifyStatus']; //2- register,1- forgot
?>
<!doctype html>
<html lang="en">

<head>
    <title>Detailing Edition - Login</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/png" href="./images/fav.png">

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}
    </style>
</head>

<div class="col-md-5 form-container">
                    <div class="otp-contents">
                        <h3 class="login-heading">OTP Verification</h3>
                        <div class="form-style">
                            <!-- <form id="otpForm">
                                <div class="form-group pb-2">

<p class="align-center" style="color:white; font-size:16px;">Please enter the verification code sent to your mobile number</p>
                                    <label for="phone" class="form-label">OTP</label>
                                    <input type="phone" class="form-control" id="otp1" name="otp1">
                                    <div class="text-center">
                                        <button type="button" class="no-btn text-white" onclick="resnedOtp()">Resend OTP</button>
                                    </div>
                                    <p class="error otp_error"></p>

</div>

<div class="error loginerror"></div>
                                <div class="my-2 d-flex justify-content-center">
                                    <button type="submit" class="de-btn-fill" onclick="return validateOtp();" name="login">Submit</button>
                                </div>

</form> -->
                            <form id="otpForm">
                                <div class="form-group pb-2">
                                    <p class="text-center text-white">Please enter the verification code sent to your mobile number</p>
                                    
                                    <div class="container height-100 d-flex justify-content-center align-items-center">
                                        <div class="position-relative">
                                          
                                                <div id="otp" class="inputs d-flex flex-row justify-content-center mt-2"> 
                                                    <input class="m-2 text-center form-control rounded" type="number" id="first" maxlength="1" pattern="\d*"/> 
                                                    <input class="m-2 text-center form-control rounded" type="number" id="second" maxlength="1" pattern="\d*"/>
                                                     <input class="m-2 text-center form-control rounded" type="number" id="third" maxlength="1" pattern="\d*"/> 
                                                     <input class="m-2 text-center form-control rounded" type="number" id="fourth" maxlength="1" pattern="\d*" /> 
                                                </div>
                                           
                                        </div>
                                    </div>
                                    <div class="text-end ">
                                        
                                        <a onclick="resnedOtp()" class="cursor-pointer pt-2 d-inline-block text-white">Resend the code? </a>
                                    </div>
                                    <p class="error otp_error"></p>
                                </div>

</div>
                        <div class="login"> <br>
                            <h5><a href="index.php">Login</a></h5>
                        </div>
                    </div>

</div>
                <div class="col-md-1 p-0">
                </div>

</div>

</div>
    </section>

<?php
    include "./scripts.php";
    include "./App/userObject.php";
    ?>

$(document).ready(function() {
            $('.toggle-icon').click(function() {
                var input = $('#password');
                if (input.attr('type') === 'password') {
                    input.attr('type', 'text');
                    $(this).find('i').removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    input.attr('type', 'password');
                    $(this).find('i').removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });
            $('#otpForm').submit(function(event) {
                event.preventDefault();
                let otpNumber1 = `${$('#first').val()}${$('#second').val()}${$('#third').val()}${$('#fourth').val()}`;

let verifyStatus = "<?php echo $verifyStatus; ?>";
                let otpNumber = otpNumber1;
                //

$.ajax({
                    url: 'App/forgotpassword.php',
                    method: 'POST',
                    data: {
                        otp: 'otp',
                        otpNumber: otpNumber,
                        token: token,
                        verifyStatus
                    },
                    success: function(response) {
                        data = JSON.parse(response);
                        if (data.status == 1) {
                            if (verifyStatus == 2) {
                                token = data.token
                                location.replace('resetpassword.php?token=' + token);
                            } else {
                                toastr.success("OTP verified successfully. Pleae login to continue.");

setTimeout(location.replace('index.php'),5000); 
                            }
                        } else {
                            toastr.warning("Wrong Otp");
                        }
                    }
                });
            });
        });

document.addEventListener("DOMContentLoaded", function(event) {

function OTPInput() {
                const inputs = document.querySelectorAll('#otp > *[id]');
                for (let i = 0; i < inputs.length; i++) {
                    inputs[i].addEventListener('input', function(event) {
                        const input = event.target;
                        const inputValue = input.value;

if (inputValue.length > 1) {
                            input.value = inputValue.charAt(inputValue.length - 1);
                        }

if (i !== inputs.length - 1 && inputValue !== '') {
                            inputs[i + 1].focus();
                        }
                    });

inputs[i].addEventListener('keydown', function(event) {
                        if (event.key === "Backspace" && inputs[i].value === '') {
                            if (i !== 0) {
                                inputs[i - 1].focus();
                            }
                        }
                    });
                }
            }
            OTPInput();

});

function resnedOtp() {

$('#otpForm')[0].reset()

$.ajax({
                url: 'App/forgotpassword.php',
                method: 'POST',
                data: {
                    resend: 'resend',
                    token: token,
                },
                success: function(response) {

if (response == 1) {
                        toastr.success("OTP sent successfully.");
                    } else {
                        toastr.warning("Unable to send otp");
                    }

}
            });
        }
    </script>

</body>

</html>