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

ECOM-369 added registration view and front end validation

Browse Source
This commit is contained in:
AlasdairSwan
2014-10-17 15:57:05 -04:00
parent bd0c5f227c
commit b70dfb0780
11 changed files with 354 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
lms/static/js/student_account/models/RegisterModel.js Normal file
View File

@@ -0,0 +1,60 @@
var edx = edx || {};
(function($, _, Backbone, gettext) {
'use strict';
edx.student = edx.student || {};
edx.student.account = edx.student.account || {};
edx.student.account.RegisterModel = Backbone.Model.extend({
defaults: {
email: '',
name: '',
username: '',
password: '',
level_of_education: '',
gender: '',
year_of_birth: '',
mailing_address: '',
goals: '',
termsofservice: false
},
urlRoot: '',
initialize: function( obj ) {
this.urlRoot = obj.url;
},
sync: function(method, model) {
var headers = {
'X-CSRFToken': $.cookie('csrftoken')
};
$.ajax({
url: model.urlRoot,
type: 'POST',
data: model.attributes,
headers: headers
})
.done(function() {
var query = window.location.search,
url = '/dashboard';
// model.trigger('sync');
// If query string in url go back to that page
if ( query.length > 1 ) {
url = query.substring( query.indexOf('=') + 1 );
}
window.location.href = url;
})
.fail( function( error ) {
console.log('RegisterModel.save() FAILURE!!!!!');
model.trigger('error', error);
});
}
});
})(jQuery, _, Backbone, gettext);

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

@@ -44,6 +44,9 @@ var edx = edx || {};
if ( type === 'login' ) {
console.log('load login');
return new edx.student.account.LoginView();
} else if ( type === 'register' ) {
console.log('load register');
return new edx.student.account.RegisterView();
}
// return new app.LoginView({

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

@@ -42,8 +42,10 @@ var edx = edx || {};
},
postRender: function() {
var $container = $(this.el);
this.$form = $(this.el).find('form');
this.$form = $container.find('form');
this.$errors = $container.find('.error-msg');
},
getInitialData: function() {
@@ -81,10 +83,6 @@ var edx = edx || {};
fieldTpl = this.fieldTpl;
for ( i=0; i<len; i++ ) {
if ( data[i].name === 'password' ) {
data[i].type = 'password';
}
html.push( _.template( fieldTpl, $.extend( data[i], {
form: 'login'
}) ) );
@@ -110,17 +108,17 @@ var edx = edx || {};
key = $el.attr('name') || false;
if ( key ) {
// if ( this.validate( elements[i] ) ) {
if ( this.validate( elements[i] ) ) {
obj[key] = $el.attr('type') === 'checkbox' ? $el.is(':checked') : $el.val();
// $el.css('border', '1px solid #ccc');
// } else {
// errors.push( key );
// $el.css('border', '2px solid red');
// }
$el.css('border', '1px solid #ccc');
} else {
errors.push( key );
$el.css('border', '2px solid red');
}
}
}
//this.errors = errors;
this.errors = errors;
return obj;
},
@@ -150,10 +148,14 @@ var edx = edx || {};
toggleErrorMsg: function( show ) {
if ( show ) {
console.log('show');
this.$errors.removeClass('hidden');
} else {
console.log('hide');
this.$errors.addClass('hidden');
}
},
validate: function( $el ) {
return edx.utils.validate( $el );
}
});

157
lms/static/js/student_account/views/RegisterView.js Normal file
View File

@@ -0,0 +1,157 @@
var edx = edx || {};
(function($, _, Backbone, gettext) {
'use strict';
edx.student = edx.student || {};
edx.student.account = edx.student.account || {};
edx.student.account.RegisterView = Backbone.View.extend({
tagName: 'form',
el: '#register-form',
tpl: $('#register-tpl').html(),
fieldTpl: $('#form_field-tpl').html(),
events: {
'click .js-register': 'submitForm'
},
errors: [],
$form: {},
initialize: function( obj ) {
this.getInitialData();
},
// Renders the form.
render: function( html ) {
var fields = html || '';
$(this.el).html( _.template( this.tpl, {
fields: fields
}));
this.postRender();
return this;
},
postRender: function() {
var $container = $(this.el);
this.$form = $container.find('form');
this.$errors = $container.find('.error-msg');
},
getInitialData: function() {
var that = this;
$.ajax({
type: 'GET',
dataType: 'json',
url: '/user_api/v1/account/registration/',
success: function( data ) {
console.log(data);
that.buildForm( data.fields );
that.initModel( data.submit_url, data.method );
},
error: function( jqXHR, textStatus, errorThrown ) {
console.log('fail ', errorThrown);
}
});
},
initModel: function( url, method ) {
this.model = new edx.student.account.RegisterModel({
url: url
});
this.listenTo( this.model, 'error', function( error ) {
console.log(error.status, ' error: ', error.responseText);
});
},
buildForm: function( data ) {
var html = [],
i,
len = data.length,
fieldTpl = this.fieldTpl;
for ( i=0; i<len; i++ ) {
html.push( _.template( fieldTpl, $.extend( data[i], {
form: 'register'
}) ) );
}
this.render( html.join('') );
},
getFormData: function() {
var obj = {},
$form = this.$form,
elements = $form[0].elements,
i,
len = elements.length,
$el,
key = '',
errors = [];
for ( i=0; i<len; i++ ) {
$el = $( elements[i] );
key = $el.attr('name') || false;
if ( key ) {
if ( this.validate( elements[i] ) ) {
obj[key] = $el.attr('type') === 'checkbox' ? $el.is(':checked') : $el.val();
$el.css('border', '1px solid #ccc');
} else {
errors.push( key );
$el.css('border', '2px solid red');
}
}
}
this.errors = errors;
return obj;
},
submitForm: function( event ) {
var data = this.getFormData();
event.preventDefault();
console.log(data);
// console.log(this.model);
if ( !this.errors.length ) {
console.log('save me');
this.model.set( data );
console.log(this.model);
this.model.save();
this.toggleErrorMsg( false );
} else {
console.log('here are the errors ', this.errors);
this.toggleErrorMsg( true );
}
},
toggleErrorMsg: function( show ) {
if ( show ) {
this.$errors.removeClass('hidden');
} else {
this.$errors.addClass('hidden');
}
},
validate: function( $el ) {
return edx.utils.validate( $el );
}
});
})(jQuery, _, Backbone, gettext);