+
+
+
+
+
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
new file mode 100644
index 0000000..09ca634
--- /dev/null
+++ b/src/components/AppNav.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/Login.vue b/src/components/Login.vue
new file mode 100644
index 0000000..166d7ca
--- /dev/null
+++ b/src/components/Login.vue
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue
new file mode 100644
index 0000000..0c99f37
--- /dev/null
+++ b/src/components/TodoItem.vue
@@ -0,0 +1,24 @@
+
+
+
+ {{ todo.content }}
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/Todos.vue b/src/components/Todos.vue
new file mode 100644
index 0000000..801545d
--- /dev/null
+++ b/src/components/Todos.vue
@@ -0,0 +1,136 @@
+
+
+
+
+
+
+
+
+ TODOs
+
+ ({{ total }})
+
+
+
+
+
+
+
+
+
+ {{ errorMessage }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/common/Spinner.vue b/src/components/common/Spinner.vue
new file mode 100644
index 0000000..1d2f59a
--- /dev/null
+++ b/src/components/common/Spinner.vue
@@ -0,0 +1,92 @@
+
+
+
+
+
+
{{ message }}
+
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..1760838
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,33 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+Vue.use(BootstrapVue)
+
+import VueResource from 'vue-resource'
+Vue.use(VueResource)
+
+import App from '@/components/App'
+import router from './router'
+import store from './store'
+
+Vue.config.productionTip = false
+
+/* Auth plugin */
+import Auth from './auth'
+Vue.use(Auth)
+
+/* Auth plugin */
+import Zipkin from './zipkin'
+Vue.use(Zipkin)
+
+/* eslint-disable no-new */
+new Vue({
+ el: '#app',
+ router,
+ store,
+ template: '',
+ components: { App }
+})
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..1a4cccf
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+
+import Auth from '@/auth'
+import Router from 'vue-router'
+Vue.use(Router)
+
+export default new Router({
+ routes: [
+ {
+ path: '/login',
+ name: 'login',
+ component: require('@/components/Login.vue')
+ },
+ {
+ path: '/',
+ alias: '/todos',
+ name: 'todos',
+ component: require('@/components/Todos.vue'),
+ beforeEnter: requireLoggedIn
+ }
+ ]
+})
+
+function requireLoggedIn (to, from, next) {
+ if (!Auth.isLoggedIn()) {
+ next({
+ path: '/login',
+ query: { redirect: to.fullPath }
+ })
+ } else {
+ next()
+ }
+}
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..754224e
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { state } from './state'
+import * as mutations from './mutations'
+import plugins from './plugins'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+ state,
+ mutations,
+ plugins
+})
+
+export default store
diff --git a/src/store/mutations.js b/src/store/mutations.js
new file mode 100644
index 0000000..fd9256a
--- /dev/null
+++ b/src/store/mutations.js
@@ -0,0 +1,18 @@
+export const UPDATE_AUTH = (state, auth) => {
+ state.auth = auth
+}
+
+export const UPDATE_USER = (state, user) => {
+ state.user = user
+}
+
+export const CLEAR_ALL_DATA = (state) => {
+ // Auth
+ state.auth.isLoggedIn = false
+ state.auth.accessToken = null
+
+ // User
+ state.user.name = ''
+ state.user.role = null
+}
+
diff --git a/src/store/plugins.js b/src/store/plugins.js
new file mode 100644
index 0000000..0f3ca33
--- /dev/null
+++ b/src/store/plugins.js
@@ -0,0 +1,15 @@
+import { STORAGE_KEY } from './state'
+
+const localStoragePlugin = store => {
+ store.subscribe((mutation, state) => {
+ const syncedData = { auth: state.auth, user: state.user }
+
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(syncedData))
+
+ if (mutation.type === 'CLEAR_ALL_DATA') {
+ localStorage.removeItem(STORAGE_KEY)
+ }
+ })
+}
+
+export default [localStoragePlugin]
diff --git a/src/store/state.js b/src/store/state.js
new file mode 100644
index 0000000..24514a6
--- /dev/null
+++ b/src/store/state.js
@@ -0,0 +1,20 @@
+export const STORAGE_KEY = 'microservice-app-example-frontend'
+
+let syncedData = {
+ auth: {
+ isLoggedIn: false,
+ accessToken: null,
+ refreshToken: null
+ },
+ user: {
+ name: null
+ }
+}
+
+// Sync with local storage.
+if (localStorage.getItem(STORAGE_KEY)) {
+ syncedData = JSON.parse(localStorage.getItem(STORAGE_KEY))
+}
+
+// Merge data and export it.
+export const state = Object.assign(syncedData)
diff --git a/src/zipkin.js b/src/zipkin.js
new file mode 100644
index 0000000..82ced7d
--- /dev/null
+++ b/src/zipkin.js
@@ -0,0 +1,42 @@
+import {
+ Tracer,
+ BatchRecorder,
+ ExplicitContext,
+ jsonEncoder
+} from 'zipkin'
+import {HttpLogger} from 'zipkin-transport-http'
+import {zipkinInterceptor} from 'zipkin-instrumentation-vue-resource'
+const ZIPKIN_URL = window.location.protocol + '//' + window.location.host + '/zipkin'
+/**
+* Tracing plugin that uses Zipkin. Initiates new traces with outgoing requests
+* and injects appropriate headers.
+*/
+export default {
+
+ /**
+ * Install the Auth class.
+ *
+ * Creates a Vue-resource http interceptor to handle automatically adding auth headers
+ * and refreshing tokens. Then attaches this object to the global Vue (as Vue.auth).
+ *
+ * @param {Object} Vue The global Vue.
+ * @param {Object} options Any options we want to have in our plugin.
+ * @return {void}
+ */
+ install (Vue, options) {
+ const serviceName = 'frontend'
+ const tracer = new Tracer({
+ ctxImpl: new ExplicitContext(),
+ recorder: new BatchRecorder({
+ logger: new HttpLogger({
+ endpoint: ZIPKIN_URL,
+ jsonEncoder: jsonEncoder.JSON_V2
+ })
+ }),
+ localServiceName: serviceName
+ })
+
+ const interceptor = zipkinInterceptor({tracer, serviceName})
+ Vue.http.interceptors.push(interceptor)
+ }
+}
diff --git a/static/.gitkeep b/static/.gitkeep
new file mode 100644
index 0000000..e69de29