add persistent-state-plugin

web/src/persistent-state-plugin/index.js

@@ -0,0 +1,71 @@
+import {isProxy, toRaw} from 'vue';
+
+export default (config) => (store) => {
+    if (!('isLoadedKey' in config)) {
+        throw new Error("isLoadedKey not defined in config");
+    }
+
+    const initialize = () => {
+        config.state.forEach(k => {
+            try {
+                if (config.debug) console.log("localStorage init", k, localStorage.getItem(config.prefix + k));
+                const parsed = JSON.parse(localStorage.getItem(config.prefix + k));
+                if (parsed !== store.state[k] && parsed !== null) {
+                    store.state[k] = parsed;
+                } else {
+                    if (config.debug) console.log("localStorage not loaded", k, localStorage.getItem(config.prefix + k));
+                }
+            } catch (e) {
+                if (config.debug) console.log("localStorage parse error", k, e);
+            }
+        });
+        store.state[config.isLoadedKey] = true;
+    }
+
+    const reload = initialize;
+
+    if (store.state[config.isLoadedKey] !== true)
+        initialize();
+
+    addEventListener('storage', reload);
+
+    if ('state' in config) {
+        config.state.forEach((member) => {
+            store.watch((state, getters) => state[member], (newValue, oldValue) => {
+                try {
+                    if (config.debug) console.log('watch', member,
+                        isProxy(newValue) ? toRaw(newValue) : newValue,
+                        isProxy(oldValue) ? toRaw(oldValue) : oldValue);
+                    const key = config.prefix + member;
+                    const encoded = JSON.stringify(isProxy(newValue) ? toRaw(newValue) : newValue);
+                    if (encoded !== localStorage.getItem(key)) {
+                        if (config.debug) console.log("localStorage replace", member, localStorage.getItem(key), encoded);
+                        if (newValue === null)
+                            localStorage.removeItem(key);
+                        else
+                            localStorage.setItem(key, encoded);
+                    } else {
+                        if (config.debug) console.log("localStorage not saved", member, localStorage.getItem(key), encoded);
+                    }
+                } catch (e) {
+                    if (config.debug) console.log("localsorage save error", member, e);
+                }
+            });
+        });
+    }
+
+    if ('clearingMutation' in config) {
+        store.subscribe((mutation, state) => {
+            if (mutation.type === config.clearingMutation) {
+                removeEventListener('storage', reload)
+                for (let key in config.state) {
+                    localStorage.removeItem(config.prefix + key);
+                }
+                for (let key in config.state) {
+                    store.state[key] = null;
+                }
+                addEventListener('storage', reload)
+            }
+        });
+    }
+};

web/src/store.js

@@ -5,6 +5,8 @@ import * as base64 from 'base-64';
 import * as utf8 from 'utf8';
 import {ticketStateColorLookup, ticketStateIconLookup, http} from "@/utils";
 
