From 3c6756d0a4eaeea93f1a9338aaf47cebdbcab2a8 Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Wed, 21 Aug 2024 15:22:35 +0200
Subject: [PATCH] fix hydration issues, remove unnecessary state, rename
 function

---
 src/layouts/Header.vue |  7 ++++---
 src/pages/index.vue    |  2 +-
 src/stores/auth.ts     | 10 +++-------
 src/stores/global.ts   |  4 ++--
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
index 04ec9f6e..4f278c74 100644
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@@ -36,7 +36,7 @@
         </button>
         <!-- Show / hide charts -->
         <label
-          v-if="uiChartType > 0"
+          v-if="globalStore.uiChartType > 0"
           class="inline-flex items-center justify-center cursor-pointer w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 whitespace-nowrap transition group"
           :title="$t('toggleCharts')"
         >
@@ -52,7 +52,7 @@
           />
         </label>
         <span
-          v-if="authStore.requiresPassword && authStore.authenticated"
+          v-if="authStore.requiresPassword && !isLoginPage"
           class="text-sm text-gray-400 dark:text-neutral-400 cursor-pointer hover:underline"
           @click="logout"
         >
@@ -87,6 +87,7 @@
 
 <script setup lang="ts">
 const authStore = useAuthStore();
+const globalStore = useGlobalStore();
 const route = useRoute();
 
 const isLoginPage = computed(() => route.path == '/login');
@@ -96,7 +97,7 @@ const latestRelease = ref<null | { version: number; changelog: string }>(null);
 
 const theme = useTheme();
 
-const uiChartType = ref(0);
+globalStore.fetchChartType();
 const uiShowCharts = ref(getItem('uiShowCharts') === '1');
 
 function toggleTheme() {
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 6dc80c84..f0a380b4 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -50,7 +50,7 @@ const clientsStore = useClientsStore();
 
 const intervalId = ref<NodeJS.Timeout | null>(null);
 
-globalStore.fetchUITrafficStats();
+globalStore.fetchTrafficStats();
 globalStore.fetchChartType();
 globalStore.fetchRelease();
 
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index c471122a..b3ecf675 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -1,5 +1,4 @@
 export const useAuthStore = defineStore('Auth', () => {
-  const authenticated = ref<boolean>(false);
   const requiresPassword = ref<boolean>(true);
 
   /**
@@ -7,7 +6,6 @@ export const useAuthStore = defineStore('Auth', () => {
    */
   async function login(password: string) {
     const response = await api.createSession({ password });
-    authenticated.value = response.success;
     requiresPassword.value = response.requiresPassword;
     return true as const;
   }
@@ -17,7 +15,6 @@ export const useAuthStore = defineStore('Auth', () => {
    */
   async function logout() {
     const response = await api.deleteSession();
-    authenticated.value = !response.success;
     return response.success;
   }
 
@@ -25,10 +22,9 @@ export const useAuthStore = defineStore('Auth', () => {
    * @throws if unsuccessful
    */
   async function update() {
-    const response = await api.getSession();
-    authenticated.value = response.authenticated;
-    requiresPassword.value = response.requiresPassword;
+    const session = await api.getSession();
+    requiresPassword.value = session.requiresPassword;
   }
 
-  return { requiresPassword, authenticated, login, logout, update };
+  return { requiresPassword, login, logout, update };
 });
diff --git a/src/stores/global.ts b/src/stores/global.ts
index 13a512ec..4685d49a 100644
--- a/src/stores/global.ts
+++ b/src/stores/global.ts
@@ -37,7 +37,7 @@ export const useGlobalStore = defineStore('Global', () => {
     uiChartType.value = chartType.value ?? 0;
   }
 
-  async function fetchUITrafficStats() {
+  async function fetchTrafficStats() {
     const { data: trafficStats } = await api.getTrafficStats();
     uiTrafficStats.value = trafficStats.value ?? false;
   }
@@ -53,6 +53,6 @@ export const useGlobalStore = defineStore('Global', () => {
     updateCharts,
     fetchRelease,
     fetchChartType,
-    fetchUITrafficStats,
+    fetchTrafficStats,
   };
 });