bbone/application/modules/Auth/views/otp_verification.php

249 lines
9.0 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="<?php echo base_url(); ?>/assets/appimg/default.ico" />
<title>BigBamboo Enterprise</title>
<!-- Bootstrap -->
<link href="<?php echo base_url(); ?>/assets/default/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="<?php echo base_url(); ?>/assets/default/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="<?php echo base_url(); ?>/assets/default/nprogress/nprogress.css" rel="stylesheet">
<!-- Animate.css -->
<link href="<?php echo base_url(); ?>/assets/default/animate.css/animate.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="<?php echo base_url(); ?>/assets/default/build/css/custom.min.css" rel="stylesheet">
<!-- PNotify -->
<link href="<?php echo base_url(); ?>/assets/default/pnotify/dist/pnotify.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>/assets/default/pnotify/dist/pnotify.buttons.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>/assets/default/pnotify/dist/pnotify.nonblock.css" rel="stylesheet">
</head>
<style>
.otp {
text-align: right;
clear: both;
float: right;
}
body {
/* Set the background image URL */
background-image: url("<?php echo base_url(); ?>assets/appimg/bg-4.jpg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-color: rgba(255, 255, 255, 0.7) !important;
}
h1,
a,
p {
color: #fff !important;
}
</style>
<body class="login">
<div class="login_wrapper">
<div class="animate form login_form">
<section class="login_content">
<form id="otp-form" data-parsley-validate class="form-horizontal form-label-left" method="post" action="<?php echo base_url();?>Auth/verify_otp" enctype="multipart/form-data">
<input type="hidden" name="csrf_test_name" value="<?php echo $this->security->get_csrf_hash();?>">
<input type="hidden" id="hidden_otp" name="hidden_otp" class="form-control" value="" />
<input type="hidden" id="id" name="id" value="">
<input type="hidden" id="email1" name="email" value="">
<h1>Forgot Password</h1>
<div>
<div>
<input type="email" id="email" name="user_name" class="form-control" placeholder="Email" required="required" pattern="[^\s@]+@[^\s@]+\.[^\s@]+" />
<p id="span_msg"></p>
</div>
</div>
<div>
<input type="text" id="otp" name="otp" class="form-control" placeholder="OTP" required="required" />
<p id="otp_span_msg"></p>
</div>
<div>
<button type="submit" id="submitButton" class="btn btn-primary">Submit</button>
<button type="button" id="sendotpbtn" class="btn btn-info" onclick="send_otp(); startTimer(30);" class="otp"> Send OTP </button><p id="timer">Time remaining: 90 seconds</p>
</div>
<div class="clearfix"></div>
<div class="separator">
<div class="clearfix"></div>
<br />
<div>
<p><?php echo date('Y'). ' ' . "&copy; ". " ".'BigBamboo Enterprise' ;?></p>
</div>
</div>
</form>
</section>
</div>
</div>
<div class="body"></div>
<!-- PNotify -->
<script src="<?php echo base_url(); ?>/assets/default/pnotify/dist/pnotify.js"></script>
<script src="<?php echo base_url(); ?>/assets/default/pnotify/dist/pnotify.buttons.js"></script>
<script src="<?php echo base_url(); ?>/assets/default/pnotify/dist/pnotify.nonblock.js"></script>
<script>
// $('#otp').hide();
$('#submitButton').hide();
$('#timer').hide();
function send_otp() {
if ($('#email').val()) {
$('#span_msg').html('');
var email = $('#email').val();
$('#timer').show();
$('#sendotpbtn').html('Resend OTP');
$.ajax({
type: "get",
url: "<?php echo base_url();?>Auth/sendMail",
data: {email : email},
json: true,
success: function(response) {
response = jQuery.parseJSON(response)
if (response.status == "failed") {
$('input[name=csrf_test_name]').val(response.csrf_hash);
$('#span_msg').html('invalid username').css('color', 'red');
} else {
// for OTP Send success Lable
new PNotify({
title: 'OTP Send Successfully',
text: 'Check Your Mail',
type: 'success',
styling: 'bootstrap3',
delay: 2000
});
//update the csrf to the form
$('input[name=csrf_test_name]').val(response.csrf_hash);
$('#hidden_otp').val(response.otp);
$('#email1').val(response.email);
$('#id').val(response.id);
$('#submitButton').show();
$('#email').prop('required', false);
$.ajax({
type: "get",
url: "<?php echo base_url();?>Auth/sendOTP",
data: {email : email, otp : response.otp},
json: true,
success: function(response) {
response = jQuery.parseJSON(response)
alert(response);
if (response.status == "failed") {
new PNotify({
title: 'OTP Send Failed',
text: response.result,
type: 'warning',
styling: 'bootstrap3',
delay: 2000
});
} else {
new PNotify({
title: 'OTP Send Sucessfully',
type: 'success',
styling: 'bootstrap3',
delay: 2000
});
}
},
error: function(jqXHR, textStatus, err) {
alert('text status ' + textStatus + ', err ' + err)
}
});
}
},
error: function(jqXHR, textStatus, err) {
alert('text status ' + textStatus + ', err ' + err)
}
});
} else {
$('#span_msg').html('Enter Email').css('color', 'red');
}
}
$('#email').on('keyup', function() {
if (!$('#email').val())
$('#span_msg').html('');
});
$('#otp').on('keyup', function() {
if (!$('#otp').val())
$('#otp_span_msg').html('');
});
$(document).ready(function() {
var id = `<?php echo $id; ?>`;
var val = `<?php echo $id; ?>`;
var email = `<?php echo $email; ?>`;
var status = `<?php echo $status; ?>`;
var csrf_hash = `<?php echo $csrf_hash; ?>`;
if (status === "failed") {
$('#id').val(id);
$('#submitButton').show();
$('#email1').val(email);
$('#email').val(email);
$('#email').prop('required', false);
$('#otp_span_msg').html('Pls enter correct OTP').css('color', 'red');
$('#sendotpbtn').html('Resend OTP');
} else if (response.status === "success") {
$('input[name=csrf_test_name]').val(csrf_hash);
$('#id').val(id);
$('#email1').val(email);
$('#email').val(email);
}
})
let timer;
function startTimer(seconds) {
if ($('#email').val()) {
$('#sendotpbtn').prop('disabled', true);
timer = setInterval(function() {
seconds--;
$('#timer').html('Time remaining: ' + seconds + ' seconds');
if (seconds <= 0) {
clearInterval(timer);
$('#timer').html('Did not Recive the OTP pleace click the Resend OTP Button');
$('#sendotpbtn').prop('disabled', false);
}
}, 1000);
}
}
</script>
</body>
</html>