2024-01-18 15:15:08 +00:00
4 changed files with 151 additions and 98 deletions
--- a/src/plugins/user/components/settings/Main.vue
+++ b/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>
--- a/src/plugins/user/components/settings/Sessions.vue
+++ b/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>
--- 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"
    >
-      <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.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>
+          :session="session"
+        />
      </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
    };
  }
 });
--- 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<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}`;
  }
 };