fix hydration issues, remove unnecessary state, rename function

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() {

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();
 

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 };
 });

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,
   };
 });