<template>
<div id="app">
  <router-view v-if="currentUser"></router-view>
  <login v-else></login>
</div>
</template>

<script>
import Login from './components/auth/login'
import User from './utilities/user'
export default {
  name: 'app',

  store: ['currentUser'],

  mounted() {
    this.login()
    this.$api
      .service('user')
      .on('updated', user => this.onCurrentUserUpdated(user, this))
      .on('patched', user => this.onCurrentUserUpdated(user, this))
  },

  methods: {
    /**
     * Watch for the currentUser to be updated.
     *
     * @return {void}
     */
    onCurrentUserUpdated(user, vm) {
      if (user._id === vm.currentUser._id) {
        vm.currentUser = new User(user)
      }
    },

    /**
     * Attempt to authenticate using credentials stored in localStorage.
     *
     * @return {void}
     */
    login() {
      let token = window.localStorage.getItem('feathers-jwt')
      if (token) {
        this.$api
          .authenticate('jwt')
          .then(res => this.$api.passport.verifyJWT(res.accessToken))
          .then(res => this.$api.service('user').get(res.userId))
          .then(user => { this.currentUser = new User(user) })
          .catch(error => console.error(error))
      }
    }
  },

  components: {
    'login': Login
  }
}
</script>

<style lang="scss">
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
@import "~sweetalert/dist/sweetalert";
@import "./assets/scss/app";
</style>