Fixed login/logout glitches

frontend/src/App.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="app-container">
-    <Header :user="user" />
+  <Login v-if="!user && !loading" />
+  <div class="app-container" v-else>
+    <Header :user="user" @logout="doLogout" v-if="user" />
 
     <div class="body">
       <div class="loading-container" v-if="loading">
@@ -24,6 +25,7 @@ import Api from './mixins/Api.vue';
 import Dropdowns from './mixins/Dropdowns.vue';
 import Header from './components/Header.vue';
 import Loading from './elements/Loading.vue';
+import Login from './views/Login.vue';
 import Messages from './components/Messages.vue'
 import User from './models/User';
 
@@ -35,6 +37,7 @@ export default {
   components: {
     Header,
     Loading,
+    Login,
     Messages,
     RouterLink,
     RouterView,
@@ -47,6 +50,13 @@ export default {
     }
   },
 
+  methods: {
+    async doLogout() {
+      await this.logout()
+      this.user = null
+    },
+  },
+
   async mounted() {
     this.loading = true
     this.installDropdownHandler()

frontend/src/components/Header.vue

@@ -32,11 +32,9 @@
               </RouterLink>
             </DropdownItem>
 
-            <DropdownItem>
-              <RouterLink to="/logout">
-                <font-awesome-icon icon="sign-out-alt" />&nbsp;&nbsp;
-                <span class="item-text">Logout</span>
-              </RouterLink>
+            <DropdownItem @click="$emit('logout')">
+              <font-awesome-icon icon="sign-out-alt" />&nbsp;&nbsp;
+              <span class="item-text">Logout</span>
             </DropdownItem>
           </Dropdown>
         </li>
@@ -54,6 +52,7 @@ import DropdownItem from '../elements/DropdownItem.vue';
 import User from '../models/User';
 
 export default {
+  emits: ['logout'],
   components: {
     Dropdown,
     DropdownItem,