AJAX Login

Developer

Laisvunas

3rd Party (Commercial)


EE Version Support

  • ExpressionEngine 1.x
  • ExpressionEngine 2

Compatibility

If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.

  • Updater
  • Multi Site Manager
  • Stand Alone Entry Form
  • Low Variables
  • Content Elements
  • Better Workflow
  • Matrix
  • Grid
  • Webservice
  • Publisher

Requirements

  • jQuery for the Control Panel

Add-On Type(s)

Plugin

Tags

Enables to login and logout using AJAX, i.e. without refreshing of the page. Supports SSL, i.e. using it you can create secure login forms (See USAGE WITH SSL). This add-on has been designed to be fully compatible with AJAX Babble, AJAX Form Validator and AJAX Captcha.

THE TAG {exp:ajax_login}

This tag has following parameters:

1) form_id - required. Allows you to specify HTML id attribute of the login form.

2) login_button_id - required. Allows you to specify HTML id attribute
of the submit button of the login form.

3) logout_button_id - required. Allows you to specify HTML id attribute
of the logout link.

4) login_process_indicator_id - optional. Allows you to specify HTML id attribute of the element which will act as the indicator of the login form submission being processed.

5) login_process_indicator_class - optional. Allows you to specify HTML class attribute of the element which will act as the indicator of the login form submission being processed.

6) logout_process_indicator_id - optional. Allows you to specify HTML id attribute of the element which will act as the indicator of the logout being processed.

7) logout_process_indicator_class - optional. Allows you to specify HTML class attribute of the element which will act as the indicator of the logout being processed.

8) error_message_container_id - optional. Allows you to specify HTML id attribute of the element inside which error messages will be be displayed.

9) error_message_container_class - optional. Allows you to specify HTML class attribute of the element inside which error messages will be be displayed.

10) success_message_container_id - optional. Allows you to specify HTML id attribute of the element inside which success messages will be be displayed.

11) success_message_container_class - optional.  Allows you to specify HTML class attribute of the element inside which success messages will be be displayed.

12) display_on_login - optional. Allows you to specify HTML id attribute of the element which needs to be displayed after successful login. This parameter supports pipe operator, i.e. you can specify HTML id attributes of several elements.

13) hide_on_login - optional. Allows you to specify HTML id attribute of the element which needs to be hidden after successful login. This parameter supports pipe operator, i.e. you can specify HTML id attributes of several elements.

14) display_on_logout - optional. Allows you to specify HTML id attribute of the element which needs to be displayed after successful logout. This parameter supports pipe operator, i.e. you can specify HTML id attributes of several elements.

15) hide_on_logout - optional. Allows you to specify HTML id attribute of the element which needs to be hidden after successful logout. This parameter supports pipe operator, i.e. you can specify HTML id attributes of several elements.

16) style_on_login_temporarily - optional. Allows you to specify HTML id attribute of the element which needs to be styled temporarily after successful login. This parameter supports pipe operator, i.e. you can specify HTML id attributes of several elements.

17) style_on_login_temporarily_class - optional. Allows you to specify HTML class attribute of the element which needs to be styled temporarily after successful login.

18) style_on_login_temporarily_msec - optional. Allows you to specify time in miliseconds how long elements should be styled temporarily after login. Default value is 5000.

19) style_on_logout_temporarily - optional. Allows you to specify HTML id attribute of the element which needs to be styled temporarily after successful logout. This parameter supports pipe operator, i.e. you can specify HTML id attributes of several elements.

20) style_on_logout_temporarily_class - optional. Allows you to specify HTML class attribute of the element which needs to be styled temporarily after successful logout.

21) style_on_logout_temporarily_msec - optional. Allows you to specify time in miliseconds how long elements should be styled temporarily after logout. Default value is 5000.

22) style_on_login - optional. Allows you to specify HTML id attribute of the element which to which certain class name will be attached after successful login. This parameter supports pipe operator, i.e. you can specify HTML id attributes of several elements.

23) unstyle_on_login - optional. Allows you to specify HTML id attribute of the element from which certain class name will be removed after successful login. This parameter supports pipe operator, i.e. you can specify HTML id attributes of several elements.

24) style_on_logout - optional. Allows you to specify HTML id attribute of the element which to which certain class name will be attached after successful logout. This parameter supports pipe operator, i.e. you can specify HTML id attributes of several elements.

25) unstyle_on_logout - optional. Allows you to specify HTML id attribute of the element from which certain class name will be removed after successful logout. This parameter supports pipe operator, i.e. you can specify HTML id attributes of several elements.

26) style_on_login_class - optional. Allows you to specify HTML class attribute which will be attached after successful login to those elements which are specified in the value of “style_on_login” attribute.

27) unstyle_on_login_class - optional. Allows you to specify HTML class attribute which will be removed after successful login from those elements which are specified in the value of “unstyle_on_login” attribute.

28) style_on_logout_class - optional. Allows you to specify HTML class attribute which will be attached after successful logout to those elements which are specified in the value of “style_on_logout” attribute.

29) unstyle_on_logout_class - optional. Allows you to specify HTML class attribute which will be removed after successful logout from those elements which are specified in the value of “unstyle_on_logout” attribute.

30) username_id - optional. Allows you to specify HTML id attribute of the element inside which username of the logged in member will be displayed. This parameter supports pipe operator, i.e. you can specify HTML id attributes of several elements. If you need to display logged in member’s screen_name instead of username, use together with this parameter the parameter “screen_name_template_url”.

