Make login form JS unobtrusive. Needs work.

3 files changed, 28 insertions, 26 deletions

diff --git a/modules/user/views/login.html.php b/modules/user/views/login.html.php
index 2039dc49..ae558dfa 100644
--- a/modules/user/views/login.html.php
+++ b/modules/user/views/login.html.php
@@ -7,7 +7,6 @@
       <?= _("Logout") ?></a></li>
   <? else: ?>
     <li id="gLoginFormContainer"></li>
-    <li id="gLoginLink"><a href="javascript:show_login('<?= url::site("login") ?>')">Login</a></li>
-    <li class="gClose gHide"><a href="javascript:close_login()">X</a></li>
+    <li id="gLoginLink"><a href="<?= url::site("login") ?>">Login</a></li>
   <? endif; ?>
 </ul>
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index a3ccedfc..276c7211 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -543,14 +543,12 @@ table.gMetadata td.toggle {
  * 8) Forms
  ******************************************************************/
 
-form {
-}
-
 fieldset {
   border: 1px solid #ccc;
 }
 
 legend {
+  font-weight: bold;
   margin-left: 1em;
 }
 
@@ -615,7 +613,7 @@ button {
 /* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 form li {
-  margin-top: .5em;
+  margin: 0 !important;
   padding: .3em 1.5em .3em 1em;
 }
 
@@ -702,10 +700,6 @@ li.gError select {
   border: none;
 }
 
-#gHeader #gLoginForm li {
-  margin-top: 0;
-}
-
 #gHeader #gLoginForm legend {
   display: none;
 }
@@ -737,7 +731,6 @@ li.gError select {
   margin-top: 1em;
 }
 
-
 #gSearchForm label {
   display: none;
 }
diff --git a/themes/default/js/user.js b/themes/default/js/user.js
index 06d43d15..6c66e35c 100644
--- a/themes/default/js/user.js
+++ b/themes/default/js/user.js
@@ -1,11 +1,29 @@
-function show_login(url) {
-  $("#gLoginLink").hide();
-  $(".gClose").show();
-  $.get(url, function(data) {
-    $("#gLoginFormContainer").html(data);
-    ajaxify_login_form();
+/**
+ * @todo preventDefault() not working in IE 6 and 7
+ * @todo Close link should be reusable 
+ */
+var closeLink = '<li><a href="#">X</a></li>';
+
+$("document").ready(function() {
+  $("#gLoginLink").click(function(event){
+    event.preventDefault();
+    var url = $("#gLoginLink a").attr("href");
+    $.get(url, function(data) {
+	  $('#gLoginLink').hide();
+	  $("#gLoginMenu").append(closeLink);
+	  $("#gLoginMenu li:last").addClass("gClose").show();	  
+	  $("#gLoginMenu .gClose a").click(function(){
+	    $("#gLoginForm").remove();
+	    $("#gLoginMenu .gClose").remove();
+	    $("#gLoginLink").show();
+	    $("input#gUsername").val("");
+	    $("input#gPassword").val("");  
+	  });
+      $("#gLoginFormContainer").html(data);
+      ajaxify_login_form();
+    });
   });
-}
+});
 
 function ajaxify_login_form() {
   $("form#gLoginForm").ajaxForm({
@@ -19,11 +37,3 @@ function ajaxify_login_form() {
     },
   });
 }
-
-function close_login() {
-  $("#gLoginForm").remove();
-  $(".gClose").hide();
-  $("#gLoginLink").show();
-  $("input#gUsername").val("");
-  $("input#gPassword").val("");
-}