hft-informatik/ubiquitous-computing-geo-timetracking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

menu depending on loginstate

Browse Source
This commit is contained in:
Tim Zieger 2020-05-19 11:11:07 +02:00
parent 4c34ac3497
commit a1072f40b3
1 changed files with 80 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
frontend/src/App.vue
View File

@ -45,28 +45,11 @@
<v-img src="./assets/logo.svg" max-height="100%" max-width="100" contain></v-img>
<v-toolbar-title>Geo Timetracking</v-toolbar-title>
<v-spacer></v-spacer>
<!-- Modal -->
<v-row justify="center">
<v-dialog v-model="dialog" width="70%" persistent>
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">Login</v-btn>
</template>
<v-card class="main">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn icon @click="dialog = false">
<v-icon>mdi-window-close</v-icon>
</v-btn>
</v-card-actions>
<SignIn v-on:signIn="signIn" v-on:signUp="signUp" />
<p id="loginError"></p>
</v-card>
</v-dialog>
</v-row>
<!-- Menu with account icon -->
<v-menu v-model="menu" :close-on-content-click="false" :nudge-width="200" offset-y>
<v-menu v-model="menu" :close-on-content-click="false" :nudge-width="200" offset-y v-if="loggedIn == 'true'">
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-btn icon v-on="on" >
<v-icon>mdi-account</v-icon>
</v-btn>
</template>
@ -79,10 +62,10 @@
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Doe</v-list-item-title>
<v-list-item-subtitle>Admin</v-list-item-subtitle>
<v-list-item-title >{{fullname}}</v-list-item-title>
<v-list-item-subtitle >{{role}}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action></v-list-item-action>
</v-list-item>
</v-list>
@ -102,10 +85,33 @@
<v-spacer></v-spacer>
<v-btn text @click="menu = false">Cancel</v-btn>
<v-btn color="primary" text @click="menu = false">Save</v-btn>
<v-btn color="primary" text @click="logout">Logout</v-btn>
</v-card-actions>
</v-card>
</v-menu>
<v-card v-if="loggedIn == 'false'">
<!-- Modal -->
<v-row justify="center">
<v-dialog v-model="dialog" width="70%" persistent>
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">Login</v-btn>
</template>
<v-card class="main">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn icon @click="dialog = false">
<v-icon>mdi-window-close</v-icon>
</v-btn>
</v-card-actions>
<SignIn v-on:signIn="signIn" v-on:signUp="signUp" />
<p id="loginError"></p>
</v-card>
</v-dialog>
</v-row>
</v-card>
</v-app-bar>
<!-- Routed pages are inserted here -->
@ -124,7 +130,12 @@
<script>
import SignIn from "./views/SignIn.vue";
//var baseUri = "http://plesk.icaotix.de:5000";
import { baseUri } from './variables.js'
import { baseUri } from "./variables.js";
if (!sessionStorage.getItem("loggedin")) {
sessionStorage.setItem("loggedin", false);
}
export default {
components: {
SignIn
@ -136,10 +147,14 @@ export default {
drawer: null,
login: true,
dialog: false,
menu: false
menu: false,
loggedIn: sessionStorage.getItem("loggedin"),
fullname: sessionStorage.getItem("firstname") + " " + sessionStorage.getItem("lastname"),
role: sessionStorage.getItem("role")
}),
methods: {
signIn(loginData) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
@ -148,13 +163,16 @@ export default {
"jwt",
this.getResponseHeader("Authorization")
);
location.reload();
sessionStorage.setItem("loggedin", true);
} else if (this.status != 200 && this.status != 0) {
console.log(this.loggedIn);
document.getElementById("loginError").innerHTML =
"Login not successfull";
}
};
xhttp.open("POST", baseUri + "/login", true);
xhttp.open("POST", baseUri + "/login", false);
xhttp.send(
'{"username": "' +
loginData.username +
@ -162,12 +180,38 @@ export default {
loginData.password +
'"}'
);
if(sessionStorage.getItem("loggedin")== "true"){
sessionStorage.setItem("haveData", true);
var whoxhttp = new XMLHttpRequest();
whoxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// console.log(whoxhttp.responseText);
var userInformation = JSON.parse(whoxhttp.responseText);
sessionStorage.setItem("firstname", userInformation.firstname);
sessionStorage.setItem("lastname", userInformation.lastname);
sessionStorage.setItem("username", userInformation.username);
sessionStorage.setItem("role", userInformation.role.name);
console.log(this.fullname);
this.fullname= sessionStorage.getItem("firstname") + " " + sessionStorage.getItem("lastname");
//data.reload;
location.reload();
}
};
whoxhttp.open("GET", baseUri + "/whoami", false);
// whoxhttp.withCredentials = true;
whoxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
whoxhttp.send(null);
location.reload();
}
},
signUp(signupData) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if ((this.status == 201) & (this.readyState == 4)) {
if ((this.status == 201) & (this.readyState == 4)) {
location.reload();
} else if (this.status != 201 && this.status != 0) {
document.getElementById("loginError").innerHTML =
@ -177,7 +221,7 @@ export default {
xhttp.open("POST", baseUri + "/sign-up", true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.send(
'{'+
"{" +
'"firstname": "' +
signupData.firstname +
'", "lastname": "' +
@ -188,7 +232,13 @@ export default {
signupData.password +
'"}'
);
},
logout(){
sessionStorage.clear();
sessionStorage.setItem("loggedin", false);
location.reload();
}
},
created() {