Make app.vue root component async

frontend/src/App.vue

@@ -2,7 +2,7 @@
   <div class="app">
     <v-app id="geotimetracking">
       <!-- Side navigation menu  -->
-      <v-navigation-drawer v-model="drawer" app clipped class="main_accent">
+      <v-navigation-drawer v-model="sideNavDrawer" app clipped class="main_accent">
         <v-list dense>
           <v-list-item link to="/">
             <v-list-item-action>
@@ -12,7 +12,7 @@
               <v-list-item-title>Home</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
-          <v-list-item link to="/timerecords" v-bind:class="{'d-none':loggedIn=='false'}">
+          <v-list-item link to="/timerecords" v-if="loggedIn">
             <v-list-item-action>
               <v-icon>mdi-clock</v-icon>
             </v-list-item-action>
@@ -20,7 +20,7 @@
               <v-list-item-title>Time Records</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
-          <v-list-item link to="/statistics" v-bind:class="{'d-none':loggedIn=='false'}">
+          <v-list-item link to="/statistics" v-if="loggedIn">
             <v-list-item-action>
               <v-icon>mdi-chart-bar</v-icon>
             </v-list-item-action>
@@ -28,7 +28,7 @@
               <v-list-item-title>Statistics</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
-          <v-list-item @click="toAccounts" v-bind:class="{'d-none':loggedIn=='false'}">
+          <v-list-item @click="toAccounts" v-if="loggedIn">
             <v-list-item-action>
               <v-icon>mdi-account-details</v-icon>
             </v-list-item-action>
@@ -44,7 +44,7 @@
               <v-list-item-title>About</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
-          <v-list-item link to="/users" v-bind:class="{'d-none':loggedIn=='false'}">
+          <v-list-item link to="/users" v-if="loggedIn">
             <v-list-item-action>
               <v-icon>mdi-account-group</v-icon>
             </v-list-item-action>
@@ -57,18 +57,19 @@
 
       <!-- Top menu bar -->
       <v-app-bar app clipped-left class="main" elevation="10">
-        <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
+        <v-app-bar-nav-icon @click.stop="sideNavDrawer = !sideNavDrawer"/>
-        <v-img @click="forward" src="./assets/logo.svg" max-height="100%" max-width="100" contain></v-img>
+        <v-img style="cursor: pointer" @click="handleLogoClick" 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>
 
         <!-- Menu with account icon -->
         <v-menu
-          v-model="menu"
+          v-model="userInfoDialog"
           :close-on-content-click="false"
           :nudge-width="200"
           offset-y
-          v-if="loggedIn == 'true'"
+          v-if="loggedIn"
         >
           <template v-slot:activator="{ on }">
             <v-btn icon v-on="on">
@@ -95,28 +96,27 @@
 
             <v-card-actions>
               <v-spacer></v-spacer>
-
+              <v-btn text @click="userInfoDialog = false">Cancel</v-btn>
-              <v-btn text @click="menu = false">Cancel</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'">
+        <v-card v-if="!loggedIn">
           <!-- Modal -->
           <v-row justify="center">
-            <v-dialog v-model="dialog" width="70%" persistent>
+            <v-dialog v-model="loginDialog" 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-btn icon @click="loginDialog = 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>
+                <p>{{loginError}}</p>
               </v-card>
             </v-dialog>
           </v-row>
@@ -139,10 +139,7 @@
 <script>
   import SignIn from "./views/SignIn.vue";
   import {BASE_URI} from "./globals.js";
