Split components (#1)

* update: introduce pages & components fix lint * update: starting split components
12 months ago · 9c883cb248
5 changed files with 512 additions and 485 deletions
--- a/src/components/Clients/BackupConfig.vue
+++ b/src/components/Clients/BackupConfig.vue
@ -0,0 +1,26 @@
+<template>
+  <a
+    href="./api/wireguard/backup"
+    :title="$t('titleBackupConfig')"
+    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"
+  >
+    <svg
+      inline
+      class="w-4 md:mr-2"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"
+      />
+    </svg>
+    <span class="max-md:hidden text-sm">{{ $t('backup') }}</span>
+  </a>
+</template>
+
+<script setup lang="ts"></script>
--- a/src/components/Clients/RestoreConfig.vue
+++ b/src/components/Clients/RestoreConfig.vue
@ -0,0 +1,53 @@
+<template>
+  <label
+    for="inputRC"
+    :title="$t('titleRestoreConfig')"
+    class="hover:cursor-pointer hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-r-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-l-full md:rounded inline-flex items-center transition"
+  >
+    <svg
+      inline
+      class="w-4 md:mr-2"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+      />
+    </svg>
+    <span class="max-md:hidden text-sm">{{ $t('restore') }}</span>
+    <input
+      id="inputRC"
+      type="file"
+      name="configurationfile"
+      accept="text/*,.json"
+      class="hidden"
+      @change="restoreConfig"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+function restoreConfig(e: Event) {
+  e.preventDefault();
+  const isFile = e.currentTarget;
+  if (isFile) {
+    const file = (isFile as HTMLInputElement).files?.item(0);
+    file
+      ?.text()
+      .then((content) => {
+        api
+          .restoreConfiguration(content)
+          .then((_result) => alert('The configuration was updated.'))
+          .catch((err) => alert(err.message || err.toString()));
+      })
+      .catch((err) => alert(err.message || err.toString()));
+  } else {
+    alert('Failed to load your file!');
+  }
+}
+</script>
--- a/src/components/Clients/index.ts
+++ b/src/components/Clients/index.ts
@ -0,0 +1,4 @@
+import BackupConfig from './BackupConfig.vue';
+import RestoreConfig from './RestoreConfig.vue';
+
+export { BackupConfig, RestoreConfig };
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@ -150,59 +150,9 @@
          </div>
          <div class="flex md:block md:flex-shrink-0">
            <!-- Restore configuration -->
-            <label
-              for="inputRC"
-              :title="$t('titleRestoreConfig')"
-              class="hover:cursor-pointer hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-r-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-l-full md:rounded inline-flex items-center transition"
-            >
-              <svg
-                inline
-                class="w-4 md:mr-2"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
-                />
-              </svg>
-              <span class="max-md:hidden text-sm">{{ $t('restore') }}</span>
-              <input
-                id="inputRC"
-                type="file"
-                name="configurationfile"
-                accept="text/*,.json"
-                class="hidden"
-                @change="restoreConfig"
-              />
-            </label>
+            <ClientsCmp.RestoreConfig />
            <!-- Backup configuration -->
-            <a
-              href="./api/wireguard/backup"
-              :title="$t('titleBackupConfig')"
-              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"
-            >
-              <svg
-                inline
-                class="w-4 md:mr-2"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"
-                />
-              </svg>
-              <span class="max-md:hidden text-sm">{{ $t('backup') }}</span>
-            </a>
+            <ClientsCmp.BackupConfig />
            <!-- New client -->
            <button
              class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-l-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-r-full md:rounded inline-flex items-center transition"
@ -233,9 +183,9 @@

        <div>
          <!-- Client -->
+          <div v-if="clients && clients.length > 0">
            <div
              v-for="client in clients"
-            v-if="clients && clients.length > 0"
              :key="client.id"
              class="relative overflow-hidden border-b last:border-b-0 border-gray-100 dark:border-neutral-600 border-solid"
            >
@ -431,7 +381,9 @@
                        <span
                          v-if="!uiTrafficStats && client.transferTx"
                          class="whitespace-nowrap"
-                        :title="$t('totalDownload') + bytes(client.transferTx)"
+                          :title="
+                            $t('totalDownload') + bytes(client.transferTx)
+                          "
                        >
                          ·
                          <svg
@ -491,10 +443,15 @@
                      class="flex gap-2 items-center shrink-0 text-gray-400 dark:text-neutral-400 text-xs mt-px justify-end"
                    >
                      <!-- Transfer TX -->
-                    <div v-if="client.transferTx" class="min-w-20 md:min-w-24">
+                      <div
+                        v-if="client.transferTx"
+                        class="min-w-20 md:min-w-24"
+                      >
                        <span
                          class="flex gap-1"
-                        :title="$t('totalDownload') + bytes(client.transferTx)"
+                          :title="
+                            $t('totalDownload') + bytes(client.transferTx)
+                          "
                        >
                          <svg
                            class="align-middle h-3 inline mt-0.5"
@ -523,7 +480,10 @@
                      </div>

                      <!-- Transfer RX -->
-                    <div v-if="client.transferRx" class="min-w-20 md:min-w-24">
+                      <div
+                        v-if="client.transferRx"
+                        class="min-w-20 md:min-w-24"
+                      >
                        <span
                          class="flex gap-1"
                          :title="$t('totalUpload') + bytes(client.transferRx)"
@ -683,6 +643,7 @@
                </div>
              </div>
            </div>
+          </div>
          <div v-if="clients && clients.length === 0">
            <p
              class="text-center m-10 text-gray-400 dark:text-neutral-400 text-sm"
@ -1107,7 +1068,6 @@
        />
      </svg>
    </div>
-  </div>

    <p
      v-cloak
@ -1141,12 +1101,14 @@
        >{{ $t('donate') }}</a
      >
    </p>
+  </div>
 </template>

 <script setup lang="ts">
 import '~/assets/css/app.css';
 import { sha256 } from 'js-sha256';
 import { format as timeago } from 'timeago.js';
+import * as ClientsCmp from '@/components/Clients';

 useHead({
  bodyAttrs: {
@ -1506,24 +1468,6 @@ function updateClientAddress(client: WGClient, address: string | null) {
    .catch((err) => alert(err.message || err.toString()))
    .finally(() => refresh().catch(console.error));
 }
-function restoreConfig(e: Event) {
-  e.preventDefault();
-  const file = (e.currentTarget as HTMLInputElement).files?.item(0);
-  if (file) {
-    file
-      .text()
-      .then((content) => {
-        api
-          .restoreConfiguration(content)
-          .then(() => alert('The configuration was updated.'))
-          .catch((err) => alert(err.message || err.toString()))
-          .finally(() => refresh().catch(console.error));
-      })
-      .catch((err) => alert(err.message || err.toString()));
-  } else {
-    alert('Failed to load your file!');
-  }
-}

 function toggleTheme() {
  const themeCycle = {
--- a/src/pnpm-lock.yaml
+++ b/src/pnpm-lock.yaml
@ -41,8 +41,8 @@ importers:
        specifier: ^1.5.4
        version: 1.5.4
      tailwindcss:
-        specifier: ^3.4.7
-        version: 3.4.7
+        specifier: ^3.4.9
+        version: 3.4.9
      timeago.js:
        specifier: ^4.0.2
        version: 4.0.2
@ -6611,10 +6611,10 @@ packages:
    peerDependencies:
      tailwindcss: 1 || 2 || 2.0.1-compat || 3

-  tailwindcss@3.4.7:
+  tailwindcss@3.4.9:
    resolution:
      {
-        integrity: sha512-rxWZbe87YJb4OcSopb7up2Ba4U82BoiSGUdoDr3Ydrg9ckxFS/YWsvhN323GMcddgU65QRy7JndC7ahhInhvlQ==,
+        integrity: sha512-1SEOvRr6sSdV5IDf9iC+NU4dhwdqzF4zKKq3sAbasUWHEM6lsMhX+eNN5gkPx1BvLFEnZQEUFbXnGj8Qlp83Pg==,
      }
    engines: { node: '>=14.0.0' }
    hasBin: true
@ -8384,8 +8384,8 @@ snapshots:
      pathe: 1.1.2
      postcss: 8.4.40
      postcss-nesting: 12.1.5(postcss@8.4.40)
-      tailwind-config-viewer: 2.0.4(tailwindcss@3.4.7)
-      tailwindcss: 3.4.7
+      tailwind-config-viewer: 2.0.4(tailwindcss@3.4.9)
+      tailwindcss: 3.4.9
      ufo: 1.5.4
      unctx: 2.3.1
    transitivePeerDependencies:
@ -11741,7 +11741,7 @@ snapshots:

  system-architecture@0.1.0: {}

-  tailwind-config-viewer@2.0.4(tailwindcss@3.4.7):
+  tailwind-config-viewer@2.0.4(tailwindcss@3.4.9):
    dependencies:
      '@koa/router': 12.0.1
      commander: 6.2.1
@ -11751,11 +11751,11 @@ snapshots:
      open: 7.4.2
      portfinder: 1.0.32
      replace-in-file: 6.3.5
-      tailwindcss: 3.4.7
+      tailwindcss: 3.4.9
    transitivePeerDependencies:
      - supports-color

-  tailwindcss@3.4.7:
+  tailwindcss@3.4.9:
    dependencies:
      '@alloc/quick-lru': 5.2.0
      arg: 5.0.2