From 49837cc0ec21ef900c7d40ec3c133b678904fdc1 Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Tue, 3 Sep 2024 13:39:50 +0200
Subject: [PATCH] move all features into one route

---
 src/app/app.vue                               |  6 +-
 src/app/components/Client/Charts.vue          | 20 +++---
 src/app/components/Client/Client.vue          |  4 +-
 src/app/components/Client/ExpireDate.vue      |  2 +-
 src/app/components/Client/LastSeen.vue        |  2 +-
 src/app/components/Client/OneTimeLink.vue     |  4 +-
 src/app/components/Client/OneTimeLinkBtn.vue  |  2 +-
 src/app/components/Clients/CreateDialog.vue   |  5 +-
 src/app/components/Clients/Sort.vue           |  2 +-
 src/app/layouts/Header.vue                    |  4 +-
 src/app/stores/auth.ts                        |  2 +-
 src/app/stores/clients.ts                     |  5 +-
 src/app/stores/global.ts                      | 62 +++++++------------
 src/app/utils/api.ts                          | 38 +++---------
 src/server/api/features.get.ts                |  9 +++
 src/server/api/ui-chart-type.get.ts           | 11 ----
 src/server/api/ui-sort-clients.get.ts         | 11 ----
 src/server/api/ui-traffic-stats.get.ts        | 11 ----
 src/server/api/wg-enable-expire-time.get.ts   | 11 ----
 .../api/wg-enable-one-time-links.get.ts       | 11 ----
 20 files changed, 71 insertions(+), 151 deletions(-)
 create mode 100644 src/server/api/features.get.ts
 delete mode 100644 src/server/api/ui-chart-type.get.ts
 delete mode 100644 src/server/api/ui-sort-clients.get.ts
 delete mode 100644 src/server/api/ui-traffic-stats.get.ts
 delete mode 100644 src/server/api/wg-enable-expire-time.get.ts
 delete mode 100644 src/server/api/wg-enable-one-time-links.get.ts

diff --git a/src/app/app.vue b/src/app/app.vue
index 35432023..a8f0a0f7 100644
--- a/src/app/app.vue
+++ b/src/app/app.vue
@@ -8,12 +8,8 @@
 
 <script setup lang="ts">
 const globalStore = useGlobalStore();
-globalStore.fetchTrafficStats();
-globalStore.fetchChartType();
+globalStore.fetchFeatures();
 globalStore.fetchRelease();
