ubiquitous-computing-geo-timetracking/frontend/src/App.vue

<template>
  <div class="app">
    <v-app id="geotimetracking">
      <!-- Side navigation menu  -->
      <v-navigation-drawer v-model="drawer" app clipped class="main_accent">
        <v-list dense>
          <v-list-item link to="/">
            <v-list-item-action>
              <v-icon>mdi-view-dashboard</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <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':!login}">
            <v-list-item-action>
              <v-icon>mdi-clock</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <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':!login}">
            <v-list-item-action>
              <v-icon>mdi-chart-bar</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Statistics</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item link to="/about">
            <v-list-item-action>
              <v-icon>mdi-information-outline</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>About</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>

      <!-- Top menu bar -->
      <v-app-bar app clipped-left class="main" elevation="10">
        <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
        <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>

        <!-- Menu with account icon -->
        <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-icon>mdi-account</v-icon>
            </v-btn>
          </template>

          <v-card>
            <v-list>
              <v-list-item>
                <v-list-item-avatar>
                  <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
                </v-list-item-avatar>

                <v-list-item-content>
                  <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>

            <v-divider></v-divider>

            <v-list>
              <v-list-item>
                <v-list-item-action>
                  <v-switch color="primary" :input-value="login" @change="login= !login"></v-switch>
                </v-list-item-action>
                <v-list-item-title>View as Guest</v-list-item-title>
              </v-list-item>
            </v-list>

            <v-card-actions>
              <v-spacer></v-spacer>

              <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'">
            <!-- 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 -->
      <v-content>
        <router-view />
      </v-content>

      <!-- Footer on bottom -->
      <v-footer app class="main">
        <span>&copy; 2020 Team TacocaT</span>
      </v-footer>
    </v-app>
  </div>
</template>

<script>
import SignIn from "./views/SignIn.vue";
//var baseUri = "http://plesk.icaotix.de:5000";
import { baseUri } from "./variables.js";

if (!sessionStorage.getItem("loggedin")) {
  sessionStorage.setItem("loggedin", false);
}

export default {
  components: {
    SignIn
  },
  props: {
    source: String
  },
  data: () => ({
    drawer: null,
    login: true,
    dialog: 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() {
        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) {
          console.log(this.loggedIn);
          document.getElementById("loginError").innerHTML =
            "Login not successfull";
        }
      };
      
      xhttp.open("POST", baseUri + "/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) {
         // 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)) {
          location.reload();
        } else if (this.status != 201 && this.status != 0) {
          document.getElementById("loginError").innerHTML =
            "The username already exist";
        }
      };
      xhttp.open("POST", baseUri + "/sign-up", true);
      xhttp.setRequestHeader("Content-Type", "application/json");
      xhttp.send(
        "{" +
          '"firstname": "' +
          signupData.firstname +
          '", "lastname": "' +
          signupData.lastname +
          '", "username": "' +
          signupData.username +
          '", "password": "' +
          signupData.password +
          '"}'
      );
    },
    logout(){
      sessionStorage.clear();
      sessionStorage.setItem("loggedin", false);
      location.reload();
    }
  
  },

  created() {
    this.$vuetify.theme.dark = true;
  }
};
</script>


<style scoped>
.link {
  color: #f1f1f1f1;
  text-decoration: none;
}
.v-application {
  font-family: "Montserrat", sans-serif;
  background-color: var(--v-background-base) !important;
}
</style>