rss-unlimited/app/main.vue

<script>
const { jwt } = require('./security')
const gravatar = require('gravatar')
import VueRouter from 'vue-router'
import Home from './home.vue'
import Signup from './signup.vue'
import Signin from './signin.vue'
import Confirm from './confirm.vue'
import Dashboard from './dashboard.vue'
import Feed from './feed.vue'
import NewFeed from './new-feed.vue'

const router = new VueRouter({
  routes: [
    { path: '', component: Home },
    { path: '/signup', component: Signup },
    { path: '/signin', component: Signin },
    { path: '/confirm/:email', component: Confirm },
    { path: '/dashboard', component: Dashboard },
    { path: '/feeds/new', component: NewFeed },
    { path: '/feeds/:id', component: Feed }
  ]
})

router.beforeEach((to, from, next) => {
  console.log(to, from)
  next()
})


export default {
  router,
  data() {
    return {
      drawer: null,
      jwt
    }
  },
  computed: {
    gravatar() {
      return jwt.token && gravatar.url(jwt.identity.email, {
        size: 24,
        default: 'retro'
      })
    },
    name() {
      return jwt.token && jwt.identity.name
    }
  },
  methods: {
    signout() {
      jwt.token = null
      this.$router.push('/')
    }
  }
}
</script>

<template>
    <v-app dark>
      <v-navigation-drawer clipped fixed app v-model="drawer">
        <!-- <v-toolbar flat>
          <v-toolbar-side-icon v-on:click="drawer = !drawer" />
          <v-toolbar-title>RSS Archive</v-toolbar-title>
        </v-toolbar> -->
        <v-list>
          <v-list-tile v-if="jwt.token">
            <v-list-tile-action>
              <img :src="gravatar" />
            </v-list-tile-action>
            <v-list-tile-title>{{name}}</v-list-tile-title>
          </v-list-tile>

          <v-list-tile v-if="!jwt.token" to="/signin">
            <v-list-tile-action>
              <v-icon>account_circle</v-icon>
            </v-list-tile-action>
            <v-list-tile-title>Sign in</v-list-tile-title>
          </v-list-tile>

          <v-list-tile v-if="!jwt.token" to="/signup">
            <v-list-tile-action>
              <v-icon>person_add</v-icon>
            </v-list-tile-action>
            <v-list-tile-title>Sign up</v-list-tile-title>
          </v-list-tile>

          <v-list-tile v-if="jwt.token" @click="signout">
            <v-list-tile-action>
              <v-icon>account_circle</v-icon>
            </v-list-tile-action>
            <v-list-tile-title>Sign out</v-list-tile-title>
          </v-list-tile>

          <v-list-tile to="/">
            <v-list-tile-action>
              <v-icon>home</v-icon>
            </v-list-tile-action>
            <v-list-tile-title>Home</v-list-tile-title>
          </v-list-tile>
        </v-list>
        <v-divider></v-divider>

      </v-navigation-drawer>
      <v-toolbar app fixed clipped-left color="primary">
        <v-toolbar-side-icon v-on:click="drawer = !drawer" />
        <v-toolbar-title>RSS Archive</v-toolbar-title>
      </v-toolbar>
      <v-content>
        <v-container>
          <router-view />
        </v-container>
      </v-content>
    </v-app>
</template>

<style scoped>
  .hero {
    text-align: center;
  }
</style>