made login work
This commit is contained in:
parent
a4124fc6d4
commit
5df221d210
|
@ -1,8 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>library-frontend</title>
|
||||
<!-- Standard Meta -->
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<title>Books</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="http://localhost:8082/assets/semantic-ui/semantic.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
"dependencies": {
|
||||
"axios": "^0.17.0",
|
||||
"vue": "^2.5.2",
|
||||
"vue-awesome": "^2.3.4",
|
||||
"vue-resource": "^1.3.4",
|
||||
"vue-router": "^3.0.1"
|
||||
},
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import {HTTP} from '../http-common'
|
||||
import {router} from '../router'
|
||||
// const API_URL = 'http://localhost:8082/api/v1/'
|
||||
// const LOGIN_URL = 'http://localhost:8082/login'
|
||||
|
||||
|
@ -8,7 +9,7 @@ export default {
|
|||
authenticated: false
|
||||
},
|
||||
|
||||
login (creds) {
|
||||
login (context, creds, redirect) {
|
||||
HTTP.post('login', {
|
||||
username: creds.username,
|
||||
password: creds.password
|
||||
|
@ -20,9 +21,21 @@ export default {
|
|||
|
||||
// Tell others the user is autheticated
|
||||
this.user.authenticated = true
|
||||
|
||||
// Hide the loader
|
||||
context.loading = false
|
||||
|
||||
// Redirect if nessecary
|
||||
if (redirect) {
|
||||
router.go(redirect)
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
// Hide the loader
|
||||
context.loading = false
|
||||
if (e.response) {
|
||||
context.error = e.response.data.Message
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>{{ msg }}</h1>
|
||||
<p v-if="user.authenticated">Logged in.</p>
|
||||
<div v-if="user.authenticated">
|
||||
|
||||
</div>
|
||||
<p v-if="user.authenticated">Logged in. <a @click="logout()">Logout</a></p>
|
||||
<p v-else-if="!user.authenticated">not logged in. <router-link to="/login">Login</router-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -13,9 +15,13 @@ export default {
|
|||
name: 'Home',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Welcome',
|
||||
user: auth.user
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logout () {
|
||||
auth.logout()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -23,7 +23,12 @@
|
|||
<div class="ui fluid large blue submit button" @click="submit()">Login</div>
|
||||
</div>
|
||||
|
||||
<div class="ui error message" v-if="error">
|
||||
<div class="ui info message" v-if="loading">
|
||||
<icon name="refresh" spin></icon>
|
||||
Loggig you in...
|
||||
</div>
|
||||
|
||||
<div class="ui error message" v-if="error" style="display: block;">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
|
@ -34,6 +39,7 @@
|
|||
|
||||
<script>
|
||||
import auth from '../auth'
|
||||
import router from '../router'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
|
@ -42,19 +48,48 @@
|
|||
username: '',
|
||||
password: ''
|
||||
},
|
||||
error: ''
|
||||
error: '',
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount () {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (auth.user.authenticated) {
|
||||
router.go('/home')
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
submit () {
|
||||
this.loading = true
|
||||
this.error = ''
|
||||
var credentials = {
|
||||
username: this.credentials.username,
|
||||
password: this.credentials.password
|
||||
}
|
||||
|
||||
auth.login(credentials)
|
||||
auth.login(this, credentials, '/home')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
body {
|
||||
background-color: #efefef;
|
||||
}
|
||||
body > .grid {
|
||||
height: 100%;
|
||||
}
|
||||
.image {
|
||||
margin-top: -100px;
|
||||
}
|
||||
.column {
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.error.message{
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -5,6 +5,13 @@ import App from './App'
|
|||
import router from './router'
|
||||
import auth from './auth'
|
||||
|
||||
// or import all icons if you don't care about bundle size
|
||||
import 'vue-awesome/icons'
|
||||
/* Register component with one of 2 methods */
|
||||
import Icon from 'vue-awesome/components/Icon'
|
||||
|
||||
// globally (in your main .js file)
|
||||
Vue.component('icon', Icon)
|
||||
// Check the user's auth status when the app starts
|
||||
auth.checkAuth()
|
||||
|
||||
|
|
Loading…
Reference in New Issue