login implemented and wired
This commit is contained in:
Timo Volkmann
parent
d7db6fd056
commit
ab4a642619
@ -24,10 +24,7 @@
|
||||
v-model="leftDrawerOpen"
|
||||
bordered
|
||||
show-if-above
|
||||
:mini="miniState"
|
||||
@mouseover="miniState = false"
|
||||
@mouseout="miniState = true"
|
||||
content-class="bg-green-1">
|
||||
content-class="">
|
||||
<q-list>
|
||||
<q-item-label header>Essential Links</q-item-label>
|
||||
<q-item
|
||||
@ -116,9 +113,9 @@ export default {
|
||||
name: "MyLayout",
|
||||
data() {
|
||||
return {
|
||||
//leftDrawerOpen: this.$q.platform.is.desktop,
|
||||
leftDrawerOpen: true,
|
||||
miniState: true
|
||||
leftDrawerOpen: this.$q.platform.is.desktop,
|
||||
//leftDrawerOpen: true,
|
||||
//miniState: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -1,45 +1,49 @@
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<!-- header und toolbar dürfen nur im Layout sein -->
|
||||
<!--
|
||||
<q-header reveal class="bg-white" text="green-8">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="bg-white text-green-8">Login</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
-->
|
||||
<form class="login" @submit.prevent="login">
|
||||
<div class="q-pa-md">
|
||||
<div class="column" style="">
|
||||
<div class="column q-gutter-lg" style="">
|
||||
<div class="col">
|
||||
<div class="q-pa-md">
|
||||
<div class="q-gutter-md" style="max-width: 300px">
|
||||
<q-input v-model="text" label="Benutzername"/>
|
||||
<div class="">
|
||||
<div class="" style="max-width: 300px">
|
||||
<q-input outlined filled stack-label v-model="user.username" type="text" label="Benutzername" autocomplete="username"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="q-pa-md">
|
||||
<div class="q-gutter-md" style="max-width: 300px">
|
||||
<q-input v-model="text" label="Passwort"/>
|
||||
<div class="">
|
||||
<div class="" style="max-width: 300px">
|
||||
<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="q-pa-md">
|
||||
<div class="q-gutter-md" style="max-width: 300px">
|
||||
<div class="">
|
||||
<div class="" style="max-width: 300px">
|
||||
<q-btn
|
||||
fab
|
||||
color="bg-white"
|
||||
text-color="green-8"
|
||||
icon="keyboard_arrow_right"
|
||||
:outline="this.user.isAuthenticated"
|
||||
:disabled="this.user.isAuthenticated"
|
||||
label="Login"
|
||||
color="primary"
|
||||
class="full-width"
|
||||
type="submit"
|
||||
unelevated
|
||||
/>
|
||||
<q-btn
|
||||
:outline="!this.user.isAuthenticated"
|
||||
:disabled="!this.user.isAuthenticated"
|
||||
label="Logout"
|
||||
color="red"
|
||||
class="full-width q-mt-md"
|
||||
unelevated
|
||||
@click="logout"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-page-sticky position="bottom-right" :offset="[18, 18]">-->
|
||||
<!--</q-page-sticky>-->
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -47,8 +51,49 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: ""
|
||||
user: {
|
||||
username: "moximoti",
|
||||
password: "1234",
|
||||
token: "",
|
||||
isAuthenticated: false
|
||||
},
|
||||
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login: function () {
|
||||
// const { username, password } = this;
|
||||
// this.$store.dispatch(AUTH_REQUEST, { username, password }).then(() => {
|
||||
// this.$router.push('/')
|
||||
// })
|
||||
const data = {
|
||||
username: this.user.username,
|
||||
password: this.user.password
|
||||
} //JSON.stringify(this.user);
|
||||
console.log("GET http://localhost:8080/api/login/ - json: " + JSON.stringify(data));
|
||||
this.$axios.post('http://localhost:8080/api/login', data)
|
||||
.then((response) => {
|
||||
console.log("GET http://localhost:8080/api/login/ - response: " + response.data);
|
||||
this.user.token = response.data;
|
||||
this.isAuthenticated();
|
||||
})
|
||||
},
|
||||
isAuthenticated: function () {
|
||||
console.log("isAuthenticated()");
|
||||
console.log(this.user.token);
|
||||
if (this.user.token === '') {
|
||||
this.user.isAuthenticated = false;
|
||||
} else {
|
||||
this.user.isAuthenticated = true;
|
||||
}
|
||||
console.log(this.user.token);
|
||||
},
|
||||
logout: function () {
|
||||
console.log("logout()");
|
||||
console.log(this.user.token);
|
||||
this.user.token = '';
|
||||
this.isAuthenticated()
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -40,16 +40,20 @@ public class Controller {
|
||||
|
||||
private AtomicLong counter = new AtomicLong();
|
||||
|
||||
@CrossOrigin(origins = "http://localhost:8081") // only for dev purpose
|
||||
@RequestMapping("/api/allCaches")
|
||||
@ResponseBody
|
||||
public String getAllCaches() {
|
||||
return new Gson().toJson(cacheRepository.findAll());
|
||||
}
|
||||
|
||||
@CrossOrigin(origins = "http://localhost:8081") // only for dev purpose
|
||||
@RequestMapping("/api/login")
|
||||
@ResponseBody
|
||||
public ResponseEntity<Object> login(@RequestBody User user){
|
||||
if(user.getUsername() == null || user.getPassword() == null){
|
||||
System.out.println(user.getUsername());
|
||||
System.out.println(user.getPassword());
|
||||
return ResponseEntity.status(401).body(null);
|
||||
}
|
||||
if(userRepository.findByUsername(user.getUsername()) == null){
|
||||
@ -66,6 +70,7 @@ public class Controller {
|
||||
return ResponseEntity.status(HttpStatus.BAD_GATEWAY).body(null);
|
||||
}
|
||||
|
||||
@CrossOrigin(origins = "http://localhost:8081") // only for dev purpose
|
||||
@RequestMapping("/api/startCache")
|
||||
public @ResponseBody
|
||||
String startCache(@RequestParam(value = "userID", defaultValue = "-1") String userID,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user