74 lines
1.7 KiB
JavaScript
74 lines
1.7 KiB
JavaScript
const _ = require('underscore');
|
|
const CoreView = require('backbone/core-view');
|
|
const template = require('./password-confirmation.tpl');
|
|
const checkAndBuildOpts = require('builder/helpers/required-opts');
|
|
|
|
const REQUIRED_OPTS = [
|
|
'modalModel',
|
|
'onPasswordTyped'
|
|
];
|
|
|
|
/**
|
|
* Password Confirmation Modal
|
|
*
|
|
* Modal used for password validated forms, so
|
|
* the user needs to type the password in to
|
|
* save form changes
|
|
*/
|
|
|
|
module.exports = CoreView.extend({
|
|
events: {
|
|
'click .js-ok': '_onConfirm',
|
|
'click .js-cancel': '_closeDialog',
|
|
'keydown #password-confirmation-form': '_onEnterPressed',
|
|
'input .js-password': '_toggleConfirmButton'
|
|
},
|
|
|
|
initialize: function (options) {
|
|
checkAndBuildOpts(options, REQUIRED_OPTS, this);
|
|
this._isConfirmDisabled = true;
|
|
},
|
|
|
|
render: function () {
|
|
this.$el.html(
|
|
template({
|
|
isConfirmDisabled: this._isConfirmDisabled,
|
|
updatePassword: this.options.updatePassword
|
|
})
|
|
);
|
|
|
|
this._okButton = this.$('.js-ok');
|
|
return this;
|
|
},
|
|
|
|
_toggleConfirmButton: function (event) {
|
|
const passwordInput = event.target;
|
|
this._isConfirmDisabled = _.isEmpty(passwordInput.value);
|
|
this._okButton.toggleClass('is-disabled', this._isConfirmDisabled);
|
|
},
|
|
|
|
_onConfirm: function (event) {
|
|
this.killEvent(event);
|
|
|
|
if (this._isConfirmDisabled) {
|
|
return;
|
|
}
|
|
|
|
const passwordValue = this.$('#password-confirmation').val();
|
|
this._onPasswordTyped && this._onPasswordTyped(passwordValue);
|
|
this._closeDialog();
|
|
},
|
|
|
|
_onEnterPressed: function (event) {
|
|
if (event.keyCode !== 13) {
|
|
return;
|
|
}
|
|
|
|
this._onConfirm(event);
|
|
},
|
|
|
|
_closeDialog: function () {
|
|
this._modalModel.destroy();
|
|
}
|
|
});
|