From cb9ede5b27e4a048f697138997e6ae9d4dd34a3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Mon, 19 Oct 2020 13:59:56 +0200
Subject: [PATCH] Fixed MergeConflicts from
 52dc3057ad1d57a7c940b6ea7d96a2497339332c

---
 src/plugins/user/components/settings/Main.vue |  15 +++
 .../user/components/settings/Sessions.vue     |  83 ++++++++++++++
 src/plugins/user/pages/Settings.vue           | 105 ++++--------------
 src/plugins/user/store/user.ts                |  46 ++++++--
 4 files changed, 151 insertions(+), 98 deletions(-)
 create mode 100644 src/plugins/user/components/settings/Main.vue
 create mode 100644 src/plugins/user/components/settings/Sessions.vue

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 @@
+<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>
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 @@
+<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>
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"
     >
-      <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
     };
   }
 });
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<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}`;
   }
 };