Fixed MergeConflicts from 52dc3057ad
This commit is contained in:
parent
52dc3057ad
commit
cb9ede5b27
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<q-card class="col-12">
|
||||
<q-card-section class="text-h3">
|
||||
Test
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from '@vue/composition-api';
|
||||
export default defineComponent({
|
||||
name: 'Main',
|
||||
setup(_, ctx) {}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<q-card class="col-12" height="">
|
||||
<q-card-section v-if="isThisSession(session.token)" class="text-caption">
|
||||
Diese Session.
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
Browser:
|
||||
<q-icon :name="getBrowserIcon(session.browser)" size="24px" />
|
||||
{{ session.browser }}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
Plattform:
|
||||
<q-icon :name="getPlatformIcon(session.platform)" size="24px" />
|
||||
{{ session.platform }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
Lebenszeit:
|
||||
{{ session.lifetime }}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">Läuft aus: {{ session.expires }}</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="mdi-delete"
|
||||
@click="deleteSession(session.token)"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from '@vue/composition-api';
|
||||
export default defineComponent({
|
||||
name: 'Sessions',
|
||||
props: {
|
||||
session: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(_, { root }) {
|
||||
function getBrowserIcon(browser: string) {
|
||||
return browser == 'firefox'
|
||||
? 'mdi-firefox'
|
||||
: browser == 'chrome'
|
||||
? 'mdi-google-chrome'
|
||||
: browser == 'safari'
|
||||
? 'mdi-apple-safari'
|
||||
: 'mdi-help';
|
||||
}
|
||||
function getPlatformIcon(platform: string) {
|
||||
return platform == 'linux'
|
||||
? 'mdi-linux'
|
||||
: platform == 'windows'
|
||||
? 'mdi-microsoft-windows'
|
||||
: platform == 'apple'
|
||||
? 'mdi-apple'
|
||||
: 'mdi-help';
|
||||
}
|
||||
|
||||
function deleteSession(token: string) {
|
||||
root.$store.dispatch('sessions/deleteSession', token);
|
||||
}
|
||||
function isThisSession(token: string) {
|
||||
return root.$store.getters['user/session'].token == token;
|
||||
}
|
||||
|
||||
return {
|
||||
getBrowserIcon,
|
||||
getPlatformIcon,
|
||||
isThisSession,
|
||||
deleteSession
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -4,62 +4,22 @@
|
|||
padding
|
||||
class="fit row justify-center content-center items-center q-gutter-sm"
|
||||
>
|
||||
<div class="text-h5 row">
|
||||
Deine Sessions:
|
||||
</div>
|
||||
<div class="fit row justify-center content-center items-center q-gutter-sm">
|
||||
<div
|
||||
class="fit row justify-center content-center items-center q-gutter-sm"
|
||||
>
|
||||
<circular-progress v-if="sessionsLoading" />
|
||||
<q-card
|
||||
class="col-12"
|
||||
height=""
|
||||
<div class="col-12 text-left text-h6">
|
||||
Allgemeine Einstellungen:
|
||||
</div>
|
||||
<Main />
|
||||
<div class="col-12 text-left text-h6">
|
||||
Aktive Sessions:
|
||||
</div>
|
||||
<sessions
|
||||
v-for="(session, index) in sessions"
|
||||
:key="'session' + index"
|
||||
>
|
||||
<q-card-section
|
||||
v-if="isThisSession(session.token)"
|
||||
class="text-caption"
|
||||
>
|
||||
Diese Session.
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
Browser:
|
||||
<q-icon
|
||||
:name="getBrowserIcon(session.browser)"
|
||||
size="24px"
|
||||
:session="session"
|
||||
/>
|
||||
{{ session.browser }}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
Plattform:
|
||||
<q-icon
|
||||
:name="getPlatformIcon(session.platform)"
|
||||
size="24px"
|
||||
/>
|
||||
{{ session.platform }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
Lebenszeit:
|
||||
{{ session.lifetime }}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
Läuft aus: {{ session.expires }}
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="mdi-delete"
|
||||
@click="deleteSession(session.token)"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="row">
|
||||
<q-btn
|
||||
|
|
@ -74,44 +34,21 @@
|
|||
<script lang="ts">
|
||||
import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
|
||||
import CircularProgress from 'components/loading/CircularProgress.vue';
|
||||
import Sessions from '../components/settings/Sessions.vue';
|
||||
import Main from '../components/settings/Main.vue';
|
||||
export default defineComponent({
|
||||
// name: 'PageName'
|
||||
components: { CircularProgress },
|
||||
components: { CircularProgress, Sessions, Main },
|
||||
setup(_, { root }) {
|
||||
onBeforeMount(() => {
|
||||
root.$store.dispatch('sessions/getSessions');
|
||||
});
|
||||
|
||||
const sessions = computed(() => root.$store.getters['sessions/sessions']);
|
||||
|
||||
function showRootGetters() {
|
||||
//ctx.root.$store.dispatch('sessions/getSessions');
|
||||
console.log(sessions.value);
|
||||
}
|
||||
function getBrowserIcon(browser: string) {
|
||||
return browser == 'firefox'
|
||||
? 'mdi-firefox'
|
||||
: browser == 'chrome'
|
||||
? 'mdi-google-chrome'
|
||||
: browser == 'safari'
|
||||
? 'mdi-apple-safari'
|
||||
: 'mdi-help';
|
||||
}
|
||||
function getPlatformIcon(platform: string) {
|
||||
return platform == 'linux'
|
||||
? 'mdi-linux'
|
||||
: platform == 'windows'
|
||||
? 'mdi-microsoft-windows'
|
||||
: platform == 'apple'
|
||||
? 'mdi-apple'
|
||||
: 'mdi-help';
|
||||
}
|
||||
|
||||
function deleteSession(token: string) {
|
||||
root.$store.dispatch('sessions/deleteSession', token);
|
||||
}
|
||||
function isThisSession(token: string) {
|
||||
return root.$store.getters['user/session'].token == token;
|
||||
}
|
||||
|
||||
const sessionsLoading = computed(() => {
|
||||
return root.$store.getters['sessions/loading'];
|
||||
|
|
@ -119,12 +56,8 @@ export default defineComponent({
|
|||
|
||||
return {
|
||||
showRootGetters,
|
||||
sessions,
|
||||
getBrowserIcon,
|
||||
getPlatformIcon,
|
||||
isThisSession,
|
||||
deleteSession,
|
||||
sessionsLoading
|
||||
sessionsLoading,
|
||||
sessions
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -18,7 +18,11 @@ export interface LoginResponse {
|
|||
const state: UserStateInterface = {
|
||||
permissions: [],
|
||||
session: {
|
||||
browser: '', expires: new Date(), lifetime: -1, platform: '', token: '',
|
||||
browser: '',
|
||||
expires: new Date(),
|
||||
lifetime: -1,
|
||||
platform: '',
|
||||
token: '',
|
||||
user: {
|
||||
display_name: '',
|
||||
firstname: '',
|
||||
|
|
@ -70,6 +74,18 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
|
|||
Loading.hide();
|
||||
});
|
||||
},
|
||||
logout({ commit }, token) {
|
||||
void axios.delete(`/auth/${token}`).then(() => {
|
||||
commit('setPermissions', []);
|
||||
commit('setToken', {
|
||||
browser: '',
|
||||
expires: '',
|
||||
lifetime: '',
|
||||
platform: '',
|
||||
token: ''
|
||||
});
|
||||
});
|
||||
},
|
||||
loadFromLocalStorage({ commit }) {
|
||||
console.log('load from store');
|
||||
let data = LocalStorage.getItem('permissions');
|
||||
|
|
@ -79,7 +95,13 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
|
|||
'setSession',
|
||||
data
|
||||
? data
|
||||
: { browser: '', expires: new Date(), lifetime: -1, platform: '', token: '' }
|
||||
: {
|
||||
browser: '',
|
||||
expires: new Date(),
|
||||
lifetime: -1,
|
||||
platform: '',
|
||||
token: ''
|
||||
}
|
||||
);
|
||||
commit('showState');
|
||||
}
|
||||
|
|
@ -95,7 +117,7 @@ const getters: GetterTree<UserStateInterface, StateInterface> = {
|
|||
loginLoading({ loginLoading }) {
|
||||
return loginLoading;
|
||||
},
|
||||
displayName({ user }) {
|
||||
displayName({ session: { user } }) {
|
||||
return `${user.firstname} ${user.lastname}`;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue