.gitignore

@@ -254,8 +254,10 @@ paket-files/
 
 # Compiled files / application
 src/api/build
+src/api/MyPrayerJournal.Api/wwwroot/favicon.ico
 src/api/MyPrayerJournal.Api/wwwroot/index.html
-src/api/MyPrayerJournal.Api/wwwroot/static
+src/api/MyPrayerJournal.Api/wwwroot/css
+src/api/MyPrayerJournal.Api/wwwroot/js
 src/api/MyPrayerJournal.Api/appsettings.development.json
 /build
 src/*.exe

src/app/package.json

@@ -11,6 +11,9 @@
     "apistart": "cd ../api/MyPrayerJournal.Api && dotnet run",
     "vue": "vue-cli-service build && cd ../api/MyPrayerJournal.Api && dotnet run"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "dependencies": {
     "auth0-js": "^9.7.3",
     "axios": "^0.18.0",

src/app/src/App.vue

@@ -1,31 +1,69 @@
-<template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
-  </div>
+<template lang="pug">
+#app
+  navigation
+  #content.container
+    router-view
+    vue-progress-bar
+    toast(ref='toast')
+  footer
+    p.text-right.text-muted
+      | myPrayerJournal v{{ version }}
+      br
+      em: small.
+        #[router-link(:to="{ name: 'PrivacyPolicy' }") Privacy Policy] &bull;
+        #[router-link(:to="{ name: 'TermsOfService' }") Terms of Service] &bull;
+        #[a(href='https://github.com/bit-badger/myprayerjournal') Developed] and hosted by
+        #[a(href='https://bitbadger.solutions') Bit Badger Solutions]
 </template>
 
+<script>
+'use strict'
+import Navigation from './components/Navigation.vue'
+import { version } from '../package.json'
+export default {
+  name: 'app',
+  components: {
+    Navigation
+  },
+  data () {
+    return { version }
+  },
+  mounted () {
+    this.$refs.toast.setOptions({ position: 'bottom right' })
+  },
+  computed: {
+    toast () {
+      return this.$refs.toast
+    }
+  }
+}
+</script>
+
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+html, body {
+  background-color: whitesmoke;
 }
-#nav {
-  padding: 30px;
+body {
+  padding-top: 60px;
 }
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
+footer {
+  border-top: solid 1px lightgray;
+  margin-top: 1rem;
+  padding: 0 1rem;
 }
-
-#nav a.router-link-exact-active {
-  color: #42b983;
+footer p {
+  margin: 0;
 }
-</style>
+a:link, a:visited {
+  color: #050;
+}
+.mpj-request-text {
+  white-space: pre-line;
+}
+.bg-mpj {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#050), to(whitesmoke));
+  background-image: -webkit-linear-gradient(top, #050, whitesmoke);
+  background-image: -moz-linear-gradient(top, #050, whitesmoke);
+  background-image: linear-gradient(to bottom, #050, whitesmoke);
+}
+</style>

src/app/src/store/index.js

@@ -9,7 +9,7 @@ import actions from './action-types'
 
 Vue.use(Vuex)
 
-this.auth0 = new AuthService()
+const auth0 = new AuthService()
 
 const logError = function (error) {
   if (error.response) {
@@ -34,11 +34,11 @@ export default new Vuex.Store({
   state: {
     user: JSON.parse(localStorage.getItem('user_profile') || '{}'),
     isAuthenticated: (() => {
-      this.auth0.scheduleRenewal()
-      if (this.auth0.isAuthenticated()) {
+      auth0.scheduleRenewal()
+      if (auth0.isAuthenticated()) {
         api.setBearer(localStorage.getItem('id_token'))
       }
-      return this.auth0.isAuthenticated()
+      return auth0.isAuthenticated()
     })(),
     journal: {},
     isLoadingJournal: false

src/app/vue.config.js

@@ -1,3 +1,6 @@
 module.exports = {
-  outputDir: '../api/MyPrayerJournal.Api/wwwroot'
+  outputDir: '../api/MyPrayerJournal.Api/wwwroot',
+  css: {
+    modules: true
+  }
 }