src/plugins/user/components/settings/Main.vue

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

src/plugins/user/components/settings/Sessions.vue

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

src/plugins/user/pages/Settings.vue

@@ -4,62 +4,22 @@
       padding
       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" />
-        <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"
           :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 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,
+      sessionsLoading,
-      getBrowserIcon,
+      sessions
-      getPlatformIcon,
-      isThisSession,
-      deleteSession,
-      sessionsLoading
     };
   }
 });

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<UserStateInterface> = {
-  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<UserStateInterface, StateInterface> = {
-  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<UserStateInterface, StateInterface> = {
         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<UserStateInterface, StateInterface> = {
       'setSession',
       data
         ? data
-        : { browser: '', expires: new Date(), lifetime: -1, platform: '', token: '' }
+        : {
+            browser: '',
+            expires: new Date(),
+            lifetime: -1,
+            platform: '',
+            token: ''
+          }
     );
     commit('showState');
   }
 };
 
 const getters: GetterTree<UserStateInterface, StateInterface> = {
-  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}`;
   }
 };