CodeIgniter TankAuth ajax forms

Question

I am using the lastest version of CodeIgniter and TankAuth and all functions work properly such as login, logout, email and register. Currently when a user needs to login, you are redirected to a separate page, which is, /auth/login.

What I am experimenting with is loading the login page in a modal(using fancybox) instead of requiring the user to leave the current page and having to login.

The problem I am running into is how can I alter the standard TankAuth setup to use ajax to submit the form rather than submitting the form and then redirecting the user.

Here is the code from the auth/login controller:

function login()
{
    if ($this->tank_auth->is_logged_in()) {                                 // logged in
        redirect('');

    } elseif ($this->tank_auth->is_logged_in(FALSE)) {                      // logged in, not activated
        redirect('/auth/send_again/');

    } else {
        $data['login_by_username'] = ($this->config->item('login_by_username', 'tank_auth') AND
                $this->config->item('use_username', 'tank_auth'));
        $data['login_by_email'] = $this->config->item('login_by_email', 'tank_auth');

        $this->form_validation->set_rules('login', 'Login', 'trim|required|xss_clean');
        $this->form_validation->set_rules('password', 'Password', 'trim|required|xss_clean');
        $this->form_validation->set_rules('remember', 'Remember me', 'integer');

        // Get login for counting attempts to login
        if ($this->config->item('login_count_attempts', 'tank_auth') AND
                ($login = $this->input->post('login'))) {
            $login = $this->security->xss_clean($login);
        } else {
            $login = '';
        }

        $data['use_recaptcha'] = $this->config->item('use_recaptcha', 'tank_auth');
        if ($this->tank_auth->is_max_login_attempts_exceeded($login)) {
            if ($data['use_recaptcha'])
                $this->form_validation->set_rules('recaptcha_response_field', 'Confirmation Code', 'trim|xss_clean|required|callback__check_recaptcha');
            else
                $this->form_validation->set_rules('captcha', 'Confirmation Code', 'trim|xss_clean|required|callback__check_captcha');
        }
        $data['errors'] = array();

        if ($this->form_validation->run()) {                                // validation ok
            if ($this->tank_auth->login(
                    $this->form_validation->set_value('login'),
                    $this->form_validation->set_value('password'),
                    $this->form_validation->set_value('remember'),
                    $data['login_by_username'],
                    $data['login_by_email'])) { // success

                redirect('');

            } else {
                $errors = $this->tank_auth->get_error_message();
                if (isset($errors['banned'])) {                             // banned user
                    $this->_show_message($this->lang->line('auth_message_banned').' '.$errors['banned']);

                } elseif (isset($errors['not_activated'])) {                // not activated user
                    redirect('/auth/send_again/');

                } else {                                                    // fail
                    foreach ($errors as $k => $v)   $data['errors'][$k] = $this->lang->line($v);
                }
            }
        }
        $data['show_captcha'] = FALSE;
        if ($this->tank_auth->is_max_login_attempts_exceeded($login)) {
            $data['show_captcha'] = TRUE;
            if ($data['use_recaptcha']) {
                $data['recaptcha_html'] = $this->_create_recaptcha();
            } else {
                $data['captcha_html'] = $this->_create_captcha();
            }
        }
        $this->load->view('auth/login_form', $data);
    }
}

The code in the view is using php to open and submit the form as such:

<?php
     $login = array(
    'name'  => 'login',
    'id'    => 'login',
    'value' => set_value('login'),
    'maxlength' => 80,
    'size'  => 30,
);
if ($login_by_username AND $login_by_email) {
  $login_label = 'Email or login';
      } else if ($login_by_username) {
    $login_label = 'Login';
    } else {
    $login_label = 'Email';
    }
    $password = array(
    'name'  => 'password',
    'id'    => 'password',
    'size'  => 30,
    );
    $remember = array(
    'name'  => 'remember',
    'id'    => 'remember',
    'value' => 1,
    'checked'   => set_value('remember'),
    'style' => 'margin:0;padding:0',
    );
    $captcha = array(
    'name'  => 'captcha',
    'id'    => 'captcha',
    'maxlength' => 8,
    );
?>
<?php echo form_open($this->uri->uri_string()); ?>
<?php echo form_submit('submit', 'Let me in'); ?>
<?php echo form_close(); ?>

Would it be as simple as using a $.ajax request and setting the url to the /auth/login controller? If that's the case then I assume i would also need to add a return ajax data of (true / false) to the auth/login controller.

Any help would be greatly appreciated.

Answer 1

Ok well I'm totally sure how the codeIgniter works but I will run you through the process of it so you can try and apply it.

Then to send the form you will have to target when the form is submitted. Say this is your form

<form id="target" action="destination.html"> 
   <input type="text" value="Hello there" /> 
   <input type="submit" value="Go" /> 
</form>

$('#target').submit(function() { 
    alert('Handler for .submit() called.'); 
    return false; 
}); 

This code will be run when you press the submit button. Caution: make sure return false; to stop the page refreshing.

Inside the submit function you will need to send the POST variables off to the php file that login processes.

$.post('doLogin.php', function(data) { 
    $('.result').html(data); 
});

So it should end up something like this

$('#target').submit(function() { 
        $.post('doLogin.php', function(data) { 
          $('.result').html(data); 
        }); 
   return false; 
});

Please take a look at the jQuery API to better learn the jQuery functions.

get function to get the form

see when the form is submitted

jQuery post

That should help you get going