Updated private network (previously walled garden) login/register/lost password to be independent of any theme running, and improved interface.

git-svn-id: http://code.elgg.org/elgg/trunk@6323 36083f99-b078-4883-b0ff-0f9b5a30f544

4 files changed, 273 insertions, 111 deletions

diff --git a/views/default/account/forms/login_walled_garden.php b/views/default/account/forms/login_walled_garden.php
index c889beff7..c7531efbd 100644
--- a/views/default/account/forms/login_walled_garden.php
+++ b/views/default/account/forms/login_walled_garden.php
@@ -24,9 +24,6 @@ if ((isset($CONFIG->https_login)) && ($CONFIG->https_login)) {
 	$login_url = str_replace("http", "https", $vars['url']);
 }
 ?>
-<style type="text/css">
-	body {background:white !important; text-align: center !important;}
-</style>
 <h2><?php echo elgg_echo('login'); ?></h2>
 <?php
 	echo elgg_view('input/form', array('body' => $form_body, 'action' => "{$login_url}action/login"));
@@ -42,54 +39,67 @@ if ($CONFIG->allow_registration) {
 	));
 
 	echo <<<__HTML
-<div id="registration_form" class="registration_form margin_top hidden">
+<div id="registration_form" class="hidden clearfloat">
+<div id="hiddenform_body" class="clearfloat">
 	<h2>$title</h2>
 	$body
-</div>
+</div><div id="hiddenform_bottom"></div></div>
 __HTML;
 }
 ?>
-
-<div id="lostpassword_form" class="lostpassword_form margin_top hidden">
 	<?php
 	$lostpassword_form_body = "<p>" . elgg_echo('user:password:text') . "</p>";
 	$lostpassword_form_body .= "<p class='margin_none'><label>". elgg_echo('username') . " "
 		. elgg_view('input/text', array('internalname' => 'username', 'class' => 'login_textarea lostusername')) . "</label></p>";
 	$lostpassword_form_body .= elgg_view('input/captcha');
-	$lostpassword_form_body .= "<p>" . elgg_view('input/submit', array('value' => elgg_echo('request'))) . "</p>";
+	$lostpassword_form_body .= "<p>" . elgg_view('input/submit', array('value' => elgg_echo('request'))) . "<input class='action_button disabled cancel_request' type='reset' value='Cancel'></p>";
 	
 	?>
-	<h2><?php echo elgg_echo('user:password:lost'); ?></h2>
-	<?php
-		echo elgg_view('input/form', array(
-			'action' => "{$vars['url']}action/user/requestnewpassword",
-			'body' => $lostpassword_form_body,
-			'class' => "margin_top"
-		));
-	?>
-</div>
+<div id="lostpassword_form" class="hidden clearfloat">
+	<div id="hiddenform_body" class="clearfloat">
+		<h2><?php echo elgg_echo('user:password:lost'); ?></h2>
+		<?php
+			echo elgg_view('input/form', array(
+				'action' => "{$vars['url']}action/user/requestnewpassword",
+				'body' => $lostpassword_form_body
+			));
+		?>
+</div><div id="hiddenform_bottom"></div></div>
 
 <script type="text/javascript"> 
 $(document).ready(function() { 	
 	$('input.username').focus();
 	
+	// add cancel button to inline register form
+	$('#registration_form').find('input.submit_button').after("<input class='action_button disabled cancel_request' type='reset' value='Cancel'>");
+	
+	function elgg_slide_hiddenform(activateLink, parentElement, toggleElement) {
+		$(activateLink).closest(parentElement).find(toggleElement).animate({"width": "563px"}, { duration: 400 });
+		$(activateLink).closest(parentElement).animate({"height": "256px"}, { duration: 400 });
+		return false;
+	}
+
 	$('a.registration_link').click(function(e) {
 		e.preventDefault();
-		if ($('#lostpassword_form').is(':visible')) {
-			elgg_slide_toggle($('a.forgotten_password_link'), '.walledgardenlogin', '.lostpassword_form');
-		}
-		
-		elgg_slide_toggle(this, '.walledgardenlogin', '.registration_form');
+		elgg_slide_hiddenform(this, '.walledgardenlogin', '#registration_form');
+		$('input.name').focus();	
 	});
 	
 	$('a.forgotten_password_link').click(function(e) {
 		e.preventDefault();
-		if ($('#registration_form').is(':visible')) {
-			elgg_slide_toggle($('a.registration_link'), '.walledgardenlogin', '.registration_form');
-		}
-		
-		elgg_slide_toggle(this, '.walledgardenlogin', '.lostpassword_form');
+		elgg_slide_hiddenform(this, '.walledgardenlogin', '#lostpassword_form');
 		$('input.lostusername').focus();
 	});
+	
+	$('input.cancel_request').click(function() {
+		if ($('#lostpassword_form').is(':visible')) {
+			$('#lostpassword_form').fadeOut(400);
+			location.reload();
+		} else if ($('#registration_form').is(':visible')) {
+			$('#registration_form').fadeOut(400);
+			location.reload();
+		}
+		return false;
+	});
 });
 </script>
