Better searchbox behaviour.

Add a clear icon.

3 files changed, 43 insertions, 1 deletions

diff --git a/js/app/directives/clearbutton2.js b/js/app/directives/clearbutton2.js
new file mode 100644
index 00000000..17c97d6a
--- /dev/null
+++ b/js/app/directives/clearbutton2.js
@@ -0,0 +1,37 @@
+(function () {
+	'use strict';
+	/**
+	 * @ngdoc directive
+	 * @name passmanApp.directive:clearBtn
+	 * @description
+	 * # clearBtn
+	 */
+	angular.module('passmanApp')
+		.directive('clearBtn', ['$parse', function ($parse) {
+            return {
+                link: function (scope, elm, attr) {
+                    elm.wrap("<div style='position: relative'></div>");
+                    var btn = '<span id=' + Math.round(Math.random() * 1000000000) + ' class="searchclear ng-hide fa fa-times-circle-o"></span>';
+                    var angularBtn = angular.element(btn);
+                    elm.after(angularBtn);
+                    //clear the input
+                    angularBtn.on("click", function () {
+                        elm.val('').trigger("change");
+                        $parse(attr.ngModel).assign(scope, '');
+                        scope.$apply();
+                    });
+
+                    // show  clear btn  on focus
+                    elm.bind('focus keyup change paste propertychange', function () {
+                        if (elm.val() && elm.val().length > 0) {
+                            angularBtn.removeClass("ng-hide");
+                        } else {
+                            angularBtn.addClass("ng-hide");
+                        }
+                    });
+                }
+            };
+        }]);
+}());
+
+
diff --git a/js/app/filters/credentialsearch.js b/js/app/filters/credentialsearch.js
index c90589df..2b179672 100644
--- a/js/app/filters/credentialsearch.js
+++ b/js/app/filters/credentialsearch.js
@@ -13,6 +13,9 @@
 			return function (credentials, filter) {
 				var _credentials = [];
 				if (credentials) {
+					if(!filter){
+						return credentials;
+					}
 					if (filter.filterText.trim() === "") {
 						return credentials;
 					}
@@ -36,6 +39,8 @@
 						}
 					}
 					return _credentials;
+				} else {
+					return [];
 				}
 			};
 		});