+import persistentStatePlugin from "@/persistent-state-plugin";
+
 const store = createStore({
     state: {
         keyIncrement: 0,
@@ -17,10 +19,8 @@ const store = createStore({
         users: [],
         groups: [],
         state_options: [],
-        lastEvent: localStorage.getItem('lf_lastEvent') || '37C3',
+        lastEvent: '37C3',
-        lastUsed: JSON.parse(localStorage.getItem('lf_lastUsed') || '{}'),
         remember: false,
-
         user: {
             username: null,
             password: null,
@@ -29,8 +29,8 @@ const store = createStore({
             expiry: null,
         },
 
-        local_loaded: false,
         showAddBoxModal: false,
+        persistent_loaded: false,
     },
     getters: {
         route: state => router.currentRoute.value,
@@ -38,8 +38,10 @@ const store = createStore({
         getActiveView: state => router.currentRoute.value.name || 'items',
         getFilters: state => router.currentRoute.value.query,
         getBoxes: state => state.loadedBoxes,
-        checkPermission: state => (event, perm) => state.user.permissions.includes(`${event}:${perm}`) || state.user.permissions.includes(`*:${perm}`),
+        checkPermission: state => (event, perm) => state.user.permissions &&
-        hasPermissions: state => state.user.permissions.length > 0,
+            (state.user.permissions.includes(`${event}:${perm}`) || state.user.permissions.includes(`*:${perm}`)),
+        hasPermissions: state => state.user.permissions && state.user.permissions.length > 0,
+        activeUser: state => state.user.username || 'anonymous',
         stateInfo: state => (slug) => {
             const obj = state.state_options.filter((s) => s.value === slug)[0];
             if (obj) {
@@ -67,27 +69,12 @@ const store = createStore({
                 return 'tasks';
         },
         isLoggedIn(state) {
-            if (!state.local_loaded) {
-                state.remember = localStorage.getItem('remember') === 'true';
-                state.user.username = localStorage.getItem('user');
-                //state.password = localStorage.getItem('password');
-                state.user.permissions = JSON.parse(localStorage.getItem('permissions') || '[]');
-                state.user.token = localStorage.getItem('token');
-                state.user.expiry = localStorage.getItem('token_expiry');
-                state.local_loaded = true;
-            }
-
             return state.user && state.user.username !== null && state.user.token !== null;
         },
     },
     mutations: {
-        updateLastUsed(state, diff) {
-            state.lastUsed = {...state.lastUsed, ...diff};
-            localStorage.setItem('lf_lastUsed', JSON.stringify(state.lastUsed));
-        },
         updateLastEvent(state, slug) {
             state.lastEvent = slug;
-            localStorage.setItem('lf_lastEvent', slug);
         },
         replaceEvents(state, events) {
             state.events = events;
@@ -147,29 +134,21 @@ const store = createStore({
         },
         setRemember(state, remember) {
             state.remember = remember;
-            localStorage.setItem('remember', remember);
         },
         setUser(state, user) {
             state.user.username = user;
-            if (user)
-                localStorage.setItem('user', user);
         },
         setPassword(state, password) {
             state.user.password = password;
         },
         setPermissions(state, permissions) {
             state.user.permissions = permissions;
-            if (permissions)
-                localStorage.setItem('permissions', JSON.stringify(permissions));
         },
         setToken(state, {token, expiry}) {
             const user = {...state.user};
             user.token = token;
             user.expiry = expiry;
             state.user = user;
-            if (token)
-                localStorage.setItem('token', token);
-            localStorage.setItem('token_expiry', expiry);
         },
         setUserInfo(state, user) {
             state.user = user;
@@ -185,7 +164,7 @@ const store = createStore({
         },
     },
     actions: {
-        async login({commit, dispatch, state}, {username, password, remember}) {
+        async login({commit}, {username, password, remember}) {
             commit('setRemember', remember);
             try {
                 const data = await fetch('/api/2/login/', {
@@ -195,10 +174,8 @@ const store = createStore({
                     credentials: 'omit'
                 }).then(r => r.json())
                 if (data && data.token) {
-                    commit('setToken', data);
+                    const {data: {permissions}} = await http.get('/2/self/', data.token);
-                    commit('setUser', username);
+                    commit('setUserInfo', {...data, permissions, username, password});
-                    commit('setPassword', password);
-                    dispatch('afterLogin');
                     return true;
                 } else {
                     return false;
@@ -372,10 +349,21 @@ const store = createStore({
             commit('updateTicket', data);
         }
     },
+    plugins: [
+        persistentStatePlugin({ // TODO change remember to some kind of enable field
+            prefix: "lf_",
+            debug: false,
+            isLoadedKey: "persistent_loaded",
+            state: [
+                "remember",
+                "user",
+                "events",
+            ]
+        }),
+    ],
 });
 
 store.watch((state) => state.user, (user) => {
-    console.log('user changed', user);
     if (store.getters.isLoggedIn) {
         if (router.currentRoute.value.name === 'login' && router.currentRoute.value.query.redirect)
             router.push(router.currentRoute.value.query.redirect);