mirror of https://github.com/keeweb/keeweb.git
126 lines
4.0 KiB
JavaScript
126 lines
4.0 KiB
JavaScript
import { View } from 'framework/views/view';
|
|
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';
|
|
import template from 'templates/key-change.hbs';
|
|
|
|
class KeyChangeView extends View {
|
|
parent = '.app__body';
|
|
|
|
template = template;
|
|
|
|
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;
|
|
|
|
constructor(model) {
|
|
super(model);
|
|
this.passwordInput = new SecureInput();
|
|
}
|
|
|
|
render() {
|
|
this.keyFileName = this.model.file.keyFileName || null;
|
|
this.keyFileData = null;
|
|
const repeat = this.model.expired;
|
|
super.render({
|
|
fileName: this.model.file.name,
|
|
keyFileName: this.model.file.keyFileName,
|
|
title: this.model.expired ? Locale.keyChangeTitleExpired : Locale.keyChangeTitleRemote,
|
|
message: this.model.expired
|
|
? Locale.keyChangeMessageExpired
|
|
: Locale.keyChangeMessageRemote,
|
|
repeat
|
|
});
|
|
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'));
|
|
}
|
|
}
|
|
|
|
inputKeydown(e) {
|
|
if (e.which === Keys.DOM_VK_RETURN) {
|
|
this.accept();
|
|
}
|
|
}
|
|
|
|
keyFileClicked() {
|
|
if (this.keyFileName) {
|
|
this.keyFileName = null;
|
|
this.keyFile = null;
|
|
this.$el.find('.key-change__keyfile-name').empty();
|
|
}
|
|
this.$el.find('.key-change__file').val(null).click();
|
|
this.inputEl.focus();
|
|
}
|
|
|
|
keyFileSelected(e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
this.keyFileName = file.name;
|
|
this.keyFileData = e.target.result;
|
|
this.$el.find('.key-change__keyfile-name').text(': ' + this.keyFileName);
|
|
};
|
|
reader.onerror = () => {
|
|
Alerts.error({ header: Locale.openFailedRead });
|
|
};
|
|
reader.readAsArrayBuffer(file);
|
|
} else {
|
|
this.$el.find('.key-change__keyfile-name').empty();
|
|
}
|
|
this.inputEl.focus();
|
|
}
|
|
|
|
accept() {
|
|
if (!this.passwordInput.value.byteLength) {
|
|
this.passwordInput.el.focus();
|
|
this.passwordRepeatInput.el.addClass('input--error');
|
|
InputFx.shake(this.passwordInput.el);
|
|
return;
|
|
} else {
|
|
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.emit('accept', {
|
|
file: this.model.file,
|
|
expired: this.model.expired,
|
|
password: this.passwordInput.value,
|
|
keyFileName: this.keyFileName,
|
|
keyFileData: this.keyFileData
|
|
});
|
|
}
|
|
|
|
cancel() {
|
|
this.emit('cancel');
|
|
}
|
|
}
|
|
|
|
export { KeyChangeView };
|