Common "HeaderIntern" for user routes

frontend/src/components/Deck.vue

@@ -45,7 +45,7 @@
             <v-icon>edit</v-icon>
           </v-btn>
 
-          <v-dialog v-model="deleting" persistent>
+          <v-dialog v-model="deleting">
             <template v-slot:activator="{ on }">
               <v-btn fab absolute bottom left v-on="on">
                 <v-icon>delete</v-icon>

frontend/src/components/HeaderIntern.vue

@@ -0,0 +1,109 @@
+<template>
+  <Header>
+    <v-btn flat :to="{ name: 'usercp' }"><v-icon>person</v-icon> {{ user.login }}</v-btn>
+
+    <v-dialog v-model="logging_out">
+      <template v-slot:activator="{ on }">
+        <v-btn flat v-on="on">
+          Logout
+        </v-btn>
+      </template>
+
+      <v-card>
+        <v-card-title class="headline">
+          Log Out?
+        </v-card-title>
+
+        <v-card-text>
+          Are you sure you want to log out?
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn color="error" @click.native="logging_out = false">
+            Cancel
+          </v-btn>
+
+          <v-btn
+            color="success"
+            @click.native="logout"
+          >
+            Confirm
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </Header>
+</template>
+
+<script>
+import * as Cookies from 'js-cookie'
+import axios from 'axios'
+
+import Header from './Header'
+
+export default {
+  name: 'HeaderIntern',
+
+  components: {
+    Header
+  },
+
+  data: () => ({
+    logging_out: false
+  }),
+
+  props: {
+    value: String
+  },
+
+  methods: {
+    goHome() {
+      this.$emit('input', '')
+      Cookies.remove('session')
+      this.$router.push({ name: 'home' })
+    },
+
+    logout() {
+      axios
+        .post('/user/logout', {
+          session: this.value
+        })
+        .then(response => {
+          if (response.data.success) {
+            this.goHome()
+          }
+        })
+    }
+  },
+
+  computed: {
+    session: () => Cookies.get('session')
+  },
+
+  asyncComputed: {
+    user: {
+      get() {
+      return axios
+        .post('/user/info', {
+          session: this.session
+        })
+        .then(response => {
+          if (response.data.success) {
+            this.$emit('input', this.session)
+            return response.data.user
+          } else {
+            this.goHome()
+            return null
+          }
+        })},
+      default: {
+        user: 0,
+        login: '',
+        settings: ''
+      }
+    }
+  }
+}
+</script>

frontend/src/views/UserCP.vue

@@ -1,13 +1,7 @@
 <template>
   <v-content>
     <v-container>
-      <Header>
-        <v-btn flat @click.native="logout">Logout</v-btn>
-      </Header>
-
-      <template v-if="user">
-        <p>user logged in: {{ user.login }}</p>
-      </template>
+      <HeaderIntern v-model="session" />
 
       <DeckList :session="session" />
     </v-container>
@@ -15,60 +9,19 @@
 </template>
 
 <script>
-import * as Cookies from 'js-cookie'
-import axios from '@/plugins/axios'
-
-import Header from '@/components/Header.vue'
+import HeaderIntern from '@/components/HeaderIntern.vue'
 import DeckList from '@/components/DeckList.vue'
 
 export default {
   name: 'UserCP',
 
   components: {
-    Header,
+    HeaderIntern,
     DeckList
   },
 
-  data: () => ({}),
-
-  methods: {
-    goHome() {
-      Cookies.remove('session')
-      this.$router.push({ name: 'home' })
-    },
-
-    logout() {
-      axios
-        .post('/user/logout', {
-          session: this.session
-        })
-        .then(response => {
-          if (response.data.success) {
-            this.goHome()
-          }
-        })
-    }
-  },
-
-  computed: {
-    session: () => Cookies.get('session')
-  },
-
-  asyncComputed: {
-    user() {
-      return axios
-        .post('/user/info', {
-          session: this.session
-        })
-        .then(response => {
-          if (response.data.success) {
-            return response.data.user
-          } else {
-            this.goHome()
-            return null
-          }
-        })
-    }
-  }
+  data: () => ({
+    session: ''
+  })
 }
 </script>