Started Frontend implementation

frontend/package.json

@@ -11,7 +11,9 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
+    "axios": "^0.17.0",
     "vue": "^2.5.2",
+    "vue-resource": "^1.3.4",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {

frontend/src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
     <router-view/>
   </div>
 </template>

frontend/src/auth/index.js

@@ -0,0 +1,48 @@
+import {HTTP} from '../http-common'
+// const API_URL = 'http://localhost:8082/api/v1/'
+// const LOGIN_URL = 'http://localhost:8082/login'
+
+export default {
+
+  user: {
+    authenticated: false
+  },
+
+  login (creds) {
+    HTTP.post('login', {
+      username: creds.username,
+      password: creds.password
+    })
+      .then(response => {
+        console.log(response)
+        // Save the token to local storage for later use
+        localStorage.setItem('token', response.data.token)
+
+        // Tell others the user is autheticated
+        this.user.authenticated = true
+      })
+      .catch(e => {
+        console.log(e)
+      })
+  },
+
+  logout () {
+    localStorage.removeItem('token')
+    this.user.authenticated = false
+  },
+
+  checkAuth () {
+    var jwt = localStorage.getItem('token')
+    if (jwt) {
+      this.user.authenticated = true
+    } else {
+      this.user.authenticated = false
+    }
+  },
+
+  getAuthHeader () {
+    return {
+      'Authorization': 'Bearer ' + localStorage.getItem('token')
+    }
+  }
+}

frontend/src/components/Home.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1>{{ msg }}</h1>
+    <p v-if="user.authenticated">Logged in.</p>
+    <p v-else-if="!user.authenticated">not logged in. <router-link to="/login">Login</router-link></p>
+  </div>
+</template>
+
+<script>
+import auth from '../auth'
+
+export default {
+  name: 'Home',
+  data () {
+    return {
+      msg: 'Welcome',
+      user: auth.user
+    }
+  }
+}
+</script>

frontend/src/components/Login.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="ui middle aligned center aligned grid">
+    <div class="column">
+      <h2 class="ui blue image header">
+        <div class="content">
+          Login
+        </div>
+      </h2>
+      <form class="ui large form" id="loginform">
+        <div class="ui stacked segment">
+          <div class="field">
+            <div class="ui left icon input">
+              <i class="user icon"></i>
+              <input type="text" name="username" placeholder="Username" v-model="credentials.username">
+            </div>
+          </div>
+          <div class="field">
+            <div class="ui left icon input">
+              <i class="lock icon"></i>
+              <input type="password" name="password" placeholder="Password" v-model="credentials.password">
+            </div>
+          </div>
+          <div class="ui fluid large blue submit button" @click="submit()">Login</div>
+        </div>
+
+        <div class="ui error message" v-if="error">
+          {{ error }}
+        </div>
+
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+  import auth from '../auth'
+
+  export default {
+    data () {
+      return {
+        credentials: {
+          username: '',
+          password: ''
+        },
+        error: ''
+      }
+    },
+
+    methods: {
+      submit () {
+        var credentials = {
+          username: this.credentials.username,
+          password: this.credentials.password
+        }
+
+        auth.login(credentials)
+      }
+    }
+  }
+</script>

frontend/src/http-common/index.js

@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+export const HTTP = axios.create({
+  baseURL: `http://localhost:8082/api/v1/`,
+  headers: {
+    Authorization: 'Bearer {token}'
+  }
+})

frontend/src/main.js

@@ -3,8 +3,10 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import auth from './auth'
 
-Vue.config.productionTip = true
+// Check the user's auth status when the app starts
+auth.checkAuth()
 
 /* eslint-disable no-new */
 new Vue({

frontend/src/router/index.js

@@ -1,15 +1,21 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import Home from '@/components/Home'
+import Login from '@/components/Login'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
-      path: '/',
-      name: 'Hello',
-      component: HelloWorld
+      path: '/home',
+      name: 'Home',
+      component: Home
+    },
+    {
+      path: '/login',
+      name: 'Login',
+      component: Login
     }
   ]
 })