Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
AlasdairSwan
2014-10-24 16:38:31 -04:00
parent a86e9e68db
commit 2ea9685552
10 changed files with 95 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
common/static/js/spec_helpers/edx.utils.validate.js
View File

@@ -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,

4
lms/static/js/student_account/models/PasswordResetModel.js
View File

@@ -29,8 +29,8 @@ var edx = edx || {};
.done(function() {
model.trigger('success');
})
.fail( function() {
model.trigger('error');
.fail( function( error ) {
model.trigger( 'error', error );
});
}
});

23
lms/static/js/student_account/views/AccessView.js
View File

@@ -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);
}
}
});

83
lms/static/js/student_account/views/FormView.js
View File

@@ -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 );
}

23
lms/static/js/student_account/views/LoginView.js
View File

@@ -1,6 +1,6 @@
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);
})(jQuery, _, gettext);

21
lms/static/js/student_account/views/PasswordResetView.js
View File

@@ -1,6 +1,6 @@
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);

13
lms/static/js/student_account/views/RegisterView.js
View File

@@ -1,6 +1,6 @@
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);
})(jQuery, _, gettext);

4
lms/templates/student_account/access.underscore
View File

@@ -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>

2
lms/templates/student_account/login.underscore
View File

@@ -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>
<% } %>

3
lms/templates/student_account/password_reset.underscore
View File

@@ -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>