Files
cheerstothe_season_2.0/resources/views/Admin/pages/auth/otp.blade.php
sayliraut ba47755b74 changes
2024-05-28 12:10:59 +05:30

92 lines
3.5 KiB
PHP

@extends('Admin.layouts.app_login')
@section('title', 'Cheers To Season - Otp')
@section('content')
<div class="row w-100" style="height: 100vh;">
<div class=" col-md-6 m-auto h-100 d-flex flex-column align-itms-center justify-content-center"
style="background-color: #05244D;">
<div class="d-flex justify-content-center">
<img src="{{ asset('public/assets/img/seasons_logo.png')}}" width="150" height="150" alt="">
</div>
</div>
<div class=" col-md-6 h-100 d-flex justify-content-center align-items-center login-background-img"
style="background-image: url(public/assets/img/login_screen_background.png);">
<div class="row d-flex flex-column justify-content-center align-items-center m-auto"
style="width: 60%; z-index: 999;">
<h4 class="text-start font-weight-bold text-white">VERIFICATION CODE</h4>
<h5 class="text-white mb-3">Please enter the OTP</h5>
<form id="otpVerificationForm">
<div class="col-sm-12 bgWhite">
<input type="hidden" name="time" value="{{ session('admin_data.valid_till') }}">
<input type="hidden" id="admin_otp_id" name="id" value="{{ session('admin_data.principal_xid') }}">
<input class="otp" type="text" name="digit1" maxlength="1">
<input class="otp" type="text" name="digit2" maxlength="1">
<input class="otp" type="text" name="digit3" maxlength="1">
<input class="otp" type="text" name="digit4" maxlength="1">
</div>
<div class="col-md-12">
<div>
<button type="submit" id="otp_verify_button" class="download-btn w-100">Submit</a></button>
</div>
</div>
</form>
</div>
</div>
</div>
@endsection
@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script>
$(document).on('click', '#otp_verify_button', function(e) {
e.preventDefault();
// Get base URL
let base_url = url_path;
// Get admin ID
var id = $('#admin_otp_id').val();
// Get OTP by concatenating values of all OTP input fields
var otp = $('.otp').map(function() {
return this.value;
}).get().join('');
// Send AJAX request for OTP verification
$.ajax({
url: base_url + '/otp_verify',
type: 'POST',
data: {
id: id,
otp: otp,
'_token': $('meta[name="csrf-token"]').attr('content')
},
success: function (response) {
if (response.status_code == 200) {
// Display success message
toastr.success('Otp Verify Successfully');
// Redirect to the dashboard after a delay
setTimeout(function () {
window.location.href = base_url + "/password_reset";
}, 1000);
} else if (response.status == 401) {
toastr.error(response.message);
} else {
toastr.error(response.message);
}
},
});
});
$(document).on('input', '.otp', function() {
this.value = this.value.replace(/[^0-9]/g, '');
if (this.value.length >= this.maxLength) {
$(this).next('.otp').focus();
}
});
</script>
@endsection