Add "app" component, for basic layout and housekeeping

package.json

@@ -7,7 +7,10 @@
     "build": "vue-cli-service build --target lib --name byjove src/index.js"
   },
   "dependencies": {
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-resource": "^1.5.1",
+    "vue-router": "^3.1.3",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-service": "^3.0.5",

src/App.vue

@@ -1,13 +1,31 @@
 <template>
   <div id="app">
-    <div id="nav">
+    <byjove-app :appsettings="appsettings">
-      <router-link to="/">Home</router-link> |
+      <div id="nav">
-      <router-link to="/about">About</router-link>
+        <router-link to="/">Home</router-link> |
-    </div>
+        <router-link to="/about">About</router-link>
-    <router-view/>
+      </div>
+    </byjove-app>
   </div>
 </template>
 
+<script>
+import {ByjoveApp} from './components'
+import appsettings from './appsettings'
+
+export default {
+    name: 'app',
+    components: {
+        ByjoveApp,
+    },
+    data() {
+        return {
+            appsettings: appsettings,
+        }
+    },
+}
+</script>
+
 <style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;

src/components/app/ByjoveApp.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="main-container">
+    <slot>
+      <p>TODO: put your nav in the default slot!</p>
+    </slot>
+    <div class="page-content">
+      <router-view />
+    </div>
+    <footer class="footer">
+      <slot name="footer">
+        <router-link to="/about">{{ appsettings.appTitle }} {{ appsettings.version }}</router-link>
+      </slot>
+    </footer>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'ByjoveApp',
+    props: {
+        appsettings: Object,
+    },
+    created: function() {
+
+        // when main app is first created, fetch user session data from
+        // backend; this will tell us who the user is (or if they're not yet
+        // logged in) which in turn is used to control which features are
+        // exposed.  also this gives us the XSRF token cookie from the server.
+        // TODO: make this API URL configurable, somehow..?
+        this.$http.get('/api/session').then(response => {
+
+            // let all of app know who the user is(n't)
+            this.$store.commit('setUser', response.data.user)
+
+            // also keep track of user's permissions
+            this.$store.commit('setPermissions', response.data.permissions)
+
+            // if user is anonymous, and requested logout page, send to login instead
+            if (!response.data.user && this.$route.name == 'logout') {
+                this.$router.push('/login')
+
+            // if user is logged in, and requested login page, send to home instead
+            } else if (response.data.user && this.$route.name == 'login') {
+                this.$router.push('/')
+            }
+        })
+    },
+    mounted: function () {
+
+        // // cache the app version
+        // // this.$store.commit('setAppVersion', appsettings.version);
+        // this.$store.commit('setAppVersion', this.appsettings.version);
+
+        // add "testing" watermark unless running in production mode
+        // if (!appsettings.production) {
+        if (!this.appsettings.production) {
+            // document.body.style.backgroundImage = appsettings.watermark;
+            document.body.style.backgroundImage = this.appsettings.watermark;
+        }
+    }
+}
+</script>
+
+<!-- TODO: grr, why does this not work?! -->
+<!-- <style scoped> -->
+<!-- /* #app { */ -->
+<!-- /*   font-family: 'Avenir', Helvetica, Arial, sans-serif; */ -->
+<!-- /*   -webkit-font-smoothing: antialiased; */ -->
+<!-- /*   -moz-osx-font-smoothing: grayscale; */ -->
+<!-- /*   color: #2c3e50; */ -->
+<!-- /* } */ -->
+<!-- .main-container { -->
+<!--   display: flex; -->
+<!--   min-height: 100vh; -->
+<!--   flex-direction: column; -->
+<!-- } -->
+<!-- .page-content { -->
+<!--     flex: 1; -->
+<!--     padding: 0.5rem 1rem 0.5rem 0.5rem; -->
+<!-- } -->
+<!-- .footer { -->
+<!--     text-align: center; -->
+<!-- } -->
+<!-- </style> -->

src/components/app/index.js

@@ -0,0 +1,3 @@
+import ByjoveApp from './ByjoveApp'
+
+export default ByjoveApp

src/components/index.js

@@ -1,7 +1,9 @@
+import ByjoveApp from './app'
 import ByjoveLogo from './logo'
 import ByjoveFeedback from './feedback'
 
 export {
+    ByjoveApp,
     ByjoveLogo,
     ByjoveFeedback,
 }

src/main.js

@@ -1,7 +1,10 @@
+console.log("SHOULD BE IN TESTING MODE")
+
 import Vue from 'vue'
 import Vuex from 'vuex'
 import App from './App.vue'
 import router from './router'
+import vueResource from 'vue-resource'
 import {ByjoveStoreConfig} from './store'
 
 Vue.config.productionTip = false
@@ -10,6 +13,8 @@ Vue.use(Vuex)
 
 let store = new Vuex.Store(ByjoveStoreConfig)
 
+Vue.use(vueResource)
+
 new Vue({
   router,
   store,

src/router.js

@@ -1,3 +1,5 @@
+console.log("SHOULD BE IN TESTING MODE")
+
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from './views/Home.vue'