Merge branch 'popupFix' into 'master'

Made alerts be popups instead

See merge request !49

src/stores/token.ts

@@ -9,6 +9,7 @@ import router from "@/router";
 export const useTokenStore = defineStore({
     id: 'token',
     state: () => ({
+        displayPopUp: false,
         timer: null as ReturnType<typeof setTimeout> | null,
         tokenTimer: null as ReturnType<typeof setTimeout> | null,
         jwtToken: "",
@@ -29,6 +30,7 @@ export const useTokenStore = defineStore({
                     const data = response.data;
                     if (data !== "" && data !== undefined) {
                         this.jwtToken = data;
+                        this.displayPopUp = false;
                         await getUserInfo(username, this.jwtToken).then(response => {
                             if (response !== undefined) {
                                 this.username = response.data.username
@@ -53,6 +55,7 @@ export const useTokenStore = defineStore({
                 const response = await refreshToken(this.jwtToken);
                 if (response !== undefined) {
                     this.jwtToken = response.data;
+                    this.displayPopUp = false;
                     this.startTimer();
                 }
             } catch (error) {
@@ -69,17 +72,13 @@ export const useTokenStore = defineStore({
 
         startTimer() {
             this.timer = setTimeout(() => {
-                if (window.confirm("Your session is about to expire. Do you want to extend it?")) {
-                    this.refreshToken().then(r => r);
-                    this.actualTokenTimer();
-                } else {
-                    this.logout();
-                }
+                    this.displayPopUp = true;
             }, 300000);
         },
 
         actualTokenTimer() {
             this.tokenTimer = setTimeout(() => {
+                this.displayPopUp = false;
                 this.logout();
             }, 3600000);
         }

src/views/FrontPage/LoginView.vue

@@ -14,16 +14,16 @@ function navigateToNewUser() {
 
 async function login() {
   await useTokenStore().getTokenAndSaveInStore(username.value, password.value);
-  if (useTokenStore().$state.jwtToken !== '' && !useTokenStore().$state.jwtToken.includes('Request')) {
+  if (useTokenStore().jwtToken !== '' && !useTokenStore().jwtToken.includes('Request')) {
     await router.push('/homepage')
   }
-  else if (useTokenStore().$state.jwtToken === 'Request failed with status code 401'){
+  else if (useTokenStore().jwtToken === 'Request failed with status code 401'){
     alert('Feil brukernavn eller passord')
   }
-  else if (useTokenStore().$state.jwtToken === 'Request failed with status code 403') {
+  else if (useTokenStore().jwtToken === 'Request failed with status code 403') {
     alert('Du kommer fra et utrygt nettverk, vennligst prøv igjen senere')
   }
-  else if (useTokenStore().$state.jwtToken === 'Request failed with status code 500') {
+  else if (useTokenStore().jwtToken === 'Request failed with status code 500') {
     alert('Serveren er nede, vennligst prøv igjen senere')
   }
 }

src/views/HomePage/HomePagePopUp.vue

+<script setup lang="ts">
+import {useTokenStore} from "@/stores/token";
+
+const props = defineProps({
+  show: Boolean,
+});
+
+const emit = defineEmits(['close']);
+
+const continueBrowse = () => {
+  useTokenStore().refreshToken();
+  useTokenStore().actualTokenTimer();
+  emit('close');
+};
+
+const logoutFromBrowse = () => {
+  useTokenStore().logout();
+  emit('close');
+};
+</script>
+
+<template>
+  <div v-if="show" class="popup">
+    <div class="popup-content">
+      <h2>Din økt holder på å løpe ut</h2>
+      <p>Trykk "Fortsett" for å fortsette økten, eller trykk "Logg ut" dersom du er ferdig</p>
+      <button class="continueBtn" @click="continueBrowse">Fortsett</button>
+      <button class="cancelBtn" @click="logoutFromBrowse">Logg ut</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.popup-content {
+  background-color: var(--color-background);
+  padding: 20px;
+  border-radius: 20px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
+  color: var(--color-heading);
+  display: grid;
+}
+
+.popup-content h2 {
+  color: var(--color-heading);
+}
+
+.popup-content p {
+  color: var(--color-text);
+}
+
+.popup-content button {
+  //background-color: var(--color-confirm-button);
+  color: var(--color-buttonText);
+  border: 0;
+  border-radius: 20px;
+  padding: 1%;
+  min-width: 30%;
+  font-size: 250%;
+  margin: 4%;
+}
+
+.popup-content button:hover {
+  transform: scale(1.05);
+  cursor: pointer;
+}
+
+.popup-content button:disabled {
+  background-color: grey;
+  color: black;
+  cursor: not-allowed;
+}
+
+.popup-content button:disabled:hover {
+  transform: none;
+  cursor: not-allowed;
+}
+
+h2 {
+  text-align: center;
+}
+
+p {
+  text-align: center;
+}
+
+.continueBtn {
+  background-color: var(--color-confirm-button);
+}
+
+.cancelBtn {
+  background-color: var(--color-cancel-button);
+}
+
+.cancelBtn:active {
+  background-color: var(--color-cancel-button-click);
+}
+
+.continueBtn:active {
+  background-color: var(--color-confirm-button-click);
+}
+</style>
\ No newline at end of file

src/views/HomePageView.vue

 <script setup lang="ts">
 import TopNav from '@/components/navigation/TopNav.vue'
 import SideNav from '@/components/navigation/SideNav.vue'
+import { onMounted, ref, watch } from 'vue';
+import { useTokenStore } from '@/stores/token';
+import HomePagePopUp from './HomePage/HomePagePopUp.vue';
 
+const store = useTokenStore();
+const showPopup = ref(false);
+
+onMounted(() => {
+  showPopup.value = store.displayPopUp;
+  console.log('showPopup', store.displayPopUp);
+});
+
+watch(
+    () => store.displayPopUp,
+    (newVal) => {
+      if (newVal) {
+        showPopup.value = true;
+      }
+    }
+);
+
+const closePopup = () => {
+  showPopup.value = false;
+};
 </script>
 
 <template>
@@ -14,7 +37,10 @@ import SideNav from '@/components/navigation/SideNav.vue'
         <SideNav></SideNav>
       </div>
       <div class="view-element">
-      <router-view></router-view>
+        <div class="popup-container" v-if="showPopup">
+          <HomePagePopUp :show="showPopup" @close="closePopup" />
+        </div>
+        <router-view></router-view>
       </div>
     </div>
   </div>
@@ -51,6 +77,19 @@ import SideNav from '@/components/navigation/SideNav.vue'
   box-shadow: 0 2px 5px var(--color-shadow);
 }
 
+.popup-container{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  align-items: center;
+  z-index: 1000;
+}
+
 .view-element{
   width: 85%;
   height: 100%;