keeweb/app/scripts/views/key-change-view.js

130 lines
4.1 KiB
JavaScript
Raw Normal View History

2019-09-15 14:16:32 +02:00
import Backbone from 'backbone';
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';
2017-01-31 07:50:28 +01:00
const KeyChangeView = Backbone.View.extend({
template: require('templates/key-change.hbs'),
events: {
'keydown .key-change__pass': 'inputKeydown',
'keydown .key-change__pass-repeat': 'inputKeydown',
'click .key-change__keyfile': 'keyFileClicked',
'change .key-change__file': 'keyFileSelected',
'click .key-change__btn-ok': 'accept',
'click .key-change__btn-cancel': 'cancel'
},
passwordInput: null,
passwordRepeatInput: null,
inputEl: null,
2019-08-18 10:17:09 +02:00
initialize() {
this.passwordInput = new SecureInput();
},
2019-08-18 10:17:09 +02:00
render() {
2016-07-03 18:46:43 +02:00
this.keyFileName = this.model.file.get('keyFileName') || null;
this.keyFileData = null;
2017-01-31 07:50:28 +01:00
const repeat = this.model.expired;
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,
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
});
2019-08-18 08:05:38 +02: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);
this.inputEl.focus();
if (repeat) {
this.passwordRepeatInput = new SecureInput();
this.passwordRepeatInput.reset();
this.passwordRepeatInput.setElement(this.$el.find('.key-change__pass-repeat'));
}
},
2019-08-18 10:17:09 +02:00
remove() {
Backbone.View.prototype.remove.apply(this);
},
2019-08-18 10:17:09 +02:00
inputKeydown(e) {
2017-01-31 07:50:28 +01:00
const code = e.keyCode || e.which;
if (code === Keys.DOM_VK_RETURN) {
this.accept();
}
},
2019-08-18 10:17:09 +02:00
keyFileClicked() {
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();
this.inputEl.focus();
},
2019-08-18 10:17:09 +02:00
keyFileSelected(e) {
2017-01-31 07:50:28 +01:00
const file = e.target.files[0];
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 => {
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 = () => {
Alerts.error({ header: Locale.openFailedRead });
};
reader.readAsArrayBuffer(file);
} else {
this.$el.find('.key-change__keyfile-name').html('');
}
this.inputEl.focus();
},
2019-08-18 10:17:09 +02:00
accept() {
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');
}
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;
}
}
this.trigger('accept', {
2016-07-03 18:46:43 +02:00
file: this.model.file,
expired: this.model.expired,
password: this.passwordInput.value,
keyFileName: this.keyFileName,
keyFileData: this.keyFileData
});
},
2019-08-18 10:17:09 +02:00
cancel() {
this.trigger('cancel');
}
});
2019-09-15 14:16:32 +02:00
export { KeyChangeView };