2017-01-31 07:50:28 +01:00
|
|
|
const Backbone = require('backbone');
|
|
|
|
const SecureInput = require('../comp/secure-input');
|
|
|
|
const Alerts = require('../comp/alerts');
|
|
|
|
const Locale = require('../util/locale');
|
|
|
|
const InputFx = require('../util/input-fx');
|
|
|
|
const Keys = require('../const/keys');
|
2016-01-16 21:32:50 +01:00
|
|
|
|
2017-01-31 07:50:28 +01:00
|
|
|
const KeyChangeView = Backbone.View.extend({
|
2016-01-16 21:32:50 +01:00
|
|
|
template: require('templates/key-change.hbs'),
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'keydown .key-change__pass': 'inputKeydown',
|
2016-08-13 18:22:55 +02:00
|
|
|
'keydown .key-change__pass-repeat': 'inputKeydown',
|
2016-01-16 21:32:50 +01:00
|
|
|
'click .key-change__keyfile': 'keyFileClicked',
|
|
|
|
'change .key-change__file': 'keyFileSelected',
|
|
|
|
'click .key-change__btn-ok': 'accept',
|
|
|
|
'click .key-change__btn-cancel': 'cancel'
|
|
|
|
},
|
|
|
|
|
|
|
|
passwordInput: null,
|
2016-08-13 18:22:55 +02:00
|
|
|
passwordRepeatInput: null,
|
2016-01-16 21:32:50 +01:00
|
|
|
inputEl: null,
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.passwordInput = new SecureInput();
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2016-07-03 18:46:43 +02:00
|
|
|
this.keyFileName = this.model.file.get('keyFileName') || null;
|
2016-01-16 21:32:50 +01:00
|
|
|
this.keyFileData = null;
|
2017-01-31 07:50:28 +01:00
|
|
|
const repeat = this.model.expired;
|
2016-01-16 21:32:50 +01:00
|
|
|
this.renderTemplate({
|
2016-07-03 18:46:43 +02:00
|
|
|
fileName: this.model.file.get('name'),
|
|
|
|
keyFileName: this.model.file.get('keyFileName'),
|
|
|
|
title: this.model.expired ? Locale.keyChangeTitleExpired : Locale.keyChangeTitleRemote,
|
2016-08-13 18:22:55 +02:00
|
|
|
message: this.model.expired ? Locale.keyChangeMessageExpired : Locale.keyChangeMessageRemote,
|
|
|
|
repeat: repeat
|
2016-01-16 21:32:50 +01:00
|
|
|
});
|
|
|
|
this.$el.find('.key-change__keyfile-name').text(this.keyFileName ? ': ' + this.keyFileName : '');
|
|
|
|
this.inputEl = this.$el.find('.key-change__pass');
|
|
|
|
this.passwordInput.reset();
|
|
|
|
this.passwordInput.setElement(this.inputEl);
|
2016-08-13 18:22:55 +02:00
|
|
|
this.inputEl.focus();
|
|
|
|
if (repeat) {
|
|
|
|
this.passwordRepeatInput = new SecureInput();
|
|
|
|
this.passwordRepeatInput.reset();
|
|
|
|
this.passwordRepeatInput.setElement(this.$el.find('.key-change__pass-repeat'));
|
|
|
|
}
|
2016-01-16 21:32:50 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
remove: function() {
|
|
|
|
Backbone.View.prototype.remove.apply(this, arguments);
|
|
|
|
},
|
|
|
|
|
|
|
|
inputKeydown: function(e) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const code = e.keyCode || e.which;
|
2016-01-16 21:32:50 +01:00
|
|
|
if (code === Keys.DOM_VK_RETURN) {
|
|
|
|
this.accept();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
keyFileClicked: function() {
|
|
|
|
if (this.keyFileName) {
|
|
|
|
this.keyFileName = null;
|
|
|
|
this.keyFile = null;
|
|
|
|
this.$el.find('.key-change__keyfile-name').html('');
|
|
|
|
}
|
2019-08-16 23:05:39 +02:00
|
|
|
this.$el
|
|
|
|
.find('.key-change__file')
|
|
|
|
.val(null)
|
|
|
|
.click();
|
2016-01-16 21:32:50 +01:00
|
|
|
this.inputEl.focus();
|
|
|
|
},
|
|
|
|
|
|
|
|
keyFileSelected: function(e) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const file = e.target.files[0];
|
2016-01-16 21:32:50 +01:00
|
|
|
if (file) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const reader = new FileReader();
|
2016-07-17 13:30:38 +02:00
|
|
|
reader.onload = e => {
|
2016-01-16 21:32:50 +01:00
|
|
|
this.keyFileName = file.name;
|
|
|
|
this.keyFileData = e.target.result;
|
|
|
|
this.$el.find('.key-change__keyfile-name').text(': ' + this.keyFileName);
|
2016-07-17 13:30:38 +02:00
|
|
|
};
|
|
|
|
reader.onerror = () => {
|
2016-01-16 21:32:50 +01:00
|
|
|
Alerts.error({ header: Locale.openFailedRead });
|
|
|
|
};
|
|
|
|
reader.readAsArrayBuffer(file);
|
|
|
|
} else {
|
|
|
|
this.$el.find('.key-change__keyfile-name').html('');
|
|
|
|
}
|
|
|
|
this.inputEl.focus();
|
|
|
|
},
|
|
|
|
|
|
|
|
accept: function() {
|
2016-08-13 18:22:55 +02:00
|
|
|
if (!this.passwordInput.value.byteLength) {
|
|
|
|
this.passwordInput.el.focus();
|
|
|
|
this.passwordRepeatInput.el.addClass('input--error');
|
|
|
|
InputFx.shake(this.passwordInput.el);
|
|
|
|
return;
|
|
|
|
} else {
|
2017-05-17 20:32:46 +02:00
|
|
|
this.passwordInput.el.removeClass('input--error');
|
2016-08-13 18:22:55 +02:00
|
|
|
}
|
|
|
|
if (this.passwordRepeatInput) {
|
|
|
|
if (!this.passwordRepeatInput.value.equals(this.passwordInput.value)) {
|
|
|
|
this.passwordRepeatInput.el.addClass('input--error');
|
|
|
|
this.passwordRepeatInput.el.focus();
|
|
|
|
InputFx.shake(this.passwordRepeatInput.el);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
2016-01-16 21:32:50 +01:00
|
|
|
this.trigger('accept', {
|
2016-07-03 18:46:43 +02:00
|
|
|
file: this.model.file,
|
|
|
|
expired: this.model.expired,
|
2016-01-16 21:32:50 +01:00
|
|
|
password: this.passwordInput.value,
|
|
|
|
keyFileName: this.keyFileName,
|
|
|
|
keyFileData: this.keyFileData
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
cancel: function() {
|
|
|
|
this.trigger('cancel');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = KeyChangeView;
|