136 lines
4.5 KiB
PHP
136 lines
4.5 KiB
PHP
<?php $currentPage = "sign_in_otp.php" ?>
|
|
|
|
@extends('Frontend.layouts.master')
|
|
|
|
|
|
|
|
|
|
@section('content')
|
|
|
|
<div class="login">
|
|
<div class="container">
|
|
<div class="row d-flex align-items-center justify-content-center">
|
|
<!--<div class="col-md-6">-->
|
|
<!-- <img width="100%" src="{{asset('public/assets/media/FrontendImages/sign_in_otp.png')}}" alt="">-->
|
|
<!--</div>-->
|
|
<div class="col-md-6 right aos-init aos-animate" data-aos="fade-left">
|
|
<div class="login-form-otp">
|
|
<h1>Welcome Back</h1>
|
|
<h2>Sign in to continue to Jericho Alternatives</h2>
|
|
<h3 class="text-center">OTP Login</h3>
|
|
<div class="form-group text-center">
|
|
<label>Please enter the OTP sent to registered mobile number</label>
|
|
|
|
<div class="otp-field">
|
|
<form id="verify_mobile_otp" autocomplete="off">
|
|
<input name="input_1" id="input_1" class="otp" type="text" maxlength="1" />
|
|
<input name="input_2" id="input_2" class="otp" type="text" maxlength="1" />
|
|
<input name="input_3" id="input_3" class="otp" type="text" maxlength="1" />
|
|
<input name="input_4" id="input_4" class="otp" type="text" maxlength="1" />
|
|
<button type="submit" class="yellow-btn signin mt-4">Continue</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<p class="text-center mb-3">OTP has been sent to your registered mobile number.<br> OTP valid for <span id="countdown-timer">02:00</span> Sec</p>
|
|
<p class="regist text-center mb-3">Didn't receive any OTP ? <a href="#" class="d-none" id="resend_otp">Resend OTP</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
@section('scripts')
|
|
{{-- remove otp using double click on backspace starts --}}
|
|
<script>
|
|
let inputss = document.querySelectorAll("input");
|
|
let values = Array(4);
|
|
let clipData;
|
|
inputss[0].focus();
|
|
|
|
inputss.forEach((tag, index) => {
|
|
tag.addEventListener('keyup', (event) => {
|
|
if (event.code === "Backspace" && hasNoValue(index)) {
|
|
if (index > 0) inputss[index - 1].focus();
|
|
}
|
|
|
|
//else if any input move focus to next or out
|
|
else if (tag.value !== "") {
|
|
(index < inputss.length - 1) ? inputss[index + 1].focus(): tag.blur();
|
|
}
|
|
|
|
//add val to array to track prev vals
|
|
values[index] = event.target.value;
|
|
});
|
|
|
|
tag.addEventListener('input', () => {
|
|
//replace digit if already exists
|
|
if (tag.value > 10) {
|
|
tag.value = tag.value % 10;
|
|
}
|
|
});
|
|
|
|
tag.addEventListener('paste', (event) => {
|
|
event.preventDefault();
|
|
clipData = event.clipboardData.getData("text/plain").split('');
|
|
filldata(index);
|
|
})
|
|
})
|
|
|
|
function filldata(index) {
|
|
for (let i = index; i < inputss.length; i++) {
|
|
inputss[i].value = clipData.shift();
|
|
}
|
|
}
|
|
|
|
function hasNoValue(index) {
|
|
if (values[index] || values[index] === 0)
|
|
return false;
|
|
|
|
return true;
|
|
}
|
|
|
|
</script>
|
|
{{-- remove otp using double click on backspace ends --}}
|
|
{{-- <script>
|
|
$(document).ready(function(){
|
|
startTimer();
|
|
// otp timer code
|
|
|
|
var timerDuration = 120;
|
|
|
|
var duration = 120;
|
|
|
|
function startTimer() {
|
|
// var duration = 120; // Duration of the timer in seconds
|
|
|
|
var timer = duration;
|
|
|
|
$("#countdown-timer").text(formatTime(timer));
|
|
|
|
var intervalId = setInterval(function () {
|
|
timer--;
|
|
|
|
$("#countdown-timer").text(formatTime(timer));
|
|
|
|
if (timer === 0) {
|
|
clearInterval(intervalId);
|
|
$('#resend_otp').removeClass("d-none");
|
|
<!--$("#resend-otp-link").prop("disabled", false);-->
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
function formatTime(seconds) {
|
|
var minutes = Math.floor(seconds / 60);
|
|
|
|
var remainingSeconds = seconds % 60;
|
|
|
|
return (
|
|
minutes + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds
|
|
);
|
|
}
|
|
|
|
});
|
|
</script> --}}
|
|
@endsection
|