Merge pull request #5872 from edx/alasdair/logistration-form-errors-and-submit-methods

Moved to setting ajaxType with passed in method for models and now handl...

lms/static/js/spec/student_account/access_spec.js

@@ -152,9 +152,24 @@ define([
             });
 
             it('displays an error if a form definition could not be loaded', function() {
-                /* TODO: Not yet implemeted in the access view; currently, it only
-                 * logs to the console.
-                 */
+                // Spy on AJAX requests
+                requests = AjaxHelpers.requests(this);
+
+                // Init AccessView
+                view = new AccessView({
+                    mode: 'login',
+                    thirdPartyAuth: {
+                        currentProvider: null,
+                        providers: []
+                    },
+                    platformName: 'edX'
+                });
+
+                // Simulate an error from the LMS servers
+                AjaxHelpers.respondWithError(requests);
+
+                // Error message should be displayed
+                expect( $('#form-load-fail').hasClass('hidden') ).toBe(false);
             });
         });
     }

lms/static/js/spec/student_account/register_spec.js

@@ -23,7 +23,7 @@ define([
                     year_of_birth: 2014,
                     mailing_address: '141 Portland',
                     goals: 'To boldly learn what no letter of the alphabet has learned before',
-                    terms_of_service: true
+                    honor_code: true
                 },
                 THIRD_PARTY_AUTH = {
                     currentProvider: null,
@@ -147,12 +147,12 @@ define([
                             restrictions: {}
                         },
                         {
-                            name: 'terms_of_service',
-                            label: 'Terms of Service',
+                            name: 'honor_code',
+                            label: 'I agree to the <a href="/honor">Terms of Service and Honor Code</a>',
                             defaultValue: '',
                             type: 'checkbox',
                             required: true,
-                            instructions: "Agree to the terms of service.",
+                            instructions: '',
                             restrictions: {}
                         }
                     ]
@@ -191,8 +191,8 @@ define([
                 $('#register-mailing_address').val(USER_DATA.mailing_address);
                 $('#register-goals').val(USER_DATA.goals);
 
-                // Check the terms of service checkbox
-                $('#register-terms_of_service').prop('checked', USER_DATA.terms_of_service);
+                // Check the honor code checkbox
+                $('#register-honor_code').prop('checked', USER_DATA.honor_code);
 
                 // Create a fake click event
                 var clickEvent = $.Event('click');

lms/static/js/student_account/models/LoginModel.js

@@ -14,9 +14,12 @@ var edx = edx || {};
             remember: false
         },
 
+        ajaxType: '',
+
         urlRoot: '',
 
         initialize: function( obj ) {
+            this.ajaxType = obj.method;
             this.urlRoot = obj.url;
         },
 
@@ -27,15 +30,15 @@ var edx = edx || {};
 
             $.ajax({
                 url: model.urlRoot,
-                type: 'POST',
+                type: model.ajaxType,
                 data: model.attributes,
-                headers: headers
-            })
-            .done(function() {
+                headers: headers,
+                success: function() {
                     model.trigger('sync');
-            })
-            .fail( function( error ) {
+                },
+                error: function( error ) {
                     model.trigger('error', error);
+                }
             });
         }
     });

lms/static/js/student_account/models/PasswordResetModel.js

@@ -12,9 +12,12 @@ var edx = edx || {};
             email: ''
         },
 
+        ajaxType: '',
+
         urlRoot: '',
 
         initialize: function( obj ) {
+            this.ajaxType = obj.method;
             this.urlRoot = obj.url;
         },
 
@@ -26,15 +29,15 @@ var edx = edx || {};
             // Only expects an email address.
             $.ajax({
                 url: model.urlRoot,
-                type: 'POST',
+                type: model.ajaxType,
                 data: model.attributes,
-                headers: headers
-            })
-            .done(function() {
+                headers: headers,
+                success: function() {
                     model.trigger('sync');
-            })
-            .fail( function( error ) {
+                },
+                error: function( error ) {
                     model.trigger('error', error);
+                }
             });
         }
     });

lms/static/js/student_account/models/RegisterModel.js