-globalStore.fetchOneTimeLinks();
-globalStore.fetchSortClients();
-globalStore.fetchExpireTime();
 useHead({
   bodyAttrs: {
     class: 'bg-gray-50 dark:bg-neutral-800',
diff --git a/src/app/components/Client/Charts.vue b/src/app/components/Client/Charts.vue
index 4dbf0f72..1b64bdf7 100644
--- a/src/app/components/Client/Charts.vue
+++ b/src/app/components/Client/Charts.vue
@@ -1,13 +1,13 @@
 <template>
   <div
-    v-if="globalStore.uiChartType"
-    :class="`absolute z-0 bottom-0 left-0 right-0 h-6 ${globalStore.uiChartType === 1 && 'line-chart'}`"
+    v-if="globalStore.features.trafficStats.type"
+    :class="`absolute z-0 bottom-0 left-0 right-0 h-6 ${globalStore.features.trafficStats.type === 1 && 'line-chart'}`"
   >
     <UiChart :options="chartOptionsTX" :series="client.transferTxSeries" />
   </div>
   <div
-    v-if="globalStore.uiChartType"
-    :class="`absolute z-0 top-0 left-0 right-0 h-6 ${globalStore.uiChartType === 1 && 'line-chart'}`"
+    v-if="globalStore.features.trafficStats.type"
+    :class="`absolute z-0 top-0 left-0 right-0 h-6 ${globalStore.features.trafficStats.type === 1 && 'line-chart'}`"
   >
     <UiChart
       :options="chartOptionsRX"
@@ -32,8 +32,10 @@ const chartOptionsTX = computed(() => {
     ...chartOptions,
     colors: [CHART_COLORS.tx[theme.value]],
   };
-  opts.chart.type = UI_CHART_TYPES[globalStore.uiChartType]?.type || undefined;
-  opts.stroke.width = UI_CHART_TYPES[globalStore.uiChartType]?.strokeWidth ?? 0;
+  opts.chart.type =
+    UI_CHART_TYPES[globalStore.features.trafficStats.type]?.type || undefined;
+  opts.stroke.width =
+    UI_CHART_TYPES[globalStore.features.trafficStats.type]?.strokeWidth ?? 0;
   return opts;
 });
 
@@ -42,8 +44,10 @@ const chartOptionsRX = computed(() => {
     ...chartOptions,
     colors: [CHART_COLORS.rx[theme.value]],
   };
-  opts.chart.type = UI_CHART_TYPES[globalStore.uiChartType]?.type || undefined;
-  opts.stroke.width = UI_CHART_TYPES[globalStore.uiChartType]?.strokeWidth ?? 0;
+  opts.chart.type =
+    UI_CHART_TYPES[globalStore.features.trafficStats.type]?.type || undefined;
+  opts.stroke.width =
+    UI_CHART_TYPES[globalStore.features.trafficStats.type]?.strokeWidth ?? 0;
   return opts;
 });
 
diff --git a/src/app/components/Client/Client.vue b/src/app/components/Client/Client.vue
index 77c5031c..71bd6b4c 100644
--- a/src/app/components/Client/Client.vue
+++ b/src/app/components/Client/Client.vue
@@ -14,7 +14,7 @@
           >
             <ClientAddress :client="client" />
             <ClientInlineTransfer
-              v-if="!globalStore.uiTrafficStats"
+              v-if="!globalStore.features.trafficStats.enabled"
               :client="client"
             />
             <ClientLastSeen :client="client" />
@@ -25,7 +25,7 @@
 
         <!-- Info -->
         <div
-          v-if="globalStore.uiTrafficStats"
+          v-if="globalStore.features.trafficStats.enabled"
           class="flex gap-2 items-center shrink-0 text-gray-400 dark:text-neutral-400 text-xs mt-px justify-end"
         >
           <ClientTransfer :client="client" />
diff --git a/src/app/components/Client/ExpireDate.vue b/src/app/components/Client/ExpireDate.vue
index 07d23bc8..c36f4a58 100644
--- a/src/app/components/Client/ExpireDate.vue
+++ b/src/app/components/Client/ExpireDate.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-show="globalStore.enableExpireTime"
+    v-show="globalStore.features.clientExpiration.enabled"
     class="block md:inline-block pb-1 md:pb-0 text-gray-500 dark:text-neutral-400 text-xs"
   >
     <span class="group">
diff --git a/src/app/components/Client/LastSeen.vue b/src/app/components/Client/LastSeen.vue
index aec14361..50a00c93 100644
--- a/src/app/components/Client/LastSeen.vue
+++ b/src/app/components/Client/LastSeen.vue
@@ -4,7 +4,7 @@
     class="text-gray-400 dark:text-neutral-500 whitespace-nowrap"
     :title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))"
   >
