Lightbox for Register and Password

same here... would definately like some information on this subject asap...

hello, no news on that subject?
It would be great to have it working!

Lightbox registration / login can be accomplished my modifying fancy_login

enjoy ;) tested and have live working copy ... all is well

tested with
drupal 7.12
fancy login 7.x-1.0-beta2

call the lightbox registration as follows : (note this can be done with any lnk by adding "&_trigger_register=1")
<a href="?q=node&_trigger_register=1">Register</a>

replace fancy_login.module with this following code:

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<?php
// $Id: fancy_login.module,v 1.16 2011/01/25 08:41:24 hakulicious Exp $

/**
 * Implementation of hook_init()
 * Loads the javascript on all pages except user/* when the user is not logged in
 */
function fancy_login_init()
{
	if(user_is_anonymous())
	{
		$path = drupal_get_path('module', 'fancy_login');
		$login_path = drupal_get_path_alias('user/login');
		$fl_settings = array
		(
			'screenFadeColor' => variable_get('screen_fade_color', 'white'),
			'screenFadeZIndex' => variable_get('screen_fade_z_index', '10'),
			'loginBoxHeight' => variable_get('login_box_height', 'auto'),
			'loginBoxWidth' => variable_get('login_box_width', '175px'),
			'loginBoxBackgroundColor' => variable_get('login_box_background_color', 'white'),
			'loginBoxTextColor' => variable_get('login_box_text_color', 'black'),
			'loginBoxBorderColor' => variable_get('login_box_border_color', 'black'),
			'loginBoxBorderWidth' => variable_get('login_box_border_width', '3px'),
			'loginBoxBorderStyle' => variable_get('login_box_border_style', 'solid'),
			'loginPath' => $login_path,
			'dimFadeSpeed' => (int) variable_get('fancy_login_dim_fade_speed', 500),
			'boxFadeSpeed' => (int) variable_get('fancy_login_box_fade_speed', 1000),
			'hideObjects' => variable_get('fancy_login_hide_objects', 0),
		);
		if(variable_get('fancy_login_no_redirect', 0))
		{
			$fl_settings['destination'] = (variable_get('clean_url', 0)) ? '?' : '&';
			$fl_settings['destination'] .= 'destination=' . $_GET['q'];
		}
		if(variable_get('fancy_login_https', FALSE))
		{
			global $base_root;
			$fl_settings['httpsRoot'] = preg_replace('/http:\/\//', 'https://', $base_root);
		}
		$fl_settings['requestDestination'] = (variable_get('clean_url', 0)) ? '?' : '&';
		$fl_settings['requestDestination'] .= 'destination=' . $_GET['q'];
		drupal_add_js(array('fancyLogin' => $fl_settings), 'setting');
		drupal_add_js($path . '/scripts/fancy_login.js');
		drupal_add_css($path . '/css/fancy_login.css');
	}
}

/**
 * Implementation of hook_menu()
 */
function fancy_login_menu()
{
	$menu['admin/config/people/fancy_login'] = array
	(
		'title' => 'Fancy Login',
		'description' => 'Settings for Fancy Login Page',
		'page callback' => 'drupal_get_form',
		'page arguments' => array('fancy_login_settings'),
		'access arguments' => array('Administer fancy login'),
		'file' => 'fancy_login.pages.inc',
	);
	return $menu;
}

/**
 * Implmentation of hook_permission()
 */
function fancy_login_permission()
{
	return array
	(
		'Administer fancy login' => array
		(
			'title' => t('Administer fancy login'),
			'description' => t('Allows users to change the settings for the Fancy Login module'),
		)
	);
}

/**
 * Implementation of hook_page_alter()
 */
