Ausloggen jetzt möglich, Neuer Loading Spinner in 'Dark-Mode'

Beim ausloggen wird nun der localstorage geleert und ein delete an /auth/delete/<token> gesendet.

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>

src/layouts/MainLayout.vue

@@ -1,9 +1,6 @@
 <template>
   <q-layout view="hHh lpr lFf">
-    <q-header
+    <q-header elevated class="bg-primary text-white">
-      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
+        <q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
-          flat
-          round
-          dense
-          icon="mdi-exit-to-app"
-          @click="$router.push({ name: 'login' })"
-        />
       </q-toolbar>
     </q-header>
 
@@ -75,10 +66,7 @@
         />
       </q-list>
 
-      <div
+      <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
-        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>

src/plugins/user/pages/User.vue

@@ -5,18 +5,12 @@
       class="fit row justify-center content-center items-center"
       v-if="checkMain"
     >
-      <q-card
+      <q-card class="col-4" height="">
-        class="col-4"
-        height=""
-      >
         <q-card-section>
           Name: {{ userObj.firstname }} {{ userObj.lastname }}<br />
           E-Mail: {{ userObj.mail }}<br />
           Roles:
-          <ul
+          <ul v-for="(role, index) in userObj.roles" :key="'role' + index">
-            v-for="role in userObj.roles"
-            v-bind:key="role"
-          >
             <li>{{ role }}</li>
           </ul>
           <br />

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(() => {
+    Loading.show({ message: 'Du wirst ausgeloggt' });
-      commit('setUser', {
+    void axios
-        display_name: '',
+      .delete(`/auth/${token}`)
-        firstname: '',
+      .then(() => {
-        lastname: '',
+        commit('setUser', {
-        mail: '',
+          display_name: '',
-        roles: [],
+          firstname: '',
-        userid: ''
+          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);