101 lines
2.4 KiB
Vue
101 lines
2.4 KiB
Vue
|
<template>
|
||
|
<div style="">
|
||
|
<div class="header">
|
||
|
</div>
|
||
|
<v-container grid-list-md>
|
||
|
<v-layout row wrap>
|
||
|
<v-flex md4></v-flex>
|
||
|
<v-flex md4 v-if="!$store.state.loggedIn">
|
||
|
<Login></Login>
|
||
|
</v-flex>
|
||
|
<v-flex md4 v-if="$store.state.loggedIn">
|
||
|
<p>Hallo {{$store.getters.getMe["username"]}}, du bist bereits eingeloggt.</p>
|
||
|
</v-flex>
|
||
|
|
||
|
|
||
|
</v-layout>
|
||
|
</v-container>
|
||
|
|
||
|
|
||
|
</div>
|
||
|
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import ServerService from '../services/Server'
|
||
|
import UserService from '../services/User'
|
||
|
import LoginComponent from '../components/Login'
|
||
|
|
||
|
export default {
|
||
|
data () {
|
||
|
return {
|
||
|
nameBig: '',
|
||
|
nameSmall: '',
|
||
|
username: '',
|
||
|
password: '',
|
||
|
errorMessage: ''
|
||
|
}
|
||
|
},
|
||
|
components: {
|
||
|
"Login": LoginComponent
|
||
|
},
|
||
|
methods: {
|
||
|
'login': function () {
|
||
|
UserService.login(this.username, this.password).then((res) => {
|
||
|
this.errorMessage = '';
|
||
|
UserService.setAccessToken(res.data.data["access_token"]);
|
||
|
console.log("Login ok, dispatch event");
|
||
|
this.$store.dispatch('checkAccount');
|
||
|
}, (res) => {
|
||
|
this.errorMessage = res.response.data.msg;
|
||
|
});
|
||
|
}
|
||
|
},
|
||
|
mounted: function() {
|
||
|
console.log("REDIRECT: "+this.$store.state.redirectIfLoggedIn)
|
||
|
if(this.$store.state.loggedIn == true && this.$store.state.redirectIfLoggedIn != null) {
|
||
|
this.$router.push(this.$store.state.redirectIfLoggedIn);
|
||
|
}
|
||
|
this.nameBig = this.$store.getters.getSettingValue("name_big");
|
||
|
this.nameSmall = this.$store.getters.getSettingValue("name_small");
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
.header {
|
||
|
background-image: url('~@/assets/manhattan-407703_1920.jpg');
|
||
|
background-repeat: no-repeat;
|
||
|
margin-top: -100px;
|
||
|
height: 30vh;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.header h1{
|
||
|
padding-top: 200px;
|
||
|
font-size: 56px !important;
|
||
|
font-weight: 400;
|
||
|
line-height: 32px !important;
|
||
|
letter-spacing: normal !important;
|
||
|
}
|
||
|
.header h1 .small{
|
||
|
font-weight: 300 !important;
|
||
|
}
|
||
|
.header h2{
|
||
|
padding-top: 30px;
|
||
|
font-size: 34px !important;
|
||
|
font-weight: 300;
|
||
|
line-height: 32px !important;
|
||
|
letter-spacing: normal !important;
|
||
|
}
|
||
|
h1{
|
||
|
font-weight: 300;
|
||
|
line-height: 32px !important;
|
||
|
letter-spacing: normal !important;
|
||
|
}
|
||
|
h2{
|
||
|
font-weight: 300;
|
||
|
line-height: 32px !important;
|
||
|
letter-spacing: normal !important;
|
||
|
}
|
||
|
</style>
|