function fancy_login_page_alter(&$page)
{
//~ if(!empty($_POST)){
//~ print_r($_POST);
//~ die('here');
//~ }else{
//~ echo 'empty';
//~ }

    if (user_is_anonymous())
	{
	

		global $base_url;
		$path = drupal_get_path('module', 'fancy_login');
		$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.'))));
		}
		if(!module_exists('noreqnewpass') || !variable_get('noreqnewpass_disabled', FALSE))
		{
			$items[] = l(t('Request new password'), 'user/password', array('attributes' => array('title' => t('Request new password via e-mail.'))));
		}
		$links = array
		(
			'#theme' => 'item_list',
			'#items' => $items,
		);
		
		
		
		
		$other_login_fields='<div id="login_form_triggered_by_user_cont"></div>';
		$links = (count($items)) ? drupal_render($links) : '';
		$image_path = $base_url . '/' . $path . '/images/ajax-loader.gif';
		$markup = '<div id="fancy_login_dim_screen"></div>' .
			'<div id="fancy_login_login_box">' .
			'<div id="fancy_login_form_contents">' .
			'<a href="#" id="fancy_login_close_button">X</a>' .
			drupal_render(drupal_get_form('user_login')).$links .
			'</div>' .
			'<div id="fancy_login_ajax_loader"><img src="' . $image_path . '" alt="' . t('Loading') . '" /></div>' .
			'</div>';
			
			$markup .= '<div id="fancy_login_register_box">' .
			'<div id="fancy_login_form_contents">' .
			'<a href="#" id="fancy_login_close_button">X</a>' .
			drupal_render(drupal_get_form('user_register_form')).
			'</div>' .
			'<div id="fancy_login_ajax_loader"><img src="' . $image_path . '" alt="' . t('Loading') . '" /></div>' .
			'</div>';
			
			

		$page['page_bottom']['fancy_login'] = array
		(
			'#markup' => $markup,
		);
	}else{
	//print_r($page);
	}
}



/**
 * Implementation of hook_block_info()
 */
function fancy_login_block_info()
{
	$blocks['fancy_login_login_block'] = array
	(
		'info' => t('Fancy Login Link'),
		'cache' => DRUPAL_NO_CACHE,
		'visibility' => 0,
		'pages' => array('user/login'),
	);
	return $blocks;
}

/**
 * Implementation of hook_block_view()
 */
function fancy_login_block_view($delta = '')
{
	if($delta == 'fancy_login_login_block' && user_is_anonymous() && !(arg(0) == 'user' && !is_numeric(arg(1))))
	{
		$block['subject'] = t('Login');
		$block['content'] = l(t('Login'), 'user/login');
		return $block;
	}
}

/**
 * Implementation of hook_theme()
 */
