InCuca · klarkc · Dec 13, 2017 · Dec 11, 2017 · Dec 11, 2017 · Dec 12, 2017
diff --git a/meta.js b/meta.js
@@ -3,7 +3,6 @@ const path = require('path');
 
 module.exports = {
   "prompts": {
-
     "name": {
       "type": "string",
       "required": true,
@@ -19,26 +18,26 @@ module.exports = {
       "type": "string",
       "message": "Author"
     },
-    "build": {
-      "type": "list",
-      "message": "Vue build",
-      "choices": [
-        {
-          "name": "Runtime + Compiler: recommended for most users",
-          "value": "standalone",
-          "short": "standalone"
-        },
-        {
-          "name": "Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere",
-          "value": "runtime",
-          "short": "runtime"
-        }
-      ]
-    },
-    "router": {
+    "extended": {
       "type": "confirm",
-      "message": "Install vue-router?"
-    },
+      "message": "Add basic Login and Admin views with Vuex, Vue-router and Bootstrap-vue?"
+    }
+  },
+  "filters": {
+    "client/router.js": "extended",
+    "client/static/main.css": "extended === false",
+    "client/static/images/**/*": "extended",
+    "client/components/**/*": "extended",
+    "client/services/**/*": "extended",
+    "client/store/**/*": "extended",
+    "client/style/**/*": "extended",
+    "client/view/**/*": "extended",
+    "server/boot/add-initial-data.js": "extended",
+    "server/boot/create-admin.js": "extended",
+    "server/initial-data/**/*": "extended",
+    "server/models/**/*": "extended",
+    "test/client/components/**/*": "extended",
+    "test/server/account.spec.js": "extended",
   },
   "complete": function(data, {logger}) {
     logger.log("To get started:");

diff --git a/package-lock.json b/package-lock.json
diff --git a/template/.babelrc b/template/.babelrc
@@ -1,3 +1,15 @@
 {
-  "presets": ["es2015"]
+  "presets": ["es2015"],
+  "plugins": [
+    [
+      "babel-plugin-root-import", [{
+        "rootPathPrefix": "~",
+        "rootPathSuffix": "."
+        }, {
+          "rootPathPrefix": "@",
+          "rootPathSuffix": "client"
+        }
+      ]
+    ]
+  ]
 }
diff --git a/template/.eslintrc b/template/.eslintrc
@@ -6,6 +6,9 @@
     "sourceType": "module"
   },
   "globals": {
-    "require": true
+    "expect": true,
+    "assert": true,
+    "require": true,
+    "request": true
   }
 }
diff --git a/template/client/App.vue b/template/client/App.vue
@@ -1,14 +1,21 @@
 <template lang="html">
-  <h1>\{{ hello }}</h1>
+  {{#extended}}
+    <router-view id="app"></router-view>
+  {{else}}
+    <h1>\{{ hello }}</h1>
+  {{/extended}}
 </template>
 
 <script>
 export default {
+  {{#unless extended}}
   data: () => ({
     hello: 'Hello World!',
   }),
+  {{/unless}}
 }
 </script>
 
-<style lang="css">
+<style {{#extended}}lang="scss"{{else}}lang="css"{{/extended}}>
+  {{#extended}}@import "style/app.scss";{{/extended}}
 </style>
diff --git a/template/client/components/HelloWorld/HelloWorld.vue b/template/client/components/HelloWorld/HelloWorld.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    Hello World! This content is restricted.
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
diff --git a/template/client/index.html b/template/client/index.html
@@ -2,7 +2,10 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title></title>
+    <title>{{name}}</title>
+    {{#extended}}
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    {{/extended}}
   </head>
   <body>
     <div id="app"></div>

diff --git a/template/client/main.js b/template/client/main.js
@@ -1,9 +1,41 @@
+{{#extended}}
+/* Required by BootstrapVue */
+import 'babel-polyfill';
+
+{{/extended}}
+/* Global Components */
 import Vue from 'vue';
+{{#extended}}
+import {sync} from 'vuex-router-sync';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+import BootstrapVue from 'bootstrap-vue';
+// import 'vue-awesome/icons';
+import Icon from 'vue-awesome';
+
+Vue.use(BootstrapVue);
+
+Vue.component('icon', Icon);
+
+{{/extended}}
+/* Local Components and modules */
 import App from './App.vue';
+{{#extended}}
+import router from './router.js';
+import store from './store';
 
+// Add router state to store
+sync(store, router);
+{{/extended}}
+{{#unless extended}}
 import './static/main.css';
+{{/unless}}
 
-new Vue({
+// Instance Application
+export default new Vue({
   el: '#app',
   render: (r) => r(App),
+  {{#extended}}
+  router,
+  store,
+  {{/extended}}
 });
diff --git a/template/client/router.js b/template/client/router.js
@@ -0,0 +1,56 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import store from '@/store';
+import Login from './view/Login.vue';
+import Dashboard from './view/Dashboard.vue';
+import Profile from './view/Profile.vue';
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+  mode: 'history',
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      redirect: {name: 'dashboard'},
+    }, {
+      path: '/dashboard',
+      name: 'dashboard',
+      component: Dashboard,
+      meta: {requiresAuth: true},
+    }, {
+      path: '/login',
+      name: 'login',
+      component: Login,
+    }, {
+      path: '/profile',
+      name: 'profile',
+      component: Profile,
+      // eslint-disable-next-line camelcase
+      props: route => ({access_token: route.query.access_token}),
+      meta: {requiresAuth: true},
+    },
+  ],
+});
+
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    // this route requires auth, check if logged in
+    // if not, redirect to login page (except when it's profile route and
+    // there is an access_token).
+    if (to.name === 'profile' && to.query.access_token) {
+      next();
+    } else if (!store.state.auth.access_token) {
+      next({
+        name: 'login',
+      });
+    } else {
+      next();
+    }
+  } else {
+    next(); // make sure to always call next()!
+  }
+});
+
+export default router;
diff --git a/template/client/services/loopback.js b/template/client/services/loopback.js
@@ -0,0 +1,37 @@
+import {host, restApiRoot, port} from '~/server/config.json';
+import axios from 'axios';
+
+const http = axios.create({
+  baseURL: 'http://' + host + ':' + port + restApiRoot,
+});
+
+http.setToken = token => {
+  http.defaults.headers.common['Authorization'] = token;
+};
+
+http.removeToken = () => {
+  delete http.defaults.headers.common.Authorization;
+};
+
+http.find = (endpoint, filter) => http.get(endpoint, {params: {filter}});
+
+const interceptErrors = err => {
+  try {
+    err = Object.assign(new Error(), err.response.data.error);
+  } catch (e) {
+    // Will return err if something goes wrong
+  }
+  return Promise.reject(err);
+};
+const interceptResponse = res => {
+  try {
+    return res.data;
+  } catch (e) {
+    return res;
+  }
+};
+http.interceptors.response.use(interceptResponse, interceptErrors);
+
+export default http;
+
+// Documentation: https://github.com/axios/axios
diff --git a/template/client/static/images/logo.png b/template/client/static/images/logo.png
diff --git a/template/client/store/index.js b/template/client/store/index.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+import auth from './modules/auth';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    breadcrumb: [{
+      text: 'Home',
+      to: '/dashboard',
+    }, {
+      text: 'Dashboard',
+      active: true,
+    }],
+  },
+  modules: {
+    auth, // auth namespaced
+  },
+});