username/password copy actions from vault list

src/popup/app/vault/vaultController.js

@@ -1,7 +1,7 @@
 angular
     .module('bit.vault')
 
-    .controller('vaultController', function ($scope, $rootScope, siteService, folderService, $q, cipherService, $state, $stateParams) {
+    .controller('vaultController', function ($scope, $rootScope, siteService, folderService, $q, cipherService, $state, $stateParams, $uibModal, toastr) {
         $('#search').focus();
 
         var delayLoad = true;
@@ -62,6 +62,12 @@
                         usernamePromise.then(function (obj) {
                             decSites[obj.index].username = obj.val;
                         });
+
+                        var passwordPromise = cipherService.decrypt(sites[j].password, j);
+                        promises.push(passwordPromise);
+                        passwordPromise.then(function (obj) {
+                            decSites[obj.index].password = obj.val;
+                        });
                     }
 
                     $q.all(promises).then(function () {
@@ -91,7 +97,7 @@
         $scope.setFolderFilter = function (folder) {
             $scope.folderFilter = {};
             $scope.folderFilter.folderId = folder.id;
-        }
+        };
 
         $scope.addSite = function () {
             $state.go('addSite', {
@@ -110,15 +116,24 @@
             });
         };
 
+        $scope.clipboardError = function (e) {
+            toastr.info('Your web browser does not support easy clipboard copying. Copy it manually instead.');
+        };
+
+        $scope.clipboardSuccess = function (e, type) {
+            e.clearSelection();
+            toastr.info(type + ' copied!');
+        };
+
         function getScrollY() {
             var content = document.getElementsByClassName('content')[0];
             return content.scrollTop;
-        };
+        }
 
         function setScrollY() {
             if ($stateParams.scrollY) {
                 var content = document.getElementsByClassName('content')[0];
                 content.scrollTop = $stateParams.scrollY;
             }
-        };
+        }
     });

src/popup/app/vault/vaultViewSiteController.js

@@ -43,7 +43,7 @@
                 returnScrollY: returnScrollY || 0,
                 returnSearchText: returnSearchText
             });
-        }
+        };
 
         $scope.close = function () {
             $state.go('tabs.vault', {

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

@@ -13,12 +13,19 @@
             <div class="list-grouped-header">
                 <i class="fa fa-folder-open"></i> {{folder.name}}
             </div>
-            <a href="" ng-click="viewSite(site)" class="list-grouped-item condensed" 
+            <div ng-click="viewSite(site)" class="list-grouped-item condensed" style="cursor: pointer;" 
                ng-repeat="site in folderSites = (vaultSites | filter: { folderId: folder.id } | filter: (searchText || '') | orderBy: ['name', 'username'])">
-                <span class="btn-list"><i class="fa fa-lg fa-ellipsis-h text-muted"></i></span>
+                <a class="btn-list" href="" ng-click="$event.stopPropagation()" title="Copy Password" ngclipboard ngclipboard-error="clipboardError(e)"
+                        ngclipboard-success="clipboardSuccess(e, 'Password')" data-clipboard-text="{{site.password}}" ng-class="{'disabled': !site.password}">
+                    <i class="fa fa-lg fa-clipboard"></i>
+                </a>
+                <a class="btn-list" href="" ng-click="$event.stopPropagation()" title="Copy Username" ngclipboard ngclipboard-error="clipboardError(e)"
+                        ngclipboard-success="clipboardSuccess(e, 'Username')" data-clipboard-text="{{site.username}}" ng-class="{'disabled': !site.username}">
+                    <i class="fa fa-lg fa-copy"></i>
+                </a>
                 <span class="text">{{site.name}}</span>
                 <span class="detail">{{site.username}}</span>
-            </a>
+            </div>
         </div>
     </div>
 </div>

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

@@ -19,14 +19,14 @@
                     {{site.name}}
                 </div>
                 <div class="list-section-item" ng-show="site.uri">
-                    <a class="btn-list" href="" ng-click="launchWebsite(site)" ng-show="site.showLaunch">
+                    <a class="btn-list" href="" title="Launch Website" ng-click="launchWebsite(site)" ng-show="site.showLaunch">
                         <i class="fa fa-lg fa-share-square-o"></i>
                     </a>
                     <span class="item-label">Website</span>
                     {{site.website}}
                 </div>
                 <div class="list-section-item" ng-show="site.username">
-                    <a class="btn-list" href="" ngclipboard ngclipboard-error="clipboardError(e)"
+                    <a class="btn-list" href="" title="Copy Username" ngclipboard ngclipboard-error="clipboardError(e)"
                        ngclipboard-success="clipboardSuccess(e, 'Username')" data-clipboard-target="#username">
                         <i class="fa fa-lg fa-clipboard"></i>
                     </a>
@@ -34,11 +34,13 @@
                     <span id="username">{{site.username}}</span>
                 </div>
                 <div class="list-section-item" ng-show="site.password">
-                    <a class="btn-list" href="" ngclipboard ngclipboard-error="clipboardError(e)"
+                    <a class="btn-list" href="" title="Copy Password" ngclipboard ngclipboard-error="clipboardError(e)"
                        ngclipboard-success="clipboardSuccess(e, 'Password')" data-clipboard-target="#password">
                         <i class="fa fa-lg fa-clipboard"></i>
                     </a>
-                    <a class="btn-list" href="" ng-click="togglePassword()"><i class="fa fa-lg fa-eye"></i></a>
+                    <a class="btn-list" href="" title="Toggle Password" ng-click="togglePassword()">
+                        <i class="fa fa-lg fa-eye"></i>
+                    </a>
                     <span class="item-label">Password</span>
                     <span ng-show="!showPassword">{{site.maskedPassword}}</span>
                     <span id="password" ng-show="showPassword">{{site.password}}</span>

src/popup/less/components.less

@@ -253,14 +253,24 @@
             cursor: pointer;
             float: right;
             display: block;
-            padding: 10px 8px 10px 12px;
+            padding: 10px 8px 10px 8px;
+            background: none;
+            border: none;
+
+            &.disabled {
+                color: @text-disabled;
+
+                &:hover {
+                    color: @text-disabled;
+                }
+            }
         }
 
         &.condensed {
             padding: 3px 10px;
 
             .btn-list {
-                padding: 8px 8px 8px 12px;
+                padding: 8px;
             }
         }
 

src/popup/less/variables.less

@@ -8,6 +8,7 @@
 @border-color: #f0f0f0;
 @border-color-dark: #ddd;
 @list-item-hover: #fbfbfb;
+@text-disabled: #d2d6de;
 
 @brand-primary: #3c8dbc;
 @brand-danger: #dd4b39;