@@ -18,12 +18,15 @@ var edx = edx || {};
             year_of_birth: '',
             mailing_address: '',
             goals: '',
-            terms_of_service: false
+            honor_code: false
         },
 
+        ajaxType: '',
+
         urlRoot: '',
 
         initialize: function( obj ) {
+            this.ajaxType = obj.method;
             this.urlRoot = obj.url;
         },
 
@@ -34,15 +37,15 @@ var edx = edx || {};
 
             $.ajax({
                 url: model.urlRoot,
-                type: 'POST',
+                type: model.ajaxType,
                 data: model.attributes,
-                headers: headers
-            })
-            .done(function() {
+                headers: headers,
+                success: function() {
                     model.trigger('sync');
-            })
-            .fail( function( error ) {
+                },
+                error: function( error ) {
                     model.trigger('error', error);
+                }
             });
         }
     });

lms/static/js/student_account/views/AccessView.js

@@ -59,12 +59,13 @@ var edx = edx || {};
         },
 
         loadForm: function( type ) {
-            this.getFormData( type, this.load[type], this );
+            this.getFormData( type, this );
         },
 
         load: {
             login: function( data, context ) {
                 var model = new edx.student.account.LoginModel({
+                    method: data.method,
                     url: data.submit_url
                 });
 
@@ -81,6 +82,7 @@ var edx = edx || {};
 
             reset: function( data, context ) {
                 var model = new edx.student.account.PasswordResetModel({
+                    method: data.method,
                     url: data.submit_url
                 });
 
@@ -92,6 +94,7 @@ var edx = edx || {};
 
             register: function( data, context ) {
                 var model = new edx.student.account.RegisterModel({
+                    method: data.method,
                     url: data.submit_url
                 });
 
@@ -104,7 +107,7 @@ var edx = edx || {};
             }
         },
 
-        getFormData: function( type, callback, context ) {
+        getFormData: function( type, context ) {
             var urls = {
                 login: 'login_session',
                 register: 'registration',
@@ -114,13 +117,12 @@ var edx = edx || {};
             $.ajax({
                 url: '/user_api/v1/account/' + urls[type] + '/',
                 type: 'GET',
-                dataType: 'json'
-            })
-            .done(function( data ) {
-                callback( data, context );
-            })
-            .fail(function( jqXHR, textStatus, errorThrown ) {
-                console.log('fail ', errorThrown);
+                dataType: 'json',
+                context: this,
+                success: function( data ) {
+                    this.load[type]( data, context );
+                },
+                error: this.showFormError
             });
         },
 
@@ -134,6 +136,10 @@ var edx = edx || {};
             this.loadForm('reset');
         },
 
+        showFormError: function() {
+            this.element.show( $('#form-load-fail') );
+        },
+
         toggleForm: function( e ) {
             var type = $(e.currentTarget).val(),
                 $form = $('#' + type + '-form'),

lms/static/js/student_account/views/FormView.js

@@ -133,7 +133,6 @@ var edx = edx || {};
                 $label,
                 key = '',
                 errors = [],
-                // $status = $form.find('.status'),
                 test = {};
 
             for ( i=0; i<len; i++ ) {
@@ -144,7 +143,6 @@ var edx = edx || {};
 
                 if ( key ) {
                     test = this.validate( elements[i] );
-
                     if ( test.isValid ) {
                         obj[key] = $el.attr('type') === 'checkbox' ? $el.is(':checked') : $el.val();
                         $el.removeClass('error');

lms/templates/student_account/access.underscore

@@ -3,6 +3,12 @@
     <p class="tagline"><%- gettext("Log in or register to take courses from the world's best universities.") %></p>
 </header>
 
+<section id="form-load-fail" class="form-type hidden" aria-hidden="true">
+    <div class="status submission-error">
+        <p class="message-copy"><%- gettext("Apologies, we appear to be experiencing technical difficulties. Please try again later.") %></p>
+    </div>
+</section>
+
 <% if ( mode === 'login' ) { %>
     <section id="register-anchor" class="form-type">
         <span>