From a10d0569af8d95095d5152013fb6e29f3e3a992d Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 24 Jun 2024 17:18:08 +0200
Subject: [PATCH] fix token refresh on window focus, deactivate webkit
 playwright tests

---
 playwright.config.ts               |  8 ++++----
 resources/js/Layouts/AppLayout.vue | 10 +++++++---
 resources/js/utils/api.ts          | 14 ++++++++++++++
 resources/js/utils/notification.ts | 11 +----------
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index c61073e5..db7068e0 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -44,10 +44,10 @@ export default defineConfig({
             use: { ...devices['Desktop Firefox'] },
         },
 
-        {
-            name: 'webkit',
-            use: { ...devices['Desktop Safari'] },
-        },
+        // {
+        //     name: 'webkit',
+        //     use: { ...devices['Desktop Safari'] },
+        // },
 
         /* Test against mobile viewports. */
         // {
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 833609c7..620e4b6b 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -4,17 +4,17 @@ import Banner from '@/Components/Banner.vue';
 import OrganizationSwitcher from '@/Components/OrganizationSwitcher.vue';
 import CurrentSidebarTimer from '@/Components/CurrentSidebarTimer.vue';
 import {
+    Bars3Icon,
     ChartBarIcon,
     ClockIcon,
     Cog6ToothIcon,
+    CreditCardIcon,
     FolderIcon,
     HomeIcon,
     TagIcon,
     UserCircleIcon,
     UserGroupIcon,
-    Bars3Icon,
     XMarkIcon,
-    CreditCardIcon,
 } from '@heroicons/vue/20/solid';
 import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
 import UserSettingsIcon from '@/Components/UserSettingsIcon.vue';
@@ -32,6 +32,7 @@ import {
 import { isBillingActivated } from '@/utils/billing';
 import type { User } from '@/types/models';
 import { ArrowsRightLeftIcon } from '@heroicons/vue/16/solid';
+import { fetchToken, isTokenValid } from '@/utils/api';
 
 defineProps({
     title: String,
@@ -45,7 +46,10 @@ onMounted(async () => {
         window.initialDataLoaded = true;
         initializeStores();
     }
-    window.onfocus = () => {
+    window.onfocus = async () => {
+        if (!isTokenValid()) {
+            await fetchToken();
+        }
         refreshStores();
     };
 });
diff --git a/resources/js/utils/api.ts b/resources/js/utils/api.ts
index 5a425667..af387cd8 100644
--- a/resources/js/utils/api.ts
+++ b/resources/js/utils/api.ts
@@ -5,6 +5,7 @@ import type {
     ZodiosQueryParamsByAlias,
 } from '@zodios/core';
 import { api } from '../../../openapi.json.client';
+import { router } from '@inertiajs/vue3';
 
 export type SolidTimeApi = ApiOf<typeof api>;
 
@@ -123,3 +124,16 @@ export type UpdateOrganizationBody = ZodiosBodyByAlias<
     SolidTimeApi,
     'updateOrganization'
 >;
+
+export async function fetchToken() {
+    return new Promise((resolve) => {
+        router.reload({
+            onFinish: () => {
+                resolve(null);
+            },
+        });
+    });
+}
+export function isTokenValid() {
+    return window.document.cookie.includes('solidtime_session');
+}
diff --git a/resources/js/utils/notification.ts b/resources/js/utils/notification.ts
index fd3009ab..d82a93a7 100644
--- a/resources/js/utils/notification.ts
+++ b/resources/js/utils/notification.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import axios from 'axios';
 import { router } from '@inertiajs/vue3';
+import { fetchToken } from '@/utils/api';
 
 export type NotificationType = 'success' | 'error';
 
@@ -37,16 +38,6 @@ export const useNotificationsStore = defineStore('notifications', () => {
         }
     }
 
-    async function fetchToken() {
-        return new Promise((resolve) => {
-            router.reload({
-                onFinish: () => {
-                    resolve(null);
-                },
-            });
-        });
-    }
-
     async function handleApiRequestNotifications<T>(
         apiRequest: () => Promise<T>,
         successMessage?: string,