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

Request password reset with recovery email address

Browse Source
This commit is contained in:
Saleem Latif
2018-12-12 16:14:44 +05:00
parent 0858ae233a
commit 38ac3d5032
15 changed files with 537 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
lms/static/js/spec/student_account/account_recovery_spec.js Normal file
View File

@@ -0,0 +1,152 @@
(function(define) {
'use strict';
define([
'jquery',
'underscore',
'common/js/spec_helpers/template_helpers',
'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers',
'js/student_account/models/AccountRecoveryModel',
'js/student_account/views/AccountRecoveryView'
],
function($, _, TemplateHelpers, AjaxHelpers, AccountRecoveryModel, AccountRecoveryView) {
describe('edx.student.account.AccountRecoveryView', function() {
var model = null,
view = null,
requests = null,
EMAIL = 'xsy@edx.org',
FORM_DESCRIPTION = {
method: 'post',
submit_url: '/account/password',
fields: [{
name: 'email',
label: 'Secondary email',
defaultValue: '',
type: 'text',
required: true,
placeholder: 'place@holder.org',
instructions: 'Enter your secondary email.',
restrictions: {}
}]
};
var createAccountRecoveryView = function(that) {
// Initialize the account recovery model
model = new AccountRecoveryModel({}, {
url: FORM_DESCRIPTION.submit_url,
method: FORM_DESCRIPTION.method
});
// Initialize the account recovery view
view = new AccountRecoveryView({
fields: FORM_DESCRIPTION.fields,
model: model
});
// Spy on AJAX requests
requests = AjaxHelpers.requests(that);
};
var submitEmail = function(validationSuccess) {
// Create a fake click event
var clickEvent = $.Event('click');
// Simulate manual entry of an email address
$('#password-reset-email').val(EMAIL);
// If validationSuccess isn't passed, we avoid
// spying on `view.validate` twice
if (!_.isUndefined(validationSuccess)) {
// Force validation to return as expected
spyOn(view, 'validate').and.returnValue({
isValid: validationSuccess,
message: 'Submission was validated.'
});
}
// Submit the email address
view.submitForm(clickEvent);
};
beforeEach(function() {
setFixtures('<div id="password-reset-form" class="form-wrapper hidden"></div>');
TemplateHelpers.installTemplate('templates/student_account/account_recovery');
TemplateHelpers.installTemplate('templates/student_account/form_field');
});
it('allows the user to request account recovery', function() {
var syncSpy, passwordEmailSentSpy;
createAccountRecoveryView(this);
// We expect these events to be triggered upon a successful account recovery
syncSpy = jasmine.createSpy('syncEvent');
passwordEmailSentSpy = jasmine.createSpy('passwordEmailSentEvent');
view.listenTo(view.model, 'sync', syncSpy);
view.listenTo(view, 'account-recovery-email-sent', passwordEmailSentSpy);
// Submit the form, with successful validation
submitEmail(true);
// Verify that the client contacts the server with the expected data
AjaxHelpers.expectRequest(
requests, 'POST',
FORM_DESCRIPTION.submit_url,
$.param({email: EMAIL})
);
// Respond with status code 200
AjaxHelpers.respondWithJson(requests, {});
// Verify that the events were triggered
expect(syncSpy).toHaveBeenCalled();
expect(passwordEmailSentSpy).toHaveBeenCalled();
// Verify that account recovery view has been removed
expect($(view.el).html().length).toEqual(0);
});
it('validates the email field', function() {
createAccountRecoveryView(this);
// Submit the form, with successful validation
submitEmail(true);
// Verify that validation of the email field occurred
expect(view.validate).toHaveBeenCalledWith($('#password-reset-email')[0]);
// Verify that no submission errors are visible
expect(view.$formFeedback.find('.' + view.formErrorsJsHook).length).toEqual(0);
});
it('displays account recovery validation errors', function() {
createAccountRecoveryView(this);
// Submit the form, with failed validation
submitEmail(false);
// Verify that submission errors are visible
expect(view.$formFeedback.find('.' + view.formErrorsJsHook).length).toEqual(1);
});
it('displays error if the server returns an error while sending account recovery email', function() {
createAccountRecoveryView(this);
submitEmail(true);
// Simulate an error from the LMS servers
AjaxHelpers.respondWithError(requests);
// Expect that an error is displayed
expect(view.$formFeedback.find('.' + view.formErrorsJsHook).length).toEqual(1);
// If we try again and succeed, the error should go away
submitEmail();
// This time, respond with status code 200
AjaxHelpers.respondWithJson(requests, {});
// Expect that the error is hidden
expect(view.$formFeedback.find('.' + view.formErrorsJsHook).length).toEqual(0);
});
});
});
}).call(this, define || RequireJS.define);

