autofill ui for other types. autofill fixes

src/popup/app/components/cipherItemsComponent.js

@@ -0,0 +1,27 @@
+angular
+    .module('bit.components')
+
+    .component('cipherItems', {
+        bindings: {
+            ciphers: '<',
+            selectionTitle: '<',
+            onView: '&',
+            onSelected: '&'
+        },
+        templateUrl: 'app/components/views/cipherItems.html',
+        controller: function (i18nService) {
+            var ctrl = this;
+
+            ctrl.$onInit = function () {
+                ctrl.i18n = i18nService;
+
+                ctrl.view = function (cipher) {
+                    ctrl.onView()(cipher);
+                };
+
+                ctrl.select = function (cipher) {
+                    ctrl.onSelected()(cipher);
+                };
+            };
+        }
+    });

src/popup/app/components/views/actionButtons.html

@@ -1,7 +1,7 @@
 <div class="action-buttons">
     <div ng-if="$ctrl.cipher.type === $ctrl.constants.cipherType.login">
         <span class="btn-list" stop-prop stop-click title="{{$ctrl.i18n.launchWebsite}}" ng-click="$ctrl.launch()"
-              ng-if="$ctrl.cipher.login.uri && !$ctrl.showView">
+              ng-if="!$ctrl.showView" ng-class="{disabled: !$ctrl.cipher.login.uri}">
             <i class="fa fa-lg fa-share-square-o"></i>
         </span>
         <span class="btn-list" ng-click="$ctrl.onView($ctrl.cipher)" stop-prop stop-click title="{{i18n.view}}"
@@ -11,28 +11,38 @@
         <span class="btn-list" stop-prop stop-click title="{{$ctrl.i18n.copyUsername}}" ngclipboard
               ngclipboard-error="$ctrl.clipboardError(e)"
               ngclipboard-success="$ctrl.clipboardSuccess(e, $ctrl.i18n.username, 'Username')"
-              data-clipboard-text="{{$ctrl.cipher.login.username}}" ng-if="$ctrl.cipher.login.username">
+              data-clipboard-text="{{$ctrl.cipher.login.username}}" ng-class="{disabled: !$ctrl.cipher.login.username}">
             <i class="fa fa-lg fa-user"></i>
         </span>
         <span class="btn-list" stop-prop stop-click title="{{$ctrl.i18n.copyPassword}}" ngclipboard
               ngclipboard-error="$ctrl.clipboardError(e)"
               ngclipboard-success="$ctrl.clipboardSuccess(e, $ctrl.i18n.password, 'Password')"
-              data-clipboard-text="{{$ctrl.cipher.login.password}}" ng-if="$ctrl.cipher.login.password">
+              data-clipboard-text="{{$ctrl.cipher.login.password}}" ng-class="{disabled: !$ctrl.cipher.login.password}">
             <i class="fa fa-lg fa-key"></i>
         </span>
     </div>
     <div ng-if="$ctrl.cipher.type === $ctrl.constants.cipherType.card">
+        <span class="btn-list" ng-click="$ctrl.onView($ctrl.cipher)" stop-prop stop-click title="{{i18n.view}}"
+              ng-if="$ctrl.showView">
+            <i class="fa fa-lg fa-eye"></i>
+        </span>
         <span class="btn-list" stop-prop stop-click title="{{$ctrl.i18n.copyNumber}}" ngclipboard
               ngclipboard-error="$ctrl.clipboardError(e)"
               ngclipboard-success="$ctrl.clipboardSuccess(e, $ctrl.i18n.number, 'Card Number')"
-              data-clipboard-text="{{$ctrl.cipher.card.number}}" ng-if="$ctrl.cipher.card.number">
+              data-clipboard-text="{{$ctrl.cipher.card.number}}" ng-class="{disabled: !$ctrl.cipher.card.number}">
             <i class="fa fa-lg fa-hashtag"></i>
         </span>
         <span class="btn-list" stop-prop stop-click title="{{$ctrl.i18n.copySecurityCode}}" ngclipboard
               ngclipboard-error="$ctrl.clipboardError(e)"
               ngclipboard-success="$ctrl.clipboardSuccess(e, $ctrl.i18n.securityCode, 'Security Code')"
