Hook up forms for forgot password functionality.

lms/static/js/form.ext.js

+(function($, undefined) {
+  var form_ext;
+  $.form_ext  = form_ext = {
+    ajax: function(options) {
+      return $.ajax(options);
+    },
+    handleRemote: function(element) {
+      var method = element.attr('method');
+      var url = element.attr('action');
+      var data = element.serializeArray();
+      var options = {
+        type: method || 'GET',
+        data: data,
+        success: function(data, status, xhr) {
+          element.trigger("ajax:success", [data, status, xhr]);
+        },
+        complete: function(xhr, status) {
+          element.trigger("ajax:complete", [xhr, status]);
+        },
+        error: function(xhr, status, error) {
+          element.trigger("ajax:error", [xhr, status, error]);
+        }
+      }
+      if(url) { options.url = url; }
+      return form_ext.ajax(options)
+    },
+    CSRFProtection: function(xhr) {
+      var token = $.cookie('csrftoken');
+      if (token) xhr.setRequestHeader('X-CSRFToken', token);
+    },
+  }
+  $.ajaxPrefilter(function(options, originalOptions, xhr){ if ( !options.crossDomain ) { form_ext.CSRFProtection(xhr); }});
+  $(document).delegate('form', 'submit', function(e) {
+    var form = $(this),
+    remote = form.data("remote") !== undefined;
+
+    if(remote) {
+      form_ext.handleRemote(form);
+      return false;
+    }
+
+  });
+})(jQuery);

lms/static/sass/shared/_modal.scss

@@ -106,7 +106,7 @@
       }
     }
 
-    #enroll_error, #login_error {
+    .modal-form-error {
       background: $error-red;
       border: 1px solid rgb(202, 17, 17);
       color: rgb(143, 14, 14);

lms/templates/forgot_password_modal.html

+<%! from django.core.urlresolvers import reverse %>
+<section id="forgot-password-modal" class="modal forgot-password-modal">
+  <div class="inner-wrapper">
+    <div id="password-reset">
+      <header>
+        <h2>Password reset</h2>
+        <hr>
+      </header>
+
+      <p>Forgotten your password? Enter your e-mail address below, and we'll e-mail instructions for setting a new one.</p>
+
+      <form id="pwd_reset_form" action="${reverse('password_reset')}" method="post" data-remote="true">
+        <label for="id_email">E-mail address:</label>
+        <input id="id_email" type="email" name="email" maxlength="75" />
+        <input type="submit" id="pwd_reset_button" value="Reset my password" />
+      </form>
+    </div>
+  </div>
+</section>
+
+<script type="text/javascript">
+  (function() {
+   $(document).delegate('#pwd_reset_form', 'ajax:success', function(data, json, xhr) {
+     if(json.success) {
+       $("#password-reset").html(json.value);
+     } else {
+       if($('#pwd_error').length == 0) {
+         $('#pwd_reset_form').prepend('<div id="pwd_error" class="modal-form-error">Email is incorrect.</div>');
+       }
+       $('#pwd_error').stop().css("display", "block");
+     }
+   });
+  })(this)
+</script>

lms/templates/login_modal.html

@@ -8,7 +8,7 @@
       <hr>
     </header>
 
-    <form id="login_form" method="post">
+    <form id="login_form" method="post" data-remote="true" action="/login">
       <label>E-mail</label>
       <input name="email" type="email" placeholder="E-mail">
       <label>Password</label>
@@ -25,7 +25,7 @@
     <section class="login-extra">
       <p>
         <span>Not enrolled? <a href="#signup-modal" class="close-login" rel="leanModal">Sign up.</a></span>
-        <a href="#" class="pwd-reset">Forgot password?</a>
+        <a href="#forgot-password-modal" rel="leanModal" class="pwd-reset">Forgot password?</a>
       </p>
     </section>
 
@@ -39,36 +39,15 @@
 
 <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')}
-     });
-   }
-
-   $('form#login_form').submit(function(e) {
-     e.preventDefault();
-     var submit_data = $('#login_form').serialize();
-
-     postJSON('/login',
-       submit_data,
-       function(json) {
+   $(document).delegate('#login_form', 'ajax:success', function(data, json, xhr) {
      if(json.success) {
        location.href="${reverse('dashboard')}";
      } else {
        if($('#login_error').length == 0) {
-             $('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>');
+         $('#login_form').prepend('<div id="login_error" class="modal-form-error">Email or password is incorrect.</div>');
        }
        $('#login_error').stop().css("display", "block");
      }
-       }
-     );
    });
 })(this)
 </script>

lms/templates/main.html

@@ -20,6 +20,7 @@
   <script type="text/javascript" src="${static.url('js/vendor/swfobject/swfobject.js')}"></script>
   <script type="text/javascript" src="${static.url('js/vendor/jquery.cookie.js')}"></script>
   <script type="text/javascript" src="${static.url('js/vendor/jquery.qtip.min.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/form.ext.js')}"></script>
 
   ## TODO (cpennington): Remove this when we have a good way for modules to specify js to load on the page
   ## and in the wiki

lms/templates/navigation.html

@@ -51,4 +51,5 @@
 %if not user.is_authenticated():
   <%include file="login_modal.html" />
   <%include file="signup_modal.html" />
+  <%include file="forgot_password_modal.html" />
 %endif

lms/templates/signup_modal.html

@@ -9,7 +9,7 @@
         <hr>
       </header>
 
-      <form id="enroll_form" method="post">
+      <form id="enroll_form" method="post" data-remote="true" action="/create_account">
         <div id="enroll_error" name="enroll_error"></div>
         <label>E-mail</label>
         <input name="email" type="email" placeholder="E-mail">
@@ -77,34 +77,12 @@
 
 <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')}
-      });
-    }
-
-    $('form#enroll_form').submit(function(e) {
-      e.preventDefault();
-      var submit_data = $('#enroll_form').serialize();
-
-      postJSON('/create_account',
-        submit_data,
-        function(json) {
+   $(document).delegate('#enroll_form', 'ajax:success', function(data, json, xhr) {
      if(json.success) {
        $('#enroll').html(json.value);
      } else {
        $('#enroll_error').html(json.value).stop().css("display", "block");
      }
-        }
-      );
     });
   })(this)
 </script>

lms/urls.py

@@ -28,7 +28,7 @@ urlpatterns = ('',
     url(r'^create_account$', 'student.views.create_account'),
     url(r'^activate/(?P<key>[^/]*)$', 'student.views.activate_account'),
 #    url(r'^reactivate/(?P<key>[^/]*)$', 'student.views.reactivation_email'),
-    url(r'^password_reset/$', 'student.views.password_reset'),
+    url(r'^password_reset/$', 'student.views.password_reset', name='password_reset'),
     ## Obsolete Django views for password resets
     ## TODO: Replace with Mako-ized views
     url(r'^password_change/$', django.contrib.auth.views.password_change,