diff --git a/views/default/account/forms/register.php b/views/default/account/forms/register.php
index 819646bd5..fb9136ad8 100644
--- a/views/default/account/forms/register.php
+++ b/views/default/account/forms/register.php
@@ -19,7 +19,7 @@ if ($loggedin_user && $loggedin_user->isAdmin() && isset($vars['show_admin'])) {
 	$admin_option = true;
 }
 
-$form_body  = "<p><label>" . elgg_echo('name') . "<br />" . elgg_view('input/text' , array('internalname' => 'name', 'class' => "input_text", 'value' => $name)) . "</label></p>";
+$form_body  = "<p><label>" . elgg_echo('name') . "<br />" . elgg_view('input/text' , array('internalname' => 'name', 'class' => "input_text name", 'value' => $name)) . "</label></p>";
 $form_body .= "<p><label>" . elgg_echo('email') . "<br />" . elgg_view('input/text' , array('internalname' => 'email', 'class' => "input_text", 'value' => $email)) . "</label></p>";
 $form_body .= "<p><label>" . elgg_echo('username') . "<br />" . elgg_view('input/text' , array('internalname' => 'username', 'class' => "input_text", 'value' => $username)) . "</label></p>";
 $form_body .= "<p><label>" . elgg_echo('password') . "<br />" . elgg_view('input/password' , array('internalname' => 'password', 'class' => "input_password")) . "</label></p>";
diff --git a/views/default/css.php b/views/default/css.php
index 43afbb1ea..ef0f84d0f 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -1537,85 +1537,3 @@ p.elgg_likes_owner {
 }
 
 
-/* ***************************************
-	WalledGarden
-*************************************** */
-#walledgarden_container {
-	margin:100px auto 0 auto;
-	position:relative;
-	padding:0;
-	width:563px;
-	background: url(<?php echo $vars['url']; ?>_graphics/walled_garden_background_extend.gif) repeat-y left top;
-	text-align: left;
-}
-#walledgarden {
-	position: relative;
-	padding:0;
-	width:563px;
-	min-height:230px;
-	background: url(<?php echo $vars['url']; ?>_graphics/walled_garden_background_top.gif) no-repeat left top;
-}
-#walledgarden_bottom {
-	margin:0 auto;
-	background: url(<?php echo $vars['url']; ?>_graphics/walled_garden_background_bottom.gif) no-repeat left bottom;
-	width:563px;
-	height:54px;
-	position: relative;
-}
-.walledgardenintro {
-	float:left;
-	min-height:200px;
-	width:223px;
-	padding:15px;
-	margin:19px 0 0 23px;
-}
-.walledgardenlogin {
-	float:left;
-	min-height:200px;
-	width:223px;
-	padding:15px 15px 0 15px;
-	margin:19px 0 0 11px;
-}
-.walledgardenintro h1 {
-	color:#666666;
-	margin-top:80px;
-	line-height: 1.1em;
-}
-.walledgardenlogin h2 {
-	color:#666666;
-	border-bottom:1px solid #CCCCCC;
-	margin-bottom:5px;
-	padding-bottom:5px;
-}
-.walledgardenlogin form input.login_textarea {
-	margin:0 0 10px 0;
-	width:210px;
-}
-.walledgardenlogin form label {
-	color:#666666;
-}
-.walledgardenlogin .remember_me label {
-	font-size:1em;
-	font-weight:normal;
-}
-.walledgardenlogin .remember_me {
-	display:block;
-	float:right;
-	margin-left:0;
-	margin-top:-34px;
-	text-align:right;
-	width:100%;
-}
-.walledgardenlogin .lost_password {
-	margin-bottom: 10px;
-}
-.walledgardenlogin a.forgotten_password_link,
-.walledgardenlogin a.registration_link {
-	color:#999999;
-}
-#walledgarden_sysmessages #elgg_system_message {
-	width: 523px;
-	right:0;
-	margin:10px auto 0 auto;
-	position: relative;
-}
\ No newline at end of file
diff --git a/views/default/page_shells/walled_garden.php b/views/default/page_shells/walled_garden.php
index fc44472e9..c14001755 100644
--- a/views/default/page_shells/walled_garden.php
+++ b/views/default/page_shells/walled_garden.php
@@ -16,10 +16,244 @@ if (empty($vars['title'])) {
 }
 
 echo elgg_view('page_elements/html_begin', $vars);
