Split components (#1)

* update: introduce pages & components

 fix lint

* update: starting split components

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>

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>

src/components/Clients/index.ts

@@ -0,0 +1,4 @@
+import BackupConfig from './BackupConfig.vue';
+import RestoreConfig from './RestoreConfig.vue';
+
+export { BackupConfig, RestoreConfig };

src/app.vue → src/pages/index.vue

@@ -150,59 +150,9 @@
           </div>
           <div class="flex md:block md:flex-shrink-0">
             <!-- Restore configuration -->
-            <label
+            <ClientsCmp.RestoreConfig />
-              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>
             <!-- Backup configuration -->
-            <a
+            <ClientsCmp.BackupConfig />
-              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>
             <!-- 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 = {

src/pnpm-lock.yaml

@@ -41,8 +41,8 @@ importers:
         specifier: ^1.5.4
         version: 1.5.4
       tailwindcss:
-        specifier: ^3.4.7
+        specifier: ^3.4.9
-        version: 3.4.7
+        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
 
-  [email protected].7:
+  [email protected].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([email protected])
-      tailwind-config-viewer: 2.0.4([email protected].7)
+      tailwind-config-viewer: 2.0.4([email protected].9)
-      tailwindcss: 3.4.7
+      tailwindcss: 3.4.9
       ufo: 1.5.4
       unctx: 2.3.1
     transitivePeerDependencies:
@@ -11741,7 +11741,7 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]([email protected].7):
+  [email protected]([email protected].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
 
-  [email protected].7:
+  [email protected].9:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2