-              data-clipboard-text="{{$ctrl.cipher.card.code}}" ng-if="$ctrl.cipher.card.code">
+              data-clipboard-text="{{$ctrl.cipher.card.code}}" ng-class="{disabled: !$ctrl.cipher.card.code}">
             <i class="fa fa-lg fa-key"></i>
         </span>
     </div>
+    <div ng-if="$ctrl.cipher.type === $ctrl.constants.cipherType.identity">
+        <span class="btn-list" ng-click="$ctrl.onView($ctrl.cipher)" stop-prop stop-click title="{{i18n.view}}"
+              ng-if="$ctrl.showView">
+            <i class="fa fa-lg fa-eye"></i>
+        </span>
+    </div>
 </div>

src/popup/app/components/views/cipherItems.html

@@ -0,0 +1,11 @@
+<a href="#" stop-click ng-click="$ctrl.select(cipher)" class="list-section-item condensed"
+   title="{{$ctrl.selectionTitle}}" ng-repeat="cipher in $ctrl.ciphers track by $index">
+    <action-buttons cipher="cipher" show-view="true" on-view="$ctrl.view(cipher)"></action-buttons>
+    <icon cipher="cipher"></icon>
+    <span class="text">
+        {{cipher.name}}
+        <i class="fa fa-share-alt text-muted" ng-if="cipher.organizationId" title="{{$ctrl.i18n.shared}}"></i>
+        <i class="fa fa-paperclip text-muted" ng-if="cipher.attachments" title="{{$ctrl.i18n.attachments}}"></i>
+    </span>
+    <span class="detail">{{cipher.subTitle}}</span>
+</a>

src/popup/app/current/currentController.js

@@ -2,7 +2,7 @@ angular
     .module('bit.current')
 
     .controller('currentController', function ($scope, cipherService, utilsService, toastr, $window, $state, $timeout,
-        autofillService, $analytics, i18nService, totpService, tokenService) {
+        autofillService, $analytics, i18nService, totpService, tokenService, constantsService, $filter) {
         $scope.i18n = i18nService;
 
         var pageDetails = [],
@@ -10,7 +10,8 @@ angular
             domain = null,
             canAutofill = false;
 
-        $scope.ciphers = [];
+        $scope.loginCiphers = [];
+        $scope.otherCiphers = [];
         $scope.loaded = false;
         $scope.searchText = null;
         $('#search').focus();
@@ -44,10 +45,24 @@ angular
                         canAutofill = true;
                     });
 
-                cipherService.getAllDecryptedForDomain(domain).then(function (ciphers) {
+                var otherTypes = [constantsService.cipherType.card, constantsService.cipherType.identity];
+                cipherService.getAllDecryptedForDomain(domain, otherTypes).then(function (ciphers) {
+                    var loginCiphers = [],
+                        otherCiphers = [];
+
+                    for (var i = 0; i < ciphers.length; i++) {
+                        if (ciphers[i].type === constantsService.cipherType.login) {
+                            loginCiphers.push(ciphers[i]);
+                        }
+                        else {
+                            otherCiphers.push(ciphers[i]);
+                        }
+                    }
+
                     $timeout(function () {
+                        $scope.loginCiphers = $filter('orderBy')(loginCiphers, [sortUriMatch, sortLastUsed, 'name', 'subTitle']);
+                        $scope.otherCiphers = $filter('orderBy')(otherCiphers, [sortLastUsed, 'name', 'subTitle']);
                         $scope.loaded = true;
-                        $scope.ciphers = ciphers;
                     });
                 });
             });
@@ -94,14 +109,14 @@ angular
             });
         };
 
-        $scope.sortUriMatch = function (cipher) {
+        function sortUriMatch(cipher) {
             // exact matches should sort earlier.
             return url && url.startsWith(cipher.uri) ? 0 : 1;
-        };
+        }
 
