135 lines
4.4 KiB
Vue
135 lines
4.4 KiB
Vue
<template>
|
|
<div class="q-pa-md">
|
|
<form class="login" @submit.prevent="login">
|
|
<div class="q-pa-md">
|
|
<div class="column q-gutter-lg" style="">
|
|
<div class="col">
|
|
<div class="">
|
|
<div class="" style="max-width: 440px">
|
|
<q-input outlined filled stack-label v-model="user.username" type="text" label="Benutzername" autocomplete="username"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="">
|
|
<div class="" style="max-width: 440px">
|
|
<q-input outlined filled stack-label v-model="user.password" type="password" label="Passwort" autocomplete="current-password"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="">
|
|
<div class="" style="max-width: 440px">
|
|
<q-btn
|
|
:outline="userAuthenticated"
|
|
:disabled="userAuthenticated"
|
|
label="Login"
|
|
color="primary"
|
|
class="full-width"
|
|
type="submit"
|
|
unelevated
|
|
/>
|
|
<q-btn
|
|
:outline="!userAuthenticated"
|
|
:disabled="!userAuthenticated"
|
|
label="Logout"
|
|
color="red"
|
|
class="full-width q-mt-md"
|
|
unelevated
|
|
@click="logout"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<q-dialog v-model="credentialsDialog" persistent transition-show="scale" transition-hide="scale">
|
|
<q-card class="bg-red-9 text-white" style="">
|
|
<q-card-section>
|
|
<div class="text-h6">Fehler</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section>
|
|
Es konnten keine übereinstimmenden Zugangsdaten in der Datenbank gefunden werden.
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<q-btn flat label="OK" color="red-9" v-close-popup />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog> </div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
user: {
|
|
username: "moximoti",
|
|
password: "1234",
|
|
//token: "",
|
|
// evalAuthentication: false
|
|
},
|
|
credentialsDialog: false,
|
|
};
|
|
},
|
|
// beforeMount: {
|
|
// init: function () {
|
|
// this.evalAuthentication();
|
|
// console.log("initiated");
|
|
// }
|
|
// },
|
|
created () {
|
|
this.evalAuthentication();
|
|
console.log("created: initiated");
|
|
},
|
|
computed: {
|
|
userAuthenticated() {
|
|
return this.$store.state.auth.userAuthenticated.isAuthenticated
|
|
}
|
|
},
|
|
methods: {
|
|
login: function () {
|
|
const data = {
|
|
username: this.user.username,
|
|
password: this.user.password
|
|
};
|
|
|
|
console.log("GET http://localhost:8080/api/login/ - json: " + JSON.stringify(data));
|
|
|
|
this.$axios.post('http://localhost:8080/api/login', data)
|
|
.then((response) => {
|
|
// TODO Catch clause funktioniert nicht mehr wenn Statuscode zurückgegeben wird. -> hier if/else mit HTTP-Codes
|
|
console.log("GET/POST http://localhost:8080/api/login/ - response: " + response.data);
|
|
localStorage.setItem('userToken', JSON.stringify(response.data));
|
|
this.evalAuthentication();
|
|
})
|
|
.catch((error) => {
|
|
console.log("error: " + error);
|
|
this.credentialsDialog=true;
|
|
})
|
|
},
|
|
evalAuthentication: function () {
|
|
this.$store.commit('auth/SET_AUTHENTICATED');
|
|
},
|
|
logout: function () {
|
|
console.log("logout()");
|
|
console.log(JSON.parse(localStorage.getItem('userToken')));
|
|
this.$axios.get('http://localhost:8080/api/logout', {
|
|
params: {
|
|
token: JSON.parse(localStorage.getItem('userToken'))
|
|
}
|
|
})
|
|
.then((response) => {
|
|
console.log("GET/POST http://localhost:8080/api/logout/ - response: " + response.data);
|
|
})
|
|
.catch((error) => {
|
|
});
|
|
localStorage.removeItem('userToken');
|
|
this.evalAuthentication();
|
|
},
|
|
},
|
|
};
|
|
</script>
|