New provider config options, New Institution Login Menu - PR 8603
This commit is contained in:
@@ -84,6 +84,7 @@
|
||||
'js/student_account/views/FormView': 'js/student_account/views/FormView',
|
||||
'js/student_account/models/LoginModel': 'js/student_account/models/LoginModel',
|
||||
'js/student_account/views/LoginView': 'js/student_account/views/LoginView',
|
||||
'js/student_account/views/InstitutionLoginView': 'js/student_account/views/InstitutionLoginView',
|
||||
'js/student_account/models/PasswordResetModel': 'js/student_account/models/PasswordResetModel',
|
||||
'js/student_account/views/PasswordResetView': 'js/student_account/views/PasswordResetView',
|
||||
'js/student_account/models/RegisterModel': 'js/student_account/models/RegisterModel',
|
||||
@@ -410,6 +411,14 @@
|
||||
'js/student_account/views/FormView'
|
||||
]
|
||||
},
|
||||
'js/student_account/views/InstitutionLoginView': {
|
||||
exports: 'edx.student.account.InstitutionLoginView',
|
||||
deps: [
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
]
|
||||
},
|
||||
'js/student_account/models/PasswordResetModel': {
|
||||
exports: 'edx.student.account.PasswordResetModel',
|
||||
deps: ['jquery', 'jquery.cookie', 'backbone']
|
||||
@@ -450,6 +459,7 @@
|
||||
'js/student_account/views/LoginView',
|
||||
'js/student_account/views/PasswordResetView',
|
||||
'js/student_account/views/RegisterView',
|
||||
'js/student_account/views/InstitutionLoginView',
|
||||
'js/student_account/models/LoginModel',
|
||||
'js/student_account/models/PasswordResetModel',
|
||||
'js/student_account/models/RegisterModel',
|
||||
@@ -613,6 +623,7 @@
|
||||
'lms/include/js/spec/student_account/access_spec.js',
|
||||
'lms/include/js/spec/student_account/finish_auth_spec.js',
|
||||
'lms/include/js/spec/student_account/login_spec.js',
|
||||
'lms/include/js/spec/student_account/institution_login_spec.js',
|
||||
'lms/include/js/spec/student_account/register_spec.js',
|
||||
'lms/include/js/spec/student_account/password_reset_spec.js',
|
||||
'lms/include/js/spec/student_account/enrollment_spec.js',
|
||||
|
||||
@@ -58,6 +58,7 @@ define([
|
||||
thirdPartyAuth: {
|
||||
currentProvider: null,
|
||||
providers: [],
|
||||
secondaryProviders: [{name: "provider"}],
|
||||
finishAuthUrl: finishAuthUrl
|
||||
},
|
||||
nextUrl: nextUrl, // undefined for default
|
||||
@@ -97,6 +98,8 @@ define([
|
||||
TemplateHelpers.installTemplate('templates/student_account/register');
|
||||
TemplateHelpers.installTemplate('templates/student_account/password_reset');
|
||||
TemplateHelpers.installTemplate('templates/student_account/form_field');
|
||||
TemplateHelpers.installTemplate('templates/student_account/institution_login');
|
||||
TemplateHelpers.installTemplate('templates/student_account/institution_register');
|
||||
|
||||
// Stub analytics tracking
|
||||
window.analytics = jasmine.createSpyObj('analytics', ['track', 'page', 'pageview', 'trackLink']);
|
||||
@@ -135,6 +138,30 @@ define([
|
||||
assertForms('#login-form', '#register-form');
|
||||
});
|
||||
|
||||
it('toggles between the login and institution login view', function() {
|
||||
ajaxSpyAndInitialize(this, 'login');
|
||||
|
||||
// Simulate clicking on institution login button
|
||||
$('#login-form .button-secondary-login[data-type="institution_login"]').click();
|
||||
assertForms('#institution_login-form', '#login-form');
|
||||
|
||||
// Simulate selection of the login form
|
||||
selectForm('login');
|
||||
assertForms('#login-form', '#institution_login-form');
|
||||
});
|
||||
|
||||
it('toggles between the register and institution register view', function() {
|
||||
ajaxSpyAndInitialize(this, 'register');
|
||||
|
||||
// Simulate clicking on institution login button
|
||||
$('#register-form .button-secondary-login[data-type="institution_login"]').click();
|
||||
assertForms('#institution_login-form', '#register-form');
|
||||
|
||||
// Simulate selection of the login form
|
||||
selectForm('register');
|
||||
assertForms('#register-form', '#institution_login-form');
|
||||
});
|
||||
|
||||
it('displays the reset password form', function() {
|
||||
ajaxSpyAndInitialize(this, 'login');
|
||||
|
||||
|
||||
80
lms/static/js/spec/student_account/institution_login_spec.js
Normal file
80
lms/static/js/spec/student_account/institution_login_spec.js
Normal file
@@ -0,0 +1,80 @@
|
||||
define([
|
||||
'jquery',
|
||||
'underscore',
|
||||
'common/js/spec_helpers/template_helpers',
|
||||
'js/student_account/views/InstitutionLoginView',
|
||||
], function($, _, TemplateHelpers, InstitutionLoginView) {
|
||||
'use strict';
|
||||
describe('edx.student.account.InstitutionLoginView', function() {
|
||||
|
||||
var view = null,
|
||||
PLATFORM_NAME = 'edX',
|
||||
THIRD_PARTY_AUTH = {
|
||||
currentProvider: null,
|
||||
providers: [],
|
||||
secondaryProviders: [
|
||||
{
|
||||
id: 'oa2-google-oauth2',
|
||||
name: 'Google',
|
||||
iconClass: 'fa-google-plus',
|
||||
loginUrl: '/auth/login/google-oauth2/?auth_entry=account_login',
|
||||
registerUrl: '/auth/login/google-oauth2/?auth_entry=account_register'
|
||||
},
|
||||
{
|
||||
id: 'oa2-facebook',
|
||||
name: 'Facebook',
|
||||
iconClass: 'fa-facebook',
|
||||
loginUrl: '/auth/login/facebook/?auth_entry=account_login',
|
||||
registerUrl: '/auth/login/facebook/?auth_entry=account_register'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var createInstLoginView = function(mode) {
|
||||
// Initialize the login view
|
||||
view = new InstitutionLoginView({
|
||||
mode: mode,
|
||||
thirdPartyAuth: THIRD_PARTY_AUTH,
|
||||
platformName: PLATFORM_NAME
|
||||
});
|
||||
view.render();
|
||||
};
|
||||
|
||||
beforeEach(function() {
|
||||
setFixtures('<div id="institution_login-form"></div>');
|
||||
TemplateHelpers.installTemplate('templates/student_account/institution_login');
|
||||
TemplateHelpers.installTemplate('templates/student_account/institution_register');
|
||||
});
|
||||
|
||||
it('displays a list of providers', function() {
|
||||
createInstLoginView('login');
|
||||
expect($('#institution_login-form').html()).not.toBe("");
|
||||
var $google = $('li a:contains("Google")');
|
||||
expect($google).toBeVisible();
|
||||
expect($google).toHaveAttr(
|
||||
'href', '/auth/login/google-oauth2/?auth_entry=account_login'
|
||||
);
|
||||
var $facebook = $('li a:contains("Facebook")');
|
||||
expect($facebook).toBeVisible();
|
||||
expect($facebook).toHaveAttr(
|
||||
'href', '/auth/login/facebook/?auth_entry=account_login'
|
||||
);
|
||||
});
|
||||
|
||||
it('displays a list of providers', function() {
|
||||
createInstLoginView('register');
|
||||
expect($('#institution_login-form').html()).not.toBe("");
|
||||
var $google = $('li a:contains("Google")');
|
||||
expect($google).toBeVisible();
|
||||
expect($google).toHaveAttr(
|
||||
'href', '/auth/login/google-oauth2/?auth_entry=account_register'
|
||||
);
|
||||
var $facebook = $('li a:contains("Facebook")');
|
||||
expect($facebook).toBeVisible();
|
||||
expect($facebook).toHaveAttr(
|
||||
'href', '/auth/login/facebook/?auth_entry=account_register'
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
@@ -18,7 +18,8 @@ var edx = edx || {};
|
||||
subview: {
|
||||
login: {},
|
||||
register: {},
|
||||
passwordHelp: {}
|
||||
passwordHelp: {},
|
||||
institutionLogin: {}
|
||||
},
|
||||
|
||||
nextUrl: '/dashboard',
|
||||
@@ -52,7 +53,8 @@ var edx = edx || {};
|
||||
this.formDescriptions = {
|
||||
login: obj.loginFormDesc,
|
||||
register: obj.registrationFormDesc,
|
||||
reset: obj.passwordResetFormDesc
|
||||
reset: obj.passwordResetFormDesc,
|
||||
institution_login: null
|
||||
};
|
||||
|
||||
this.platformName = obj.platformName;
|
||||
@@ -148,6 +150,16 @@ var edx = edx || {};
|
||||
|
||||
// Listen for 'auth-complete' event so we can enroll/redirect the user appropriately.
|
||||
this.listenTo( this.subview.register, 'auth-complete', this.authComplete );
|
||||
},
|
||||
|
||||
institution_login: function ( unused ) {
|
||||
this.subview.institutionLogin = new edx.student.account.InstitutionLoginView({
|
||||
thirdPartyAuth: this.thirdPartyAuth,
|
||||
platformName: this.platformName,
|
||||
mode: this.activeForm
|
||||
});
|
||||
|
||||
this.subview.institutionLogin.render();
|
||||
}
|
||||
},
|
||||
|
||||
@@ -180,9 +192,11 @@ var edx = edx || {};
|
||||
category: 'user-engagement'
|
||||
});
|
||||
|
||||
if ( !this.form.isLoaded( $form ) ) {
|
||||
// Load the form. Institution login is always refreshed since it changes based on the previous form.
|
||||
if ( !this.form.isLoaded( $form ) || type == "institution_login") {
|
||||
this.loadForm( type );
|
||||
}
|
||||
this.activeForm = type;
|
||||
|
||||
this.element.hide( $(this.el).find('.submission-success') );
|
||||
this.element.hide( $(this.el).find('.form-wrapper') );
|
||||
@@ -190,11 +204,13 @@ var edx = edx || {};
|
||||
this.element.scrollTop( $anchor );
|
||||
|
||||
// Update url without reloading page
|
||||
History.pushState( null, document.title, '/' + type + queryStr );
|
||||
if (type != "institution_login") {
|
||||
History.pushState( null, document.title, '/' + type + queryStr );
|
||||
}
|
||||
analytics.page( 'login_and_registration', type );
|
||||
|
||||
// Focus on the form
|
||||
document.getElementById(type).focus();
|
||||
$("#" + type).focus();
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@@ -215,7 +215,9 @@ var edx = edx || {};
|
||||
submitForm: function( event ) {
|
||||
var data = this.getFormData();
|
||||
|
||||
event.preventDefault();
|
||||
if (!_.isUndefined(event)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
this.toggleDisableButton(true);
|
||||
|
||||
|
||||
30
lms/static/js/student_account/views/InstitutionLoginView.js
Normal file
30
lms/static/js/student_account/views/InstitutionLoginView.js
Normal file
@@ -0,0 +1,30 @@
|
||||
var edx = edx || {};
|
||||
|
||||
(function($, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
edx.student = edx.student || {};
|
||||
edx.student.account = edx.student.account || {};
|
||||
|
||||
edx.student.account.InstitutionLoginView = Backbone.View.extend({
|
||||
el: '#institution_login-form',
|
||||
|
||||
initialize: function( data ) {
|
||||
var tpl = data.mode == "register" ? '#institution_register-tpl' : '#institution_login-tpl';
|
||||
this.tpl = $(tpl).html();
|
||||
this.providers = data.thirdPartyAuth.secondaryProviders || [];
|
||||
this.platformName = data.platformName;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
$(this.el).html( _.template( this.tpl, {
|
||||
// We pass the context object to the template so that
|
||||
// we can perform variable interpolation using sprintf
|
||||
providers: this.providers,
|
||||
platformName: this.platformName
|
||||
}));
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
})(jQuery, _, Backbone);
|
||||
@@ -25,6 +25,9 @@ var edx = edx || {};
|
||||
|
||||
preRender: function( data ) {
|
||||
this.providers = data.thirdPartyAuth.providers || [];
|
||||
this.hasSecondaryProviders = (
|
||||
data.thirdPartyAuth.secondaryProviders && data.thirdPartyAuth.secondaryProviders.length
|
||||
);
|
||||
this.currentProvider = data.thirdPartyAuth.currentProvider || '';
|
||||
this.errorMessage = data.thirdPartyAuth.errorMessage || '';
|
||||
this.platformName = data.platformName;
|
||||
@@ -45,6 +48,7 @@ var edx = edx || {};
|
||||
currentProvider: this.currentProvider,
|
||||
errorMessage: this.errorMessage,
|
||||
providers: this.providers,
|
||||
hasSecondaryProviders: this.hasSecondaryProviders,
|
||||
platformName: this.platformName
|
||||
}
|
||||
}));
|
||||
|
||||
@@ -22,9 +22,13 @@ var edx = edx || {};
|
||||
|
||||
preRender: function( data ) {
|
||||
this.providers = data.thirdPartyAuth.providers || [];
|
||||
this.hasSecondaryProviders = (
|
||||
data.thirdPartyAuth.secondaryProviders && data.thirdPartyAuth.secondaryProviders.length
|
||||
);
|
||||
this.currentProvider = data.thirdPartyAuth.currentProvider || '';
|
||||
this.errorMessage = data.thirdPartyAuth.errorMessage || '';
|
||||
this.platformName = data.platformName;
|
||||
this.autoSubmit = data.thirdPartyAuth.autoSubmitRegForm;
|
||||
|
||||
this.listenTo( this.model, 'sync', this.saveSuccess );
|
||||
},
|
||||
@@ -41,12 +45,19 @@ var edx = edx || {};
|
||||
currentProvider: this.currentProvider,
|
||||
errorMessage: this.errorMessage,
|
||||
providers: this.providers,
|
||||
hasSecondaryProviders: this.hasSecondaryProviders,
|
||||
platformName: this.platformName
|
||||
}
|
||||
}));
|
||||
|
||||
this.postRender();
|
||||
|
||||
if (this.autoSubmit) {
|
||||
$(this.el).hide();
|
||||
$('#register-honor_code').prop('checked', true);
|
||||
this.submitForm();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
@@ -63,6 +74,7 @@ var edx = edx || {};
|
||||
},
|
||||
|
||||
saveError: function( error ) {
|
||||
$(this.el).show(); // Show in case the form was hidden for auto-submission
|
||||
this.errors = _.flatten(
|
||||
_.map(
|
||||
JSON.parse(error.responseText),
|
||||
@@ -76,6 +88,13 @@ var edx = edx || {};
|
||||
);
|
||||
this.setErrors();
|
||||
this.toggleDisableButton(false);
|
||||
}
|
||||
},
|
||||
|
||||
postFormSubmission: function() {
|
||||
if (_.compact(this.errors).length) {
|
||||
// The form did not get submitted due to validation errors.
|
||||
$(this.el).show(); // Show in case the form was hidden for auto-submission
|
||||
}
|
||||
},
|
||||
});
|
||||
})(jQuery, _, gettext);
|
||||
|
||||
Reference in New Issue
Block a user