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 || {};
isBlank = _fn.validate.isBlank( $el );
if ( _fn.validate.isRequired( $el ) ) {
console.log('is required');
if ( isBlank ) {
required = false;
} else {
......@@ -41,7 +40,7 @@ console.log('is required');
}
response.isValid = required && min && max && email;
console.log(response.isValid);
if ( !response.isValid ) {
response.message = _fn.validate.getMessage( $el, {
required: required,
......
lms/static/js/student_account/models/PasswordResetModel.js
......@@ -29,8 +29,8 @@ var edx = edx || {};
.done(function() {
model.trigger('success');
})
.fail( function() {
model.trigger('error');
.fail( function( error ) {
model.trigger( 'error', error );
});
}
});
......
lms/static/js/student_account/views/AccessView.js
......@@ -126,8 +126,8 @@ var edx = edx || {};
},
resetPassword: function() {
this.$header.addClass('hidden');
$(this.el).find('.form-type').addClass('hidden');
this.element.hide( this.$header );
this.element.hide( $(this.el).find('.form-type') );
this.loadForm('reset');
},
......@@ -139,14 +139,29 @@ var edx = edx || {};
this.loadForm( type );
}
$(this.el).find('.form-wrapper').addClass('hidden');
$form.removeClass('hidden');
this.element.hide( $(this.el).find('.form-wrapper') );
this.element.show( $form );
},
form: {
isLoaded: function( $form ) {
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 || {};
this.buildForm( data.fields );
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 ) {
var fields = html || '';
......@@ -76,6 +86,27 @@ var edx = edx || {};
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() {
var obj = {},
......@@ -116,10 +147,25 @@ var edx = edx || {};
return obj;
},
forgotPassword: function( event ) {
event.preventDefault();
saveError: function( error ) {
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 ) {
......@@ -140,34 +186,9 @@ var edx = edx || {};
if ( show ) {
this.setErrors();
} else {
this.$errors
.addClass('hidden')
.attr('aria-hidden', true);
this.element.hide( this.$errors );
}
},
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 ) {
return edx.utils.validate( $el, form );
}
......
lms/static/js/student_account/views/LoginView.js
var edx = edx || {};
(function($, _, Backbone, gettext) {
(function($, _, gettext) {
'use strict';
edx.student = edx.student || {};
......@@ -21,17 +21,9 @@ var edx = edx || {};
requiredStr: '',
initialize: function( data ) {
this.tpl = $(this.tpl).html();
this.fieldTpl = $(this.fieldTpl).html();
this.buildForm( data.fields );
this.model = data.model;
preRender: function( data ) {
this.providers = data.thirdPartyAuth.providers || [];
this.currentProvider = data.thirdPartyAuth.currentProvider || '';
this.listenTo( this.model, 'error', this.saveError );
},
render: function( html ) {
......@@ -82,6 +74,7 @@ var edx = edx || {};
saveError: function( error ) {
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
* authenticated with a third-party provider, but we haven't
......@@ -90,14 +83,14 @@ var edx = edx || {};
* to complete the registration process.
*/
if (error.status === 403 && error.responseText === "third-party-auth" && this.currentProvider) {
this.$alreadyAuthenticatedMsg.removeClass("hidden");
}
else {
this.$alreadyAuthenticatedMsg.addClass("hidden");
this.element.show( this.$alreadyAuthenticatedMsg );
} else {
this.element.hide( this.$alreadyAuthenticatedMsg );
// TODO -- display the error
}
this.setErrors();
}
});
})(jQuery, _, Backbone, gettext);
\ No newline at end of file
})(jQuery, _, gettext);
lms/static/js/student_account/views/PasswordResetView.js
var edx = edx || {};
(function($, _, Backbone, gettext) {
(function($, _, gettext) {
'use strict';
edx.student = edx.student || {};
......@@ -24,34 +24,25 @@ var edx = edx || {};
this.$form = $container.find('form');
this.$resetFail = $container.find('.js-reset-fail');
this.$errors = $container.find('.submission-error');
this.listenTo( this.model, 'success', this.resetComplete );
this.listenTo( this.model, 'error', this.resetError );
this.listenTo( this.model, 'error', this.saveError );
},
toggleErrorMsg: function( show ) {
if ( show ) {
this.setErrors();
} else {
this.$errors
.addClass('hidden')
.attr('aria-hidden', true);
this.element.hide( this.$errors );
}
},
resetComplete: function() {
var $el = $(this.el);
$el.find('#password-reset-form').addClass('hidden');
$el.find('.js-reset-success').removeClass('hidden');
this.$resetFail.addClass('hidden');
},
resetError: function() {
this.$resetFail.removeClass('hidden');
this.element.hide( $el.find('#password-reset-form') );
this.element.show( $el.find('.js-reset-success') );
},
submitForm: function( event ) {
......@@ -73,4 +64,4 @@ var edx = edx || {};
}
});
})(jQuery, _, Backbone, gettext);
})(jQuery, _, gettext);
lms/static/js/student_account/views/RegisterView.js
var edx = edx || {};
(function($, _, Backbone, gettext) {
(function($, _, gettext) {
'use strict';
edx.student = edx.student || {};
......@@ -18,13 +18,7 @@ var edx = edx || {};
formType: 'register',
initialize: function( data ) {
this.tpl = $(this.tpl).html();
this.fieldTpl = $(this.fieldTpl).html();
this.buildForm( data.fields );
this.model = data.model;
preRender: function( data ) {
this.providers = data.thirdPartyAuth.providers || [];
this.currentProvider = data.thirdPartyAuth.currentProvider || '';
},
......@@ -45,6 +39,7 @@ var edx = edx || {};
thirdPartyAuth: function( event ) {
var providerUrl = $(event.target).data('provider-url') || '';
if (providerUrl) {
window.location.href = providerUrl;
} else {
......@@ -54,4 +49,4 @@ var edx = edx || {};
}
});
})(jQuery, _, Backbone, gettext);
\ No newline at end of file
})(jQuery, _, gettext);
lms/templates/student_account/access.underscore
......@@ -8,7 +8,7 @@
<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>
</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 class="form-type">
......@@ -16,7 +16,7 @@
<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>
</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>
<div id="password-reset-wrapper"></div>
lms/templates/student_account/login.underscore
......@@ -3,7 +3,7 @@
<h4 class="message-title">We couldn't log you in.</h4>
<ul class="message-copy"></ul>
</div>
<div class="already-authenticated-msg hidden">
<div class="already-authenticated-msg hidden" aria-hidden="true">
<% 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>
<% } %>
......
lms/templates/student_account/password_reset.underscore
......@@ -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>
</div>
</div>
<div class="js-reset-fail hidden">
<h2>Password Reset Failed</h2>
</div>
</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