diff --git a/src/plugins/user/components/settings/Main.vue b/src/plugins/user/components/settings/Main.vue new file mode 100644 index 0000000..7e9d1d7 --- /dev/null +++ b/src/plugins/user/components/settings/Main.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/plugins/user/components/settings/Sessions.vue b/src/plugins/user/components/settings/Sessions.vue new file mode 100644 index 0000000..dfaaff7 --- /dev/null +++ b/src/plugins/user/components/settings/Sessions.vue @@ -0,0 +1,83 @@ + + + diff --git a/src/plugins/user/pages/Settings.vue b/src/plugins/user/pages/Settings.vue index 79c51b3..76d7126 100644 --- a/src/plugins/user/pages/Settings.vue +++ b/src/plugins/user/pages/Settings.vue @@ -4,62 +4,22 @@ padding class="fit row justify-center content-center items-center q-gutter-sm" > -
- Deine Sessions: -
-
+
- + Allgemeine Einstellungen: +
+
+
+ Aktive Sessions: +
+ - - Diese Session. - - -
-
- Browser: - - {{ session.browser }} -
-
- Plattform: - - {{ session.platform }} -
-
-
-
- Lebenszeit: - {{ session.lifetime }} -
-
- Läuft aus: {{ session.expires }} -
-
-
- - - - + :session="session" + />
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 }; } }); diff --git a/src/plugins/user/store/user.ts b/src/plugins/user/store/user.ts index d1e984e..40dd2e0 100644 --- a/src/plugins/user/store/user.ts +++ b/src/plugins/user/store/user.ts @@ -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: '', @@ -32,22 +36,22 @@ const state: UserStateInterface = { }; const mutations: MutationTree = { - setPermissions (state, data: []) { + setPermissions(state, data: []) { state.permissions = data; }, - setSession (state, data: Session) { + setSession(state, data: Session) { state.session = data; }, - setLoginLoading (state, data: boolean) { + setLoginLoading(state, data: boolean) { state.loginLoading = data; }, - showState (state) { + showState(state) { console.log(state); } }; const actions: ActionTree = { - login ({ commit }, data: LoginData) { + login({ commit }, data: LoginData) { commit('setLoginLoading', true); Loading.show({ message: 'Du wirst eingeloggt' }); void axios @@ -70,7 +74,19 @@ const actions: ActionTree = { 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'); let data = LocalStorage.getItem('permissions'); commit('setPermissions', data ? data : []); @@ -79,23 +95,29 @@ const actions: ActionTree = { 'setSession', data ? data - : { browser: '', expires: new Date(), lifetime: -1, platform: '', token: '' } + : { + browser: '', + expires: new Date(), + lifetime: -1, + platform: '', + token: '' + } ); commit('showState'); } }; const getters: GetterTree = { - permissions ({ permissions }) { + permissions({ permissions }) { return permissions; }, - session ({ session }) { + session({ session }) { return session; }, - loginLoading ({ loginLoading }) { + loginLoading({ loginLoading }) { return loginLoading; }, - displayName({ user }) { + displayName({ session: { user } }) { return `${user.firstname} ${user.lastname}`; } };