node-fftcg/frontend/src/views/UserCP.vue

<template>
  <v-container>
    <Header />

    <p>user logged in: {{ user.login }}</p>

    <v-expansion-panel>
      <v-expansion-panel-content v-for="deck in decks" :key="deck.id">
        <template v-slot:header>
          <div>{{ deck.content.name }}</div>
        </template>
        <v-card>
          <v-card-text>
            {{ deck.content.note }}
            <ul>
              <li v-for="card in deck.content.cards" :key="card.serial">
                {{ card.serial }}: {{ cardsdb[card.serial].name }}
              </li>
            </ul>
          </v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>

    <v-btn @click.native="logout">Logout</v-btn>
  </v-container>
</template>

<script>
import * as Cookies from 'js-cookie'
import axios from '@/plugins/axios'
import CardsDB from '@/plugins/ffdecks'

import Header from '@/components/Header.vue'

export default {
  name: 'UserCP',

  components: {
    Header
  },

  data: () => ({
    user: '',
    decks: '',
    cardsdb: null
  }),

  methods: {
    goHome() {
      Cookies.remove('session')
      this.$router.push({ name: 'home' })
    },

    logout() {
      axios
        .post('/user/logout', {
          session: Cookies.get('session')
        })
        .then(response => {
          if (response.data.success) {
            this.goHome()
          }
        })
    }
  },

  mounted() {
    this.cardsdb = CardsDB

    axios
      .post('/user/info', {
        session: Cookies.get('session')
      })
      .then(response => {
        if (response.data.success) {
          this.user = response.data.user
        } else {
          this.goHome()
        }
      })
    axios
      .post('/decks/list', {
        session: Cookies.get('session')
      })
      .then(response => {
        if (response.data.success) {
          this.decks = response.data.decks
        }
      })
  }
}
</script>