AJAX Auth
AJAX Auth module enables asynchronous (without refreshing the page) login and logout for ExpressionEngine 2.
AJAX Auth relies on some files provided by Member module, so it will not work on Freelancer license of ExpressionEngine.
Do not forget to include jQuery on all pages that contain ajax login & logout functional.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
Login
{exp:ajaxauth:login}...{exp:ajaxauth:logout}
This tag pair will display AJAX login form. Inside can be placed any fields available for Member login form. Username and password are mandatory, of course.
Variables:
- {error_container} — will create a container that will display error message (if any). Place it whereever you want error messages to appear (it is hidden initially)
- {loader}Please wait...{/loader} — will display 'loading' message when form is submitted. Replace the contents with appropriate image and/or text
Parameters:
- secure="yes" — optional parameter that will make the form send data over secure connection
- name — form name. Defaults to 'ajaxauth_login'
- id — form ID. Defaults to 'ajaxauth_login'
- class — form class. Defaults to 'ajaxauth'
- return — template which will be used to replace the form after successful login. If omited, the form will be replaced with text found in language/english/lang.ajaxauth.php
- post_process — JavaScript function(s) that will be executed after successful login. Separate multiple functions with pipe, ex. post_process="function1|function2|function3"
Logout
{exp:ajaxauth:logout}...{link}Log me out{/link}...{exp:ajaxauth:logout}
This tag pair will display the block with AJAX logout link.
Variables:
- {link}Log out{/link} — contains the actual clickable text/image that will be used as logout link. Mandatory.
- {loader}Please wait...{/loader} — will display 'loading' message when form is submitted. Replace the contents with appropriate image and/or text
Parameters:
- secure="yes" — optional parameter that will send the data over secure connection
- id — container block ID. Defaults to 'ajaxauth_logout'
- class — container block class. Defaults to 'ajaxauth'
- return — template which will be used to replace the container block after successful logout. If omited, the container block will be replaced with text found in language/english/lang.ajaxauth.php
- post_process — JavaScript function(s) that will be executed after successful logout. Separate multiple functions with pipe, ex. post_process="function1|function2|function3"
CSS guide
Following CSS classes and IDs are available:
- .ajaxauth — login form/outer container of logout block
- #ajaxauth_login (or ID defined by id parameter of login tag) — login form
- #ajaxauth_logout (or ID defined by id parameter of logout tag) — outer container of logout block
- .ajaxauth_loader — block that displays 'loading' message during login/logout
- #ajaxauth_login_loader — block that displays 'loading' message during login
- #ajaxauth_logout_loader — block that displays 'loading' message during logout
- #ajaxauth_login_error_container — block that will display login error messages. NOTE: login error message will be formatted like this: <ul><li>message</li></ul>
- #ajaxauth_logout_link — <a> tag that will contain clickable logout text/image
Example
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
{if logged_out}
{exp:ajaxauth:login name="login_form" class="login_form" id="login_form" return="_includes/log-in-out"}
{error_container}
{loader}Loading...{/loader}
<p><label>Username</label><br />
<input type="text" name="username" value="" maxlength="32" class="input" size="25" /></p>
<p><label>Password</label><br />
<input type="password" name="password" value="" maxlength="32" class="input" size="25" /></p>
{if auto_login}
<p><input class='checkbox' type='checkbox' name='auto_login' value='1' /> Auto-login on future visits</p>
{/if}
<p><input class='checkbox' type='checkbox' name='anon' value='1' checked='checked' /> Show my name in the online users list</p>
<p><input type="submit" name="submit" value="Submit" /></p>
<p><a href="{path='member/forgot_password'}">Forgot your password?</a></p>
{/exp:ajaxauth:login}
{/if}
{if logged_in}
{exp:ajaxauth:logout class="logout_form" id="logout_form" return="_includes/log-in-out" post_process="al"}
{loader}Loading...{/loader}
{link}Log me out!{/link}
{/exp:ajaxauth:logout}
<script type="text/javascript">
function al(){
alert('You are logged out!');
}
</script>
{/if}