auto-type filter

app/scripts/auto-type/index.js

@@ -148,7 +148,7 @@ var AutoType = {
 
     selectEntryAndRun: function() {
         this.getActiveWindowTitle((e, title, url) => {
-            let filter = { title, url };
+            let filter = { title, url, text: '' };
             let entries = this.getMatchingEntries(filter);
             if (entries.length === 1) {
                 this.runAndHandleResult(entries[0]);

app/scripts/util/locale.js

@@ -256,7 +256,7 @@ var Locale = {
     autoTypeError: 'Auto-type error',
     autoTypeErrorGeneric: 'There was an error performing auto-type: {}',
     autoTypeErrorGlobal: 'To use system-wide shortcut, please focus the app where you want to type your password',
-    autoTypeHeader: 'Auto-Type: Select Entry',
+    autoTypeHeader: 'Auto-Type: Select',
 
     appSecWarn: 'Not Secure!',
     appSecWarnBody1: 'You have loaded this app with insecure connection. ' +

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

@@ -10,6 +10,7 @@ let AutoTypePopupView = Backbone.View.extend({
     template: require('templates/auto-type/auto-type-select.hbs'),
 
     events: {
+        'click .at-select__header-filter-clear': 'clearFilterText'
     },
 
     result: null,
@@ -20,12 +21,15 @@ let AutoTypePopupView = Backbone.View.extend({
         KeyHandler.onKey(Keys.DOM_VK_RETURN, this.enterPressed, this, false, 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);
         KeyHandler.on('keypress:auto-type', this.keyPressed.bind(this));
         KeyHandler.setModal('auto-type');
     },
 
     render() {
-        this.renderTemplate(this.model);
+        this.renderTemplate({
+            filterText: this.model.filter.text
+        });
         document.activeElement.blur();
         return this;
     },
@@ -35,6 +39,7 @@ let AutoTypePopupView = Backbone.View.extend({
         KeyHandler.offKey(Keys.DOM_VK_RETURN, this.enterPressed, this);
         KeyHandler.offKey(Keys.DOM_VK_UP, this.upPressed, this);
         KeyHandler.offKey(Keys.DOM_VK_DOWN, this.downPressed, this);
+        KeyHandler.offKey(Keys.DOM_VK_BACK_SPACE, this.backSpacePressed, this);
         KeyHandler.off('keypress:auto-type');
         KeyHandler.setModal(null);
         Backbone.View.prototype.remove.apply(this, arguments);
@@ -60,7 +65,22 @@ let AutoTypePopupView = Backbone.View.extend({
     },
 
     keyPressed(e) {
-        // let char = e.charCode;
+        if (e.which) {
+            this.model.filter.text += String.fromCharCode(e.which);
+            this.render();
+        }
+    },
+
+    backSpacePressed() {
+        if (this.model.filter.text) {
+            this.model.filter.text = this.model.filter.text.substr(0, this.model.filter.text.length - 1);
+            this.render();
+        }
+    },
+
+    clearFilterText() {
+        this.model.filter.text = '';
+        this.render();
     },
 
     mainWindowBlur() {

app/styles/areas/_auto-type.scss

@@ -6,4 +6,28 @@
   z-index: $z-index-no-modal;
   opacity: 1;
   padding: $base-padding;
+
+  &__header {
+    @include display(flex);
+    &-text {
+      @include flex(1 1);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-right: $base-padding-h;
+    }
+    &-filter {
+      @include flex(auto 0);
+      position: relative;
+    }
+    &-filter-input {
+      width: 200px;
+    }
+    &-filter-clear {
+      cursor: pointer;
+      position: absolute;
+      right: .7em;
+      top: .7em;
+    }
+  }
 }

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

@@ -1,3 +1,11 @@
 <div class="at-select">
-    <h1>{{res 'autoTypeHeader'}}</h1>
+    <div class="at-select__header">
+        <h1 class="at-select__header-text">{{res 'autoTypeHeader'}}</h1>
+        {{#if filterText}}
+        <div class="at-select__header-filter">
+            <input type="text" readonly value="{{filterText}}" class="at-select__header-filter-input" />
+            <i class="at-select__header-filter-clear fa fa-times" />
+        </div>
+        {{/if}}
+    </div>
 </div>