play button :)

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,116 @@
+<template>
+  <Header v-if="user">
+    <v-btn flat :to="{ name: 'deckcp' }">
+      <v-icon>view_carousel</v-icon> Decks
+    </v-btn>
+
+    <v-btn flat>
+      <v-icon>play_arrow</v-icon> Play
+    </v-btn>
+
+    <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"> <v-icon>power_off</v-icon> 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)
+              this.$emit('user', response.data.user)
+              return response.data.user
+            } else {
+              this.goHome()
+              return null
+            }
+          })
+      },
+      default: {
+        user: 0,
+        login: '',
+        settings: ''
+      }
+    }
+  }
+}
+</script>

frontend/src/components/UserInfo.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    {{ user.login }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserInfo',
+
+  props: {
+    session: String,
+    user: Object
+  }
+}
+</script>

frontend/src/components/forms/FormDialog.vue

@@ -2,7 +2,7 @@
   <v-dialog v-model="dialog">
     <template v-slot:activator="{ on }">
       <v-btn flat v-on="on">
-        {{ buttonText }}
+        <v-icon>{{ icon }}</v-icon> {{ buttonText }}
       </v-btn>
     </template>
 
@@ -60,7 +60,8 @@ export default {
   }),
 
   props: {
-    buttonText: String
+    buttonText: String,
+    icon: String
   },
 
   methods: {

frontend/src/components/forms/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <FormDialog ref="main" buttonText="Login" @validated="doLogin">
+  <FormDialog ref="main" buttonText="Login" icon="power" @validated="doLogin">
     <v-card-title class="headline">
       Log In
     </v-card-title>
@@ -64,7 +64,7 @@ export default {
             let cookie_data = JSON.parse(response.data.message)
             Cookies.set('session', cookie_data.value, cookie_data.properties)
             this.$refs.main.showSnackbar('Login successful!', 'success')
-            this.$router.push('usercp')
+            this.$router.push('deckcp')
           } else {
             this.$refs.main.showSnackbar(response.data.message, 'error')
           }

frontend/src/components/forms/Register.vue

@@ -1,5 +1,10 @@
 <template>
-  <FormDialog ref="main" buttonText="Register" @validated="doRegister">
+  <FormDialog
+    ref="main"
+    buttonText="Register"
+    icon="book"
+    @validated="doRegister"
+  >
     <v-card-title class="headline">
       Register
     </v-card-title>

frontend/src/router.js

@@ -22,6 +22,12 @@ export default new Router({
       component: () =>
         import(/* webpackChunkName: "usercp" */ './views/UserCP.vue')
     },
+    {
+      path: '/deckcp',
+      name: 'deckcp',
+      component: () =>
+        import(/* webpackChunkName: "deckcp" */ './views/DeckCP.vue')
+    },
     {
       path: '/game',
       name: 'game',

frontend/src/views/DeckCP.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-content>
+    <HeaderIntern v-model="session" @user="user = $event" />
+
+    <v-container v-if="user">
+      <h2 class="headline">Your Decks</h2>
+      <DeckList :session="session" />
+    </v-container>
+  </v-content>
+</template>
+
+<script>
+import HeaderIntern from '@/components/HeaderIntern.vue'
+import DeckList from '@/components/DeckList.vue'
+
+export default {
+  name: 'DeckCP',
+
+  components: {
+    HeaderIntern,
+    DeckList
+  },
+
+  data: () => ({
+    session: null,
+    user: null
+  })
+}
+</script>

frontend/src/views/Home.vue

@@ -36,15 +36,17 @@ export default {
 
   mounted() {
     this.$nextTick(() => {
+      if (this.session) {
         axios
           .post('/user/login', {
             session: this.session
           })
           .then(response => {
             if (response.data.success) {
-            this.$router.push({ name: 'usercp' })
+              this.$router.push({ name: 'deckcp' })
             }
           })
+      }
     })
   }
 }

frontend/src/views/UserCP.vue

@@ -1,74 +1,29 @@
 <template>
   <v-content>
-    <v-container>
+    <HeaderIntern v-model="session" @user="user = $event" />
-      <Header>
-        <v-btn flat @click.native="logout">Logout</v-btn>
-      </Header>
 
-      <template v-if="user">
+    <v-container v-if="user">
-        <p>user logged in: {{ user.login }}</p>
+      <h2 class="headline">User Info</h2>
-      </template>
+      <UserInfo :session="session" :user="user" />
-
-      <DeckList :session="session" />
     </v-container>
   </v-content>
 </template>
 
 <script>
-import * as Cookies from 'js-cookie'
+import HeaderIntern from '@/components/HeaderIntern.vue'
-import axios from '@/plugins/axios'
+import UserInfo from '@/components/UserInfo.vue'
-
-import Header from '@/components/Header.vue'
-import DeckList from '@/components/DeckList.vue'
 
 export default {
   name: 'UserCP',
 
   components: {
-    Header,
+    HeaderIntern,
-    DeckList
+    UserInfo
   },
 
-  data: () => ({}),
+  data: () => ({
-
+    session: null,
-  methods: {
+    user: null
-    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
-          }
-        })
-    }
-  }
 }
 </script>