+Vuex +ElementUI +Pug

- Log on now works, storing user profile in vuex state
- Templates in Pug = awesome

src/app/src/components/Dashboard.vue

@@ -1,21 +1,23 @@
-<template>
-  <article>
-    <page-title title="Your Dashboard" />
-    <p>here you are! {{ JSON.stringify(this.user) }}</p>
-  </article>
+<template lang="pug">
+  article
+    page-title(:title="title")
+    p here you are!
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import PageTitle from './PageTitle'
 
 export default {
   name: 'dashboard',
-  props: ['user'],
-  data () {
-    return {}
-  },
   components: {
     PageTitle
+  },
+  computed: {
+    title () {
+      return `${this.user.given_name}'s Dashboard`
+    },
+    ...mapState(['user'])
   }
 }
 </script>

src/app/src/components/Home.vue

@@ -1,22 +1,15 @@
-<template>
-  <article>
-    <page-title title="Welcome!" hideOnPage="true" />
-    <div class="row">
-      <div class="col">
-        <p>&nbsp;</p>
-        <p>
-          myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for
-          them, update them as God moves in the situation, and record a final answer received on that request.&nbsp; It
-          will also allow individuals to review their answered prayers.
-        </p>
-        <p>
-          This site is currently in very limited alpha, as it is being developed with a core group of test users.&nbsp;
-          If this is something in which you are interested, check back around mid-November 2017 for an update on the
-          development progress.
-        </p>
-      </div>
-    </div>
-  </article>
+<template lang="pug">
+  article
+    page-title(title="Welcome!" hideOnPage="true")
+    p &nbsp;
+    p.
+      myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them,
+      update them as God moves in the situation, and record a final answer received on that request.&nbsp; It will also
+      allow individuals to review their answered prayers.
+    p.
+      This site is currently in very limited alpha, as it is being developed with a core group of test users.&nbsp; If
+      this is something in which you are interested, check back around mid-November 2017 for an update on the
+      development progress.
 </template>
 
 <script>
@@ -24,9 +17,6 @@ import PageTitle from './PageTitle.vue'
 
 export default {
   name: 'home',
-  data () {
-    return {}
-  },
   components: {
     PageTitle
   }

src/app/src/components/Navigation.vue

@@ -1,25 +1,41 @@
-<template>
-  <b-navbar toggleable type="inverse" variant="inverse" fixed="top">
-    <b-nav-toggle target="navCollapse"></b-nav-toggle>
-    <b-link class="navbar-brand" :to="{ name: 'Home' }">
-      <span style="font-weight:100;">my</span><span style="font-weight:600;">Prayer</span><span style="font-weight:700;">Journal</span>
-    </b-link>
-    <b-collapse is-nav id="navCollapse">
-      <b-nav is-nav-bar>
-        <b-nav-item v-if="auth.authenticated" :to="{ name: 'Dashboard' }">Dashboard</b-nav-item>
-        <b-nav-item v-if="auth.authenticated" @click="auth.logout()">Log Off</b-nav-item>
-        <b-nav-item v-if="!auth.authenticated" @click="auth.login()">Log On</b-nav-item>
-      </b-nav>
-    </b-collapse>
-  </b-navbar>
+<template lang="pug">
+  el-menu(theme="dark" mode="horizontal" class="mpj-top-nav" router=true)
+    el-menu-item(index="/")
+      span(style="font-weight:100;") my
+      span(style="font-weight:600;") Prayer
+      span(style="font-weight:700;") Journal
+    el-menu-item(v-if="isAuthenticated" index="/dashboard") Dashboard
+    el-menu-item(v-if="isAuthenticated" index="3"): a(@click.stop="logOff()") Log Off
+    el-menu-item(v-if="!isAuthenticated" index="4"): a(@click.stop="logOn()") Log On
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import AuthService from '@/auth/AuthService'
+
 export default {
   name: 'navigation',
-  props: ['auth'],
-  data: function () {
-    return { }
-  }
+  data () {
+    return {
+      auth0: new AuthService()
+    }
+  },
+  methods: {
+    logOn () {
+      this.auth0.login()
+    },
+    logOff () {
+      this.auth0.logout(this.$store, this.$router)
+    }
+  },
+  computed: mapState(['isAuthenticated'])
 }
 </script>
+
+<style scoped>
+.mpj-top-nav {
+  position: fixed;
+  top: 0px;
+  width: 100%;
+}
+</style>

src/app/src/components/PageTitle.vue

@@ -1,14 +1,11 @@
-<template>
-  <h2 v-if="!hideOnPage" class="mpj-page-title" v-html="title"></h2>
+<template lang="pug">
+  h2.mpj-page-title(v-if="!hideOnPage" v-html="title")
 </template>
 
 <script>
 export default {
   name: 'page-title',
   props: ['title', 'hideOnPage'],
-  data () {
-    return {}
-  },
   created () {
     document.title = `${this.title} « myPrayerJournal`
   },

src/app/src/components/user/LogOn.vue

@@ -3,12 +3,13 @@
 </template>
 
 <script>
-  export default {
-    name: 'log-on',
-    props: ['auth'],
-    data () {
-      this.auth.handleAuthentication()
-      return {}
-    }
+import AuthService from '@/auth/AuthService'
+
+export default {
+  name: 'log-on',
+  data () {
+    new AuthService().handleAuthentication(this.$store, this.$router)
+    return {}
   }
+}
 </script>