From 789cf89603e64b2c3adc7fc4b92868d8b107dd17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Wed, 28 Oct 2020 12:55:20 +0100
Subject: [PATCH] =?UTF-8?q?Ausloggen=20jetzt=20m=C3=B6glich,=20Neuer=20Loa?=
 =?UTF-8?q?ding=20Spinner=20in=20'Dark-Mode'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Beim ausloggen wird nun der localstorage geleert und ein delete an /auth/delete/<token> gesendet.
---
 .../loading/DarkCircularProgress.vue          | 23 +++++++++
 src/layouts/MainLayout.vue                    | 44 ++++++++---------
 src/plugins/user/pages/User.vue               | 10 +---
 src/plugins/user/store/user.ts                | 48 ++++++++++++-------
 4 files changed, 77 insertions(+), 48 deletions(-)
 create mode 100644 src/components/loading/DarkCircularProgress.vue

diff --git a/src/components/loading/DarkCircularProgress.vue b/src/components/loading/DarkCircularProgress.vue
new file mode 100644
index 0000000..2be058e
--- /dev/null
+++ b/src/components/loading/DarkCircularProgress.vue
@@ -0,0 +1,23 @@
+<template>
+  <q-circular-progress
+    indeterminate
+    show-value
+    font-size="10px"
+    class="q-ma-md"
+    size="80px"
+    :thickness="0.15"
+    color="primary"
+    track-color="grey-3"
+  >
+    <q-avatar size="60px">
+      <img src="logo.svg" />
+    </q-avatar>
+  </q-circular-progress>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
+  name: 'DarkCircularProgress'
+});
+</script>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index e9b295b..1c4d88e 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,9 +1,6 @@
 <template>
   <q-layout view="hHh lpr lFf">
-    <q-header
-      elevated
-      class="bg-primary text-white"
-    >
+    <q-header elevated class="bg-primary text-white">
       <q-toolbar>
         <!-- Button um Navigationsleiset ein und auszublenden. Nötig bei Desktop? -->
         <q-btn
@@ -33,13 +30,7 @@
             :icon="shortcut.icon"
           />
         </div>
-        <q-btn
-          flat
-          round
-          dense
-          icon="mdi-exit-to-app"
-          @click="$router.push({ name: 'login' })"
-        />
+        <q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
       </q-toolbar>
     </q-header>
 
@@ -75,10 +66,7 @@
         />
       </q-list>
 
-      <div
-        class="q-mini-drawer-hide absolute"
-        style="top: 15px; right: -11px"
-      >
+      <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
         <q-btn
           size="sm"
           dense
@@ -119,23 +107,23 @@ const links = [
     name: 'about',
     title: 'Über Flaschengeist',
     link: 'about',
-    icon: 'mdi-information',
-  },
+    icon: 'mdi-information'
+  }
 ];
 
 const shortcuts = [
   {
     link: 'about',
-    icon: 'mdi-information',
+    icon: 'mdi-information'
   },
   {
     link: 'user',
-    icon: 'mdi-account',
+    icon: 'mdi-account'
   },
   {
     link: 'user-plugin1',
-    icon: 'mdi-account-plus',
-  },
+    icon: 'mdi-account-plus'
+  }
 ];
 
 declare module 'vue/types/vue' {
@@ -153,7 +141,7 @@ export default defineComponent({
     const leftDrawerOpen = ref(
       computed({
         get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
-        set: (val: boolean) => (leftDrawer.value = val),
+        set: (val: boolean) => (leftDrawer.value = val)
       })
     );
     const leftDrawerMini = ref(false);
@@ -181,6 +169,15 @@ export default defineComponent({
       }
     });
 
+    function logout() {
+      console.log('vor dem logout');
+      ctx.root.$store.dispatch(
+        'user/logout',
+        ctx.root.$store.getters['user/session'].token
+      );
+      console.log('nach dem logout');
+    }
+
     return {
       leftDrawerOpen,
       leftDrawerMini,
@@ -188,7 +185,8 @@ export default defineComponent({
       links,
       pluginChildLinks,
       shortcuts,
+      logout
     };
-  },
+  }
 });
 </script>
diff --git a/src/plugins/user/pages/User.vue b/src/plugins/user/pages/User.vue
index 2232c4c..46b3c02 100644
--- a/src/plugins/user/pages/User.vue
+++ b/src/plugins/user/pages/User.vue
@@ -5,18 +5,12 @@
       class="fit row justify-center content-center items-center"
       v-if="checkMain"
     >
-      <q-card
-        class="col-4"
-        height=""
-      >
+      <q-card class="col-4" height="">
         <q-card-section>
           Name: {{ userObj.firstname }} {{ userObj.lastname }}<br />
           E-Mail: {{ userObj.mail }}<br />
           Roles:
-          <ul
-            v-for="role in userObj.roles"
-            v-bind:key="role"
-          >
+          <ul v-for="(role, index) in userObj.roles" :key="'role' + index">
             <li>{{ role }}</li>
           </ul>
           <br />
diff --git a/src/plugins/user/store/user.ts b/src/plugins/user/store/user.ts
index 977d790..92ccf98 100644
--- a/src/plugins/user/store/user.ts
+++ b/src/plugins/user/store/user.ts
@@ -52,7 +52,12 @@ const mutations: MutationTree<UserStateInterface> = {
 const actions: ActionTree<UserStateInterface, StateInterface> = {
   login({ commit }, data: LoginData) {
     commit('setLoginLoading', true);
-    Loading.show({ message: 'Du wirst eingeloggt' });
+    Loading.setDefaults({
+      spinner: () => import('src/components/loading/DarkCircularProgress.vue')
+    });
+    Loading.show({
+      message: 'Du wirst eingeloggt'
+    });
     void axios
       .post('/auth', data)
       .then((response: AxiosResponse<LoginResponse>) => {
@@ -74,23 +79,32 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
       });
   },
   logout({ commit }, token) {
-    void axios.delete(`/auth/${token}`).then(() => {
-      commit('setUser', {
-        display_name: '',
-        firstname: '',
-        lastname: '',
-        mail: '',
-        roles: [],
-        userid: ''
+    Loading.show({ message: 'Du wirst ausgeloggt' });
+    void axios
+      .delete(`/auth/${token}`)
+      .then(() => {
+        commit('setUser', {
+          display_name: '',
+          firstname: '',
+          lastname: '',
+          mail: '',
+          roles: [],
+          userid: ''
+        });
+        commit('setSession', {
+          browser: '',
+          expires: '',
+          lifetime: '',
+          platform: '',
+          token: ''
+        });
+      })
+      .finally(() => {
+        LocalStorage.remove('user');
+        LocalStorage.remove('session');
+        void Router.push({ name: 'login' });
+        Loading.hide();
       });
-      commit('setSession', {
-        browser: '',
-        expires: '',
-        lifetime: '',
-        platform: '',
-        token: ''
-      });
-    });
   },
   updateUser({ commit, getters }, data) {
     commit('setLoginLoading', true);