Compare commits
No commits in common. "e91b64ca97369552d6033345f32fd3cec666e52e" and "575d43acbd6f71864f759fb2732b7bf58520bacc" have entirely different histories.
e91b64ca97
...
575d43acbd
6 changed files with 52 additions and 147 deletions
|
|
@ -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']),
|
||||
async loadImage() {
|
||||
const response = await this.fetchImage(this.src);
|
||||
const mime_type = response.headers.get("content-type");
|
||||
const buf = await response.arrayBuffer();
|
||||
const base64 = btoa(new Uint8Array(buf)
|
||||
.reduce((data, byte) => data + String.fromCharCode(byte), ""));
|
||||
this.image_data = "data:" + mime_type + ";base64," + base64;
|
||||
if (this.cached)
|
||||
this.setThumbnail({
|
||||
url: this.src,
|
||||
data: this.image_data
|
||||
loadImage() {
|
||||
this.fetchImage(this.src).then((response) => {
|
||||
const mime_type = response.headers.get("content-type");
|
||||
response.arrayBuffer().then((buf) => {
|
||||
const base64 = btoa(new Uint8Array(buf)
|
||||
.reduce((data, byte) => data + String.fromCharCode(byte), ""));
|
||||
this.image_data = "data:" + mime_type + ";base64," + base64;
|
||||
});
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
if (this.cached) {
|
||||
const c = this.getThumbnail(this.src);
|
||||
if (c) {
|
||||
this.image_data = c;
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.loadImage();
|
||||
}, 0);
|
||||
this.loadImage();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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/>
|
||||
<AuthenticatedDataLink :href="`/media/2/${attachment.hash}/`" :download="attachment.name"
|
||||
v-if="attachment.mime_type.startsWith('image/')"/>
|
||||
<AuthenticatedDataLink :href="`/media/2/256/${attachment.hash}/`" :download="attachment.name"
|
||||
v-else/>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -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: {},
|
||||
persistent_loaded: false,
|
||||
local_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 &&
|
||||
(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',
|
||||
checkPermission: state => (event, perm) => state.user.permissions.includes(`${event}:${perm}`) || state.user.permissions.includes(`*:${perm}`),
|
||||
hasPermissions: state => state.user.permissions.length > 0,
|
||||
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('setUserInfo', {...data, permissions, username, password});
|
||||
commit('setToken', data);
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
<div class="card-body">
|
||||
<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: {
|
||||
...mapGetters(['hasPermissions', 'getEventSlug', 'activeUser']),
|
||||
},
|
||||
computed: mapState(['user']),
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue