Merge branch '75-menu-depending-on-loginstate' into 'master'

Resolve "Menu depending on loginstate"

Closes #75

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!56

frontend/src/App.vue

@@ -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-title >{{fullname}}</v-list-item-title>
-                  <v-list-item-subtitle>Admin</v-list-item-subtitle>
+                  <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() {