Vue it is

I know, the 18th front-end change; I have a feeling there won't be a
19th.

src/app/src/components/Dashboard.vue

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

src/app/src/components/Home.vue

@@ -0,0 +1,34 @@
+<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>
+
+<script>
+import PageTitle from './PageTitle.vue'
+
+export default {
+  name: 'home',
+  data () {
+    return {}
+  },
+  components: {
+    PageTitle
+  }
+}
+</script>

src/app/src/components/Navigation.vue

@@ -0,0 +1,25 @@
+<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>
+
+<script>
+export default {
+  name: 'navigation',
+  props: ['auth'],
+  data: function () {
+    return { }
+  }
+}
+</script>

src/app/src/components/PageTitle.vue

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

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

@@ -0,0 +1,14 @@
+<template>
+  <p>hang tight...</p>
+</template>
+
+<script>
+  export default {
+    name: 'log-on',
+    props: ['auth'],
+    data () {
+      this.auth.handleAuthentication()
+      return {}
+    }
+  }
+</script>