From bbed49dbd3ac3143aae205b131e04c62dd7c72ca Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Wed, 10 Oct 2012 14:23:36 -0400
Subject: [PATCH] styled log in and sign up errors; fixed expand/collapse
 transition bug

---
 cms/static/sass/_courseware.scss |  1 +
 cms/static/sass/_graphics.scss   |  1 +
 cms/static/sass/_login.scss      | 11 +++++++
 cms/templates/login.html         | 54 +++++++++++++++++---------------
 cms/templates/signup.html        |  2 +-
 5 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss
index 9cf69eca96..4251f25f90 100644
--- a/cms/static/sass/_courseware.scss
+++ b/cms/static/sass/_courseware.scss
@@ -65,6 +65,7 @@ input.courseware-unit-search-input {
 		.expand-collapse-icon {
 			float: left;
 			margin: 16px 6px 16px 16px;
+			@include transition(none);
 		}
 
 		.drag-handle {
diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/_graphics.scss
index 83f8816b47..25ca880598 100644
--- a/cms/static/sass/_graphics.scss
+++ b/cms/static/sass/_graphics.scss
@@ -5,6 +5,7 @@
 	height: 11px;
 	margin-right: 10px;
 	background: url(../img/expand-collapse-icons.png) no-repeat;
+	@include transition(none);
 
 	&.expand {
 		top: 1px;
diff --git a/cms/static/sass/_login.scss b/cms/static/sass/_login.scss
index c155efe7d3..0bccaea0f0 100644
--- a/cms/static/sass/_login.scss
+++ b/cms/static/sass/_login.scss
@@ -77,4 +77,15 @@
 		text-align: right;
 		font-size: 13px;
 	}
+
+	#login_error,
+	#register_error {
+		display: none;
+		margin-bottom: 30px;
+		padding: 5px 10px;
+		border-radius: 3px;
+		background: $error-red;
+		font-size: 14px;
+		color: #fff;
+	}
 }
\ No newline at end of file
diff --git a/cms/templates/login.html b/cms/templates/login.html
index 7d225678dc..2821dc2fe5 100644
--- a/cms/templates/login.html
+++ b/cms/templates/login.html
@@ -30,36 +30,40 @@
 
 <script type="text/javascript">
 (function() {
-   function getCookie(name) {
-     return $.cookie(name);
-   }
-   function postJSON(url, data, callback) {
-     $.ajax({type:'POST',
-       url: url,
-       dataType: 'json',
-       data: data,
-       success: callback,
-       headers : {'X-CSRFToken':getCookie('csrftoken')}
-     });
-   }
+  function getCookie(name) {
+    return $.cookie(name);
+  }
+  function postJSON(url, data, callback) {
+    $.ajax({type:'POST',
+      url: url,
+      dataType: 'json',
+      data: data,
+      success: callback,
+      headers : {'X-CSRFToken':getCookie('csrftoken')}
+    });
+  }
 
-   $('form#login_form').submit(function(e) {
-     e.preventDefault();
-     var submit_data = $('#login_form').serialize();
+  $('form#login_form').submit(function(e) {
+    e.preventDefault();
+    var submit_data = $('#login_form').serialize();
 
-     postJSON('/login_post',
-       submit_data,
-       function(json) {
-       if(json.success) {
-        location.href="${reverse('index')}";
+    postJSON('/login_post',
+      submit_data,
+      function(json) {
+        if(json.success) {
+          console.log('success');
+          location.href = "${reverse('index')}";
         } else if($('#login_error').length == 0) {
-        $('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>');
+          console.log('error 1');
+          $('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>');
+          $('#login_error').slideDown(150);
         } else {
-        $('#login_error').stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
+          console.log('error 2');
+          $('#login_error').stop().slideDown(150);
         }
-        }
-        );
-     });
+      }
+    );
+  });
 })(this)
 </script>
       
diff --git a/cms/templates/signup.html b/cms/templates/signup.html
index 77a5df7856..864db25956 100644
--- a/cms/templates/signup.html
+++ b/cms/templates/signup.html
@@ -81,7 +81,7 @@
           if(json.success) {
             $('#register').html(json.value);
           } else {
-            $('#register_error').html(json.value).stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
+            $('#register_error').html(json.value).stop().slideDown(150);
           }
         }
       );