2019-09-16 20:42:33 +02:00
|
|
|
import { View } from 'framework/views/view';
|
2019-09-15 14:16:32 +02:00
|
|
|
import { SecureInput } from 'comp/browser/secure-input';
|
|
|
|
import { Alerts } from 'comp/ui/alerts';
|
|
|
|
import { Keys } from 'const/keys';
|
|
|
|
import { Locale } from 'util/locale';
|
|
|
|
import { InputFx } from 'util/ui/input-fx';
|
2019-09-16 07:13:56 +02:00
|
|
|
import template from 'templates/key-change.hbs';
|
2016-01-16 21:32:50 +01:00
|
|
|
|
2019-09-16 07:13:56 +02:00
|
|
|
class KeyChangeView extends View {
|
|
|
|
parent = '.app__body';
|
2016-01-16 21:32:50 +01:00
|
|
|
|
2019-09-16 07:13:56 +02:00
|
|
|
template = template;
|
|
|
|
|
|
|
|
events = {
|
2016-01-16 21:32:50 +01:00
|
|
|
'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'
|
2019-09-16 07:13:56 +02:00
|
|
|
};
|
2016-01-16 21:32:50 +01:00
|
|
|
|
2019-09-16 07:13:56 +02:00
|
|
|
passwordInput = null;
|
|
|
|
passwordRepeatInput = null;
|
|
|
|
inputEl = null;
|
2016-01-16 21:32:50 +01:00
|
|
|
|
2019-09-16 07:13:56 +02:00
|
|
|
constructor(model) {
|
|
|
|
super(model);
|
2016-01-16 21:32:50 +01:00
|
|
|
this.passwordInput = new SecureInput();
|
2019-09-16 07:13:56 +02:00
|
|
|
}
|
2016-01-16 21:32:50 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
render() {
|
2019-09-17 21:39:06 +02:00
|
|
|
this.keyFileName = this.model.file.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;
|
2019-09-16 07:13:56 +02:00
|
|
|
super.render({
|
2019-09-17 21:39:06 +02:00
|
|
|
fileName: this.model.file.name,
|
|
|
|
keyFileName: this.model.file.keyFileName,
|
2016-07-03 18:46:43 +02:00
|
|
|
title: this.model.expired ? Locale.keyChangeTitleExpired : Locale.keyChangeTitleRemote,
|
2019-08-18 08:05:38 +02:00
|
|
|
message: this.model.expired
|
|
|
|
? Locale.keyChangeMessageExpired
|
|
|
|
: Locale.keyChangeMessageRemote,
|
2019-08-18 10:17:09 +02:00
|
|
|
repeat
|
2016-01-16 21:32:50 +01:00
|
|
|
});
|
2019-08-18 08:05:38 +02:00
|
|
|
this.$el
|
|
|
|
.find('.key-change__keyfile-name')
|
|
|
|
.text(this.keyFileName ? ': ' + this.keyFileName : '');
|
2016-01-16 21:32:50 +01:00
|
|
|
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'));
|
|
|
|
}
|
2019-09-16 07:13:56 +02:00
|
|
|
}
|
2016-01-16 21:32:50 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
inputKeydown(e) {
|
2019-09-16 07:13:56 +02:00
|
|
|
if (e.which === Keys.DOM_VK_RETURN) {
|
2016-01-16 21:32:50 +01:00
|
|
|
this.accept();
|
|
|
|
}
|
2019-09-16 07:13:56 +02:00
|
|
|
}
|
2016-01-16 21:32:50 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
keyFileClicked() {
|
2016-01-16 21:32:50 +01:00
|
|
|
if (this.keyFileName) {
|
|
|
|
this.keyFileName = null;
|
|
|
|
this.keyFile = null;
|
2020-05-09 20:15:46 +02:00
|
|
|
this.$el.find('.key-change__keyfile-name').empty();
|
2016-01-16 21:32:50 +01:00
|
|
|
}
|
2020-06-01 16:53:51 +02:00
|
|
|
this.$el.find('.key-change__file').val(null).click();
|
2016-01-16 21:32:50 +01:00
|
|
|
this.inputEl.focus();
|
2019-09-16 07:13:56 +02:00
|
|
|
}
|
2016-01-16 21:32:50 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
keyFileSelected(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();
|
2020-06-01 16:53:51 +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 {
|
2020-05-09 20:15:46 +02:00
|
|
|
this.$el.find('.key-change__keyfile-name').empty();
|
2016-01-16 21:32:50 +01:00
|
|
|
}
|
|
|
|
this.inputEl.focus();
|
2019-09-16 07:13:56 +02:00
|
|
|
}
|
2016-01-16 21:32:50 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
accept() {
|
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;
|
|
|
|
}
|
|
|
|
}
|
2019-09-16 07:13:56 +02:00
|
|
|
this.emit('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
|
|
|
|
});
|
2019-09-16 07:13:56 +02:00
|
|
|
}
|
2016-01-16 21:32:50 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
cancel() {
|
2019-09-16 07:13:56 +02:00
|
|
|
this.emit('cancel');
|
2016-01-16 21:32:50 +01:00
|
|
|
}
|
2019-09-16 07:13:56 +02:00
|
|
|
}
|
2016-01-16 21:32:50 +01:00
|
|
|
|
2019-09-15 14:16:32 +02:00
|
|
|
export { KeyChangeView };
|