web/src/components/AuthenticatedImage.vue

@@ -7,7 +7,7 @@
 
 <script>
 
-import {mapActions, mapGetters, mapMutations} from "vuex";
+import {mapActions} from "vuex";
 
 export default {
     name: "AuthenticatedImage",
@@ -16,7 +16,6 @@ export default {
             type: String,
             required: true
         },
-        cached: Boolean
     },
     data() {
         return {
@@ -24,37 +23,21 @@ export default {
             servers: []
         }
     },
-    computed: {
-        ...mapGetters(['getThumbnail']),
-    },
     methods: {
         ...mapActions(['fetchImage']),
-        ...mapMutations(['setThumbnail']),
+        loadImage() {
-        async loadImage() {
+            this.fetchImage(this.src).then((response) => {
-            const response = await this.fetchImage(this.src);
+                const mime_type = response.headers.get("content-type");
-            const mime_type = response.headers.get("content-type");
+                response.arrayBuffer().then((buf) => {
-            const buf = await response.arrayBuffer();
+                    const base64 = btoa(new Uint8Array(buf)
-            const base64 = btoa(new Uint8Array(buf)
+                        .reduce((data, byte) => data + String.fromCharCode(byte), ""));
-                .reduce((data, byte) => data + String.fromCharCode(byte), ""));
+                    this.image_data = "data:" + mime_type + ";base64," + base64;
-            this.image_data = "data:" + mime_type + ";base64," + base64;
-            if (this.cached)
-                this.setThumbnail({
-                    url: this.src,
-                    data: this.image_data
                 });
+            })
         }
     },
     mounted() {
-        setTimeout(() => {
+        this.loadImage();
-            if (this.cached) {
-                const c = this.getThumbnail(this.src);
-                if (c) {
-                    this.image_data = c;
-                    return;
-                }
-            }
-            this.loadImage();
-        }, 0);
     }
 }
 </script>

web/src/components/TimelineMail.vue

@@ -25,8 +25,8 @@
                 <ul>
                     <li v-for="attachment in item.attachments" @click="openLightboxModalWith(attachment)">
                         <AuthenticatedImage :src="`/media/2/256/${attachment.hash}/`" :alt="attachment.name"
-                                            v-if="attachment.mime_type.startsWith('image/')" cached/>
+                                            v-if="attachment.mime_type.startsWith('image/')"/>
-                        <AuthenticatedDataLink :href="`/media/2/${attachment.hash}/`" :download="attachment.name"
+                        <AuthenticatedDataLink :href="`/media/2/256/${attachment.hash}/`" :download="attachment.name"
                                                v-else/>
                     </li>
                 </ul>

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

@@ -1,71 +0,0 @@
-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,8 +5,6 @@ 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,
@@ -19,8 +17,10 @@ const store = createStore({
         users: [],
         groups: [],
         state_options: [],
-        lastEvent: '37C3',
+        lastEvent: localStorage.getItem('lf_lastEvent') || '37C3',
+        lastUsed: JSON.parse(localStorage.getItem('lf_lastUsed') || '{}'),
         remember: false,
+
         user: {
             username: null,
             password: null,
@@ -29,8 +29,7 @@ const store = createStore({
             expiry: null,
         },
 
-        thumbnailCache: {},
+        local_loaded: false,
-        persistent_loaded: false,
         showAddBoxModal: false,
     },
     getters: {
@@ -39,10 +38,8 @@ 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 &&
+        checkPermission: state => (event, perm) => state.user.permissions.includes(`${event}:${perm}`) || state.user.permissions.includes(`*:${perm}`),
-            (state.user.permissions.includes(`${event}:${perm}`) || state.user.permissions.includes(`*:${perm}`)),
+        hasPermissions: state => state.user.permissions.length > 0,
-        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) {
@@ -70,18 +67,27 @@ 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;
         },
-        getThumbnail: (state) => (url) => {
-            if (!url) return null;
-            if (!(url in state.thumbnailCache))
-                return null;
-            return state.thumbnailCache[url];
-        },
     },
     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;
@@ -141,21 +147,29 @@ 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;
@@ -169,12 +183,9 @@ const store = createStore({
             user.permissions = null;
             state.user = user;
         },
-        setThumbnail(state, {url, data}) {
-            state.thumbnailCache[url] = data;
-        },
     },
     actions: {
-        async login({commit}, {username, password, remember}) {
+        async login({commit, dispatch, state}, {username, password, remember}) {
             commit('setRemember', remember);
             try {
                 const data = await fetch('/api/2/login/', {
@@ -184,8 +195,10 @@ const store = createStore({
                     credentials: 'omit'
                 }).then(r => r.json())
                 if (data && data.token) {
-                    const {data: {permissions}} = await http.get('/2/self/', data.token);
+                    commit('setToken', data);
-                    commit('setUserInfo', {...data, permissions, username, password});
+                    commit('setUser', username);
+                    commit('setPassword', password);
+                    dispatch('afterLogin');
                     return true;
                 } else {
                     return false;
@@ -359,21 +372,10 @@ 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);

web/src/views/Empty.vue

@@ -4,16 +4,9 @@
             <div class="col-xl-8 offset-xl-2">
                 <div class="card bg-dark text-light mb-2" id="filters">
                     <div class="card-header">
-                        <h3 class="text-center">User: {{ activeUser }}</h3>
+                        <h3 class="text-center">User: {{user}}</h3>
                     </div>
-                    <div class="card-body" v-if="hasPermissions">
+                    <div class="card-body">
-                        <p>Your Account is activated. Got to
-                            <router-link :to="{name: 'items', params: {event: getEventSlug}}">Items</router-link>
-                            or
-                            <router-link :to="{name: 'tickets', params: {event: getEventSlug}}">Tickets</router-link>
-                        </p>
-                    </div>
-                    <div class="card-body" v-else>
                         <p>Your Account is not yet activated. Please contact an admin.</p>
                     </div>
                 </div>
@@ -23,13 +16,11 @@
 </template>
 
 <script>
-import {mapGetters, mapState} from "vuex";
+import {mapState} from "vuex";
 
 export default {
     name: 'Empty',
-    computed: {
+    computed: mapState(['user']),
-        ...mapGetters(['hasPermissions', 'getEventSlug', 'activeUser']),
-    },
 };
 </script>
 

web/src/views/Items.vue

@@ -45,7 +45,7 @@
             v-slot="{ item }"
             @itemActivated="openLightboxModalWith($event)"
         >
-            <AuthenticatedImage v-if="item.file" cached
+            <AuthenticatedImage v-if="item.file"
                                 :src="`/media/2/256/${item.file}/`"
                                 class="card-img-top img-fluid"
             />