Ajax Login module for Drupal
One of the design features for the new Developer Exchange site I’m working on was to allow the users to be able to login from anywhere on the site and not be forced to click through a number of pages to return to where they were previously. This would seem a simple enough proposition and easy to achieve with Ajax.
However, amazingly enough, despite the plethora of extension modules for Drupal there was nothing that simply turned the login process into a modal popup and performed the login via Ajax. Indeed, scanning the search results at the Drupal site showed that I was not the only person who was after this functionality and that it was in quite high demand.
Not to worry though! Drupal is amazingly extensible and very easy to work with, so I set about writing my own module to turn the login process into an Ajax modal dialog. Using the excellent jQuery Thickbox plugin and a smattering of Drupal hooks I was able to quickly put together what I needed. The results is the AjaxLogin module, which can be simply dropped into your Drupal installation and enabled via the Admin interface. When a user clicks on the login link, a modal popup is displayed as show in the picture below.
If you are interested in using the module, then you can download it from here until I am able to get a Drupal CVS account and contribute it to the project.
Warning
Using both the standalone Ajax Module and AjaxLogin at the same time will cause an infinite loop in the browser. Disable the login support in the Ajax module.
Filed under Open Source, PHP, Technology | Comments (58)58 Responses to “Ajax Login module for Drupal”
Leave a Reply
Well, I just tried out your module, but it hang/crashed both Firefox and Safari on Mac. It took some minutes for the wheel to stop showing.
Installation and De-installation worked fine, also triggering the thickbox when goint to user/login, but after that nothing moved anymore.
Try to test some more. I am sure it will be a valuable contrib when it works.
Reply
Luckyspin reply on February 3rd, 2009 7:38 pm:
Thanks for the feedback. Ironically enough those are the only browsers I have tested in! Check my screen shot. I’m Mac only and don’t have access to Windows. I haven’t seen any problems like the one you’re reporting. Can you tell me if you have any other modules that might be conflicting with my mine perhaps? If possible, could you try disabling your other modules and let me know if you still see the problem?
Thanks
Todd
Reply
I have the same issue, I’m running Seamonkey @ mac os 10.4. I have also installed logintobbogan module, and ajax module which also after latest update not working correctly anymore (I’m talking about login box function).
Reply
I have also lightbox2 (this one doesn’t work good after update), ajax is fine, but still don’t know which can causing those problems.
Reply
I noticed problem, the trouble is that the login address is too long, it duplicates “ajaxlogin?height=230&width=415&destination=node%2F7″ 100 times.
Reply
Ok it work but Ajax module must be completely disabled (lightbox & logintoboggan are ok).
Reply
Luckyspin reply on February 7th, 2009 1:34 pm:
I guess there must be some sort of infinite loop caused by the alter_form method in both my module and the Ajax module. I shall have to dig in a bit further. Thanks for the info and the debugging. I will add a note to the Install instructions so other people are aware of the problem.
Reply
Just thought I’d mention that Lightbox 2 can convert any login link to a popup lightbox. Just click the checkbox for login support in configuration – http://drupal.org/project/lightbox2
Reply
I’m using this great module, for some time now, and I’m just thinking is this possible to add a loading bar whilst form is sending?
I was also thinking about ajax login module, which would enable logging in completely without page refresh, that would be really amazing thing.
Reply
I added register/forgot password links in form:
<?php
// $Id: ajaxlogin.module 90794M 2009-02-03 06:26:50Z (local) $
/**
* @file
* Author: Todd Papaioannou (lucky@luckyspin.org)
* Ajaxlogin is a simple module that turns the login link into a modal popup that allows
* a user to login via Ajax. It is heavily inspired and influenced by the Thickbox module,
* but in this case only applies the Thickbox behaviour to the user_login form.
*/
/**
* Display our help and module information
* @param path The path indicates which part of the site we’re displaying help for
* @param arg An array that holds the current path as would be returned from arg() function
* @return help Some useful text about this module.
*/
function ajaxlogin_help($path, $arg) {
// This is what we will return
$output = ”;
// What path did we receive?
switch ($path) {
case “admin/help#ajaxlogin” :
$output = ” . t ( “Turns the login link into an Ajax modal dialog” ) . ”;
break;
}
return $output;
} // end of ajaxlogin_help
/**
* Initialize our module by loading all our javascript and styles.
*/
function ajaxlogin_init() {
global $user;
// What is our module path?
$module_path = drupal_get_path(’module’, ‘ajaxlogin’);
// Load Thickbox files, but only if the user is not logged in and this module is enabled.
if (($user->uid == 0) && variable_get(’ajaxlogin_enabled’, 0)) {
drupal_add_css($module_path . “/thickbox/thickbox.css”);
drupal_add_js($module_path . “/ajaxlogin.js”);
drupal_add_js($module_path . “/thickbox/thickbox.js”);
}
} // end of ajaxlogin_init
/**
* This is our implementation of hook_menu().
*/
function ajaxlogin_menu() {
// This is what we will return
$items = array();
// Call our menu form
$items['admin/settings/ajaxlogin'] = array(
‘title’ => ‘Ajax Login’,
‘description’ => ‘Allows the user to configure the Ajax login settings.’,
‘file’ => ‘ajaxlogin.admin.inc’,
‘page callback’ => ‘drupal_get_form’,
‘page arguments’ => array(’ajaxlogin_admin_settings’),
‘access callback’ => ‘user_access’,
‘access arguments’ => array(’administer site configuration’),
‘type’ => MENU_NORMAL_ITEM,
);
$items['user/login/ajaxlogin'] = array(
‘title’ => ‘Login’,
‘page callback’ => ‘ajaxlogin_login’,
‘access callback’ => ‘user_is_anonymous’,
‘type’ => MENU_CALLBACK,
);
return $items;
} // end of ajaxlogin_menu
/**
* This is where we actually call the login form when the users clicks on the login link.
*/
function ajaxlogin_login() {
print drupal_get_form(’user_login’);
exit;
} // end of ajaxlogin_login
/**
* Since we wish the ajax login process to be unobtrusive to the user, we need to
* override the default action for the login form. See hook_form_alter for more details.
*
* @param form The form passed to this function
* @param form_state The state of the form
* @param form_id The id of the form
*/
function ajaxlogin_form_alter(&$form, $form_state, $form_id) {
// Is this actually the form we want?
if ($form_id == ‘user_login’ && arg(0) == ‘user’ && arg(1) == ‘login’ && arg(2) == ‘ajaxlogin’) {
// Change the form action
$form['#action'] = url(’user/login’, array(’query’ => array(’destination’ => $_GET['destination'])));
// Resize the fields
$form['name']['#size'] = 50;
$form['pass']['#size'] = 50;
$items = array();
if (variable_get(’user_register’, 1)) {
$items[] = l(t(’Create new account’), ‘user/register’, array(’attributes’ => array(’title’ => t(’Create a new user account.’))));
}
$items[] = l(t(’Request new password’), ‘user/password’, array(’attributes’ => array(’title’ => t(’Request new password via e-mail.’))));
$form['links'] = array(’#value’ => theme(’item_list’, $items));
}
} // end of ajaxlogin_form_alter
Reply
Luckyspin reply on April 20th, 2009 8:35 am:
Thanks. I have a new version that I’ve put together that I’m hoping to release soon. As soon as I finish the current project I’m working on I should get some time to package it up.
Reply
This is great idea. I will be waiting for your most recent release then. When do you think you’ll be able to release it?
Reply
Luckyspin reply on May 29th, 2009 8:34 am:
Yeah, it’s about time I released a new version! I will try and get a new version out in the week. I just need to do some testing on my latest changes in the latest Drupal version.
Reply
Hi!
I am trying to check out your module but can’t seem to make it work… I enabled it in the modules pages, then i enabled the ajax login in the settings page, after that i log out and navigate to the page user/login but it shows the regular page…
I also disabled the Devel module just in case.
Drupal 6 / firefox / windows XP
I am new to drupal so probably my mistake…
Any idea of what i am doing wrong?
Reply
Luckyspin reply on May 29th, 2009 8:31 am:
You don’t actually navigate to the direct URL. Instead the module transforms the login links so that when you click on them they pop up a dialog. If you have a login link or button on your site home page, try clicking on that.
Reply
When do you think you’ll be able to release the latest version of your login module? I work with a non-profit that could really use it and we would be very grateful if you just zipped up your latest version that I just checked out on the teradata site, which btw has a great ui and works very well. Not sure what hardware you have powering it, but whatever it is, it moves and responds quick.
Reply
Luckyspin reply on May 29th, 2009 8:33 am:
Yeah, it’s about time I released a new version! I will try and get a new version out in the week. I just need to do some testing on my latest changes in the latest Drupal version.
Reply
Leo reply on June 22nd, 2009 8:36 pm:
Wondering if you had a chance to do the tests on the latest version and just release your ajax_login?
Reply
Luckyspin reply on June 24th, 2009 8:09 am:
Not yet unfortunately. I’ve been burning the midnight oil on a project and haven’t had a chance =(
Leo reply on June 26th, 2009 7:12 am:
Ok, please let us know we if can help, we’re more than happy to!
Is this the recently-released Ajax-Login/Register module on Drupal.org? If so, great! If not; you might want to team up with that project’s maintainer, so we can get one easy-to-use, beautiful module together.
Reply
Luckyspin reply on June 8th, 2009 8:36 am:
Actually no it isn’t. When I submitted it to the Drupal repository it got rejected because it integrated thickbox rather than rely on some other module that included thickbox. Looking at Ajax-Register I guess they have relaxed their requirement so I may try again. I haven’t tried Ajax-Register but there does appear to be a bit of an overlap.
Reply
Same problem as Julien. Nothing happends. I had some more info here but after submitting it I got this Captcha and all written info was gone. Nice…
Reply
the popups api module can handle login and registration links via popups as well, might be worth taking a look at.
Reply
Luckyspin reply on July 17th, 2009 8:43 am:
Interesting, I haven’t see that one before. I’ll have to take a look.
Reply
I like your module, but i have problem with it. Seems that it loads everything twice. I posted on your page an issue but nobody responds. Anyway all jquery actions are done twice when your module is in use. When i disabled it everything is ok.
Reply
Luckyspin reply on July 25th, 2009 10:44 am:
Yeah, you’re right, I found a bug in the version that is up here. I think I know how to fix it though. Thanks for the report.
Reply
I think your module will do exactly what I want however when using the ‘Login’ link th lightbox which appears is empty. Clicking the register link works just fine.
Is this a bug or have misconfigured this plugin?
Cheers
Reply
Luckyspin reply on August 20th, 2009 8:25 am:
The plugin is looking for the login page at http://YOURSITE.COM/user/login. If the login page has been moved from there it won’t be able to find it. Could that be the problem?
Reply
I installed the ajax login mondule to drupal 6.x and enabled it. I can’t figure out how to create the link to “pop up” the login form? Please help.
Reply
Luckyspin reply on September 4th, 2009 7:05 pm:
The plugin will look for any link in your theme that matches “http://YOURSITE.COM/user/login” and make it up a popup. Is that where you have your login page?
Reply
I have the same issue.
If I go to “http://YOURSITE.COM/user/login” I only see my old login screen. There must be something missing in your steps that we are not following.
Can you eloborate the steps involved in installing and enabling the login popup?
Reply
Luckyspin reply on September 28th, 2009 8:12 am:
You can not go directly to that URL. The plugin attempts to re-write any links to that url on a page and replace them with the popup behaviour.
Reply
Cool module but dont overlook the Drupal Lightbox2 module does this as standard anyway? Just check the box that says “Login Support” at http://www.YOURSITE.com/admin/settings/lightbox2
Reply
Luckyspin reply on February 10th, 2010 5:12 pm:
Yep. As with many things in Drupal, there are multiple modules to do the same thing
Reply
Serg reply on March 25th, 2010 6:12 am:
How to do this without ajax, without popup
you explained for login that we need to create a link
and for register to work what should we do?
Reply
Serg reply on March 25th, 2010 6:21 am:
How we do for user/register to have the same popup as you told us to make user/login link?
Reply
Luckyspin reply on August 31st, 2010 1:24 pm:
You need to look into the form_alter api.
How can I install your module. Because simple check in admin/build/modules do nothing. May be is there are some modules that should be enabled with yours ?
Reply
There are some similar without ajax, popup. Just a simple register form like like you made?
Reply
It is clear how log in is working.
But for register I need to do the same I mean link ?
Reply
Luckyspin reply on March 27th, 2010 5:48 pm:
In Ajaxlogin.js you’ll see two regexp lines that target any user/login links. You can add new ones to target user/register if you want.
Reply
$(”a[@href*='?q=user/register']“).addClass(’thickbox’).each(function() { this.href = this.href.replace(/user\/register/,”user/register/ajaxregister&height=230&width=415″) });
$(”a[@href*='/user/register']“).addClass(’thickbox’).each(function() { this.href = this.href.replace(/user\/register(%3F|\?)?/,”user/register/ajaxregister?height=230&width=415&”) });
I tried what you have told, but this have made a popup for register link,only.
I think I need to change something in .module file
Btw how you have changed register fields, because are I saw that you add for example
first and last name. I think the name is stored in profile.
Reply
what is the code program to add fields like password, last and first name in register form without to be a popup?
Your site link :
http://developer.teradata.com/user/register
Reply
Luckyspin reply on March 31st, 2010 6:02 pm:
This is a whole subject unto itself! You need to look into the form_alter api. There are multiple examples at the Drupal site.
Reply
Looks like this sends the password over to an http page in plaintext by default. Is there an option to force it to use https? I can’t have my user’s passwords being sent in the clear…
Reply
Luckyspin reply on April 30th, 2010 12:42 pm:
There is no option to force the plugin to do it byitself, this is something you’d have to configure your apache server to do.
Reply
I’m not sure why..but it seems that attempting to login with your module seems to always return me to the main page. Any ideas for a fix?
Reply
Luckyspin reply on April 30th, 2010 12:43 pm:
Hmm. It could be that the regexp isn’t working exactly right on your page perhaps? Check the regexp and also the URL being passed, it should include a reference to the foward_page.
Reply
could you please guide me how to configure it
i install the “AjaxLogin” in sites/all/modules/
and enable the module
i enabled
http://localhost/drupal/admin/settings/ajaxlogin
after that how can i proceed?
please help me
Reply
Luckyspin reply on May 4th, 2010 1:25 pm:
Just follow the instructions in the README file.
Reply
Did you get to add this module into drupal cvs? Any chance of bringing these other two similar implementations into the same fold?
http://drupal.org/project/ajax_register
http://drupal.org/project/fancy_login
best wishes
scotjam
Reply
Luckyspin reply on May 26th, 2010 4:25 pm:
Unfortunately not. It was rejected because I was using the same thickbox.js version as the ThickBox module. A bs reason if you ask me. I didn’t pursue it after that.
Reply
Forgot to add, the Developer Exchange login looks awesome! That’s what I want!
Reply
Luckyspin reply on May 26th, 2010 4:26 pm:
Thanks! That’s all done with css styles mainly. There is a bit of new stuff there but not much. Style away!
Reply
please refer this link:
http://developer.teradata.com/user/register
How can i get this type of functionality.
how to add additional fields in register form
Reply
I installed and activated the plugin according to the steps.
But when I click on login link, i see the normal page not a popup.
This is same issue which was faced by julien. I’m not going to the url directly but I’m clicking the login link.
am I missing anything.
Reply
This looks a piece of functionality we have been looking for. Will try it out and post our findings soon.
Thank you.
Reply