-
+  import axios from 'axios'
-  if (!sessionStorage.getItem("loggedin")) {
-    sessionStorage.setItem("loggedin", false);
-  }
 
   export default {
     components: {
@@ -151,129 +148,75 @@
     props: {
       source: String
     },
-    data: () => ({
+    data() {
-      drawer: false,
+      return {
-      dialog: false,
+        sideNavDrawer: false,
-      menu: false,
+        loginDialog: false,
-      loggedIn: sessionStorage.getItem("loggedin"),
+        userInfoDialog: false,
-      fullname: sessionStorage.getItem("firstname") + " " + sessionStorage.getItem("lastname")
+        loggedIn: false,
-    }),
+        fullname: "",
+        loginError: ""
+      }
+    },
     methods: {
-      forward() {
+      handleLogoClick() {
-        this.$router.push("/");
+        if (this.$router.currentRoute.path !== "/") {
-      },
+          this.$router.replace("/")
-      signIn(loginData) {
-        var xhttp = new XMLHttpRequest();
-
-        xhttp.onreadystatechange = function () {
-          if ((this.status == 200) & (this.readyState == 4)) {
-            sessionStorage.setItem("jwt", this.getResponseHeader("Authorization"));
-            sessionStorage.setItem("loggedin", true);
-          } else if (this.status != 200 && this.status != 0) {
-            document.getElementById("loginError").innerHTML =
-              "Login not successfull";
-          }
-        };
-
-        xhttp.open("POST", BASE_URI + "/login", false);
-        xhttp.send(
-          '{"username": "' +
-          loginData.username +
-          '", "password": "' +
-          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) {
-              var userInformation = JSON.parse(whoxhttp.responseText);
-              sessionStorage.setItem("firstname", userInformation.firstname);
-              sessionStorage.setItem("lastname", userInformation.lastname);
-              sessionStorage.setItem("username", userInformation.username);
-              sessionStorage.setItem("userIDOwn", userInformation.id);
-
-              this.fullname = sessionStorage.getItem("firstname")
-                + " "
-                + sessionStorage.getItem("lastname");
-              location.reload();
-            }
-          };
-          whoxhttp.open("GET", BASE_URI + "/whoami", false);
-          whoxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-          whoxhttp.send(null);
-          location.reload();
         }
       },
-      signUp(signupData) {
+      async signIn(loginData) {
-        var xhttp = new XMLHttpRequest();
+        try {
+          let loginResponse = await axios.post(BASE_URI + "/login", loginData)
+          sessionStorage.setItem("jwt", loginResponse.headers.authorization)
+          sessionStorage.setItem("loggedin", JSON.stringify(true))
+          this.loggedIn = true
 
-        xhttp.onreadystatechange = function () {
+          let whoAmIResponse = await axios.get(BASE_URI + "/whoami")
-          if ((this.status == 201) & (this.readyState == 4)) {
+          sessionStorage.setItem("firstname", whoAmIResponse.data.firstname)
-            location.reload();
+          sessionStorage.setItem("lastname", whoAmIResponse.data.lastname)
-          } else if (this.status != 201 && this.status != 0) {
+          sessionStorage.setItem("username", whoAmIResponse.data.username)
-            document.getElementById("loginError").innerHTML = "The username already exist";
+          sessionStorage.setItem("userIDOwn", whoAmIResponse.data.id)
-          }
+          this.fullname = `${whoAmIResponse.data.firstname} ${whoAmIResponse.data.lastname}`
-        };
+        } catch (e) {
-        xhttp.open("POST", BASE_URI + "/sign-up", true);
+          this.loginError = "Login not successful"
-        xhttp.setRequestHeader("Content-Type", "application/json");
+        }
-        xhttp.send(
+      },
-          "{" +
+      async signUp(signupData) {
-          '"firstname": "' +
+        try {
-          signupData.firstname +
+          await axios.post(BASE_URI + "/sign-up", signupData)
-          '", "lastname": "' +
+          await this.signIn({username: signupData.username, password: signupData.password})
-          signupData.lastname +
+        } catch (e) {
-          '", "username": "' +
+          this.loginError = "Sign-up not successful"
-          signupData.username +
+        }
-          '", "password": "' +
-          signupData.password +
-          '"}'
-        );
       },
       logout() {
         sessionStorage.clear();
-        sessionStorage.setItem("loggedin", false);
         location.reload();
       },
-      toAccounts() {
+      async toAccounts() {
-        sessionStorage.setItem("timeTrackAccountListUser", sessionStorage.getItem("username"));
+        let usersResponse = await axios.get(BASE_URI + "/users/search/byUsername", {
-        var xhttp = new XMLHttpRequest();
+          params: {
-        xhttp.onreadystatechange = function () {
+            username: sessionStorage.getItem("username")
-          if (this.readyState == 4 && this.status == 200) {
-            var usersInformation = JSON.parse(xhttp.responseText);
-            sessionStorage.setItem(
-              "timeTrackAccountListUserId",
-              usersInformation._links.self.href
-            );
           }
-        };
+        })
-        xhttp.open(
+        sessionStorage.setItem("timeTrackAccountListUser", sessionStorage.getItem("username"))
-          "GET",
+        sessionStorage.setItem("timeTrackAccountListUserId", usersResponse.data._links.self.href)
-          BASE_URI +
-          "/users/search/byUsername?username=" +
-          sessionStorage.getItem("username"),
-          false
-        );
 
-        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        if (this.$router.currentRoute.path === "/timetrackaccounts") {
-        xhttp.send(null);
-        this.users = JSON.parse(sessionStorage.getItem("users"));
-
-        if (this.$route.path == "/timetrackaccounts") {
           location.reload();
         } else {
-          this.$router.push("/timetrackaccounts");
+          await this.$router.push("/timetrackaccounts");
         }
       }
     },
     created() {
       this.$vuetify.theme.dark = true;
+      this.loggedIn = JSON.parse(sessionStorage.getItem("loggedin"))
+      this.fullname = sessionStorage.getItem("firstname") + " " + sessionStorage.getItem("lastname")
     }
-  };
+  }
 </script>
 
-
 <style scoped>
   .link {
     color: #f1f1f1f1;