move all features into one route

src/app/app.vue

@@ -8,12 +8,8 @@
 
 <script setup lang="ts">
 const globalStore = useGlobalStore();
-globalStore.fetchTrafficStats();
+globalStore.fetchFeatures();
-globalStore.fetchChartType();
 globalStore.fetchRelease();
-globalStore.fetchOneTimeLinks();
-globalStore.fetchSortClients();
-globalStore.fetchExpireTime();
 useHead({
   bodyAttrs: {
     class: 'bg-gray-50 dark:bg-neutral-800',

src/app/components/Client/Charts.vue

@@ -1,13 +1,13 @@
 <template>
   <div
-    v-if="globalStore.uiChartType"
+    v-if="globalStore.features.trafficStats.type"
-    :class="`absolute z-0 bottom-0 left-0 right-0 h-6 ${globalStore.uiChartType === 1 && 'line-chart'}`"
+    :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"
+    v-if="globalStore.features.trafficStats.type"
-    :class="`absolute z-0 top-0 left-0 right-0 h-6 ${globalStore.uiChartType === 1 && 'line-chart'}`"
+    :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.chart.type =
-  opts.stroke.width = UI_CHART_TYPES[globalStore.uiChartType]?.strokeWidth ?? 0;
+    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.chart.type =
-  opts.stroke.width = UI_CHART_TYPES[globalStore.uiChartType]?.strokeWidth ?? 0;
+    UI_CHART_TYPES[globalStore.features.trafficStats.type]?.type || undefined;
+  opts.stroke.width =
+    UI_CHART_TYPES[globalStore.features.trafficStats.type]?.strokeWidth ?? 0;
   return opts;
 });
 

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" />

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">

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>

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"
   >

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="{

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"

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"
   >

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

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

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',

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 features = ref({
-  const enableExpireTime = ref(false);
+    trafficStats: {
-  const enableOneTimeLinks = ref(false);
+      enabled: false,
-  const enableSortClient = ref(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() {
+  async function fetchFeatures() {
-    const { data: chartType } = await api.getChartType();
+    const { data: apiFeatures } = await api.getFeatures();
-    uiChartType.value = chartType.value ?? 0;
+    if (apiFeatures.value) {
-  }
+      features.value = apiFeatures.value;
-
-  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;
   }
 
   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,
+    features,
-    enableOneTimeLinks,
     fetchRelease,
-    fetchChartType,
+    fetchFeatures,
-    fetchTrafficStats,
-    fetchOneTimeLinks,
-    fetchSortClients,
-    fetchExpireTime,
   };
 });

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() {
+  async createAccount({
-    return useFetch('/api/ui-sort-clients', {
-      method: 'get',
-    });
-  }
-
-  async newAccount({
     username,
     password,
   }: {
@@ -170,6 +140,12 @@ class API {
       body: { username, password },
     });
   }
+
+  async getFeatures() {
+    return useFetch('/api/features', {
+      method: 'get',
+    });
+  }
 }
 
 type WGClientReturn = Awaited<

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

src/server/api/ui-chart-type.get.ts

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

src/server/api/ui-sort-clients.get.ts

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

src/server/api/ui-traffic-stats.get.ts

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

src/server/api/wg-enable-expire-time.get.ts

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

src/server/api/wg-enable-one-time-links.get.ts

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