From 200523a05258a7aaab0b0127ad1b155122dcfd8b Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Mon, 3 Mar 2025 10:15:55 +0100
Subject: [PATCH] add information to client page

---
 src/app/components/Form/DateField.vue | 13 +++++++++----
 src/app/pages/clients/[id].vue        | 11 +++++++++--
 src/i18n/locales/en.json              |  7 ++++++-
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/app/components/Form/DateField.vue b/src/app/components/Form/DateField.vue
index a82d21a6..a1474984 100644
--- a/src/app/components/Form/DateField.vue
+++ b/src/app/components/Form/DateField.vue
@@ -1,12 +1,17 @@
 <template>
-  <FormLabel :for="id">
-    {{ label }}
-  </FormLabel>
+  <div class="flex items-center">
+    <FormLabel :for="id">
+      {{ label }}
+    </FormLabel>
+    <BaseTooltip v-if="description" :text="description">
+      <IconsInfo class="size-4" />
+    </BaseTooltip>
+  </div>
   <BaseInput :id="id" v-model="data" :name="id" type="date" />
 </template>
 
 <script lang="ts" setup>
-defineProps<{ id: string; label: string }>();
+defineProps<{ id: string; label: string; description?: string }>();
 
 const data = defineModel<string | null>({
   set(value) {
diff --git a/src/app/pages/clients/[id].vue b/src/app/pages/clients/[id].vue
index f91a922c..4b7a9575 100644
--- a/src/app/pages/clients/[id].vue
+++ b/src/app/pages/clients/[id].vue
@@ -23,6 +23,7 @@
             <FormDateField
               id="expiresAt"
               v-model="data.expiresAt"
+              :description="$t('client.expireDateDesc')"
               :label="$t('client.expireDate')"
             />
           </FormGroup>
@@ -40,11 +41,15 @@
             />
           </FormGroup>
           <FormGroup>
-            <FormHeading>{{ $t('general.allowedIps') }}</FormHeading>
+            <FormHeading :description="$t('client.allowedIpsDesc')">{{
+              $t('general.allowedIps')
+            }}</FormHeading>
             <FormArrayField v-model="data.allowedIps" name="allowedIps" />
           </FormGroup>
           <FormGroup>
-            <FormHeading>{{ $t('client.serverAllowedIps') }}</FormHeading>
+            <FormHeading :description="$t('client.serverAllowedIpsDesc')">{{
+              $t('client.serverAllowedIps')
+            }}</FormHeading>
             <FormArrayField
               v-model="data.serverAllowedIps"
               name="serverAllowedIps"
@@ -56,11 +61,13 @@
             <FormNumberField
               id="mtu"
               v-model="data.mtu"
+              :description="$t('client.mtuDesc')"
               :label="$t('general.mtu')"
             />
             <FormNumberField
               id="persistentKeepalive"
               v-model="data.persistentKeepalive"
+              :description="$t('client.persistentKeepaliveDesc')"
               :label="$t('general.persistentKeepalive')"
             />
           </FormGroup>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 1743c153..d623508d 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -76,6 +76,7 @@
     "new": "New Client",
     "name": "Name",
     "expireDate": "Expire Date",
+    "expireDateDesc": "Date the client will be disabled. Blank for permanent",
     "deleteClient": "Delete Client",
     "deleteDialog1": "Are you sure you want to delete",
     "deleteDialog2": "This action cannot be undone.",
@@ -93,7 +94,11 @@
     "enableClient": "Enable Client",
     "noPrivKey": "This client has no known private key. Cannot create Configuration.",
     "showQR": "Show QR Code",
-    "downloadConfig": "Download Configuration"
+    "downloadConfig": "Download Configuration",
+    "allowedIpsDesc": "Which IPs will be routed through the VPN",
+    "serverAllowedIpsDesc": "Which IPs the server will route to the client",
+    "mtuDesc": "Sets the maximum transmission unit (packet size) for the VPN tunnel",
+    "persistentKeepaliveDesc": "Sets the interval (in seconds) for keep-alive packets. 0 disables it"
   },
   "dialog": {
     "change": "Change",