Create forgot password page with ajax in Codeigniter
 |
| Forgot Password |
Paste in view file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AdminLTE 3 | Forgot Password</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="<?php echo base_url().'assets/new-template/'; ?>plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="<?php echo base_url().'assets/new-template/'; ?>plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="<?php echo base_url().'assets/new-template/'; ?>dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<style>
.red_error {
color: red;
display: block;
width: 100% !important;
font-size: 19px;
}
.success_error {
color: green;
display: block;
width: 100% !important;
font-size: 19px;
}
.loader {
border: 5px solid #cacaca;
border-radius: 50%;
border-top: 5px solid #141B78;
border-bottom: 5px solid #141B78;
width: 25px;
height: 25px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.preloader_box {
position: absolute;
width: 100%;
background: #a2a2a280;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999999;
justify-content: center;
text-align: center;
align-items: center;
display:none;
}
.loader {
border: 7px solid #717171;
border-radius: 50%;
border-top: 7px solid #141B78;
border-bottom: 7px solid #141B78;
width: 40px;
height: 40px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="<?php echo base_url(); ?>"><b>Skill</b>Stadium</a>
</div>
<!-- /.login-logo -->
<div class="card">
<div class="preloader_box"><div class="loader"></div></div>
<div class="card-body login-card-body">
<p class="login-box-msg">You forgot your password? Here you can easily retrieve a new password.</p>
<form id="forget_password" action="" method="post">
<div class="input-group mb-3">
<input type="email" class="form-control" name="email" placeholder="Email" required>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
<div class="email_error red_error"></div>
<div class="success"></div>
</div>
<div class="row">
<div class="col-12">
<button type="submit" class="btn btn-primary btn-block">Request new password</button>
</div>
<!-- /.col -->
</div>
</form>
<p class="mt-3 mb-1">
<a href="<?php echo base_url().'login'; ?>">Login</a>
</p>
<p class="mb-0">
<a href="<?php echo base_url().'register'; ?>" class="text-center">Register a new membership</a>
</p>
</div>
<!-- /.login-card-body -->
</div>
</div>
<!-- /.login-box -->
<!-- jQuery -->
<script src="<?php echo base_url().'assets/new-template/'; ?>plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<?php echo base_url().'assets/new-template/'; ?>plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="<?php echo base_url().'assets/new-template/'; ?>dist/js/adminlte.min.js"></script>
<script>
jQuery(document).ready(function($){
$("#forget_password").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
$('.preloader_box').css('display','flex');
var form = $('#forget_password').serialize();
$.ajax({
type: "POST",
url: '<?php echo base_url();?>userlogin/forget_password_mail',
data: form, // serializes the form's elements.
dataType: "JSON",
success: function(data)
{
// var result = $.parseJSON(data);
console.log(data);
if(data['email_error'] != ''){
$('.email_error').html(data['email_error']);
}
else{
$('.email_error').html('');
}
if(data['success'] != '' && data['status'] == 1){
$('#forget_password').html('<div class="input-group mb-3"><input type="text" class="form-control opt" name="opt" placeholder="Enter Otp"><div class="input-group-append"><div class="input-group-text"><span class="fas fa-envelope"></span></div></div><div class="otp_error red_error"></div></div><div class="row"><div class="col-12"><button type="submit" name="otp_bt" class="btn btn-primary btn-block otp_bt">Continue</button></div></div>');
$('.success').html(data['success']);
$('.email_error').html('');
}
else{
$('.success').html('');
}
$('.preloader_box').css('display','none');
}
});
});
$(document).on('click','.otp_bt',function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
$('.preloader_box').css('display','flex');
var form = $('#forget_password').serialize();
$.ajax({
type: "POST",
url: '<?php echo base_url();?>userlogin/otp_verification',
data: form, // serializes the form's elements.
dataType: "JSON",
success: function(data)
{
// var result = $.parseJSON(data);
console.log(data);
if(data['otp_error'] != ''){
$('.otp_error').html(data['otp_error']);
}
else{
$('.otp_error').html('');
}
if(data['status'] != '' && data['status'] == 1){
$('#forget_password').html('<div class="input-group mb-3"><input type="text" class="form-control pass" name="pass" placeholder="Enter Password"><div class="input-group-append"><div class="input-group-text"><span class="fas fa-envelope"></span></div></div></div><div class="input-group mb-3"><input type="text" class="form-control confirm_pass" name="confirm_pass" placeholder="Enter Confirm Password"><div class="input-group-append"><div class="input-group-text"><span class="fas fa-envelope"></span></div></div><div class="password_error red_error"></div></div><div class="row"><div class="col-12"><button type="submit" name="sub_password" class="btn btn-primary btn-block sub_password">Submit</button></div></div>');
$('.success').html(data['success']);
$('.otp_error').html('');
}
$('.preloader_box').css('display','none');
}
});
});
$(document).on('click','.sub_password',function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
$('.preloader_box').css('display','flex');
var form = $('#forget_password').serialize();
$.ajax({
type: "POST",
url: '<?php echo base_url();?>userlogin/change_otp_password',
data: form, // serializes the form's elements.
dataType: "JSON",
success: function(data)
{
// var result = $.parseJSON(data);
console.log(data);
if(data['password_error'] != ''){
$('.password_error').html(data['password_error']);
}
else{
$('.password_error').html('');
}
if(data['status'] != '' && data['status'] == 1){
swal("Success", "Well done, Your password has been changed successfully.", "success")
$('#forget_password').html('<div class="success_error">Your password has been changed successfully.</div>');
//$('.success').html(data['success']);
$('.password_error').html('');
}
$('.preloader_box').css('display','none');
}
});
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</body>
</html>
Controller in view file
/*=================================Forget Password=========================================*/
public function send_mail($to_email,$message) {
$from_email = "skillstadium@gmail.com";
// $to_email = $this->input->post('email');
//Load email library
$this->load->library('email');
$this->email->from($from_email, 'SkillStadium');
$this->email->to($to_email);
$this->email->set_mailtype("html");
$this->email->subject('SkillStadium');
$this->email->message($message);
//Send mail
if($this->email->send()){
// $this->session->set_flashdata("email_sent","Congragulation Email Send Successfully.");
return true;
}
else{
// $this->session->set_flashdata("email_sent","You have encountered an error");
// $this->load->view('contact_email_form');
return false;
}
}
public function forget_password($page = 'forget-password'){
$data['title'] = ucfirst($page);
$this->load->view('users/forget-password');
}
public function random_number(){
$ran_num = rand(9999,99999);
return $ran_num;
}
//forget password functions start
public function forget_password_mail(){
$email = $this->input->post('email');
$this->load->library('form_validation');
$this->form_validation->set_error_delimiters('<div class="red_error">', '</div>');
$this->form_validation->set_rules('email', 'Email', 'required|trim|xss_clean|callback_email_exists');
$error_array = array();
if ($this->form_validation->run() == FALSE) {
$error_array['email_error'] = form_error('email');
}
else {
$result = $this->User_Model->get_email_data($email);
$per_id = $result[0]->id;
$random_number = $this->random_number();
$this->load->helper('cookie');
$set_cookies = setcookie("optcode", $random_number, time() + (60 * 5)); //5min
$set_user_id_cookies = setcookie("per_id", $per_id, time() + (60 * 5)); //5min
if($set_cookies && $set_user_id_cookies){
$message = $random_number.' OTP is valid for 5 min... ';
$mail = $this->send_mail($email,$message);
if($mail){
$error_array['success'] = 'Check E-mail for OTP';
$error_array['status'] = 1;
}
}
}
echo json_encode($error_array);
}
//forget password functions start
public function otp_verification(){
$otp = $this->input->post('opt');
$this->load->library('form_validation');
$error_array = array();
if ($_COOKIE['optcode'] != $otp) {
$error_array['otp_error'] = 'Invalid Otp';
}
else{
$error_array['status'] = 1;
}
echo json_encode($error_array);
}
public function change_otp_password(){
$pass = $this->input->post('pass');
$confirm_pass = $this->input->post('confirm_pass');
$encrypt_password = md5($pass);
$user_id = $_COOKIE['per_id'];
$error_array = array();
if(empty($pass)){
$error_array['password_error'] = 'Password field is required';
}
elseif(empty($confirm_pass)){
$error_array['password_error'] = 'Confirm Password field is required';
}
elseif($pass != $confirm_pass) {
$error_array['password_error'] = 'Confirm Password is not matched';
}
else {
$data = array(
'password' => $encrypt_password
);
$this->User_Model->update_user($data,$user_id);
$error_array['status'] = 1;
}
echo json_encode($error_array);
}
// Check Email exists
public function email_exists($email){
$this->form_validation->set_message('email_exists', 'This email is not exits.');
if ($this->User_Model->check_email_exists($email)) {
return false;
}
else{
return true;
}
}
Paste in Model file....
// Check email exists
public function check_email_exists($email){
$query = $this->db->get_where('users', array('email' => $email));
if(empty($query->row_array())){
return true;
}else{
return false;
}
}
public function update_user($data,$user_id){
$this->db->where('id', $user_id);
return $this->db->update('users', $data);
}
public function get_email_data($email){
$this->db->select("*");
$this->db->from('users');
$this->db->where('email', $email);
$query = $this->db->get();
return $query->result();
}
No comments:
Post a Comment