-        $scope.sortLastUsed = function (cipher) {
+        function sortLastUsed(cipher) {
             return cipher.localData && cipher.localData.lastUsedDate ? -1 * cipher.localData.lastUsedDate : 0;
-        };
+        }
 
         $scope.searchVault = function () {
             $state.go('tabs.vault', {

src/popup/app/current/views/current.html

@@ -14,29 +14,30 @@
     </div>
 </div>
 <div class="content content-tabs">
-    <div ng-if="ciphers.length">
-        <div class="list">
-            <div class="list-grouped">
-                <a href="#" stop-click ng-click="fillCipher(cipher)" class="list-grouped-item condensed"
-                   title="{{i18n.autoFill}} {{cipher.name}}"
-                   ng-repeat="cipher in theCiphers = (ciphers | orderBy: [sortUriMatch, sortLastUsed, 'name', 'subTitle'])
-                        track by $index">
-                    <action-buttons cipher="cipher" show-view="true" on-view="viewCipher(cipher)"></action-buttons>
-                    <icon cipher="cipher"></icon>
-                    <span class="text">
-                        {{cipher.name}}
-                        <i class="fa fa-share-alt text-muted" ng-if="cipher.organizationId" title="{{i18n.shared}}"></i>
-                    </span>
-                    <span class="detail">{{cipher.subTitle}}</span>
-                </a>
+    <div class="list" ng-if="loaded">
+        <div class="list-section">
+            <div class="list-section-header">
+                {{i18n.typeLogins}}
+            </div>
+            <div class="list-section-items" ng-class="{'list-no-selection': !loginCiphers.length}">
+                <div class="list-section-item" ng-if="loaded && !loginCiphers.length">
+                    <p>{{i18n.autoFillInfo}}</p>
+                    <button ng-click="addCipher()" class="btn btn-link btn-block">{{i18n.addLogin}}</button>
+                </div>
+                <cipher-items ng-if="loginCiphers.length" ciphers="loginCiphers" on-view="viewCipher"
+                              on-selected="fillCipher" selection-title="i18n.autoFill"></cipher-items>
+            </div>
+        </div>
+        <div class="list-section" ng-class="{'list-no-selection': !otherCiphers.length}">
+            <div class="list-section-header">
+                {{i18n.other}}
+            </div>
+            <div class="list-section-items">
+                <div class="list-section-item" ng-if="loaded && !otherCiphers.length">{{i18n.noItemsInList}}</div>
+                <cipher-items ng-if="otherCiphers.length" ciphers="otherCiphers" on-view="viewCipher"
+                              on-selected="fillCipher" selection-title="i18n.autoFill"></cipher-items>
             </div>
         </div>
-    </div>
-    <div class="centered-message" ng-if="loaded && !ciphers.length">
-        <p>
-            {{i18n.autoFillInfo}}
-            <button ng-click="addCipher()" style="margin-top: 20px;" class="btn btn-link btn-block">{{i18n.addLogin}}</button>
-        </p>
     </div>
     <div class="page-loading" ng-if="!loaded">
         <i class="fa fa-lg fa-spinner fa-spin"></i>

src/popup/app/vault/views/vault.html

@@ -75,7 +75,7 @@
     </div>
     <div class="centered-message" ng-if="loaded && !vaultCiphers.length">
         <p>
-            {{i18n.noLoginsInList}}
+            {{i18n.noItemsInList}}
             <button ng-click="addCipher()" style="margin-top: 20px;" class="btn btn-link btn-block">{{i18n.addLogin}}</button>
         </p>
     </div>

src/popup/app/vault/views/vaultViewFolder.html

@@ -36,7 +36,7 @@
     </div>
     <div class="centered-message" ng-if="loaded && !vaultCiphers.length">
         <p>
-            {{i18n.noLoginsInList}}
+            {{i18n.noItemsInList}}
             <button ng-click="addCipher()" style="margin-top: 20px;" class="btn btn-link btn-block">{{i18n.addLogin}}</button>
         </p>
     </div>

src/popup/index.html

@@ -63,6 +63,7 @@
     <script src="app/components/componentsModule.js"></script>
     <script src="app/components/iconComponent.js"></script>
     <script src="app/components/actionButtonsComponent.js"></script>
+    <script src="app/components/cipherItemsComponent.js"></script>
 
     <script src="app/services/servicesModule.js"></script>
     <script src="app/services/backgroundService.js"></script>

src/popup/less/components.less

@@ -510,12 +510,12 @@
             }
         }
     }
+}
 
-    &.list-no-selection {
-        .list-grouped-item:not(.list-allow-selection), .list-section-item:not(.list-allow-selection) {
-            &:hover {
-                background-color: white;
-            }
+.list-no-selection {
+    .list-grouped-item:not(.list-allow-selection), .list-section-item:not(.list-allow-selection) {
+        &:hover {
+            background-color: white;
         }
     }
 }