byjove/src/components/app/ByjoveApp.vue

<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,
    },
    beforeCreate: function() {

        // TODO: even with beforeCreate() this logic is still happening "too
        // slowly" for us to reliably check perms on first page load,
        // i.e. after browser refresh.  maybe can avoid async for the GET?

        // 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('SET_USER', response.data.user)
            this.$store.commit('SET_USER_IS_ROOT', response.data.user ? response.data.user.is_root : false)

            // also keep track of user's permissions
            this.$store.commit('SET_PERMISSIONS', 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('/')
            }

            // set background color, to whatever api said
            if (response.data.background_color) {
                document.body.style.backgroundColor = response.data.background_color
            }
        })
    },
    mounted: function () {

        // 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> -->