38
lms/static/js/student_account/models/AccountRecoveryModel.js Normal file
View File

@@ -0,0 +1,38 @@
(function(define) {
'use strict';
define(['jquery', 'backbone'],
function($, Backbone) {
return Backbone.Model.extend({
defaults: {
email: ''
},
ajaxType: '',
urlRoot: '',
initialize: function(attributes, options) {
this.ajaxType = options.method;
this.urlRoot = options.url;
},
sync: function(method, model) {
var headers = {
'X-CSRFToken': $.cookie('csrftoken')
};
// Only expects an email address.
$.ajax({
url: model.urlRoot,
type: model.ajaxType,
data: model.attributes,
headers: headers,
success: function() {
model.trigger('sync');
},
error: function(error) {
model.trigger('error', error);
}
});
}
});
});
}).call(this, define || RequireJS.define);

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

@@ -9,15 +9,19 @@
'js/student_account/models/LoginModel',
'js/student_account/models/PasswordResetModel',
'js/student_account/models/RegisterModel',
'js/student_account/models/AccountRecoveryModel',
'js/student_account/views/LoginView',
'js/student_account/views/PasswordResetView',
'js/student_account/views/RegisterView',
'js/student_account/views/InstitutionLoginView',
'js/student_account/views/HintedLoginView',
'js/student_account/views/AccountRecoveryView',
'edx-ui-toolkit/js/utils/html-utils',
'js/vendor/history'
],
function($, utility, _, _s, Backbone, LoginModel, PasswordResetModel, RegisterModel, LoginView,
PasswordResetView, RegisterView, InstitutionLoginView, HintedLoginView) {
function($, utility, _, _s, Backbone, LoginModel, PasswordResetModel, RegisterModel, AccountRecoveryModel,
LoginView, PasswordResetView, RegisterView, InstitutionLoginView, HintedLoginView, AccountRecoveryView,
HtmlUtils) {
return Backbone.View.extend({
tpl: '#access-tpl',
events: {
@@ -27,6 +31,7 @@
login: {},
register: {},
passwordHelp: {},
accountRecoveryHelp: {},
institutionLogin: {},
hintedLogin: {}
},
@@ -63,6 +68,7 @@
login: options.login_form_desc,
register: options.registration_form_desc,
reset: options.password_reset_form_desc,
account_recovery: options.account_recovery_form_desc,
institution_login: null,
hinted_login: null
};
@@ -74,6 +80,7 @@
this.hideAuthWarnings = options.hide_auth_warnings || false;
this.pipelineUserDetails = options.third_party_auth.pipeline_user_details;
this.enterpriseName = options.enterprise_name || '';
this.isAccountRecoveryFeatureEnabled = options.is_account_recovery_feature_enabled || false;
// The login view listens for 'sync' events from the reset model
this.resetModel = new PasswordResetModel({}, {
@@ -81,6 +88,11 @@
url: '#'
});
this.accountRecoveryModel = new AccountRecoveryModel({}, {
method: 'GET',
url: '#'
});
this.render();
// Once the third party error message has been shown once,
@@ -93,10 +105,14 @@
},
render: function() {
$(this.el).html(_.template(this.tpl)({
mode: this.activeForm
}));
HtmlUtils.setHtml(
$(this.el),
HtmlUtils.HTML(
_.template(this.tpl)({
mode: this.activeForm
})
)
)
this.postRender();
return this;
@@ -107,6 +123,9 @@
if (Backbone.history.getHash() === 'forgot-password-modal') {
this.resetPassword();
}
else if (Backbone.history.getHash() === 'account-recovery-modal') {
this.accountRecovery();
}
this.loadForm(this.activeForm);
},
@@ -126,6 +145,7 @@
fields: data.fields,
model: model,
resetModel: this.resetModel,
accountRecoveryModel: this.accountRecoveryModel,
thirdPartyAuth: this.thirdPartyAuth,
accountActivationMessages: this.accountActivationMessages,
platformName: this.platformName,
@@ -140,6 +160,9 @@
// Listen for 'password-help' event to toggle sub-views
this.listenTo(this.subview.login, 'password-help', this.resetPassword);
// Listen for 'account-recovery-help' event to toggle sub-views
this.listenTo(this.subview.login, 'account-recovery-help', this.accountRecovery);
// Listen for 'auth-complete' event so we can enroll/redirect the user appropriately.
this.listenTo(this.subview.login, 'auth-complete', this.authComplete);
},
@@ -160,6 +183,24 @@
$('.password-reset-form').focus();
},
account_recovery: function(data) {
this.accountRecoveryModel.ajaxType = data.method;
this.accountRecoveryModel.urlRoot = data.submit_url;
this.subview.accountRecoveryHelp = new AccountRecoveryView({
fields: data.fields,
model: this.accountRecoveryModel
});
// Listen for 'account-recovery-email-sent' event to toggle sub-views
this.listenTo(
this.subview.accountRecoveryHelp, 'account-recovery-email-sent', this.passwordEmailSent
);
// Focus on the form
$('.password-reset-form').focus();
},
register: function(data) {
var model = new RegisterModel({}, {
method: data.method,
@@ -216,6 +257,19 @@
this.element.scrollTop($('#password-reset-anchor'));
},
accountRecovery: function() {
if (this.isAccountRecoveryFeatureEnabled) {
window.analytics.track('edx.bi.account_recovery.viewed', {
category: 'user-engagement'
});
this.element.hide($(this.el).find('#login-anchor'));
this.loadForm('account_recovery');
this.element.scrollTop($('#password-reset-anchor'));
}
},
toggleForm: function(e) {
var type = $(e.currentTarget).data('type'),
$form = $('#' + type + '-form'),

39
lms/static/js/student_account/views/AccountRecoveryView.js Normal file
View File

@@ -0,0 +1,39 @@
(function(define) {
'use strict';
define([
'jquery',
'js/student_account/views/FormView'
],
function($, FormView) {
return FormView.extend({
el: '#password-reset-form',
tpl: '#account_recovery-tpl',
events: {
'click .js-reset': 'submitForm'
},
formType: 'password-reset',
requiredStr: '',
optionalStr: '',
submitButton: '.js-reset',
preRender: function() {
this.element.show($(this.el));
this.element.show($(this.el).parent());
this.listenTo(this.model, 'sync', this.saveSuccess);
},
saveSuccess: function() {
this.trigger('account-recovery-email-sent');
// Destroy the view (but not el) and unbind events
this.$el.empty().off();
this.stopListening();
}
});
});
}).call(this, define || RequireJS.define);

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

@@ -55,10 +55,15 @@
render: function(html) {
var fields = html || '';
$(this.el).html(_.template(this.tpl)({
fields: fields
}));
HtmlUtils.setHtml(
$(this.el),
HtmlUtils.HTML(
_.template(this.tpl)({
fields: fields,
HtmlUtils: HtmlUtils
})
)
)
this.postRender();
return this;
@@ -134,6 +139,12 @@
this.trigger('password-help');
},
accountRecovery: function(event) {
event.preventDefault();
this.trigger('account-recovery-help');
},
getFormData: function() {
var obj = {},
$form = this.$form,

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

@@ -23,6 +23,7 @@
events: {
'click .js-login': 'submitForm',
'click .forgot-password': 'forgotPassword',
'click .account-recovery': 'accountRecovery',
'click .login-provider': 'thirdPartyAuth'
},
formType: 'login',
@@ -45,6 +46,7 @@
this.errorMessage = data.thirdPartyAuth.errorMessage || '';
this.platformName = data.platformName;
this.resetModel = data.resetModel;
this.accountRecoveryModel = data.accountRecoveryModel;
this.supportURL = data.supportURL;
this.passwordResetSupportUrl = data.passwordResetSupportUrl;
this.createAccountOption = data.createAccountOption;
@@ -55,27 +57,32 @@
this.listenTo(this.model, 'sync', this.saveSuccess);
this.listenTo(this.resetModel, 'sync', this.resetEmail);
this.listenTo(this.accountRecoveryModel, 'sync', this.resetEmail);
},
render: function(html) {
var fields = html || '';
$(this.el).html(_.template(this.tpl)({
// We pass the context object to the template so that
// we can perform variable interpolation using sprintf
context: {
fields: fields,
currentProvider: this.currentProvider,
syncLearnerProfileData: this.syncLearnerProfileData,
providers: this.providers,
hasSecondaryProviders: this.hasSecondaryProviders,
platformName: this.platformName,
createAccountOption: this.createAccountOption,
pipelineUserDetails: this.pipelineUserDetails,
enterpriseName: this.enterpriseName
}
}));
HtmlUtils.setHtml(
$(this.el),
HtmlUtils.HTML(
_.template(this.tpl)({
// We pass the context object to the template so that
// we can perform variable interpolation using sprintf
context: {
fields: fields,
currentProvider: this.currentProvider,
syncLearnerProfileData: this.syncLearnerProfileData,
providers: this.providers,
hasSecondaryProviders: this.hasSecondaryProviders,
platformName: this.platformName,
createAccountOption: this.createAccountOption,
pipelineUserDetails: this.pipelineUserDetails,
enterpriseName: this.enterpriseName
}
})
)
)
this.postRender();
return this;
@@ -124,6 +131,13 @@
this.clearPasswordResetSuccess();
},
accountRecovery: function(event) {
event.preventDefault();
this.trigger('account-recovery-help');
this.clearPasswordResetSuccess();
},
postFormSubmission: function() {
this.clearPasswordResetSuccess();
},

1
lms/static/lms/js/spec/main.js
View File

@@ -787,6 +787,7 @@
'js/spec/student_account/login_spec.js',
'js/spec/student_account/logistration_factory_spec.js',
'js/spec/student_account/password_reset_spec.js',
'js/spec/student_account/account_recovery_spec.js',
'js/spec/student_account/register_spec.js',
'js/spec/student_account/shoppingcart_spec.js',
'js/spec/verify_student/image_input_spec.js',

13
lms/templates/student_account/account_recovery.underscore Normal file
View File

@@ -0,0 +1,13 @@
<div class="js-form-feedback" aria-live="assertive" tabindex="-1">
</div>
<h2><%- gettext("Account Recovery") %></h2>
<form id="account-recovery" class="account-recovery-form password-reset-form" tabindex="-1" method="POST">
<p class="action-label"><%- gettext("Please enter your secondary email address below and we will send you instructions for recovering your account and setting a new password.") %></p>
<%= HtmlUtils.HTML(fields) %>
<button type="submit" class="action action-primary action-update js-reset"><%- gettext("Recover my account") %></button>
</form>

2
lms/templates/student_account/login_and_register.html
View File

@@ -30,7 +30,7 @@
</%block>
<%block name="header_extras">
% for template_name in ["account", "access", "form_field", "login", "register", "institution_login", "institution_register", "password_reset", "hinted_login"]:
% for template_name in ["account", "access", "form_field", "login", "register", "institution_login", "institution_register", "password_reset", "account_recovery", "hinted_login"]:
<script type="text/template" id="${template_name}-tpl">
<%static:include path="student_account/${template_name}.underscore" />
</script>