From 4346bf95a7a182cdce9d8a31eb5df4854f65fcad Mon Sep 17 00:00:00 2001 From: Chaim Lev-Ari Date: Wed, 22 Jul 2020 21:36:22 +0300 Subject: [PATCH] feat(settings): replace cookies with local storage (#4075) * fix(datatables): persist state changes * fix(datatables): persist order * feat(sidebar): use local storage to store toggle toolbar * feat(config): use local storage instead of cookies --- .../images-datatable/imagesDatatable.html | 4 +- .../volumes-datatable/volumesDatatable.html | 4 +- .../datatables/genericDatatableController.js | 5 +- app/portainer/services/authentication.js | 2 +- app/portainer/services/endpointProvider.js | 1 + app/portainer/services/localStorage.js | 53 +++++++++++-------- app/portainer/views/main/mainController.js | 13 ++--- 7 files changed, 45 insertions(+), 37 deletions(-) diff --git a/app/docker/components/datatables/images-datatable/imagesDatatable.html b/app/docker/components/datatables/images-datatable/imagesDatatable.html index 7dd2d87b1..1f9e5874a 100644 --- a/app/docker/components/datatables/images-datatable/imagesDatatable.html +++ b/app/docker/components/datatables/images-datatable/imagesDatatable.html @@ -120,11 +120,11 @@
- +
- +
diff --git a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html index 573acd415..bd2c4e6b7 100644 --- a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html +++ b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html @@ -93,11 +93,11 @@
- +
- +
diff --git a/app/portainer/components/datatables/genericDatatableController.js b/app/portainer/components/datatables/genericDatatableController.js index 89367a114..21ccf17e9 100644 --- a/app/portainer/components/datatables/genericDatatableController.js +++ b/app/portainer/components/datatables/genericDatatableController.js @@ -43,12 +43,11 @@ angular.module('portainer.app').controller('GenericDatatableController', [ DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter); }; - this.changeOrderBy = changeOrderBy.bind(this); - function changeOrderBy(orderField) { + this.changeOrderBy = function changeOrderBy(orderField) { this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false; this.state.orderBy = orderField; DatatableService.setDataTableOrder(this.tableKey, orderField, this.state.reverseOrder); - } + }; this.selectItem = function (item, event) { // Handle range select using shift diff --git a/app/portainer/services/authentication.js b/app/portainer/services/authentication.js index a5f1294fa..82ce17de8 100644 --- a/app/portainer/services/authentication.js +++ b/app/portainer/services/authentication.js @@ -41,7 +41,7 @@ angular.module('portainer.app').factory('Authentication', [ StateManager.clean(); EndpointProvider.clean(); - LocalStorage.clean(); + LocalStorage.cleanAuthData(); LocalStorage.storeLoginStateUUID(''); } diff --git a/app/portainer/services/endpointProvider.js b/app/portainer/services/endpointProvider.js index bf76c6e46..1a49f1321 100644 --- a/app/portainer/services/endpointProvider.js +++ b/app/portainer/services/endpointProvider.js @@ -24,6 +24,7 @@ angular.module('portainer.app').factory('EndpointProvider', [ }; service.clean = function () { + LocalStorage.cleanEndpointData(); endpoint = {}; }; diff --git a/app/portainer/services/localStorage.js b/app/portainer/services/localStorage.js index 1cd99cb6d..95bc618d5 100644 --- a/app/portainer/services/localStorage.js +++ b/app/portainer/services/localStorage.js @@ -1,7 +1,6 @@ angular.module('portainer.app').factory('LocalStorage', [ 'localStorageService', function LocalStorageFactory(localStorageService) { - 'use strict'; return { storeEndpointID: function (id) { localStorageService.set('ENDPOINT_ID', id); @@ -16,10 +15,10 @@ angular.module('portainer.app').factory('LocalStorage', [ return localStorageService.get('ENDPOINT_PUBLIC_URL'); }, storeLoginStateUUID: function (uuid) { - localStorageService.cookie.set('LOGIN_STATE_UUID', uuid); + localStorageService.set('LOGIN_STATE_UUID', uuid); }, getLoginStateUUID: function () { - return localStorageService.cookie.get('LOGIN_STATE_UUID'); + return localStorageService.get('LOGIN_STATE_UUID'); }, storeOfflineMode: function (isOffline) { localStorageService.set('ENDPOINT_OFFLINE_MODE', isOffline); @@ -46,10 +45,10 @@ angular.module('portainer.app').factory('LocalStorage', [ return localStorageService.get('APPLICATION_STATE'); }, storeUIState: function (state) { - localStorageService.cookie.set('UI_STATE', state); + localStorageService.set('UI_STATE', state); }, getUIState: function () { - return localStorageService.cookie.get('UI_STATE'); + return localStorageService.get('UI_STATE'); }, storeExtensionState: function (state) { localStorageService.set('EXTENSION_STATE', state); @@ -67,40 +66,40 @@ angular.module('portainer.app').factory('LocalStorage', [ localStorageService.remove('JWT'); }, storePaginationLimit: function (key, count) { - localStorageService.cookie.set('datatable_pagination_' + key, count); + localStorageService.set('datatable_pagination_' + key, count); }, getPaginationLimit: function (key) { - return localStorageService.cookie.get('datatable_pagination_' + key); + return localStorageService.get('datatable_pagination_' + key); }, getDataTableOrder: function (key) { - return localStorageService.cookie.get('datatable_order_' + key); + return localStorageService.get('datatable_order_' + key); }, storeDataTableOrder: function (key, data) { - localStorageService.cookie.set('datatable_order_' + key, data); + localStorageService.set('datatable_order_' + key, data); }, getDataTableTextFilters: function (key) { - return localStorageService.cookie.get('datatable_text_filter_' + key); + return localStorageService.get('datatable_text_filter_' + key); }, storeDataTableTextFilters: function (key, data) { - localStorageService.cookie.set('datatable_text_filter_' + key, data); + localStorageService.set('datatable_text_filter_' + key, data); }, getDataTableFilters: function (key) { - return localStorageService.cookie.get('datatable_filters_' + key); + return localStorageService.get('datatable_filters_' + key); }, storeDataTableFilters: function (key, data) { - localStorageService.cookie.set('datatable_filters_' + key, data); + localStorageService.set('datatable_filters_' + key, data); }, getDataTableSettings: function (key) { - return localStorageService.cookie.get('datatable_settings_' + key); + return localStorageService.get('datatable_settings_' + key); }, storeDataTableSettings: function (key, data) { - localStorageService.cookie.set('datatable_settings_' + key, data); + localStorageService.set('datatable_settings_' + key, data); }, getDataTableExpandedItems: function (key) { - return localStorageService.cookie.get('datatable_expandeditems_' + key); + return localStorageService.get('datatable_expandeditems_' + key); }, storeDataTableExpandedItems: function (key, data) { - localStorageService.cookie.set('datatable_expandeditems_' + key, data); + localStorageService.set('datatable_expandeditems_' + key, data); }, getDataTableSelectedItems: function (key) { return localStorageService.get('datatable_selecteditems_' + key); @@ -109,16 +108,16 @@ angular.module('portainer.app').factory('LocalStorage', [ localStorageService.set('datatable_selecteditems_' + key, data); }, storeSwarmVisualizerSettings: function (key, data) { - localStorageService.cookie.set('swarmvisualizer_' + key, data); + localStorageService.set('swarmvisualizer_' + key, data); }, getSwarmVisualizerSettings: function (key) { - return localStorageService.cookie.get('swarmvisualizer_' + key); + return localStorageService.get('swarmvisualizer_' + key); }, storeColumnVisibilitySettings: function (key, data) { - localStorageService.cookie.set('col_visibility_' + key, data); + localStorageService.set('col_visibility_' + key, data); }, getColumnVisibilitySettings: function (key) { - return localStorageService.cookie.get('col_visibility_' + key); + return localStorageService.get('col_visibility_' + key); }, storeJobImage: function (data) { localStorageService.set('job_image', data); @@ -133,12 +132,24 @@ angular.module('portainer.app').factory('LocalStorage', [ const activeTab = localStorageService.get('active_tab_' + key); return activeTab === null ? 0 : activeTab; }, + storeToolbarToggle(value) { + localStorageService.set('toolbar_toggle', value); + }, + getToolbarToggle() { + return localStorageService.get('toolbar_toggle'); + }, storeLogoutReason: (reason) => localStorageService.set('logout_reason', reason), getLogoutReason: () => localStorageService.get('logout_reason'), cleanLogoutReason: () => localStorageService.remove('logout_reason'), clean: function () { localStorageService.clearAll(); }, + cleanAuthData() { + localStorageService.remove('JWT', 'EXTENSION_STATE', 'APPLICATION_STATE', 'LOGIN_STATE_UUID'); + }, + cleanEndpointData() { + localStorageService.remove('ENDPOINT_ID', 'ENDPOINT_PUBLIC_URL', 'ENDPOINT_OFFLINE_MODE', 'ENDPOINTS_DATA', 'ENDPOINT_STATE'); + }, }; }, ]); diff --git a/app/portainer/views/main/mainController.js b/app/portainer/views/main/mainController.js index 71b50424c..00fb4436c 100644 --- a/app/portainer/views/main/mainController.js +++ b/app/portainer/views/main/mainController.js @@ -1,9 +1,9 @@ angular.module('portainer.app').controller('MainController', [ '$scope', - '$cookieStore', + 'LocalStorage', 'StateManager', 'EndpointProvider', - function ($scope, $cookieStore, StateManager, EndpointProvider) { + function ($scope, LocalStorage, StateManager, EndpointProvider) { /** * Sidebar Toggle & Cookie Control */ @@ -17,11 +17,8 @@ angular.module('portainer.app').controller('MainController', [ $scope.$watch($scope.getWidth, function (newValue) { if (newValue >= mobileView) { - if (angular.isDefined($cookieStore.get('toggle'))) { - $scope.toggle = !$cookieStore.get('toggle') ? false : true; - } else { - $scope.toggle = true; - } + const toggleValue = LocalStorage.getToolbarToggle(); + $scope.toggle = typeof toggleValue === 'boolean' ? toggleValue : true; } else { $scope.toggle = false; } @@ -29,7 +26,7 @@ angular.module('portainer.app').controller('MainController', [ $scope.toggleSidebar = function () { $scope.toggle = !$scope.toggle; - $cookieStore.put('toggle', $scope.toggle); + LocalStorage.storeToolbarToggle($scope.toggle); }; window.onresize = function () {