22 April 2021

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

at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

How to create youtube videos slider with play and pause option in wordpress?

Create youtube videos slider with play and pause option in wordpress youtube videos slider Use this shortcode:- [punjab_today] function my_...