usercp/deckcp split

frontend/src/components/HeaderIntern.vue

@@ -1,5 +1,9 @@
 <template>
-  <Header>
+  <Header v-if="user">
+    <v-btn flat :to="{ name: 'deckcp' }">
+      <v-icon>view_carousel</v-icon> Decks
+    </v-btn>
+
     <v-btn flat :to="{ name: 'usercp' }">
       <v-icon>person</v-icon> {{ user.login }}
     </v-btn>
@@ -25,10 +29,7 @@
             Cancel
           </v-btn>
 
-          <v-btn
+          <v-btn color="success" @click.native="logout">
-            color="success"
-            @click.native="logout"
-          >
             Confirm
           </v-btn>
         </v-card-actions>
@@ -85,19 +86,21 @@ export default {
   asyncComputed: {
     user: {
       get() {
-      return axios
+        return axios
-        .post('/user/info', {
+          .post('/user/info', {
-          session: this.session
+            session: this.session
-        })
+          })
-        .then(response => {
+          .then(response => {
-          if (response.data.success) {
+            if (response.data.success) {
-            this.$emit('input', this.session)
+              this.$emit('input', this.session)
-            return response.data.user
+              this.$emit('user', response.data.user)
-          } else {
+              return response.data.user
-            this.goHome()
+            } else {
-            return null
+              this.goHome()
-          }
+              return null
-        })},
+            }
+          })
+      },
       default: {
         user: 0,
         login: '',

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/Login.vue

@@ -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/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(() => {
-      axios
+      if (this.session) {
-        .post('/user/login', {
+        axios
-          session: this.session
+          .post('/user/login', {
-        })
+            session: this.session
-        .then(response => {
+          })
-          if (response.data.success) {
+          .then(response => {
-            this.$router.push({ name: 'usercp' })
+            if (response.data.success) {
-          }
+              this.$router.push({ name: 'deckcp' })
-        })
+            }
+          })
+      }
     })
   }
 }

frontend/src/views/UserCP.vue

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