diff options
author | brantje <brantje@gmail.com> | 2016-10-16 18:52:52 +0300 |
---|---|---|
committer | brantje <brantje@gmail.com> | 2016-10-16 19:08:59 +0300 |
commit | 1a4c1346cccc2b5930834fe87d9d434af8f408b0 (patch) | |
tree | 37a0bb4a28ca99fadde9bf04537dc3b3c2b94132 /js | |
parent | 94d4f309487e066c55ed154dfe894303520cae80 (diff) |
Better searchbox behaviour.
Add a clear icon.
Diffstat (limited to 'js')
-rw-r--r-- | js/app/directives/clearbutton2.js | 37 | ||||
-rw-r--r-- | js/app/filters/credentialsearch.js | 5 | ||||
-rw-r--r-- | js/templates.js | 2 |
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) { |