Skip to content

E
edx-platform
Commit 2ea96855 by AlasdairSwan
Options

ECOM-369 Added handling of model save errors. Updated FormView to add preRender… 

ECOM-369 Added handling of model save errors. Updated FormView to add preRender function to limit amount of duplicate code. Updated PasswordResetModel to return error object when errors occur.
parent a86e9e68
Showing with 95 additions and 86 deletions
common/static/js/spec_helpers/edx.utils.validate.js
...@@ -28,7 +28,6 @@ var edx = edx || {}; ...@@ -28,7 +28,6 @@ var edx = edx || {};
isBlank = _fn.validate.isBlank( $el ); isBlank = _fn.validate.isBlank( $el );
if ( _fn.validate.isRequired( $el ) ) { if ( _fn.validate.isRequired( $el ) ) {
console.log('is required');
if ( isBlank ) { if ( isBlank ) {
required = false; required = false;
} else { } else {
...@@ -41,7 +40,7 @@ console.log('is required'); ...@@ -41,7 +40,7 @@ console.log('is required');
} }
response.isValid = required && min && max && email; response.isValid = required && min && max && email;
console.log(response.isValid);
if ( !response.isValid ) { if ( !response.isValid ) {
response.message = _fn.validate.getMessage( $el, { response.message = _fn.validate.getMessage( $el, {
required: required, required: required,
......
lms/static/js/student_account/models/PasswordResetModel.js
...@@ -29,8 +29,8 @@ var edx = edx || {}; ...@@ -29,8 +29,8 @@ var edx = edx || {};
.done(function() { .done(function() {
model.trigger('success'); model.trigger('success');
}) })
.fail( function() { .fail( function( error ) {
model.trigger('error'); model.trigger( 'error', error );
}); });
} }
}); });
......
lms/static/js/student_account/views/AccessView.js
...@@ -126,8 +126,8 @@ var edx = edx || {}; ...@@ -126,8 +126,8 @@ var edx = edx || {};
}, },
resetPassword: function() { resetPassword: function() {
this.$header.addClass('hidden'); this.element.hide( this.$header );
$(this.el).find('.form-type').addClass('hidden'); this.element.hide( $(this.el).find('.form-type') );
this.loadForm('reset'); this.loadForm('reset');
}, },
...@@ -139,14 +139,29 @@ var edx = edx || {}; ...@@ -139,14 +139,29 @@ var edx = edx || {};
this.loadForm( type ); this.loadForm( type );
} }
$(this.el).find('.form-wrapper').addClass('hidden'); this.element.hide( $(this.el).find('.form-wrapper') );
$form.removeClass('hidden'); this.element.show( $form );
}, },
form: { form: {
isLoaded: function( $form ) { isLoaded: function( $form ) {
return $form.html().length > 0; return $form.html().length > 0;
} }
},
/* Helper method ot toggle display
* including accessibility considerations
*/
element: {
hide: function( $el ) {
$el.addClass('hidden')
.attr('aria-hidden', true);
},
show: function( $el ) {
$el.removeClass('hidden')
.attr('aria-hidden', false);
}
} }
}); });
......
lms/static/js/student_account/views/FormView.js
...@@ -35,10 +35,20 @@ var edx = edx || {}; ...@@ -35,10 +35,20 @@ var edx = edx || {};
this.buildForm( data.fields ); this.buildForm( data.fields );
this.model = data.model; this.model = data.model;
this.listenTo( this.model, 'error', this.modelError ); this.listenTo( this.model, 'error', this.saveError );
this.preRender( data );
},
/* Allows extended views to add custom
* init steps without needing to repeat
* default init steps
*/
preRender: function( data ) {
/* custom code goes here */
return data;
}, },
// Renders the form.
render: function( html ) { render: function( html ) {
var fields = html || ''; var fields = html || '';
...@@ -76,6 +86,27 @@ var edx = edx || {}; ...@@ -76,6 +86,27 @@ var edx = edx || {};
this.render( html.join('') ); this.render( html.join('') );
}, },
/* Helper method ot toggle display
* including accessibility considerations
*/
element: {
hide: function( $el ) {
$el.addClass('hidden')
.attr('aria-hidden', true);
},
show: function( $el ) {
$el.removeClass('hidden')
.attr('aria-hidden', false);
}
},
forgotPassword: function( event ) {
event.preventDefault();
this.trigger('password-help');
},
getFormData: function() { getFormData: function() {
var obj = {}, var obj = {},
...@@ -116,10 +147,25 @@ var edx = edx || {}; ...@@ -116,10 +147,25 @@ var edx = edx || {};
return obj; return obj;
}, },
forgotPassword: function( event ) { saveError: function( error ) {
event.preventDefault(); this.errors = ['<li>' + error.responseText + '</li>'];
this.setErrors();
},
this.trigger('password-help'); setErrors: function() {
var $msg = this.$errors.find('.message-copy'),
html = [],
errors = this.errors,
i,
len = errors.length;
for ( i=0; i<len; i++ ) {
html.push( errors[i] );
}
$msg.html( html.join('') );
this.element.show( this.$errors );
}, },
submitForm: function( event ) { submitForm: function( event ) {
...@@ -140,34 +186,9 @@ var edx = edx || {}; ...@@ -140,34 +186,9 @@ var edx = edx || {};
if ( show ) { if ( show ) {
this.setErrors(); this.setErrors();
} else { } else {
this.$errors this.element.hide( this.$errors );
.addClass('hidden')
.attr('aria-hidden', true);
} }
}, },
setErrors: function() {
var $msg = this.$errors.find('.message-copy'),
html = [],
errors = this.errors,
i,
len = errors.length;
for ( i=0; i<len; i++ ) {
html.push( errors[i] );
}
$msg.html( html.join('') );
this.$errors
.removeClass('hidden')
.attr('aria-hidden', false);
},
modelError: function( error ) {
console.log('error ', error);
},
validate: function( $el, form ) { validate: function( $el, form ) {
return edx.utils.validate( $el, form ); return edx.utils.validate( $el, form );
} }
......
lms/static/js/student_account/views/LoginView.js
var edx = edx || {}; var edx = edx || {};
(function($, _, Backbone, gettext) { (function($, _, gettext) {
'use strict'; 'use strict';
edx.student = edx.student || {}; edx.student = edx.student || {};
...@@ -21,17 +21,9 @@ var edx = edx || {}; ...@@ -21,17 +21,9 @@ var edx = edx || {};
requiredStr: '', requiredStr: '',
initialize: function( data ) { preRender: function( data ) {
this.tpl = $(this.tpl).html();
this.fieldTpl = $(this.fieldTpl).html();
this.buildForm( data.fields );
this.model = data.model;
this.providers = data.thirdPartyAuth.providers || []; this.providers = data.thirdPartyAuth.providers || [];
this.currentProvider = data.thirdPartyAuth.currentProvider || ''; this.currentProvider = data.thirdPartyAuth.currentProvider || '';
this.listenTo( this.model, 'error', this.saveError );
}, },
render: function( html ) { render: function( html ) {
...@@ -82,6 +74,7 @@ var edx = edx || {}; ...@@ -82,6 +74,7 @@ var edx = edx || {};
saveError: function( error ) { saveError: function( error ) {
console.log(error.status, ' error: ', error.responseText); console.log(error.status, ' error: ', error.responseText);
this.errors = ['<li>' + error.responseText + '</li>'];
/* If we've gotten a 403 error, it means that we've successfully /* If we've gotten a 403 error, it means that we've successfully
* authenticated with a third-party provider, but we haven't * authenticated with a third-party provider, but we haven't
...@@ -90,14 +83,14 @@ var edx = edx || {}; ...@@ -90,14 +83,14 @@ var edx = edx || {};
* to complete the registration process. * to complete the registration process.
*/ */
if (error.status === 403 && error.responseText === "third-party-auth" && this.currentProvider) { if (error.status === 403 && error.responseText === "third-party-auth" && this.currentProvider) {
this.$alreadyAuthenticatedMsg.removeClass("hidden"); this.element.show( this.$alreadyAuthenticatedMsg );
} } else {
else { this.element.hide( this.$alreadyAuthenticatedMsg );
this.$alreadyAuthenticatedMsg.addClass("hidden");
// TODO -- display the error // TODO -- display the error
} }
this.setErrors();
} }
}); });
})(jQuery, _, Backbone, gettext); })(jQuery, _, gettext);
\ No newline at end of file
lms/static/js/student_account/views/PasswordResetView.js
var edx = edx || {}; var edx = edx || {};
(function($, _, Backbone, gettext) { (function($, _, gettext) {
'use strict'; 'use strict';
edx.student = edx.student || {}; edx.student = edx.student || {};
...@@ -24,34 +24,25 @@ var edx = edx || {}; ...@@ -24,34 +24,25 @@ var edx = edx || {};
this.$form = $container.find('form'); this.$form = $container.find('form');
this.$resetFail = $container.find('.js-reset-fail');
this.$errors = $container.find('.submission-error'); this.$errors = $container.find('.submission-error');
this.listenTo( this.model, 'success', this.resetComplete ); this.listenTo( this.model, 'success', this.resetComplete );
this.listenTo( this.model, 'error', this.resetError ); this.listenTo( this.model, 'error', this.saveError );
}, },
toggleErrorMsg: function( show ) { toggleErrorMsg: function( show ) {
if ( show ) { if ( show ) {
this.setErrors(); this.setErrors();
} else { } else {
this.$errors this.element.hide( this.$errors );
.addClass('hidden')
.attr('aria-hidden', true);
} }
}, },
resetComplete: function() { resetComplete: function() {
var $el = $(this.el); var $el = $(this.el);
$el.find('#password-reset-form').addClass('hidden'); this.element.hide( $el.find('#password-reset-form') );
$el.find('.js-reset-success').removeClass('hidden'); this.element.show( $el.find('.js-reset-success') );
this.$resetFail.addClass('hidden');
},
resetError: function() {
this.$resetFail.removeClass('hidden');
}, },
submitForm: function( event ) { submitForm: function( event ) {
...@@ -73,4 +64,4 @@ var edx = edx || {}; ...@@ -73,4 +64,4 @@ var edx = edx || {};
} }
}); });
})(jQuery, _, Backbone, gettext); })(jQuery, _, gettext);
lms/static/js/student_account/views/RegisterView.js
var edx = edx || {}; var edx = edx || {};
(function($, _, Backbone, gettext) { (function($, _, gettext) {
'use strict'; 'use strict';
edx.student = edx.student || {}; edx.student = edx.student || {};
...@@ -18,13 +18,7 @@ var edx = edx || {}; ...@@ -18,13 +18,7 @@ var edx = edx || {};
formType: 'register', formType: 'register',
initialize: function( data ) { preRender: function( data ) {
this.tpl = $(this.tpl).html();
this.fieldTpl = $(this.fieldTpl).html();
this.buildForm( data.fields );
this.model = data.model;
this.providers = data.thirdPartyAuth.providers || []; this.providers = data.thirdPartyAuth.providers || [];
this.currentProvider = data.thirdPartyAuth.currentProvider || ''; this.currentProvider = data.thirdPartyAuth.currentProvider || '';
}, },
...@@ -45,6 +39,7 @@ var edx = edx || {}; ...@@ -45,6 +39,7 @@ var edx = edx || {};
thirdPartyAuth: function( event ) { thirdPartyAuth: function( event ) {
var providerUrl = $(event.target).data('provider-url') || ''; var providerUrl = $(event.target).data('provider-url') || '';
if (providerUrl) { if (providerUrl) {
window.location.href = providerUrl; window.location.href = providerUrl;
} else { } else {
...@@ -54,4 +49,4 @@ var edx = edx || {}; ...@@ -54,4 +49,4 @@ var edx = edx || {};
} }
}); });
})(jQuery, _, Backbone, gettext); })(jQuery, _, gettext);
\ No newline at end of file
lms/templates/student_account/access.underscore
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<input type="radio" name="form" id="register-option" value="register" class="form-toggle" <% if ( mode === 'register' ) { %>checked<% } %> > <input type="radio" name="form" id="register-option" value="register" class="form-toggle" <% if ( mode === 'register' ) { %>checked<% } %> >
<label for"register-option" class="form-label">I am a new user</label> <label for"register-option" class="form-label">I am a new user</label>
</h2> </h2>
<div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden<% } %>"></div> <div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden" aria-hidden="true<% } %>"></div>
</section> </section>
<section class="form-type"> <section class="form-type">
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<input type="radio" name="form" id="login-option" value="login" class="form-toggle" <% if ( mode === 'login' ) { %>checked<% } %>> <input type="radio" name="form" id="login-option" value="login" class="form-toggle" <% if ( mode === 'login' ) { %>checked<% } %>>
<label for="login-option" class="form-label">I am a returning user with an edX account</label> <label for="login-option" class="form-label">I am a returning user with an edX account</label>
</h2> </h2>
<div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden<% } %>"></div> <div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden" aria-hidden="true<% } %>"></div>
</section> </section>
<div id="password-reset-wrapper"></div> <div id="password-reset-wrapper"></div>
lms/templates/student_account/login.underscore
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<h4 class="message-title">We couldn't log you in.</h4> <h4 class="message-title">We couldn't log you in.</h4>
<ul class="message-copy"></ul> <ul class="message-copy"></ul>
</div> </div>
<div class="already-authenticated-msg hidden"> <div class="already-authenticated-msg hidden" aria-hidden="true">
<% if (currentProvider) { %> <% if (currentProvider) { %>
<p class="instructions">You've successfully logged into <%- currentProvider %>, but you need to link your account. Please click "I am a returning user" to create an EdX account.</p> <p class="instructions">You've successfully logged into <%- currentProvider %>, but you need to link your account. Please click "I am a returning user" to create an EdX account.</p>
<% } %> <% } %>
......
lms/templates/student_account/password_reset.underscore
...@@ -23,7 +23,4 @@ ...@@ -23,7 +23,4 @@
<p>We've e-mailed you instructions for setting your password to the e-mail address you submitted. You should be receiving it shortly.</p> <p>We've e-mailed you instructions for setting your password to the e-mail address you submitted. You should be receiving it shortly.</p>
</div> </div>
</div> </div>
<div class="js-reset-fail hidden">
<h2>Password Reset Failed</h2>
</div>
</section> </section>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment