Merge branch 'dploeger-issue-10017' into develop

app/scripts/auto-type/index.js

@@ -9,6 +9,7 @@ const Logger = require('../util/logger');
 const Locale = require('../util/locale');
 const Timeouts = require('../const/timeouts');
 const AppSettingsModel = require('../models/app-settings-model');
+const AutoTypeSequenceType = require('../const/autotype-sequencetype');
 
 const logger = new Logger('auto-type');
 const clearTextAutoTypeLog = localStorage.autoTypeDebug;
@@ -53,8 +54,8 @@ const AutoType = {
         }
     },
 
-    runAndHandleResult(entry) {
-        this.run(entry, err => {
+    runAndHandleResult(result) {
+        this.run(result, err => {
             if (err) {
                 Alerts.error({
                     header: Locale.autoTypeError,
@@ -68,23 +69,30 @@ const AutoType = {
         }
     },
 
-    run(entry, callback) {
+    run(result, callback) {
         this.running = true;
-        const sequence = entry.getEffectiveAutoTypeSeq();
+        let sequence;
+        if (result.sequenceType === AutoTypeSequenceType.PASSWORD) {
+            sequence = '{PASSWORD}';
+        } else if (result.sequenceType === AutoTypeSequenceType.USERNAME) {
+            sequence = '{USERNAME}';
+        } else {
+            sequence = result.entry.getEffectiveAutoTypeSeq();
+        }
         logger.debug('Start', sequence);
         const ts = logger.ts();
         try {
             const parser = new AutoTypeParser(sequence);
             const runner = parser.parse();
             logger.debug('Parsed', this.printOps(runner.ops));
-            runner.resolve(entry, err => {
+            runner.resolve(result.entry, err => {
                 if (err) {
                     this.running = false;
                     logger.error('Resolve error', err);
                     return callback && callback(err);
                 }
                 logger.debug('Resolved', this.printOps(runner.ops));
-                if (entry.autoTypeObfuscation) {
+                if (result.entry.autoTypeObfuscation) {
                     try {
                         runner.obfuscate();
                     } catch (e) {

app/scripts/const/autotype-sequencetype.js

@@ -0,0 +1,7 @@
+const AutoTypeSequenceType = {
+    DEFAULT: 0,
+    USERNAME: 1,
+    PASSWORD: 2
+};
+
+module.exports = AutoTypeSequenceType;

app/scripts/locales/base.json

@@ -114,6 +114,7 @@
   "keyChangeTitleExpired": "Master Key Expired",
   "keyChangeMessageExpired": "Master key for this database is expired. Please enter a new key",
   "keyChangeRepeatPassword": "Password, once again",
+  "keyEnter": "Enter",
 
   "iconFavTitle": "Download and use website favicon",
   "iconSelCustom": "Select custom icon",
@@ -280,6 +281,9 @@
   "autoTypeMsgNoWindow": "We were unable to get active window title, start typing to search",
   "autoTypeMsgMatchedByWindow": "Select a password for {}",
   "autoTypeNoMatches": "no matches",
+  "autoTypeSelectionHint": "Type the autotype sequence",
+  "autoTypeSelectionHintAction": "Only type the password",
+  "autoTypeSelectionHintOpt": "Only type the username",
 
   "appSecWarn": "Not Secure!",
   "appSecWarnBody1": "You have loaded this app with an insecure connection. Someone may be watching you and stealing your passwords. We strongly advise you to stop, unless you clearly understand what you're doing.",

app/scripts/views/auto-type/auto-type-select-view.js

@@ -5,6 +5,8 @@ const Locale = require('../../util/locale');
 const AppSettingsModel = require('../../models/app-settings-model');
 const EntryPresenter = require('../../presenters/entry-presenter');
 const Scrollable = require('../../mixins/scrollable');
+const AutoTypeSequenceType = require('../../const/autotype-sequencetype');
+const FeatureDetector = require('../../util/feature-detector');
 
 const AutoTypePopupView = Backbone.View.extend({
     el: 'body',
@@ -26,6 +28,8 @@ const AutoTypePopupView = Backbone.View.extend({
         this.listenTo(Backbone, 'main-window-will-close', this.mainWindowWillClose);
         KeyHandler.onKey(Keys.DOM_VK_ESCAPE, this.escPressed, this, false, true);
         KeyHandler.onKey(Keys.DOM_VK_RETURN, this.enterPressed, this, false, true);
+        KeyHandler.onKey(Keys.DOM_VK_RETURN, this.actionEnterPressed, this, KeyHandler.SHORTCUT_ACTION, true);
+        KeyHandler.onKey(Keys.DOM_VK_RETURN, this.optEnterPressed, this, KeyHandler.SHORTCUT_OPT, true);
         KeyHandler.onKey(Keys.DOM_VK_UP, this.upPressed, this, false, true);
         KeyHandler.onKey(Keys.DOM_VK_DOWN, this.downPressed, this, false, true);
         KeyHandler.onKey(Keys.DOM_VK_BACK_SPACE, this.backSpacePressed, this, false, true);
@@ -54,7 +58,13 @@ const AutoTypePopupView = Backbone.View.extend({
         this.renderTemplate({
             filterText: this.model.filter.text,
             topMessage: topMessage,
-            itemsHtml: itemsHtml
+            selectionHintDefault: Locale.autoTypeSelectionHint,
+            selectionHintAction: Locale.autoTypeSelectionHintAction,
+            selectionHintOpt: Locale.autoTypeSelectionHintOpt,
+            itemsHtml: itemsHtml,
+            actionSymbol: FeatureDetector.actionShortcutSymbol(true),
+            altSymbol: FeatureDetector.altShortcutSymbol(true),
+            keyEnter: Locale.keyEnter
         });
         document.activeElement.blur();
         this.createScroll({
@@ -81,8 +91,14 @@ const AutoTypePopupView = Backbone.View.extend({
         this.trigger('result', this.result);
     },
 
-    closeWithResult() {
-        this.trigger('result', this.result);
+    closeWithResult(sequenceType) {
+        if (!sequenceType) {
+            sequenceType = AutoTypeSequenceType.DEFAULT;
+        }
+        this.trigger('result', {
+            entry: this.result,
+            sequenceType: sequenceType
+        });
     },
 
     escPressed() {
@@ -97,6 +113,14 @@ const AutoTypePopupView = Backbone.View.extend({
         this.closeWithResult();
     },
 
+    actionEnterPressed() {
+        this.closeWithResult(AutoTypeSequenceType.PASSWORD);
+    },
+
+    optEnterPressed() {
+        this.closeWithResult(AutoTypeSequenceType.USERNAME);
+    },
+
     upPressed(e) {
         e.preventDefault();
         const activeIndex = this.entries.indexOf(this.result) - 1;

app/styles/areas/_auto-type.scss

@@ -1,7 +1,9 @@
 .at-select {
   @include position(absolute, 0 null null 0);
   @include size(100%);
-  @include th { background-color: th(background-color); }
+  @include th {
+    background-color: th(background-color);
+  }
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -52,13 +54,26 @@
       margin-right: $base-padding-h;
     }
   }
+  &__hint {
+    flex: 0.5 0;
+    margin-bottom: $base-padding-v * 2;
+    text-align: right;
+    &-text {
+      flex: 1 1;
+      font-size: .8em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: $base-padding-h;
+    }
+  }
   &__items {
     flex: 1;
     @include scrollbar-on-hover;
     margin-bottom: $base-padding-v;
     position: relative;
     overflow: hidden;
-    >.scroller {
+    > .scroller {
       display: flex;
       flex-direction: row;
       justify-content: center;
@@ -78,10 +93,19 @@
       overflow: hidden;
       text-overflow: ellipsis;
       word-wrap: break-word;
-      &:first-of-type { width: 1em; text-align: center; }
-      &:nth-of-type(2) { width: 50%; }
-      &:nth-of-type(3) { width: 25%; }
-      &:nth-of-type(4) { width: 25%; }
+      &:first-of-type {
+        width: 1em;
+        text-align: center;
+      }
+      &:nth-of-type(2) {
+        width: 50%;
+      }
+      &:nth-of-type(3) {
+        width: 25%;
+      }
+      &:nth-of-type(4) {
+        width: 25%;
+      }
     }
   }
   &__item {

app/templates/auto-type/auto-type-select.hbs

@@ -1,6 +1,11 @@
 <div class="at-select">
     <div class="at-select__header">
         <h1 class="at-select__header-text">{{res 'autoTypeHeader'}}</h1>
+        <div class="at-select__hint">
+            <div class="at-select__hint-text"><span class="shortcut">{{keyEnter}}</span>: {{selectionHintDefault}}</div>
+            <div class="at-select__hint-text"><span class="shortcut">{{actionSymbol}} {{keyEnter}}</span>: {{selectionHintAction}}</div>
+            <div class="at-select__hint-text"><span class="shortcut">{{altSymbol}} {{keyEnter}}</span>: {{selectionHintOpt}}</div>
+        </div>
         {{#if filterText}}
         <div class="at-select__header-filter">
             <input type="text" readonly value="{{filterText}}" class="at-select__header-filter-input" />