-    {{ !globalStore.uiTrafficStats ? ' · ' : ''
+    {{ !globalStore.features.trafficStats.enabled ? ' · ' : ''
     }}{{ timeago(new Date(client.latestHandshakeAt)) }}
   </span>
 </template>
diff --git a/src/app/components/Client/OneTimeLink.vue b/src/app/components/Client/OneTimeLink.vue
index 84512694..f859cd1c 100644
--- a/src/app/components/Client/OneTimeLink.vue
+++ b/src/app/components/Client/OneTimeLink.vue
@@ -1,6 +1,8 @@
 <template>
   <div
-    v-if="globalStore.enableOneTimeLinks && client.oneTimeLink !== null"
+    v-if="
+      globalStore.features.oneTimeLinks.enabled && client.oneTimeLink !== null
+    "
     :ref="'client-' + client.id + '-link'"
     class="text-gray-400 text-xs"
   >
diff --git a/src/app/components/Client/OneTimeLinkBtn.vue b/src/app/components/Client/OneTimeLinkBtn.vue
index 284a17d1..c6d21158 100644
--- a/src/app/components/Client/OneTimeLinkBtn.vue
+++ b/src/app/components/Client/OneTimeLinkBtn.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    v-if="globalStore.enableOneTimeLinks"
+    v-if="globalStore.features.oneTimeLinks.enabled"
     :disabled="!client.downloadableConfig"
     class="align-middle inline-block bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 p-2 rounded transition"
     :class="{
diff --git a/src/app/components/Clients/CreateDialog.vue b/src/app/components/Clients/CreateDialog.vue
index 81affb69..14847bf9 100644
--- a/src/app/components/Clients/CreateDialog.vue
+++ b/src/app/components/Clients/CreateDialog.vue
@@ -71,7 +71,10 @@
                   />
                 </p>
               </div>
-              <div v-show="globalStore.enableExpireTime" class="mt-2">
+              <div
+                v-show="globalStore.features.clientExpiration.enabled"
+                class="mt-2"
+              >
                 <p class="text-sm text-gray-500">
                   <label
                     class="block text-gray-900 dark:text-neutral-200 text-sm font-bold mb-2"
diff --git a/src/app/components/Clients/Sort.vue b/src/app/components/Clients/Sort.vue
index bf1002be..0a7204c1 100644
--- a/src/app/components/Clients/Sort.vue
+++ b/src/app/components/Clients/Sort.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    v-if="globalStore.enableSortClient"
+    v-if="globalStore.features.sortClients.enabled"
     class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-x-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 md:rounded inline-flex items-center transition"
     @click="globalStore.sortClient = !globalStore.sortClient"
   >
diff --git a/src/app/layouts/Header.vue b/src/app/layouts/Header.vue
index 4f278c74..ace34acf 100644
--- a/src/app/layouts/Header.vue
+++ b/src/app/layouts/Header.vue
@@ -36,7 +36,7 @@
         </button>
         <!-- Show / hide charts -->
         <label
-          v-if="globalStore.uiChartType > 0"
+          v-if="globalStore.features.trafficStats.type > 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')"
         >
@@ -96,8 +96,6 @@ const currentRelease = ref<null | number>(null);
 const latestRelease = ref<null | { version: number; changelog: string }>(null);
 
 const theme = useTheme();
-
-globalStore.fetchChartType();
 const uiShowCharts = ref(getItem('uiShowCharts') === '1');
 
 function toggleTheme() {
diff --git a/src/app/stores/auth.ts b/src/app/stores/auth.ts
index 06af7b36..c7b09590 100644
--- a/src/app/stores/auth.ts
+++ b/src/app/stores/auth.ts
@@ -5,7 +5,7 @@ export const useAuthStore = defineStore('Auth', () => {
    * @throws if unsuccessful
    */
   async function signup(username: string, password: string) {
-    const response = await api.newAccount({ username, password });
+    const response = await api.createAccount({ username, password });
     return response.success;
   }
 
diff --git a/src/app/stores/clients.ts b/src/app/stores/clients.ts
index 65b24d64..49adaed1 100644
--- a/src/app/stores/clients.ts
+++ b/src/app/stores/clients.ts
@@ -108,7 +108,10 @@ export const useClientsStore = defineStore('Clients', () => {
       };
     });
 
-    if (globalStore.enableSortClient && transformedClients !== undefined) {
+    if (
+      globalStore.features.sortClients.enabled &&
+      transformedClients !== undefined
+    ) {
       transformedClients = sortByProperty(
         transformedClients,
         'name',
diff --git a/src/app/stores/global.ts b/src/app/stores/global.ts
index a026faa6..80a19e25 100644
--- a/src/app/stores/global.ts
+++ b/src/app/stores/global.ts
@@ -1,16 +1,26 @@
 import { defineStore } from 'pinia';
 
 export const useGlobalStore = defineStore('Global', () => {
-  const uiChartType = ref(0);
   const uiShowCharts = ref(getItem('uiShowCharts') === '1');
   const currentRelease = ref<null | number>(null);
   const latestRelease = ref<null | { version: number; changelog: string }>(
     null
   );
-  const uiTrafficStats = ref(false);
-  const enableExpireTime = ref(false);
-  const enableOneTimeLinks = ref(false);
-  const enableSortClient = ref(false);
+  const features = ref({
+    trafficStats: {
+      enabled: false,
+      type: 0,
+    },
+    sortClients: {
+      enabled: false,
+    },
+    clientExpiration: {
+      enabled: false,
+    },
+    oneTimeLinks: {
+      enabled: false,
+    },
+  });
   const sortClient = ref(true); // Sort clients by name, true = asc, false = desc
 
   const { availableLocales, locale } = useI18n();
@@ -39,49 +49,23 @@ export const useGlobalStore = defineStore('Global', () => {
     latestRelease.value = release.value!.latestRelease;
   }
 
-  async function fetchChartType() {
-    const { data: chartType } = await api.getChartType();
-    uiChartType.value = chartType.value ?? 0;
-  }
-
-  async function fetchTrafficStats() {
-    const { data: trafficStats } = await api.getTrafficStats();
-    uiTrafficStats.value = trafficStats.value ?? false;
-  }
-
-  async function fetchOneTimeLinks() {
-    const { data: oneTimeLinks } = await api.getEnableOneTimeLinks();
-    enableOneTimeLinks.value = oneTimeLinks.value ?? false;
-  }
-
-  async function fetchSortClients() {
-    const { data: sortClients } = await api.getSortClients();
-    enableSortClient.value = sortClients.value ?? false;
-  }
-
-  async function fetchExpireTime() {
-    const { data: expireTime } = await api.getEnableExpireTime();
-    enableExpireTime.value = expireTime.value ?? false;
+  async function fetchFeatures() {
+    const { data: apiFeatures } = await api.getFeatures();
+    if (apiFeatures.value) {
+      features.value = apiFeatures.value;
+    }
   }
 
   const updateCharts = computed(() => {
-    return uiChartType.value > 0 && uiShowCharts.value;
+    return features.value.trafficStats.type > 0 && uiShowCharts.value;
   });
 
   return {
-    uiChartType,
     uiShowCharts,
-    uiTrafficStats,
     updateCharts,
-    enableSortClient,
     sortClient,
-    enableExpireTime,
-    enableOneTimeLinks,
+    features,
     fetchRelease,
-    fetchChartType,
-    fetchTrafficStats,
-    fetchOneTimeLinks,
-    fetchSortClients,
-    fetchExpireTime,
+    fetchFeatures,
   };
 });
diff --git a/src/app/utils/api.ts b/src/app/utils/api.ts
index 6ac76e0e..8172f2f0 100644
--- a/src/app/utils/api.ts
+++ b/src/app/utils/api.ts
@@ -11,30 +11,6 @@ class API {
     });
   }
 
-  async getTrafficStats() {
-    return useFetch('/api/ui-traffic-stats', {
-      method: 'get',
-    });
-  }
-
-  async getChartType() {
-    return useFetch('/api/ui-chart-type', {
-      method: 'get',
-    });
-  }
-
-  async getEnableOneTimeLinks() {
-    return useFetch('/api/wg-enable-one-time-links', {
-      method: 'get',
-    });
-  }
-
-  async getEnableExpireTime() {
-    return useFetch('/api/wg-enable-expire-time', {
-      method: 'get',
-    });
-  }
-
   async getSession() {
     // TODO?: use useFetch
     return $fetch('/api/session', {
@@ -152,13 +128,7 @@ class API {
     });
   }
 
-  async getSortClients() {
-    return useFetch('/api/ui-sort-clients', {
-      method: 'get',
-    });
-  }
-
-  async newAccount({
+  async createAccount({
     username,
     password,
   }: {
@@ -170,6 +140,12 @@ class API {
       body: { username, password },
     });
   }
+
+  async getFeatures() {
+    return useFetch('/api/features', {
+      method: 'get',
+    });
+  }
 }
 
 type WGClientReturn = Awaited<
diff --git a/src/server/api/features.get.ts b/src/server/api/features.get.ts
new file mode 100644
index 00000000..c2868ede
--- /dev/null
+++ b/src/server/api/features.get.ts
@@ -0,0 +1,9 @@
+export default defineEventHandler(async () => {
+  const system = await Database.getSystem();
+  return {
+    trafficStats: system.trafficStats,
+    sortClients: system.sortClients,
+    clientExpiration: system.clientExpiration,
+    oneTimeLinks: system.oneTimeLinks,
+  };
+});
diff --git a/src/server/api/ui-chart-type.get.ts b/src/server/api/ui-chart-type.get.ts
deleted file mode 100644
index 48ade476..00000000
--- a/src/server/api/ui-chart-type.get.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default defineEventHandler(async (event) => {
-  setHeader(event, 'Content-Type', 'application/json');
-  const system = await Database.getSystem();
-  if (!system)
-    throw createError({
-      statusCode: 500,
-      statusMessage: 'Invalid',
-    });
-
-  return system.trafficStats.type;
-});
diff --git a/src/server/api/ui-sort-clients.get.ts b/src/server/api/ui-sort-clients.get.ts
deleted file mode 100644
index 37262888..00000000
--- a/src/server/api/ui-sort-clients.get.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default defineEventHandler(async (event) => {
-  setHeader(event, 'Content-Type', 'application/json');
-  const system = await Database.getSystem();
-  if (!system)
-    throw createError({
-      statusCode: 500,
-      statusMessage: 'Invalid',
-    });
-
-  return system.sortClients.enabled;
-});
diff --git a/src/server/api/ui-traffic-stats.get.ts b/src/server/api/ui-traffic-stats.get.ts
deleted file mode 100644
index 12d969c8..00000000
--- a/src/server/api/ui-traffic-stats.get.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default defineEventHandler(async (event) => {
-  setHeader(event, 'Content-Type', 'application/json');
-  const system = await Database.getSystem();
-  if (!system)
-    throw createError({
-      statusCode: 500,
-      statusMessage: 'Invalid',
-    });
-
-  return system.trafficStats.enabled;
-});
diff --git a/src/server/api/wg-enable-expire-time.get.ts b/src/server/api/wg-enable-expire-time.get.ts
deleted file mode 100644
index 74389a00..00000000
--- a/src/server/api/wg-enable-expire-time.get.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default defineEventHandler(async (event) => {
-  setHeader(event, 'Content-Type', 'application/json');
-  const system = await Database.getSystem();
-  if (!system)
-    throw createError({
-      statusCode: 500,
-      statusMessage: 'Invalid',
-    });
-
-  return system.clientExpiration.enabled;
-});
diff --git a/src/server/api/wg-enable-one-time-links.get.ts b/src/server/api/wg-enable-one-time-links.get.ts
deleted file mode 100644
index 7b474c76..00000000
--- a/src/server/api/wg-enable-one-time-links.get.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default defineEventHandler(async (event) => {
-  setHeader(event, 'Content-Type', 'application/json');
-  const system = await Database.getSystem();
-  if (!system)
-    throw createError({
-      statusCode: 500,
-      statusMessage: 'Invalid',
-    });
-
-  return system.oneTimeLinks.enabled;
-});