31) screen_name_template_url - optional. Used when you need to display logged in member’s screen_name. The value of this parameter should be full URL of the ExpressionEngine template which has as its content single {screen_name} tag.

32) add_callback_login - optional. Allows you to specify name of javascript function which will be executed after successful login. This parameter supports pipe operator, i.e. you can specify several names of javascript functions.

33) add_callback_logout - optional. Allows you to specify name of javascript function which will be executed after successful logout. This parameter supports pipe operator, i.e. you can specify several names of javascript functions.

34) add_callback_login_args - optional. Allows you to specify argument of javascript function which will be executed after successful login. This parameter supports pipe operator, i.e. you can specify arguments of several javascript functions. The order of arguments should follow the order of functions in “add_callback_login” parameter. If some functions should have arguments and other functions don’t, specify “null” or “0” (without quotation marks) as arguments for te latter.

35) add_callback_logout_args - optional. Allows you to specify argument of javascript function which will be executed after successful logout. This parameter supports pipe operator, i.e. you can specify arguments of several javascript functions. The order of arguments should follow the order of functions in “add_callback_logout” parameter. If some functions should have arguments and other functions don’t, specify “null” or “0” (without quotation marks) as arguments for te latter.


ASSUMPTIONS

The code of this plugin assumes that user message template (you can find it by going Control Panel Home >  Admin >  Specialty Templates >  User Message Template) in cases of successful login and successful logout outputs HTML page having <title> element containing text “Login” and in case of some error outputs HTML page having <title> element containing text “Error”. Also this plugin assumes that user message template outputs error message which is contained inside <li> tag and success message which is contained inside <p> tag.

USAGE

Add the tag {exp:ajax_login} in the template containing the code of login form:


<html>

<head>

<title>AJAX Login simple demo</title>

<style>
div.process_indicator {
border: solid 1px green;
background-image: url(http://www.mysite.com/images/ajax-loader.gif);
background-repeat: no-repeat;
background-position: center;
height: 7em;
width: 20em;
text-align: center;
display: block!important;
}

.hidden {
display: none;
width: 20em;
}

div.login_error {
color: red;
display: block!important;
}

div.login_success {
color: green;
background: yellow;
display: block!important;
}
</style>

</head>
<body>

<h1>AJAX Login simple demo</h1>

<p>
AJAX Login plugin enables to login and logout using AJAX, i.e. without refreshing of the page.
</p>

<script>
 function hiUser()
    {
        alert('Hi!');
    }
</script>

<div id="hello_user" {if logged_out}data-style="display: none"{/if}>
<h2>Hello <span id="username_el">{if logged_in}{username}{/if}</span></h2>
</div>

<div id="hello_guest" {if logged_in}data-style="display: none"{/if}>
<h2>Hello Guest</h2>
</div>

<div id="login_error_indicator" class="hidden">
</div>

<div id="login_success_indicator" class="hidden">
</div>

<div id="login_progress_indicator" class="hidden">
Logging in…
</div>

<div id="logout_progress_indicator" class="hidden">
Logging out…
</div>

<div id="form_div" {if logged_in}data-style="display: none"{/if}>

{exp:member:login_form id="login_form"}

<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 id="login_button" type="submit" name="submit" value="Submit" /></p>

{/exp:member:login_form}

{exp:ajax_login form_id="login_form" login_button_id="login_button" logout_button_id="logout_link" login_process_indicator_id="login_progress_indicator" login_process_indicator_class="process_indicator" logout_process_indicator_id="logout_progress_indicator" logout_process_indicator_class="process_indicator" error_message_container_id="login_error_indicator" error_message_container_class="login_error" success_message_container_id="login_success_indicator" success_message_container_class="login_success" hide_on_login="form_div|hello_guest" display_on_login="hello_user|logout_link" style_on_login_temporarily="login_success_indicator" style_on_login_temporarily_class="login_success" style_on_logout_temporarily="login_success_indicator" style_on_logout_temporarily_class="login_success" hide_on_logout="hello_user|logout_link" display_on_logout="hello_guest|form_div" username_id="username_el" add_callback_login="hiUser" add_callback_login_args="null"}

</div>

<a id="logout_link" {if logged_out}data-style="display: none"{/if} href="{path='LOGOUT'}">Log out</a>


</body>
</html>

USAGE WITH SSL

Using this add-on you can create secure login form. To create it you need to make 2 changes in the code above.

First, you need to force the page to be loaded over SSL. You can achieve this by installing free DM Force SSL plugin
available at http://devot-ee.com/add-ons/dm-force-ssl and adding the tag

{exp:dm_force_ssl:force}

on top of the template.

Second, you need to change the URL scheme of the login form from “http” to “https”. You can achieve this by installing free
Find and Replace Plus plugin available at http://devot-ee.com/add-ons/find-and-replace-plus and wrapping the tag exp:member:login_form
with

{exp:replace_plus find='action="http:' replace='action="https:'}
{exp:member:login_form id="login_form"}

Login form code

{/exp:member:login_form}
{/exp:replace_plus}

That’s it! You now have secure login form.

AJAX Login Links

This entry was created November 29, 2010, 1:12 pm.
This entry was last updated December 21, 2013, 2:04 pm.

Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!

Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.

1 Review:

interface 09.28.11

interface
Rating - {addon_rating_average}

Great add-on. Makes a huge difference for the login/logout process of member sites. Prompt support as well. Highly recommended!