diff --git a/js/templates.js b/js/templates.js
index dc931148..74b6c4bd 100644
--- a/js/templates.js
+++ b/js/templates.js
@@ -113,7 +113,7 @@ angular.module('views/share_credential.html', []).run(['$templateCache', functio
 angular.module('views/show_vault.html', []).run(['$templateCache', function($templateCache) {
   'use strict';
   $templateCache.put('views/show_vault.html',
-    '<div id="passman-controls"><div class="breadcrumb"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a><i class="fa fa-home"></i></a></div><div class="crumb svg last"><a>{{active_vault.name}}</a></div></div></div><span class="title" ng-if="delete_time">Showing deleted since: <span ng-if="delete_time == 1">All time</span> <span ng-if="delete_time > 1">{{delete_time | date:\'dd-MM-yyyy @ HH:mm:ss\'}}</span></span><div class="actions creatable"><span ng-click="addCredential()" class="button new"><span>+</span></span></div><div class="title" ng-show="filtered_credentials.length > 0">Showing {{filtered_credentials.length}} of {{active_vault.credentials.length - 1}} credentials</div><div class="searchboxContainer"><input type="text" ng-model="filterOptions.filterText" class="searchbox" placeholder="Search credential..." select-on-click></div><div class="viewModes"><div class="view-mode" ng-class="{\'active\': view_mode === \'list\' }" ng-click="switchViewMode(\'list\')"><i class="fa fa-list"></i></div><div class="view-mode" ng-class="{\'active\': view_mode === \'grid\' }" ng-click="switchViewMode(\'grid\')"><i class="fa fa-th-large"></i></div></div></div><div off-click="closeSelected()" off-click-filter="\'.download-js-link\'"><div class="loaderContainer" ng-if="show_spinner"><div class="loader" use-theme type="\'border-bottom-color\'"></div></div><div ng-init="menuOpen = false;"><table class="credential-table" ng-if="view_mode === \'list\'"><tr ng-repeat="credential in filtered_credentials | orderBy:\'label\'" ng-if="showCredentialRow(credential)" ng-click="selectCredential(credential)" ng-class="{\'selected\': selectedCredential.credential_id == credential.credential_id}"><td><span class="tags"><span class="tag" ng-repeat="tag in credential.tags_raw">{{ ::tag.text}}</span></span> <span class="icon"><i class="fa fa-lock" ng-if="!credential.acl && !credential.shared_key"></i> <i class="fa fa-share-alt" ng-if="credential.acl"></i> <i class="fa fa-share-alt-square" ng-if="credential.shared_key"></i></span> <span class="label">{{ ::credential.label}}</span></td></tr></table><ul class="grid-view" ng-if="view_mode === \'grid\'"><li class="credential" ng-repeat="credential in filtered_credentials | orderBy:\'label\'" ng-if="credential.hidden == 0 && showCredentialRow(credential)" ng-click="selectCredential(credential)" use-theme type="\'border-color\'"><div class="credential_content"><div class="label">{{ ::credential.label}}</div><div class="tags"><div class="tag" ng-repeat="tag in credential.tags_raw">{{ ::tag.text}}</div></div></div></li></ul></div><div id="app-sidebar" class="detailsView scroll-container app_sidebar" ng-show="selectedCredential"><h2>{{selectedCredential.label}}</h2><span class="close icon-close" ng-click="closeSelected()" alt="Close"></span><div class="credential-data"><div class="row" ng-show="selectedCredential.username"><div class="col-xs-4 col-md-3 col-lg-3">Account</div><div class="col-xs-8 col-md-9 col-lg-9"><span credential-field value="selectedCredential.username"></span></div></div><div class="row" ng-show="selectedCredential.password"><div class="col-xs-4 col-md-3 col-lg-3">Password</div><div class="col-xs-8 col-md-9 col-lg-9"><span credential-field value="selectedCredential.password" secret="\'true\'"></span></div></div><div class="row" ng-show="selectedCredential.otp.secret"><div class="col-xs-4 col-md-3 col-lg-3">OTP</div><div class="col-xs-8 col-md-9 col-lg-9"><span otp-generator secret="selectedCredential.otp.secret"></span></div></div><div class="row" ng-show="selectedCredential.email"><div class="col-xs-4 col-md-3 col-lg-3">E-mail</div><div class="col-xs-8 col-md-9 col-lg-9"><span credential-field value="selectedCredential.email"></span></div></div><div class="row" ng-show="selectedCredential.url"><div class="col-xs-4 col-md-3 col-lg-3">URL</div><div class="col-xs-8 col-md-9 col-lg-9"><span credential-field value="selectedCredential.url"></span></div></div><div class="row" ng-show="selectedCredential.description"><div class="col-xs-4 col-md-3 col-lg-3">Notes</div><div class="col-xs-8 col-md-9 col-lg-9" ng-bind-html="selectedCredential.description_html"></div></div><div class="row" ng-show="selectedCredential.files.length > 0"><div class="col-xs-4 col-md-3 col-lg-3">Files</div><div class="col-xs-8 col-md-9 col-lg-9"><div ng-repeat="file in selectedCredential.files" class="link" ng-click="downloadFile(selectedCredential, file)">{{file.filename}} ({{file.size | bytes}})</div></div></div><div class="row" ng-repeat="field in selectedCredential.custom_fields"><div class="col-xs-4 col-md-3 col-lg-3">{{field.label}}</div><div class="col-xs-8 col-md-9 col-lg-9"><span credential-field value="field.value" secret="field.secret"></span></div></div><div class="row" ng-show="selectedCredential.expire_time > 0"><div class="col-xs-4 col-md-3 col-lg-3">Expire time</div><div class="col-xs-8 col-md-9 col-lg-9">{{selectedCredential.expire_time * 1000 | date:\'dd-MM-yyyy @ HH:mm:ss\'}}</div></div><div class="row" ng-show="selectedCredential.changed"><div class="col-xs-4 col-md-3 col-lg-3">Changed</div><div class="col-xs-8 col-md-9 col-lg-9">{{selectedCredential.changed * 1000 | date:\'dd-MM-yyyy @ HH:mm:ss\'}}</div></div><div class="row" ng-show="selectedCredential.created"><div class="col-xs-4 col-md-3 col-lg-3">Created</div><div class="col-xs-8 col-md-9 col-lg-9">{{selectedCredential.created * 1000 | date:\'dd-MM-yyyy @ HH:mm:ss\'}}</div></div><div class="row"><div class="col-xs-12"><div class="tags"><span class="tag" ng-repeat="tag in selectedCredential.tags">{{tag.text}}</span></div></div></div></div><div ng-show="selectedCredential"><div><button class="button" ng-click="editCredential(selectedCredential)" ng-if="selectedCredential.delete_time == 0 && hasPermission(selectedCredential.acl.permissions, permissions.permissions.WRITE)"><span class="fa fa-edit"></span> Edit</button> <button class="button" ng-click="deleteCredential(selectedCredential)" ng-if="selectedCredential.delete_time == 0 && hasPermission(selectedCredential.acl.permissions, permissions.permissions.WRITE)"><span class="fa fa-trash"></span> Delete</button> <button class="button" ng-click="shareCredential(selectedCredential)" ng-if="selectedCredential.delete_time == 0 && selectedCredential.acl === undefined"><span class="fa fa-share"></span> Share</button> <button class="button" ng-click="getRevisions(selectedCredential)" ng-if="selectedCredential.delete_time == 0  && hasPermission(selectedCredential.acl.permissions, permissions.permissions.HISTORY)"><span class="fa fa-undo"></span> Revisions</button> <button class="button" ng-if="selectedCredential.delete_time > 0" ng-click="recoverCredential(selectedCredential) && hasPermission(selectedCredential.acl.permissions, permissions.permissions.WRITE)"><span class="fa fa-recycle"></span> Recover</button> <button class="button" ng-if="selectedCredential.delete_time > 0" ng-click="destroyCredential(selectedCredential)"><span class="fa fa-bomb"></span> Destroy</button></div></div></div></div><div class="share_popup" style="display: none">You have incoming share requests.<br>If you want to the credential in a other vault,<br>logout of this vault and login to the vault you want the shared credential in. {{active_vault.vault_id}}<table class="table"><thead><tr><td>Label</td><td>Permissions</td><td>Received from</td><td>Date</td></tr></thead><tr ng-repeat="share_request in incoming_share_requests" ng-if="share_request.target_vault_id == active_vault.vault_id"><td>{{share_request.credential_label}}</td><td>{{share_request.permissions}}</td><td>{{share_request.from_user_id}}</td><td>{{share_request.created * 1000 | date:\'dd-MM-yyyy @ HH:mm:ss\'}}</td><td><span class="link" ng-click="acceptShareRequest(share_request)">Accept</span> | <span class="link" ng-click="declineShareRequest(share_request)">Decline</span></td></tr></table></div>');
+    '<div off-click="closeSelected()" off-click-filter="\'.download-js-link, .sidebar-shown\'"><div id="passman-controls" ng-class="{ \'sidebar-shown\': selectedCredential }"><div class="breadcrumb"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a><i class="fa fa-home"></i></a></div><div class="crumb svg last"><a>{{active_vault.name}}</a></div></div></div><span class="title" ng-if="delete_time">Showing deleted since: <span ng-if="delete_time == 1">All time</span> <span ng-if="delete_time > 1">{{delete_time | date:\'dd-MM-yyyy @ HH:mm:ss\'}}</span></span><div class="actions creatable"><span ng-click="addCredential()" class="button new"><span>+</span></span></div><div class="title" ng-show="filtered_credentials.length > 0">Showing {{filtered_credentials.length}} of {{active_vault.credentials.length - 1}} credentials</div><div class="searchboxContainer"><input type="text" ng-model="filterOptions.filterText" class="searchbox" placeholder="Search credential..." select-on-click clear-btn></div><div class="viewModes"><div class="view-mode" ng-class="{\'active\': view_mode === \'list\' }" ng-click="switchViewMode(\'list\')"><i class="fa fa-list"></i></div><div class="view-mode" ng-class="{\'active\': view_mode === \'grid\' }" ng-click="switchViewMode(\'grid\')"><i class="fa fa-th-large"></i></div></div></div><div class="loaderContainer" ng-if="show_spinner"><div class="loader" use-theme type="\'border-bottom-color\'"></div></div><div ng-init="menuOpen = false;"><table class="credential-table" ng-if="view_mode === \'list\'"><tr ng-repeat="credential in filtered_credentials | orderBy:\'label\'" ng-if="showCredentialRow(credential)" ng-click="selectCredential(credential)" ng-class="{\'selected\': selectedCredential.credential_id == credential.credential_id}"><td><span class="tags"><span class="tag" ng-repeat="tag in credential.tags_raw">{{ ::tag.text}}</span></span> <span class="icon"><i class="fa fa-lock" ng-if="!credential.acl && !credential.shared_key"></i> <i class="fa fa-share-alt" ng-if="credential.acl"></i> <i class="fa fa-share-alt-square" ng-if="credential.shared_key"></i></span> <span class="label">{{ ::credential.label}}</span></td></tr></table><ul class="grid-view" ng-if="view_mode === \'grid\'"><li class="credential" ng-repeat="credential in filtered_credentials | orderBy:\'label\'" ng-if="credential.hidden == 0 && showCredentialRow(credential)" ng-click="selectCredential(credential)" use-theme type="\'border-color\'"><div class="credential_content"><div class="label">{{ ::credential.label}}</div><div class="tags"><div class="tag" ng-repeat="tag in credential.tags_raw">{{ ::tag.text}}</div></div></div></li></ul></div><div id="app-sidebar" class="detailsView scroll-container app_sidebar" ng-show="selectedCredential"><h2>{{selectedCredential.label}}</h2><span class="close icon-close" ng-click="closeSelected()" alt="Close"></span><div class="credential-data"><div class="row" ng-show="selectedCredential.username"><div class="col-xs-4 col-md-3 col-lg-3">Account</div><div class="col-xs-8 col-md-9 col-lg-9"><span credential-field value="selectedCredential.username"></span></div></div><div class="row" ng-show="selectedCredential.password"><div class="col-xs-4 col-md-3 col-lg-3">Password</div><div class="col-xs-8 col-md-9 col-lg-9"><span credential-field value="selectedCredential.password" secret="\'true\'"></span></div></div><div class="row" ng-show="selectedCredential.otp.secret"><div class="col-xs-4 col-md-3 col-lg-3">OTP</div><div class="col-xs-8 col-md-9 col-lg-9"><span otp-generator secret="selectedCredential.otp.secret"></span></div></div><div class="row" ng-show="selectedCredential.email"><div class="col-xs-4 col-md-3 col-lg-3">E-mail</div><div class="col-xs-8 col-md-9 col-lg-9"><span credential-field value="selectedCredential.email"></span></div></div><div class="row" ng-show="selectedCredential.url"><div class="col-xs-4 col-md-3 col-lg-3">URL</div><div class="col-xs-8 col-md-9 col-lg-9"><span credential-field value="selectedCredential.url"></span></div></div><div class="row" ng-show="selectedCredential.description"><div class="col-xs-4 col-md-3 col-lg-3">Notes</div><div class="col-xs-8 col-md-9 col-lg-9" ng-bind-html="selectedCredential.description_html"></div></div><div class="row" ng-show="selectedCredential.files.length > 0"><div class="col-xs-4 col-md-3 col-lg-3">Files</div><div class="col-xs-8 col-md-9 col-lg-9"><div ng-repeat="file in selectedCredential.files" class="link" ng-click="downloadFile(selectedCredential, file)">{{file.filename}} ({{file.size | bytes}})</div></div></div><div class="row" ng-repeat="field in selectedCredential.custom_fields"><div class="col-xs-4 col-md-3 col-lg-3">{{field.label}}</div><div class="col-xs-8 col-md-9 col-lg-9"><span credential-field value="field.value" secret="field.secret"></span></div></div><div class="row" ng-show="selectedCredential.expire_time > 0"><div class="col-xs-4 col-md-3 col-lg-3">Expire time</div><div class="col-xs-8 col-md-9 col-lg-9">{{selectedCredential.expire_time * 1000 | date:\'dd-MM-yyyy @ HH:mm:ss\'}}</div></div><div class="row" ng-show="selectedCredential.changed"><div class="col-xs-4 col-md-3 col-lg-3">Changed</div><div class="col-xs-8 col-md-9 col-lg-9">{{selectedCredential.changed * 1000 | date:\'dd-MM-yyyy @ HH:mm:ss\'}}</div></div><div class="row" ng-show="selectedCredential.created"><div class="col-xs-4 col-md-3 col-lg-3">Created</div><div class="col-xs-8 col-md-9 col-lg-9">{{selectedCredential.created * 1000 | date:\'dd-MM-yyyy @ HH:mm:ss\'}}</div></div><div class="row"><div class="col-xs-12"><div class="tags"><span class="tag" ng-repeat="tag in selectedCredential.tags">{{tag.text}}</span></div></div></div></div><div ng-show="selectedCredential"><div><button class="button" ng-click="editCredential(selectedCredential)" ng-if="selectedCredential.delete_time == 0 && hasPermission(selectedCredential.acl.permissions, permissions.permissions.WRITE)"><span class="fa fa-edit"></span> Edit</button> <button class="button" ng-click="deleteCredential(selectedCredential)" ng-if="selectedCredential.delete_time == 0 && hasPermission(selectedCredential.acl.permissions, permissions.permissions.WRITE)"><span class="fa fa-trash"></span> Delete</button> <button class="button" ng-click="shareCredential(selectedCredential)" ng-if="selectedCredential.delete_time == 0 && selectedCredential.acl === undefined"><span class="fa fa-share"></span> Share</button> <button class="button" ng-click="getRevisions(selectedCredential)" ng-if="selectedCredential.delete_time == 0  && hasPermission(selectedCredential.acl.permissions, permissions.permissions.HISTORY)"><span class="fa fa-undo"></span> Revisions</button> <button class="button" ng-if="selectedCredential.delete_time > 0" ng-click="recoverCredential(selectedCredential) && hasPermission(selectedCredential.acl.permissions, permissions.permissions.WRITE)"><span class="fa fa-recycle"></span> Recover</button> <button class="button" ng-if="selectedCredential.delete_time > 0" ng-click="destroyCredential(selectedCredential)"><span class="fa fa-bomb"></span> Destroy</button></div></div></div></div><div class="share_popup" style="display: none">You have incoming share requests.<br>If you want to the credential in a other vault,<br>logout of this vault and login to the vault you want the shared credential in. {{active_vault.vault_id}}<table class="table"><thead><tr><td>Label</td><td>Permissions</td><td>Received from</td><td>Date</td></tr></thead><tr ng-repeat="share_request in incoming_share_requests" ng-if="share_request.target_vault_id == active_vault.vault_id"><td>{{share_request.credential_label}}</td><td>{{share_request.permissions}}</td><td>{{share_request.from_user_id}}</td><td>{{share_request.created * 1000 | date:\'dd-MM-yyyy @ HH:mm:ss\'}}</td><td><span class="link" ng-click="acceptShareRequest(share_request)">Accept</span> | <span class="link" ng-click="declineShareRequest(share_request)">Decline</span></td></tr></table></div>');
 }]);
 
 angular.module('views/vaults.html', []).run(['$templateCache', function($templateCache) {