added vault search

src/popup/app/config.js

@@ -64,7 +64,7 @@
                     url: "/vault",
                     templateUrl: "app/vault/views/vault.html",
                     controller: 'vaultController',
-                    params: { scrollY: 0 }
+                    params: { scrollY: 0, searchText: null }
                 })
                 .state('tabs.settings', {
                     url: "/settings",
@@ -82,21 +82,21 @@
                 templateUrl: "app/vault/views/vaultViewSite.html",
                 controller: 'vaultViewSiteController',
                 data: { authorize: true },
-                params: { animation: null, returnScrollY: 0 }
+                params: { animation: null, returnScrollY: 0, returnSearchText: null }
             })
             .state('addSite', {
                 url: "/add-site",
                 templateUrl: "app/vault/views/vaultAddSite.html",
                 controller: 'vaultAddSiteController',
                 data: { authorize: true },
-                params: { animation: null, returnScrollY: 0 }
+                params: { animation: null, returnScrollY: 0, returnSearchText: null }
             })
             .state('editSite', {
                 url: "/edit-site?siteId",
                 templateUrl: "app/vault/views/vaultEditSite.html",
                 controller: 'vaultEditSiteController',
                 data: { authorize: true },
-                params: { animation: null, fromView: true, returnScrollY: 0 }
+                params: { animation: null, fromView: true, returnScrollY: 0, returnSearchText: null }
             });
     })
     .run(function ($rootScope, userService, loginService, tokenService, $state) {

src/popup/app/vault/vaultAddSiteController.js

@@ -3,6 +3,7 @@
 
     .controller('vaultAddSiteController', function ($scope, $state, $stateParams, siteService, folderService, cipherService, $q) {
         var returnScrollY = $stateParams.returnScrollY;
+        var returnSearchText = $stateParams.returnSearchText;
 
         $scope.site = {
             folderId: null
@@ -49,7 +50,11 @@
         };
 
         $scope.close = function () {
-            $state.go('tabs.vault', { animation: 'out-slide-down', scrollY: returnScrollY || 0 });
+            $state.go('tabs.vault', {
+                animation: 'out-slide-down',
+                scrollY: returnScrollY || 0,
+                searchText: returnSearchText
+            });
         };
 
         function saveSite(site) {

src/popup/app/vault/vaultController.js

@@ -2,6 +2,8 @@
     .module('bit.vault')
 
     .controller('vaultController', function ($scope, $rootScope, siteService, folderService, $q, cipherService, $state, $stateParams) {
+        $('#search').focus();
+
         var delayLoad = true;
         if (!$rootScope.vaultSites) {
             $rootScope.vaultSites = [];
@@ -73,6 +75,11 @@
             });
         }
 
+        $scope.searchText = null;
+        if ($stateParams.searchText) {
+            $scope.searchText = $stateParams.searchText;
+        }
+
         $scope.folderSort = function (item) {
             if (!item.id) {
                 return '';
@@ -81,10 +88,16 @@
             return item.name.toLowerCase();
         };
 
+        $scope.setFolderFilter = function (folder) {
+            $scope.folderFilter = {};
+            $scope.folderFilter.folderId = folder.id;
+        }
+
         $scope.addSite = function () {
             $state.go('addSite', {
                 animation: 'in-slide-up',
-                returnScrollY: getScrollY()
+                returnScrollY: getScrollY(),
+                returnSearchText: $scope.searchText
             });
         };
 
@@ -92,7 +105,8 @@
             $state.go('viewSite', {
                 siteId: site.id,
                 animation: 'in-slide-up',
-                returnScrollY: getScrollY()
+                returnScrollY: getScrollY(),
+                returnSearchText: $scope.searchText
             });
         };
 

src/popup/app/vault/vaultEditSiteController.js

@@ -3,6 +3,7 @@ angular
 
     .controller('vaultEditSiteController', function ($scope, $state, $stateParams, siteService, folderService, cipherService, $q, toastr) {
         var returnScrollY = $stateParams.returnScrollY;
+        var returnSearchText = $stateParams.returnSearchText;
 
         $scope.site = {
             folderId: null
@@ -55,10 +56,19 @@ angular
 
         $scope.close = function () {
             if ($stateParams.fromView) {
-                $state.go('viewSite', { siteId: $stateParams.siteId, animation: 'out-slide-down' });
+                $state.go('viewSite', {
+                    siteId: $stateParams.siteId,
+                    animation: 'out-slide-down',
+                    returnScrollY: returnScrollY || 0,
+                    returnSearchText: returnSearchText
+                });
             }
             else {
-                $state.go('tabs.vault', { animation: 'out-slide-down', scrollY: returnScrollY || 0 });
+                $state.go('tabs.vault', {
+                    animation: 'out-slide-down',
+                    scrollY: returnScrollY || 0,
+                    searchText: returnSearchText
+                });
             }
         };
 

src/popup/app/vault/vaultViewSiteController.js

@@ -3,6 +3,7 @@
 
     .controller('vaultViewSiteController', function ($scope, $state, $stateParams, siteService, cipherService, tldjs, toastr) {
         var returnScrollY = $stateParams.returnScrollY;
+        var returnSearchText = $stateParams.returnSearchText;
 
         $scope.site = null;
         siteService.get($stateParams.siteId, function (site) {
@@ -34,8 +35,22 @@
             });
         });
 
+        $scope.edit = function (site) {
+            $state.go('editSite', {
+                animation: 'in-slide-up',
+                siteId: site.id,
+                fromView: true,
+                returnScrollY: returnScrollY || 0,
+                returnSearchText: returnSearchText
+            });
+        }
+
         $scope.close = function () {
-            $state.go('tabs.vault', { animation: 'out-slide-down', scrollY: returnScrollY || 0 });
+            $state.go('tabs.vault', {
+                animation: 'out-slide-down',
+                scrollY: returnScrollY || 0,
+                searchText: returnSearchText
+            });
         };
 
         $scope.launchWebsite = function (site) {

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

@@ -2,7 +2,10 @@
     <div class="right">
         <a href="" ng-click="addSite()"><i class="fa fa-plus fa-lg"></i></a>
     </div>
-    <div class="title">My Vault</div>
+    <div class="search">
+        <input type="search" placeholder="Search vault" ng-model="searchText" id="search" />
+        <i class="fa fa-search"></i>
+    </div>
 </div>
 <div class="content content-tabs">
     <div class="list">
@@ -10,7 +13,8 @@
             <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" ng-repeat="site in folderSites = (vaultSites | filter: { folderId: folder.id } | orderBy: ['name', 'username'])">
+            <a href="" ng-click="viewSite(site)" class="list-grouped-item condensed" 
+               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>
                 <span class="text">{{site.name}}</span>
                 <span class="detail">{{site.username}}</span>

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

@@ -3,7 +3,7 @@
         <a href="" ng-click="close()">Close</a>
     </div>
     <div class="right">
-        <a href="" ui-sref="editSite({animation: 'in-slide-up', siteId: site.id, fromView: true})">Edit</a>
+        <a href="" ng-click="edit(site)">Edit</a>
     </div>
     <div class="title">View Site</div>
 </div>

src/popup/less/components.less

@@ -1,4 +1,5 @@
 @import (reference) "variables.less";
+@import (reference) "mixins.less";
 
 .header {
     min-height: 44px;
@@ -52,6 +53,7 @@
         display: block;
         right: 0;
         position: absolute;
+        z-index: 99999;
 
         a, button {
             padding: 12px 10px;
@@ -65,6 +67,35 @@
             float: right;
         }
     }
+
+    .search {
+        text-align: left;
+        position: relative;
+
+        input {
+            background: darken(@brand-primary, 8%);
+            border: none;
+            color: white;
+            padding: 5px 10px 5px 30px;
+            border-radius: 5px;
+            width: 85%;
+            margin: 7px 0 0 7px;
+            .placeholder-color(lighten(@brand-primary, 35%));
+
+            &:focus {
+                border-radius: 5px;
+                outline: none;
+                background: darken(@brand-primary, 10%);
+            }
+        }
+
+        .fa-search {
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            color: lighten(@brand-primary, 30%);
+        }
+    }
 }
 
 .tabs {

src/popup/less/mixins.less

@@ -0,0 +1,19 @@
+.placeholder-color(@color) {
+    &:-moz-placeholder {
+        color: @color;
+        opacity: 1;
+    }
+
+    &::-moz-placeholder {
+        color: @color;
+        opacity: 1;
+    }
+
+    &:-ms-input-placeholder {
+        color: @color;
+    }
+
+    &::-webkit-input-placeholder {
+        color: @color;
+    }
+}

src/popup/less/popup.less

@@ -1,5 +1,6 @@
 @import "../../../node_modules/bootstrap/less/bootstrap.less";
 @import "variables.less";
+@import "mixins.less";
 @import "components.less";
 @import "animations.less";
 @import "plugins.less";