function fancy_login_theme()
{
	$path = drupal_get_path('module', 'fancy_login');
	return array
	(
		'ssl_icon' => array
		(
			'arguments' => array
			(
				'base_url' => NULL,
			),
			'path' => $path . '/templates',
			'template' => 'ssl-icon',
		),
	);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

replace fancy_login.js with this following code:

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// $Id: fancy_login.js,v 1.19 2011/01/26 15:31:23 hakulicious Exp $
(function($)
{

			//~ $(".lightboxRegister").click(function()
				//~ {
					//~ alert('here');
					//~ //showRegister();
				//~ });
			
	function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.href);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}
	//~ var getvars=window.location.search.substr(1).split('&');
	var _trigger_login = getParameterByName("_trigger_login");
	var _trigger_register = getParameterByName("_trigger_register");

	var popupVisible = false;
	var ctrlPressed = false;


	function hideRegister()
	{
		var settings = Drupal.settings.fancyLogin;
		if(popupVisible) {
			popupVisible = false;
			$("#fancy_login_register_box").fadeOut(settings.boxFadeSpeed, function()
			{
				$(this).css({"position" : "static", "height" : "auto", "width" : "auto",  "background-color" : "transparent", "border" : "none" });
				$("#fancy_login_dim_screen").fadeOut(settings.dimFadeSpeed, function()
				{
					if(settings.hideObjects) {
						$("object, embed").css("visibility", "visible");
					}
				});
				$(window).focus();
			});
		}
	}
	
	function showRegister()
	{
		var settings = Drupal.settings.fancyLogin;
		var loginBox = $("#fancy_login_register_box");
		if(!popupVisible) {
			popupVisible = true;
			if(settings.hideObjects) {
				$("object, embed").css("visibility", "hidden");
			}
			$("#fancy_login_dim_screen").css({"position" : "fixed", "top" : "0", "left" : "0", "height" : "100%", "width" : "100%", "display" : "block", "background-color" : settings.screenFadeColor, "z-index" : settings.screenFadeZIndex, "opacity" : "0"}).fadeTo(settings.dimFadeSpeed, 0.8, function()
			{
				loginBox.css({"position" : "fixed", "width" : settings.loginBoxWidth, "height" : settings.loginBoxHeight});
				var wHeight = window.innerHeight ? window.innerHeight : $(window).height();
				var wWidth = $(window).width();
				var eHeight = loginBox.height();
				var eWidth = loginBox.width();
				var eTop = (wHeight - eHeight) / 2;
				var eLeft = (wWidth - eWidth) / 2;
				if($("#fancy_login_close_button").css("display") === "none") {
					$("#fancy_login_close_button").css("display", "inline");
				}
				loginBox.css({"top" : eTop, "left" : eLeft, "color" : settings.loginBoxTextColor, "background-color" : settings.loginBoxBackgroundColor, "border-style" : settings.loginBoxBorderStyle, "border-color" : settings.loginBoxBorderColor, "border-width" : settings.loginBoxBorderWidth, "z-index" : (settings.screenFadeZIndex + 1), "display" : "none", "padding-left" : "15px", "padding-right" : "15px"})
				.fadeIn(settings.boxFadeSpeed);
				loginBox.find(".form-text:first").focus().select();
				setRegisterCloseListener();
			});
		}
	}
	
	

function setRegisterCloseListener()
	{
		$("#fancy_login_dim_screen, #fancy_login_close_button").click(function()
		{	
			hideRegister();
			return false;
		});


		$(document).keyup(function(event)
		{
		    if(event.keyCode === 27) {
			hideRegister();
		    
		    }
		});
	}


	function showLogin()
	{
		var settings = Drupal.settings.fancyLogin;
		var loginBox = $("#fancy_login_login_box");
		if(!popupVisible) {
			popupVisible = true;
			if(settings.hideObjects) {
				$("object, embed").css("visibility", "hidden");
			}
			$("#fancy_login_dim_screen").css({"position" : "fixed", "top" : "0", "left" : "0", "height" : "100%", "width" : "100%", "display" : "block", "background-color" : settings.screenFadeColor, "z-index" : settings.screenFadeZIndex, "opacity" : "0"}).fadeTo(settings.dimFadeSpeed, 0.8, function()
			{
				loginBox.css({"position" : "fixed", "width" : settings.loginBoxWidth, "height" : settings.loginBoxHeight});
				var wHeight = window.innerHeight ? window.innerHeight : $(window).height();
				var wWidth = $(window).width();
				var eHeight = loginBox.height();
				var eWidth = loginBox.width();
				var eTop = (wHeight - eHeight) / 2;
				var eLeft = (wWidth - eWidth) / 2;
				if($("#fancy_login_close_button").css("display") === "none") {
					$("#fancy_login_close_button").css("display", "inline");
				}
				loginBox.css({"top" : eTop, "left" : eLeft, "color" : settings.loginBoxTextColor, "background-color" : settings.loginBoxBackgroundColor, "border-style" : settings.loginBoxBorderStyle, "border-color" : settings.loginBoxBorderColor, "border-width" : settings.loginBoxBorderWidth, "z-index" : (settings.screenFadeZIndex + 1), "display" : "none", "padding-left" : "15px", "padding-right" : "15px"})
				.fadeIn(settings.boxFadeSpeed);
				loginBox.find(".form-text:first").focus().select();
				setCloseListener();
			});
		}
	}

	function setCloseListener()
	{
		$("#fancy_login_dim_screen, #fancy_login_close_button").click(function()
		{	
			
			hideLogin();
			return false;
		});
		$("#fancy_login_login_box form").submit(function()
		{
			submitted();
		});
		$("#fancy_login_login_box a:not('#fancy_login_close_button')").click(function()
		{
			submitted();
		});
		$(document).keyup(function(event)
		{
		    if(event.keyCode === 27) {
			
		        hideLogin();
		    }
		});
	}

	function hideLogin()
	{
		var settings = Drupal.settings.fancyLogin;
		if(popupVisible) {
			popupVisible = false;
			$("#fancy_login_login_box").fadeOut(settings.boxFadeSpeed, function()
			{
				$(this).css({"position" : "static", "height" : "auto", "width" : "auto",  "background-color" : "transparent", "border" : "none" });
				$("#fancy_login_dim_screen").fadeOut(settings.dimFadeSpeed, function()
				{
					if(settings.hideObjects) {
						$("object, embed").css("visibility", "visible");
					}
				});
				$(window).focus();
			});
		}
	}

	function submitted(requestPassword)
	{
		var formContents = $("#fancy_login_form_contents");
		var ajaxLoader = $("#fancy_login_ajax_loader");
		var wHeight = formContents.height();
		var wWidth = formContents.width();
		ajaxLoader.css({"height" : wHeight, "width" : wWidth});
		formContents.fadeOut(300, function()
		{
			ajaxLoader.fadeIn(300);
			var img = ajaxLoader.children("img:first");
			var imgHeight = img.height();
			var imgWidth = img.width();
			var eMarginTop = (wHeight - imgHeight) / 2;
			var eMarginLeft = (wWidth - imgWidth) / 2;
			img.css({"margin-left" : eMarginLeft, "margin-top" : eMarginTop});
			if(requestPassword) {
				getRequestPassword();
			}
		});
	}

	function getRequestPassword()
	{
		var settings = Drupal.settings;
		var passwordPath = settings.fancyLogin.loginPath.replace(/login/, "password");
		$.ajax(
		{
			url:settings.basePath + passwordPath,
			dataFilter:function(data)
			{
				return $(data).find("#user-pass");
			},
			success:function(data)
			{
				var formContents = $("#fancy_login_form_contents");
				formContents.children("form").css("display", "none");
				var itemList = formContents.find(".item-list");
				itemList.before(data);
				$("#fancy_login_ajax_loader").fadeOut(300, function()
				{
					toggle = $("<li><a id=\"toggle_link\" href=\"#\">" + Drupal.t("Login") + "</a></li>");
					toggle.click(function()
					{
						toggleForm();
					});
					itemList.children("ul").append(toggle);
					$("#user-pass").attr("action", $("#user-pass").attr("action") + settings.fancyLogin.requestDestination);
					formContents.fadeIn(300);
				});
			}
		});
	}

	function toggleForm()
	{
		currentForm = ($("#fancy_login_form_contents #user-login").css("display") === "none") ? "#user-pass" : "#user-login";
		targetForm = (currentForm === "#user-login") ? "#user-pass" : "#user-login";
		linkText = (currentForm === "#user-login") ? Drupal.t("Login") : Drupal.t("Request new password");
		$(currentForm).fadeOut(300, function()
		{
			$(targetForm).fadeIn(300);
		});
		$("#fancy_login_form_contents .item-list").fadeOut(300, function()
		{
			$("#toggle_link").text(linkText);
			$("#fancy_login_form_contents .item-list").fadeIn(300);
		});
	}

	Drupal.behaviors.fancyLogin = 
	{
		attach:function()
		{
			var settings = Drupal.settings.fancyLogin;
			if(!$.browser.msie || $.browser.version > 6 || window.XMLHttpRequest) {
				$("a[href*='" + settings.loginPath + "']").each(function()
				{
					if(settings.destination) {
						var targetHREF = $(this).attr("href");
						if(targetHREF.search(/destination=/i) === -1) {
							targetHREF += settings.destination;
							$(this).attr("href", targetHREF);
						}
					}
					$(this).click(function()
					{
						var action = $(this).attr("href");
						if(settings.httpsRoot) {
							action = settings.httpsRoot + action;
						}
						$("#fancy_login_login_box form").attr("action", action);
						showLogin();
						return false;
					});
				});
				$(document).keyup(function(e)
				{
					if(e.keyCode === 17) {
						ctrlPressed = false;
					}
				});
				$(document).keydown(function(e)
				{
					if(e.keyCode === 17) {
						ctrlPressed = true;
					}
					if(ctrlPressed === true && e.keyCode === 190) {
						ctrlPressed = false;
						if(popupVisible) {
							hideLogin();
						} else {
							showLogin();
						}
					}
				});
				$("#fancy_login_login_box a[href*='" + settings.loginPath.replace(/login/, "password") + "']").click(function()
				{
					$(this).parent().fadeOut(200);
					submitted(true);
					return false;
				});
			}
			
			
			if(_trigger_register){
				showRegister();
			}
			
			if(_trigger_login){
	//~ alert(_trigger_login);
	showLogin();
	//~ toggleForm();
}else{
//~ alert(_trigger_login);	
}
			
			
		}
	};
}(jQuery));


