fix #260: confirmation in password change dialog

app/scripts/util/input-fx.js

@@ -0,0 +1,10 @@
+'use strict';
+
+let InputFx = {
+    shake: function(el) {
+        el.addClass('input-shake');
+        setTimeout(() => el.removeClass('input-shake'), 1000);
+    }
+};
+
+module.exports = InputFx;

app/scripts/util/locale.js

@@ -92,6 +92,7 @@ var Locale = {
     keyChangeMessageRemote: 'Master key was changed for this database. Please enter a new key',
     keyChangeTitleExpired: 'Master Key Expired',
     keyChangeMessageExpired: 'Master key for this database is expired. Please enter a new key',
+    keyChangeRepeatPassword: 'Password, once again',
 
     iconFavTitle: 'Download and use website favicon',
     iconSelCustom: 'Select custom icon',

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

@@ -4,6 +4,7 @@ var Backbone = require('backbone'),
     SecureInput = require('../comp/secure-input'),
     Alerts = require('../comp/alerts'),
     Locale = require('../util/locale'),
+    InputFx = require('../util/input-fx'),
     Keys = require('../const/keys');
 
 var KeyChangeView = Backbone.View.extend({
@@ -11,6 +12,7 @@ var KeyChangeView = Backbone.View.extend({
 
     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',
@@ -18,6 +20,7 @@ var KeyChangeView = Backbone.View.extend({
     },
 
     passwordInput: null,
+    passwordRepeatInput: null,
     inputEl: null,
 
     initialize: function() {
@@ -27,16 +30,24 @@ var KeyChangeView = Backbone.View.extend({
     render: function() {
         this.keyFileName = this.model.file.get('keyFileName') || null;
         this.keyFileData = null;
+        let 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
+            message: this.model.expired ? Locale.keyChangeMessageExpired : Locale.keyChangeMessageRemote,
+            repeat: 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: function() {
@@ -82,6 +93,22 @@ var KeyChangeView = Backbone.View.extend({
     },
 
     accept: function() {
+        if (!this.passwordInput.value.byteLength) {
+            this.passwordInput.el.focus();
+            this.passwordRepeatInput.el.addClass('input--error');
+            InputFx.shake(this.passwordInput.el);
+            return;
+        } else {
+            this.passwordRepeatInput.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,

app/scripts/views/open-view.js

@@ -11,6 +11,7 @@ var Backbone = require('backbone'),
     Logger = require('../util/logger'),
     Locale = require('../util/locale'),
     UrlUtil = require('../util/url-util'),
+    InputFx = require('../util/input-fx'),
     Storage = require('../storage');
 
 var logger = new Logger('open-view');
@@ -470,7 +471,9 @@ var OpenView = Backbone.View.extend({
             this.focusInput();
             this.inputEl[0].selectionStart = 0;
             this.inputEl[0].selectionEnd = this.inputEl.val().length;
-            if (err.code !== 'InvalidKey') {
+            if (err.code === 'InvalidKey') {
+                InputFx.shake(this.inputEl);
+            } else {
                 if (err.notFound) {
                     err = Locale.openErrorFileNotFound;
                 }

app/styles/areas/_key-change.scss

@@ -23,12 +23,13 @@
     @include display(flex);
     @include align-items(flex-start);
     @include flex-direction(column);
+    @include flex-shrink(0);
     margin: $base-spacing 0;
   }
   &__input {
     @include align-self(center);
   }
-  input[type=password].key-change__pass {
+  input[type=password].key-change__pass, input[type=password].key-change__pass-repeat {
     font-size: $large-pass-font-size;
     margin: $small-spacing 0 0;
   }

app/styles/common/_fx.scss

@@ -21,6 +21,10 @@
   @include filter(grayscale(1));
 }
 
+.input-shake {
+  @include animation(shake 50s cubic-bezier(.36,.07,.19,.97) 0s);
+}
+
 @include keyframes(flip3d) {
   from {
     @include transform(rotateY(0));

app/templates/key-change.hbs

@@ -5,10 +5,15 @@
         <div class="key-change__message">{{message}}:</div>
         <div class="key-change__input">
             <input class="key-change__file hide-by-pos" type="file"  />
-            <input class="key-change__pass" type="password" size="30" autocomplete="off" maxlength="1024" autofocus />
+            <input class="key-change__pass" type="password" size="30" autocomplete="off" maxlength="1024" autofocus
+                placeholder="{{Res 'password'}}" />
             <div class="key-change__keyfile">
                 <i class="fa fa-key"></i> {{res 'openKeyFile'}}<span class="key-change__keyfile-name"></span>
             </div>
+            {{#if repeat}}
+            <input class="key-change__pass-repeat" type="password" size="30" autocomplete="off" maxlength="1024"
+                placeholder="Repeat password" />
+            {{/if}}
         </div>
     </div>
     <div class="key-change__buttons">

release-notes.md

@@ -9,6 +9,7 @@ Release notes
 `+` select field contents on search hotkey  
 `+` option to preload default config and file  
 `+` save displayed table columns  
+`+` confirmation in password change dialog  
 `-` fix app redraw in background  
 `-` fix idle timer on computer sleep