118 lines
3.8 KiB
JavaScript
118 lines
3.8 KiB
JavaScript
/**
|
|
* Reverification flow.
|
|
*
|
|
* This flow allows students who have a denied or expired verification
|
|
* to re-submit face and ID photos. It re-uses most of the same sub-views
|
|
* as the payment/verification flow.
|
|
*
|
|
*/
|
|
|
|
var edx = edx || {};
|
|
|
|
(function($, _, Backbone, gettext) {
|
|
'use strict';
|
|
|
|
edx.verify_student = edx.verify_student || {};
|
|
|
|
edx.verify_student.ReverifyView = Backbone.View.extend({
|
|
el: '#reverify-container',
|
|
|
|
stepOrder: [
|
|
'face-photo-step',
|
|
'id-photo-step',
|
|
'review-photos-step',
|
|
'reverify-success-step'
|
|
],
|
|
stepViews: {},
|
|
|
|
initialize: function(obj) {
|
|
this.errorModel = obj.errorModel || null;
|
|
this.initializeStepViews(obj.stepInfo || {});
|
|
this.currentStepIndex = 0;
|
|
},
|
|
|
|
initializeStepViews: function(stepInfo) {
|
|
var verificationModel, stepViewConstructors, nextStepTitles;
|
|
|
|
// We need to initialize this here, because
|
|
// outside of this method the subview classes
|
|
// might not yet have been loaded.
|
|
stepViewConstructors = {
|
|
'face-photo-step': edx.verify_student.FacePhotoStepView,
|
|
'id-photo-step': edx.verify_student.IDPhotoStepView,
|
|
'review-photos-step': edx.verify_student.ReviewPhotosStepView,
|
|
'reverify-success-step': edx.verify_student.ReverifySuccessStepView
|
|
};
|
|
|
|
nextStepTitles = [
|
|
gettext('Take a photo of your ID'),
|
|
gettext('Review your info'),
|
|
gettext('Confirm'),
|
|
''
|
|
];
|
|
|
|
// Create the verification model, which is shared
|
|
// among the different steps. This allows
|
|
// one step to save photos and another step
|
|
// to submit them.
|
|
verificationModel = new edx.verify_student.VerificationModel();
|
|
|
|
_.each(this.stepOrder, function(name, index) {
|
|
var stepView = new stepViewConstructors[name]({
|
|
errorModel: this.errorModel,
|
|
nextStepTitle: nextStepTitles[index],
|
|
stepData: stepInfo[name],
|
|
model: verificationModel
|
|
});
|
|
|
|
this.listenTo(stepView, 'next-step', this.nextStep);
|
|
this.listenTo(stepView, 'go-to-step', this.goToStep);
|
|
|
|
this.stepViews[name] = stepView;
|
|
}, this);
|
|
},
|
|
|
|
render: function() {
|
|
this.renderCurrentStep();
|
|
return this;
|
|
},
|
|
|
|
renderCurrentStep: function() {
|
|
var stepView, $stepEl;
|
|
|
|
// Get or create the step container
|
|
$stepEl = $('#current-step-container');
|
|
if (!$stepEl.length) {
|
|
$stepEl = edx.HtmlUtils.append(
|
|
$(this.el),
|
|
edx.HtmlUtils.HTML('<div id="current-step-container"></div>').toString()
|
|
);
|
|
}
|
|
|
|
// Render the step subview
|
|
// When the view is rendered, it will overwrite the existing step in the DOM.
|
|
stepView = this.stepViews[this.stepOrder[this.currentStepIndex]];
|
|
stepView.el = $stepEl;
|
|
stepView.render();
|
|
},
|
|
|
|
nextStep: function() {
|
|
this.currentStepIndex = Math.min(
|
|
this.currentStepIndex + 1,
|
|
this.stepOrder.length - 1
|
|
);
|
|
this.render();
|
|
},
|
|
|
|
goToStep: function(stepName) {
|
|
var stepIndex = _.indexOf(this.stepOrder, stepName);
|
|
|
|
if (stepIndex >= 0) {
|
|
this.currentStepIndex = stepIndex;
|
|
}
|
|
|
|
this.render();
|
|
}
|
|
});
|
|
}(jQuery, _, Backbone, gettext));
|