+// @todo - move the css below into it's own style-sheet 
+// that is called when running as a private network
+?>
+<style type="text/css">
+body {background: white;}
+/* ***************************************
+	WalledGarden
+*************************************** */
+#walledgarden_container {
+	margin:100px auto 0 auto;
+	position:relative;
+	padding:0;
+	width:563px;
+	background: url(<?php echo $vars['url']; ?>_graphics/walled_garden_background_extend.gif) repeat-y left top;
+	text-align: left;
+}
+#walledgarden {
+	position: relative;
+	padding:0;
+	width:563px;
+	min-height:230px;
+	background: url(<?php echo $vars['url']; ?>_graphics/walled_garden_background_top.gif) no-repeat left top;
+}
+#walledgarden_bottom {
+	margin:0 auto;
+	background: url(<?php echo $vars['url']; ?>_graphics/walled_garden_background_bottom.gif) no-repeat left bottom;
+	width:563px;
+	height:54px;
+	/* position: relative; */
+}
+.walledgardenintro {
+	float:left;
+	min-height:200px;
+	width:223px;
+	padding:15px;
+	margin:19px 0 0 23px;
+}
+.walledgardenlogin {
+	float:left;
+	min-height:200px;
+	width:223px;
+	padding:15px 15px 0 15px;
+	margin:19px 0 0 11px;
+}
+.walledgardenintro h1 {
+	color:#666666;
+	margin-top:80px;
+	line-height: 1.1em;
+}
+.walledgardenlogin h2 {
+	color:#666666;
+	border-bottom:1px solid #CCCCCC;
+	margin-bottom:5px;
+	padding-bottom:5px;
+}
+.walledgardenlogin form input.login_textarea {
+	margin:0 0 10px 0;
+	width:210px;
+}
+.walledgardenlogin form label {
+	color:#666666;
+}
+.walledgardenlogin .remember_me label {
+	font-size:1em;
+	font-weight:normal;
+}
+.walledgardenlogin .remember_me {
+	display:block;
+	float:right;
+	margin-left:0;
+	margin-top:-34px;
+	text-align:right;
+	width:100%;
+}
+.walledgardenlogin .lost_password {
+	margin-bottom: 10px;
+	color:#999999;
+}
+.walledgardenlogin a.forgotten_password_link,
+.walledgardenlogin a.registration_link {
+	color:#999999;
+}
+
+/* override default form styles (for when a theme is running) */
+.walledgardenlogin input {
+	font: 120% Arial, Helvetica, sans-serif;
+	padding: 5px;
+	border: 1px solid #cccccc;
+	color:#666666;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+}
+.walledgardenlogin textarea {
+	font: 120% Arial, Helvetica, sans-serif;
+	border: solid 1px #cccccc;
+	padding: 5px;
+	color:#666666;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+}
+.walledgardenlogin textarea:focus,
+.walledgardenlogin input[type="text"]:focus {
+	border: solid 1px #4690d6;
+	background: #e4ecf5;
+	color:#333333;
+}
+.walledgardenlogin .input_password {
+	width:200px;
+}
+.walledgardenlogin input.input_password:focus {
+	border: solid 1px #4690d6;
+	background-color: #e4ecf5;
+	color:#333333;
+}
+.walledgardenlogin .submit_button {
+	font-size: 14px;
+	font-weight: bold;
+	color: white;
+	text-shadow:1px 1px 0px black;
+	text-decoration:none;
+	border: 1px solid #4690d6;
+	background-color:#4690d6;
+	background-image: url(<?php echo $vars['url']; ?>_graphics/button_graduation.png);
+	background-repeat: repeat-x;
+	background-position: left 10px;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	width: auto;
+	padding: 2px 4px;
+	margin:0 10px 10px 0;
+	cursor: pointer;
+	-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
+	-moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
+}
+.walledgardenlogin .submit_button:hover {
+	color: white;
+	border-color: #0054a7;
+	text-decoration:none;
+	background-color:#0054a7;
+	background-image:  url(<?php echo $vars['url']; ?>_graphics/button_graduation.png);
+	background-repeat:  repeat-x;
+	background-position:  left 10px;
+}
+.walledgardenlogin input.action_button {
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	background-color:#cccccc;
+	background-image:  url(<?php echo $vars['url']; ?>_graphics/button_background.gif);
+	background-repeat:  repeat-x;
+	background-position: 0 0;
+	border:1px solid #999999;
+	color:#333333;
+	padding:2px 15px 2px 15px;
+	text-align:center;
+	font-weight:bold;
+	text-decoration:none;
+	text-shadow:0 1px 0 white;
+	cursor:pointer;
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+}
+.walledgardenlogin input.action_button:hover,
+.walledgardenlogin input.action_button:focus {
+	background-position:0 -15px;
+	background-image:  url(<?php echo $vars['url']; ?>_graphics/button_background.gif);
+	background-repeat:  repeat-x;
+	color:#111111;
+	text-decoration: none;
+	background-color:#cccccc;
+	border:1px solid #999999;
+}
+.walledgardenlogin .action_button.disabled  {
+	color:#999999;
+	padding:2px 7px;
+}
 
+/* override some elgg system message styles */
+#walledgarden_sysmessages {
+	position: absolute;
+	width:100%;
+	text-align: center;
+	margin:0 auto;
+	top:0;
+	z-index:9600;
+}
+#walledgarden_sysmessages #elgg_system_message {
+	width: 515px;
+	max-width: 515px;
+	right:auto;
+	margin:30px auto 0 auto;
+	position: relative;
+}
+
+
+#lostpassword_form,
+#registration_form {
+	right:0;
+	position:absolute;
+	top:0;
+	width:260px;
+	background-color: white;
+	padding:0;
+	background: url(<?php echo $vars['url']; ?>_graphics/walled_garden_backgroundfull_top.gif) no-repeat left top;
+	height:auto;
+}
+#hiddenform_body {
+	padding:30px 40px 0 40px;
+	height:auto;
+}
+#hiddenform_bottom {
+	margin:0 auto;
+	background: url(<?php echo $vars['url']; ?>_graphics/walled_garden_backgroundfull_bottom.gif) no-repeat left bottom;
+	width:563px;
+	height:54px;
+	position: relative;
+}
+
+#hiddenform_body .cancel_request {
+	margin-left:15px;
+}
+
+/* override some visual_captcha styles */
+.walledgardenlogin .visual_captcha_choices  {
+	margin:10px 0 0 0;
+	padding:0;
+	height:60px;
+}
+.walledgardenlogin ul.visual_captcha_choices li img {
+	width:50px;
+	height:auto;
+}
+	
+</style>
+
+<?php
 $view = elgg_view('messages/list', array('object' => $vars['sysmessages']));
 
-echo "<div id='walledgarden_sysmessages'>$view</div>";       
+echo "<div id='walledgarden_sysmessages' class='clearfloat'>$view</div>";       
 echo '<div id="walledgarden_container"><div id="walledgarden" class="clearfloat">';
 echo "<div class=\"walledgardenintro clearfloat\"><h1>Welcome to:<br />$title</h1></div>";
 echo "<div class=\"walledgardenlogin clearfloat\">{$vars['body']}</div>";