release v2.0.0 #4

Merged
crimsen merged 481 commits from develop into master 2024-01-18 15:15:08 +00:00
4 changed files with 151 additions and 98 deletions
Showing only changes of commit cb9ede5b27 - Show all commits

View File

@ -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>

View File

@ -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>

View File

@ -4,62 +4,22 @@
padding padding
class="fit row justify-center content-center items-center q-gutter-sm" class="fit row justify-center content-center items-center q-gutter-sm"
> >
<div class="text-h5 row"> <div
Deine Sessions: class="fit row justify-center content-center items-center q-gutter-sm"
</div> >
<div class="fit row justify-center content-center items-center q-gutter-sm">
<circular-progress v-if="sessionsLoading" /> <circular-progress v-if="sessionsLoading" />
<q-card <div class="col-12 text-left text-h6">
class="col-12" Allgemeine Einstellungen:
height="" </div>
<Main />
<div class="col-12 text-left text-h6">
Aktive Sessions:
</div>
<sessions
v-for="(session, index) in sessions" v-for="(session, index) in sessions"
:key="'session' + index" :key="'session' + index"
> :session="session"
<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>
</div> </div>
<div class="row"> <div class="row">
<q-btn <q-btn
@ -74,44 +34,21 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onBeforeMount } from '@vue/composition-api'; import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
import CircularProgress from 'components/loading/CircularProgress.vue'; import CircularProgress from 'components/loading/CircularProgress.vue';
import Sessions from '../components/settings/Sessions.vue';
import Main from '../components/settings/Main.vue';
export default defineComponent({ export default defineComponent({
// name: 'PageName' // name: 'PageName'
components: { CircularProgress }, components: { CircularProgress, Sessions, Main },
setup(_, { root }) { setup(_, { root }) {
onBeforeMount(() => { onBeforeMount(() => {
root.$store.dispatch('sessions/getSessions'); root.$store.dispatch('sessions/getSessions');
}); });
const sessions = computed(() => root.$store.getters['sessions/sessions']); const sessions = computed(() => root.$store.getters['sessions/sessions']);
function showRootGetters() { function showRootGetters() {
//ctx.root.$store.dispatch('sessions/getSessions'); //ctx.root.$store.dispatch('sessions/getSessions');
console.log(sessions.value); 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(() => { const sessionsLoading = computed(() => {
return root.$store.getters['sessions/loading']; return root.$store.getters['sessions/loading'];
@ -119,12 +56,8 @@ export default defineComponent({
return { return {
showRootGetters, showRootGetters,
sessions, sessionsLoading,
getBrowserIcon, sessions
getPlatformIcon,
isThisSession,
deleteSession,
sessionsLoading
}; };
} }
}); });

View File

@ -18,7 +18,11 @@ export interface LoginResponse {
const state: UserStateInterface = { const state: UserStateInterface = {
permissions: [], permissions: [],
session: { session: {
browser: '', expires: new Date(), lifetime: -1, platform: '', token: '', browser: '',
expires: new Date(),
lifetime: -1,
platform: '',
token: '',
user: { user: {
display_name: '', display_name: '',
firstname: '', firstname: '',
@ -32,22 +36,22 @@ const state: UserStateInterface = {
}; };
const mutations: MutationTree<UserStateInterface> = { const mutations: MutationTree<UserStateInterface> = {
setPermissions (state, data: []) { setPermissions(state, data: []) {
state.permissions = data; state.permissions = data;
}, },
setSession (state, data: Session) { setSession(state, data: Session) {
state.session = data; state.session = data;
}, },
setLoginLoading (state, data: boolean) { setLoginLoading(state, data: boolean) {
state.loginLoading = data; state.loginLoading = data;
}, },
showState (state) { showState(state) {
console.log(state); console.log(state);
} }
}; };
const actions: ActionTree<UserStateInterface, StateInterface> = { const actions: ActionTree<UserStateInterface, StateInterface> = {
login ({ commit }, data: LoginData) { login({ commit }, data: LoginData) {
commit('setLoginLoading', true); commit('setLoginLoading', true);
Loading.show({ message: 'Du wirst eingeloggt' }); Loading.show({ message: 'Du wirst eingeloggt' });
void axios void axios
@ -70,7 +74,19 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
Loading.hide(); Loading.hide();
}); });
}, },
loadFromLocalStorage ({ commit }) { 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'); console.log('load from store');
let data = LocalStorage.getItem('permissions'); let data = LocalStorage.getItem('permissions');
commit('setPermissions', data ? data : []); commit('setPermissions', data ? data : []);
@ -79,23 +95,29 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
'setSession', 'setSession',
data data
? data ? data
: { browser: '', expires: new Date(), lifetime: -1, platform: '', token: '' } : {
browser: '',
expires: new Date(),
lifetime: -1,
platform: '',
token: ''
}
); );
commit('showState'); commit('showState');
} }
}; };
const getters: GetterTree<UserStateInterface, StateInterface> = { const getters: GetterTree<UserStateInterface, StateInterface> = {
permissions ({ permissions }) { permissions({ permissions }) {
return permissions; return permissions;
}, },
session ({ session }) { session({ session }) {
return session; return session;
}, },
loginLoading ({ loginLoading }) { loginLoading({ loginLoading }) {
return loginLoading; return loginLoading;
}, },
displayName({ user }) { displayName({ session: { user } }) {
return `${user.firstname} ${user.lastname}`; return `${user.firstname} ${user.lastname}`;
} }
}; };