//////////////////////////////////////////////////////////////////////////////////////////////////////////////

add the following to fancy_login.css:

div#fancy_login_register_box
{
	display:none;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}

.password-strength {
margin-right: 90px !important;
float: none !important;
}

div.form-item div.password-suggestions {
width: auto;
}

.confirm-parent, .password-parent {
width: 165px !important;
}

.form-item {
margin-bottom: 0 !important;
}

div.password-confirm {
margin-top: 0 !important;
}

Could I suggest that perhaps this is submitted as a patch to the module, for future version integration (assuming the owner would like to include the registration functionality (which I think is great!)).

Obviously, copy and pasting a whole new content over the module's files is impossibly unmaintainable... :(

Gadness, patch is always the only good way.

This is something I'll be adding after I've got a full release for 7.x-2.0.

Really appreciate your getting this attended. Our users love the popup interface as opposed to the core page. I am glad to see you will be making the user's experience consistent across each site that uses this module. Let me know if our group here at ADI can help with testing or other development tasks.

Version 7.x-3.0-beta1: I've ajaxified the 'Create new account' and 'Request new password' links in the modal, so that they load these forms into the Fancy Login block rather than redirecting the user to the page.

Please test and give feedback (though I may be a little slow in getting to the feedback, as I'm quite busy right now).

Actually, please open new tickets if there are any issues with version 7.x-3.0 of the module. Thank you.

Thanks for this module!

However, it would still be great to have the fancy login (lightbox) working on direct registration url and not just through the login form. Use case:

We have disabled "create user account" on the login form for a number of reasons - hence, user registration is not possible to do through fancy login. Still, we want visitors to be able to register - but only via links placed on a few pages on the site.

Solution:

When a user clicks link ('/user/register') the fancy login lightbox pops up with the registration form instead of the core drupal form.

Possible?

Best,
Thomas

It's not currently possible. There are two reasons for this really:

1) The login form is loaded upon login, and hidden using CSS. When the popup is popped up, the login box is shown, rather than loaded. The register form on the other hand is not loaded upon page load, and is only loaded when the 'create account' link is clicked.

2) The plugin is really the 'fancy login' plugin, not 'fancy register' :)

It's something I can maybe consider for a future version, though I'll have to re-think the logic behind the module if I am going to do so.