Feat: show client endpoint (#2058)

* show client endpoint

* improve

* fix status code

src/app/components/Form/InfoField.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex items-center">
+    <FormLabel :for="id">
+      {{ label }}
+    </FormLabel>
+    <BaseTooltip v-if="description" :text="description">
+      <IconsInfo class="size-4" />
+    </BaseTooltip>
+  </div>
+  <span :id="id">{{ data }}</span>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  id: string;
+  label: string;
+  description?: string;
+  data?: string;
+}>();
+</script>

src/app/pages/clients/[id].vue

@@ -39,6 +39,12 @@
               v-model="data.ipv6Address"
               label="IPv6"
             />
+            <FormInfoField
+              id="endpoint"
+              :data="data.endpoint ?? $t('client.notConnected')"
+              :label="$t('client.endpoint')"
+              :description="$t('client.endpointDesc')"
+            />
           </FormGroup>
           <FormGroup>
             <FormHeading :description="$t('client.allowedIpsDesc')">

src/i18n/locales/en.json

@@ -113,7 +113,10 @@
     "hooks": "Hooks",
     "hooksDescription": "Hooks only work with wg-quick",
     "hooksLeaveEmpty": "Only for wg-quick. Otherwise, leave it empty",
-    "dnsDesc": "DNS server clients will use (overrides global config)"
+    "dnsDesc": "DNS server clients will use (overrides global config)",
+    "notConnected": "Client not connected",
+    "endpoint": "Endpoint",
+    "endpointDesc": "IP of the client from which the WireGuard connection is established"
   },
   "dialog": {
     "change": "Change",

src/server/api/client/[clientId]/index.get.ts

@@ -18,6 +18,18 @@ export default definePermissionEventHandler(
         statusMessage: 'Client not found',
       });
     }
-    return result;
+
+    const data = await WireGuard.dumpByPublicKey(result.publicKey);
+    if (!data) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: 'Failed to dump client data',
+      });
+    }
+
+    return {
+      ...result,
+      endpoint: data.endpoint,
+    };
   }
 );

src/server/utils/WireGuard.ts

@@ -93,6 +93,17 @@ class WireGuard {
     return clients;
   }
 
+  async dumpByPublicKey(publicKey: string) {
+    const wgInterface = await Database.interfaces.get();
+
+    const dump = await wg.dump(wgInterface.name);
+    const clientDump = dump.find(
+      ({ publicKey: dumpPublicKey }) => dumpPublicKey === publicKey
+    );
+
+    return clientDump;
+  }
+
   async getAllClients() {
     const wgInterface = await Database.interfaces.get();
     const dbClients = await Database.clients.getAllPublic();