Started Frontend implementation
This commit is contained in:
parent
7641ea7ad3
commit
a4124fc6d4
|
@ -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": {
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<img src="./assets/logo.png">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 6.7 KiB |
|
@ -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')
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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>
|
|
@ -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>
|
|
@ -0,0 +1,8 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export const HTTP = axios.create({
|
||||
baseURL: `http://localhost:8082/api/v1/`,
|
||||
headers: {
|
||||
Authorization: 'Bearer {token}'
|
||||
}
|
||||
})
|
|
@ -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({
|
||||
|
|
|
@ -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
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue