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

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';

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,

    initialize() {
        this.passwordInput = new SecureInput();
    },

    render() {
        this.keyFileName = this.model.file.get('keyFileName') || null;
        this.keyFileData = null;
        const repeat = this.model.expired;
        this.renderTemplate({
            fileName: this.model.file.get('name'),
            keyFileName: this.model.file.get('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'));
        }
    },

    remove() {
        Backbone.View.prototype.remove.apply(this);
    },

    inputKeydown(e) {
        const code = e.keyCode || e.which;
        if (code === Keys.DOM_VK_RETURN) {
            this.accept();
        }
    },

    keyFileClicked() {
        if (this.keyFileName) {
            this.keyFileName = null;
            this.keyFile = null;
            this.$el.find('.key-change__keyfile-name').html('');
        }
        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').html('');
        }
        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.trigger('accept', {
            file: this.model.file,
            expired: this.model.expired,
            password: this.passwordInput.value,
            keyFileName: this.keyFileName,
            keyFileData: this.keyFileData
        });
    },

    cancel() {
        this.trigger('cancel');
    }
});

export { KeyChangeView };