konrad
/
Library
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

made login work

This commit is contained in:
kolaente 2017-11-09 14:24:59 +01:00
parent a4124fc6d4
commit 5df221d210
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
6 changed files with 78 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/index.html
View File

@ -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>

1
frontend/package.json
View File

@ -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"
},

17
frontend/src/auth/index.js
View File

@ -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
}
})
},

12
frontend/src/components/Home.vue
View File

@ -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>

41
frontend/src/components/Login.vue
View File

@ -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>&nbsp;&nbsp;
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>

7
frontend/src/main.js
View File

@ -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()