add information to client page

src/app/components/Form/DateField.vue

@@ -1,12 +1,17 @@
 <template>
-  <FormLabel :for="id">
+  <div class="flex items-center">
-    {{ label }}
+    <FormLabel :for="id">
-  </FormLabel>
+      {{ 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) {

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>

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