Skip to main content

How to create forgot password page with ajax in Codeigniter?

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();
}

Comments

Post a Comment

Popular posts from this blog

How to check date format in PHP?

Check date format in PHP function isCorrectDateFromat($date){     if(!empty($date)){         $dateString = $date; // Replace this with your date string         $format = "Y-m-d"; // Replace this with your expected date format         $dateTime = DateTime::createFromFormat($format, $dateString);         if ($dateTime === false) { /*             echo "The date is not in the correct format."; */         } else {             $errors = DateTime::getLastErrors();             if (empty($errors)) { /*                 echo "The date is in the correct format."; */                 return true;             } else { /*                 echo "...
Post a Comment
Read more