Make app.vue root component async
This commit is contained in:
parent
5b3ae837dc
commit
420ab2d278
@ -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-img @click="forward" src="./assets/logo.svg" max-height="100%" max-width="100" contain></v-img>
|
||||
<v-app-bar-nav-icon @click.stop="sideNavDrawer = !sideNavDrawer"/>
|
||||
<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="menu = false">Cancel</v-btn>
|
||||
<v-btn text @click="userInfoDialog = 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";
|
||||
|
||||
if (!sessionStorage.getItem("loggedin")) {
|
||||
sessionStorage.setItem("loggedin", false);
|
||||
}
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -151,129 +148,75 @@
|
||||
props: {
|
||||
source: String
|
||||
},
|
||||
data: () => ({
|
||||
drawer: false,
|
||||
dialog: false,
|
||||
menu: false,
|
||||
loggedIn: sessionStorage.getItem("loggedin"),
|
||||
fullname: sessionStorage.getItem("firstname") + " " + sessionStorage.getItem("lastname")
|
||||
}),
|
||||
data() {
|
||||
return {
|
||||
sideNavDrawer: false,
|
||||
loginDialog: false,
|
||||
userInfoDialog: false,
|
||||
loggedIn: false,
|
||||
fullname: "",
|
||||
loginError: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
forward() {
|
||||
this.$router.push("/");
|
||||
},
|
||||
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();
|
||||
handleLogoClick() {
|
||||
if (this.$router.currentRoute.path !== "/") {
|
||||
this.$router.replace("/")
|
||||
}
|
||||
},
|
||||
signUp(signupData) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
async signIn(loginData) {
|
||||
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 () {
|
||||
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", BASE_URI + "/sign-up", true);
|
||||
xhttp.setRequestHeader("Content-Type", "application/json");
|
||||
xhttp.send(
|
||||
"{" +
|
||||
'"firstname": "' +
|
||||
signupData.firstname +
|
||||
'", "lastname": "' +
|
||||
signupData.lastname +
|
||||
'", "username": "' +
|
||||
signupData.username +
|
||||
'", "password": "' +
|
||||
signupData.password +
|
||||
'"}'
|
||||
);
|
||||
let whoAmIResponse = await axios.get(BASE_URI + "/whoami")
|
||||
sessionStorage.setItem("firstname", whoAmIResponse.data.firstname)
|
||||
sessionStorage.setItem("lastname", whoAmIResponse.data.lastname)
|
||||
sessionStorage.setItem("username", whoAmIResponse.data.username)
|
||||
sessionStorage.setItem("userIDOwn", whoAmIResponse.data.id)
|
||||
this.fullname = `${whoAmIResponse.data.firstname} ${whoAmIResponse.data.lastname}`
|
||||
} catch (e) {
|
||||
this.loginError = "Login not successful"
|
||||
}
|
||||
},
|
||||
async signUp(signupData) {
|
||||
try {
|
||||
await axios.post(BASE_URI + "/sign-up", signupData)
|
||||
await this.signIn({username: signupData.username, password: signupData.password})
|
||||
} catch (e) {
|
||||
this.loginError = "Sign-up not successful"
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
sessionStorage.clear();
|
||||
sessionStorage.setItem("loggedin", false);
|
||||
location.reload();
|
||||
},
|
||||
toAccounts() {
|
||||
sessionStorage.setItem("timeTrackAccountListUser", sessionStorage.getItem("username"));
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var usersInformation = JSON.parse(xhttp.responseText);
|
||||
sessionStorage.setItem(
|
||||
"timeTrackAccountListUserId",
|
||||
usersInformation._links.self.href
|
||||
);
|
||||
async toAccounts() {
|
||||
let usersResponse = await axios.get(BASE_URI + "/users/search/byUsername", {
|
||||
params: {
|
||||
username: sessionStorage.getItem("username")
|
||||
}
|
||||
};
|
||||
xhttp.open(
|
||||
"GET",
|
||||
BASE_URI +
|
||||
"/users/search/byUsername?username=" +
|
||||
sessionStorage.getItem("username"),
|
||||
false
|
||||
);
|
||||
})
|
||||
sessionStorage.setItem("timeTrackAccountListUser", sessionStorage.getItem("username"))
|
||||
sessionStorage.setItem("timeTrackAccountListUserId", usersResponse.data._links.self.href)
|
||||
|
||||
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
|
||||
xhttp.send(null);
|
||||
this.users = JSON.parse(sessionStorage.getItem("users"));
|
||||
|
||||
if (this.$route.path == "/timetrackaccounts") {
|
||||
if (this.$router.currentRoute.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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user