From b006289c10d89af4fabc687af0ec0cd1372f1f1c Mon Sep 17 00:00:00 2001
From: Matteo Di Lorenzi <matteo.dilorenzi@nethesis.it>
Date: Mon, 26 Jan 2026 14:45:39 +0100
Subject: [PATCH 1/5] feat(openvpn-tunnel): update certs duration and add certs
 regeneration functionality

---
 .../CreateOrEditTunnelDrawer.vue              |   3 +-
 .../openvpn_tunnel/DeleteTunnelModal.vue      |   3 +-
 .../openvpn_tunnel/RegenerateCertsModal.vue   |  82 ++++
 .../openvpn_tunnel/TunnelInfoModal.vue        | 282 +++++++++++
 .../openvpn_tunnel/TunnelManager.vue          |  43 +-
 .../standalone/openvpn_tunnel/TunnelTable.vue | 449 +++++++++++-------
 src/i18n/en.json                              |  26 +-
 src/i18n/it.json                              |  26 +-
 8 files changed, 729 insertions(+), 185 deletions(-)
 create mode 100644 src/components/standalone/openvpn_tunnel/RegenerateCertsModal.vue
 create mode 100644 src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue

diff --git a/src/components/standalone/openvpn_tunnel/CreateOrEditTunnelDrawer.vue b/src/components/standalone/openvpn_tunnel/CreateOrEditTunnelDrawer.vue
index 2287811d9..f82272ab8 100644
--- a/src/components/standalone/openvpn_tunnel/CreateOrEditTunnelDrawer.vue
+++ b/src/components/standalone/openvpn_tunnel/CreateOrEditTunnelDrawer.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -670,6 +670,7 @@ watch(
         v-model="name"
         :disabled="id != ''"
         :label="t('standalone.openvpn_tunnel.tunnel_name')"
+        :helper-text="t('standalone.openvpn_tunnel.tunnel_name_max_length')"
         :invalid-message="validationErrorBag.getFirstFor('ns_name')"
       />
       <template v-if="!isClientTunnel">
diff --git a/src/components/standalone/openvpn_tunnel/DeleteTunnelModal.vue b/src/components/standalone/openvpn_tunnel/DeleteTunnelModal.vue
index aaff174ae..d015ab06b 100644
--- a/src/components/standalone/openvpn_tunnel/DeleteTunnelModal.vue
+++ b/src/components/standalone/openvpn_tunnel/DeleteTunnelModal.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -57,6 +57,7 @@ function close() {
     kind="warning"
     :title="t('standalone.openvpn_tunnel.delete_tunnel')"
     :primary-label="t('common.delete')"
+    :cancel-label="t('common.cancel')"
     :primary-button-disabled="isDeleting"
     :primary-button-loading="isDeleting"
     primary-button-kind="danger"
diff --git a/src/components/standalone/openvpn_tunnel/RegenerateCertsModal.vue b/src/components/standalone/openvpn_tunnel/RegenerateCertsModal.vue
new file mode 100644
index 000000000..91dbd1c36
--- /dev/null
+++ b/src/components/standalone/openvpn_tunnel/RegenerateCertsModal.vue
@@ -0,0 +1,82 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { NeInlineNotification, getAxiosErrorMessage } from '@nethesis/vue-components'
+import { NeModal } from '@nethesis/vue-components'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { ServerTunnel, ClientTunnel } from './TunnelManager.vue'
+import { ubusCall } from '@/lib/standalone/ubus'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  visible: boolean
+  itemToRegenerate: ServerTunnel | ClientTunnel | null
+}>()
+
+const emit = defineEmits(['close', 'certs-regenerated'])
+
+const error = ref({
+  notificationDescription: '',
+  notificationDetails: ''
+})
+const isRegenerating = ref(false)
+
+async function regenerateCerts() {
+  if (props.itemToRegenerate) {
+    error.value.notificationDescription = ''
+    error.value.notificationDetails = ''
+    isRegenerating.value = true
+    try {
+      await ubusCall('ns.ovpntunnel', 'regenerate-server-certs', {
+        id: props.itemToRegenerate.id
+      })
+      emit('certs-regenerated')
+      emit('close')
+    } catch (err: any) {
+      error.value.notificationDescription = t(getAxiosErrorMessage(err))
+      error.value.notificationDetails = err.toString()
+    } finally {
+      isRegenerating.value = false
+    }
+  }
+}
+
+function close() {
+  error.value.notificationDescription = ''
+  error.value.notificationDetails = ''
+  emit('close')
+}
+</script>
+
+<template>
+  <NeModal
+    :visible="visible"
+    kind="warning"
+    :title="t('standalone.openvpn_tunnel.regenerate_cert')"
+    :primary-label="t('standalone.openvpn_tunnel.regenerate_cert_button')"
+    :cancel-label="t('common.cancel')"
+    :primary-button-disabled="isRegenerating"
+    :primary-button-loading="isRegenerating"
+    :close-aria-label="t('common.close')"
+    @primary-click="regenerateCerts()"
+    @close="close()"
+  >
+    {{ t('standalone.openvpn_tunnel.regenerate_cert_message') }}
+    <NeInlineNotification
+      v-if="error.notificationDescription"
+      kind="error"
+      :title="t('error.cannot_regenerate_cert')"
+      :description="error.notificationDescription"
+      class="my-2"
+    >
+      <template v-if="error.notificationDetails" #details>
+        {{ error.notificationDetails }}
+      </template>
+    </NeInlineNotification>
+  </NeModal>
+</template>
diff --git a/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue b/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
new file mode 100644
index 000000000..f746bd198
--- /dev/null
+++ b/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
@@ -0,0 +1,282 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<script setup lang="ts">
+import { NeModal } from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import type { ServerTunnel, ClientTunnel } from './TunnelManager.vue'
+import { watch, ref, computed } from 'vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { getCertificateStatus } from './TunnelTable.vue';
+
+const { t, locale } = useI18n()
+
+const{ itemToShow = null } = defineProps<{
+  itemToShow?: ServerTunnel | ClientTunnel | null
+}>()
+
+const _itemToShow = ref<ServerTunnel | ClientTunnel>();
+watch(() => itemToShow, (newVal) => {
+    if (newVal !== null) {
+        _itemToShow.value = newVal;
+    }
+}, { immediate: true });
+
+const emit = defineEmits(['close'])
+
+function isClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientTunnel {
+  return 'remote_host' in item
+}
+
+const certificateStatus = computed(() => {
+  if (!_itemToShow.value?.cert_expiry_ts) return { show: false }
+  return getCertificateStatus(_itemToShow.value.cert_expiry_ts, isClientTunnel(_itemToShow.value), true)
+})
+
+const fieldLabels = computed(() => {
+  const isTunnelClient = _itemToShow.value ? isClientTunnel(_itemToShow.value) : false
+  
+  return {
+    bytes_received: t('standalone.openvpn_tunnel.bytes_received'),
+    bytes_sent: t('standalone.openvpn_tunnel.bytes_sent'),
+    cert_expiry_ts: isTunnelClient 
+      ? t('standalone.openvpn_tunnel.client_cert_expiry')
+      : t('standalone.openvpn_tunnel.cert_expiry'),
+    connected: t('standalone.openvpn_tunnel.connection'),
+    enabled: t('standalone.openvpn_tunnel.status'),
+    id: 'Tunnel ID',
+    local_network: t('standalone.openvpn_tunnel.local_networks'),
+    ns_name: t('standalone.openvpn_tunnel.name'),
+    port: t('standalone.openvpn_tunnel.port'),
+    real_address: t('standalone.openvpn_tunnel.real_address'),
+    remote_network: t('standalone.openvpn_tunnel.remote_networks'),
+    since: t('standalone.openvpn_tunnel.since'),
+    topology: t('standalone.openvpn_tunnel.topology'),
+    virtual_address: t('standalone.openvpn_tunnel.virtual_address'),
+    vpn_network: t('standalone.openvpn_tunnel.vpn_network'),
+    remote_host: t('standalone.openvpn_tunnel.remote_host'),
+  }
+})
+
+function formatFieldValue(key: string, value: any): string {
+  if (value === null || value === undefined || value === '') return ''
+
+  // Handle timestamps
+  if ((key === 'cert_expiry_ts' || key === 'since') && typeof value === 'number') {
+    const date = new Date(value * 1000)
+    return date.toLocaleString(locale.value)
+  }
+
+  // Handle boolean-like fields
+  if (key === 'connected') {
+    return value ? t('standalone.openvpn_tunnel.connected') : t('standalone.openvpn_tunnel.not_connected')
+  }
+
+  if (key === 'enabled') {
+    return value ? t('standalone.openvpn_tunnel.enabled') : t('standalone.openvpn_tunnel.disabled')
+  }
+
+  // Handle arrays
+  if (Array.isArray(value)) {
+    return value.join(', ')
+  }
+
+  return String(value)
+}
+
+function isFieldVisible(key: string, value: any): boolean {
+  // Check if field has a meaningful value
+  if (value === null || value === undefined || value === '') return false
+  if (Array.isArray(value) && value.length === 0) return false
+  return true
+}
+</script>
+
+<template>
+  <NeModal
+    :visible="itemToShow !== null"
+    kind="info"
+    size="lg"
+    :primary-label="t('common.close')"
+    :title="t('standalone.openvpn_tunnel.tunnel_details')"
+    :close-aria-label="t('common.close')"
+    @close="emit('close')"
+    @primary-click="emit('close')"
+  >
+    <div class="grid grid-cols-1 md:grid-cols-[auto_1fr] gap-4">
+      <!-- ns_name -->
+      <template v-if="isFieldVisible('ns_name', _itemToShow?.ns_name)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['ns_name'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('ns_name', _itemToShow?.ns_name) }}
+        </p>
+      </template>
+
+      <!-- id -->
+      <template v-if="isFieldVisible('id', _itemToShow?.id)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['id'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('id', _itemToShow?.id) }}
+        </p>
+      </template>
+
+      <!-- port -->
+      <template v-if="isFieldVisible('port', _itemToShow?.port)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['port'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('port', _itemToShow?.port) }}
+        </p>
+      </template>
+
+      <!-- enabled -->
+      <template v-if="isFieldVisible('enabled', _itemToShow?.enabled)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['enabled'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('enabled', _itemToShow?.enabled) }}
+        </p>
+      </template>
+
+      <!-- topology -->
+      <template v-if="isFieldVisible('topology', _itemToShow?.topology)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['topology'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('topology', _itemToShow?.topology) }}
+        </p>
+      </template>
+
+      <!-- local_network -->
+      <template v-if="isFieldVisible('local_network', (_itemToShow as any)?.local_network)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['local_network'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('local_network', (_itemToShow as any)?.local_network) }}
+        </p>
+      </template>
+
+      <!-- remote_network -->
+      <template v-if="isFieldVisible('remote_network', _itemToShow?.remote_network)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['remote_network'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('remote_network', _itemToShow?.remote_network) }}
+        </p>
+      </template>
+
+      <!-- remote_host -->
+      <template v-if="isFieldVisible('remote_host', (_itemToShow as any)?.remote_host)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['remote_host'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('remote_host', (_itemToShow as any)?.remote_host) }}
+        </p>
+      </template>
+
+      <!-- vpn_network -->
+      <template v-if="isFieldVisible('vpn_network', (_itemToShow as any)?.vpn_network)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['vpn_network'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('vpn_network', (_itemToShow as any)?.vpn_network) }}
+        </p>
+      </template>
+
+      <!-- real_address -->
+      <template v-if="isFieldVisible('real_address', (_itemToShow as any)?.real_address)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['real_address'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('real_address', (_itemToShow as any)?.real_address) }}
+        </p>
+      </template>
+
+      <!-- virtual_address -->
+      <template v-if="isFieldVisible('virtual_address', (_itemToShow as any)?.virtual_address)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['virtual_address'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('virtual_address', (_itemToShow as any)?.virtual_address) }}
+        </p>
+      </template>
+
+      <!-- connected -->
+      <template v-if="isFieldVisible('connected', _itemToShow?.connected)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['connected'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('connected', _itemToShow?.connected) }}
+        </p>
+      </template>
+
+      <!-- since -->
+      <template v-if="isFieldVisible('since', _itemToShow?.since)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['since'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('since', _itemToShow?.since) }}
+        </p>
+      </template>
+
+      <!-- bytes_received -->
+      <template v-if="isFieldVisible('bytes_received', _itemToShow?.bytes_received)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['bytes_received'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('bytes_received', _itemToShow?.bytes_received) }}
+        </p>
+      </template>
+
+      <!-- bytes_sent -->
+      <template v-if="isFieldVisible('bytes_sent', _itemToShow?.bytes_sent)">
+        <p class="font-semibold text-sm">
+          {{ fieldLabels['bytes_sent'] }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">
+          {{ formatFieldValue('bytes_sent', _itemToShow?.bytes_sent) }}
+        </p>
+      </template>
+
+      <!-- cert_expiry_ts -->
+      <template v-if="isFieldVisible('cert_expiry_ts', _itemToShow?.cert_expiry_ts)">
+        <p class="font-semibold text-sm">
+            {{ fieldLabels['cert_expiry_ts'] }}
+        </p>        
+        <div class="flex flex-col gap-2">
+          <p class="text-gray-600 dark:text-gray-400 text-sm">
+              {{ formatFieldValue('cert_expiry_ts', _itemToShow?.cert_expiry_ts) }}
+          </p>
+          <span v-if="certificateStatus.show" class="flex items-center gap-2">
+            <FontAwesomeIcon
+              :icon="certificateStatus.icon"
+              :class="['h-4 w-4', certificateStatus.colorClass]"
+              aria-hidden="true"
+            />
+            <p class="text-gray-600 dark:text-gray-400 text-sm">
+              {{ t(certificateStatus.messageKey!, certificateStatus.messageParams!) }}
+            </p>
+          </span>
+        </div>
+      </template>
+    </div>
+  </NeModal>
+</template>
+
diff --git a/src/components/standalone/openvpn_tunnel/TunnelManager.vue b/src/components/standalone/openvpn_tunnel/TunnelManager.vue
index 896987442..2c9f14c14 100644
--- a/src/components/standalone/openvpn_tunnel/TunnelManager.vue
+++ b/src/components/standalone/openvpn_tunnel/TunnelManager.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -18,6 +18,8 @@ import TunnelTable from './TunnelTable.vue'
 import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
 import CreateOrEditTunnelDrawer from './CreateOrEditTunnelDrawer.vue'
 import DeleteTunnelModal from './DeleteTunnelModal.vue'
+import RegenerateCertsModal from './RegenerateCertsModal.vue'
+import TunnelInfoModal from './TunnelInfoModal.vue'
 import DownloadTunnelModal from './DownloadTunnelModal.vue'
 import ImportConfigurationDrawer from './ImportConfigurationDrawer.vue'
 import { ubusCall } from '@/lib/standalone/ubus'
@@ -33,6 +35,10 @@ export type ServerTunnel = {
   remote_network: string[]
   vpn_network: string
   connected: boolean
+  cert_expiry_ts?: number
+  bytes_received?: string
+  bytes_sent?: string
+  since?: number
 }
 
 export type ClientTunnel = {
@@ -44,6 +50,10 @@ export type ClientTunnel = {
   remote_host: string[]
   remote_network: string[]
   connected: boolean
+  cert_expiry_ts?: number
+  bytes_received?: string
+  bytes_sent?: string
+  since?: number
 }
 
 type Tunnel = ServerTunnel | ClientTunnel
@@ -61,6 +71,8 @@ const tunnels = ref<ServerTunnel[] | ClientTunnel[]>([])
 const selectedTunnel = ref<Tunnel | null>(null)
 const showCreateEditDrawer = ref(false)
 const showDeleteModal = ref(false)
+const showRegenerateCertsModal = ref(false)
+const showTunnelInfoModal = ref(false)
 const showDownloadModal = ref(false)
 const showImportConfigurationDrawer = ref(false)
 const fetchTunnelsIntervalId = ref(0)
@@ -104,6 +116,16 @@ function openDeleteModal(itemToDelete: Tunnel) {
   showDeleteModal.value = true
 }
 
+function openRegenerateCertsModal(itemToRegenerate: Tunnel) {
+  selectedTunnel.value = itemToRegenerate
+  showRegenerateCertsModal.value = true
+}
+
+function openTunnelInfoModal(itemToShow: Tunnel) {
+  selectedTunnel.value = itemToShow
+  showTunnelInfoModal.value = true
+}
+
 function openDownloadModal(itemToDownload: Tunnel) {
   selectedTunnel.value = itemToDownload
   showDownloadModal.value = true
@@ -116,6 +138,8 @@ function openImportConfigurationDrawer() {
 function closeModalsAndDrawers() {
   selectedTunnel.value = null
   showDeleteModal.value = false
+  showRegenerateCertsModal.value = false
+  showTunnelInfoModal.value = false
   showDownloadModal.value = false
   showCreateEditDrawer.value = false
   showImportConfigurationDrawer.value = false
@@ -181,7 +205,7 @@ onUnmounted(() => {
       </p>
       <template v-if="tunnels.length > 0">
         <div v-if="!manageClientTunnels" class="shrink-0">
-          <NeButton kind="secondary" @click="openCreateEditDrawer(null)">
+          <NeButton kind="primary" @click="openCreateEditDrawer(null)">
             <template #prefix>
               <font-awesome-icon
                 :icon="['fas', 'circle-plus']"
@@ -206,7 +230,7 @@ onUnmounted(() => {
             </template>
             {{ t('standalone.openvpn_tunnel.add_client_tunnel') }}
           </NeButton>
-          <NeButton kind="secondary" @click="openImportConfigurationDrawer">
+          <NeButton kind="primary" @click="openImportConfigurationDrawer">
             <template #prefix>
               <font-awesome-icon
                 :icon="['fas', 'circle-arrow-up']"
@@ -280,6 +304,8 @@ onUnmounted(() => {
         @tunnel-download="openDownloadModal"
         @tunnel-edit="openCreateEditDrawer"
         @tunnel-toggle-enable="toggleTunnelEnable"
+        @tunnel-regenerate-certs="openRegenerateCertsModal"
+        @tunnel-show-info="openTunnelInfoModal"
       />
     </template>
   </div>
@@ -296,6 +322,17 @@ onUnmounted(() => {
     @close="closeModalsAndDrawers"
     @tunnel-deleted="reloadTunnels"
   />
+  <RegenerateCertsModal
+    :visible="showRegenerateCertsModal"
+    :item-to-regenerate="selectedTunnel"
+    @close="closeModalsAndDrawers"
+    @certs-regenerated="reloadTunnels"
+  />
+  <TunnelInfoModal
+    :visible="showTunnelInfoModal"
+    :item-to-show="selectedTunnel"
+    @close="closeModalsAndDrawers"
+  />
   <DownloadTunnelModal
     :visible="showDownloadModal"
     :item-to-download="selectedTunnel"
diff --git a/src/components/standalone/openvpn_tunnel/TunnelTable.vue b/src/components/standalone/openvpn_tunnel/TunnelTable.vue
index 9a5dc6801..d90d4e948 100644
--- a/src/components/standalone/openvpn_tunnel/TunnelTable.vue
+++ b/src/components/standalone/openvpn_tunnel/TunnelTable.vue
@@ -1,19 +1,87 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
+<script lang="ts">
+
+// certificate expiry warning threshold in days
+export const CERT_EXPIRY_WARNING_DAYS = 30
+
+export interface CertificateStatusResult {
+  show: boolean
+  icon?: any
+  colorClass?: string
+  messageKey?: string
+  messageParams?: Record<string, any>
+}
+
+export function getDaysUntilExpiry(expiryTimestamp: number): number {
+  const secondsUntilExpiry = expiryTimestamp - (Date.now() / 1000)
+  return Math.floor(secondsUntilExpiry / 86400)
+}
+
+export function shouldShowCertExpiryBadge(expiryTimestamp: number): boolean {
+  const daysUntilExpiry = getDaysUntilExpiry(expiryTimestamp)
+  return daysUntilExpiry < CERT_EXPIRY_WARNING_DAYS && daysUntilExpiry >= 0
+}
+
+export function isCertificatesExpired(expiryTimestamp: number): boolean {
+  return expiryTimestamp <= (Date.now() / 1000)
+}
+
+export function getCertificateStatus(expiryTimestamp: number, isClientTunnel: boolean = false, tunnelDetailModal: boolean = false): CertificateStatusResult {
+  if (isCertificatesExpired(expiryTimestamp)) {
+    return {
+      show: true,
+      icon: faCircleExclamation,
+      colorClass: 'text-red-700 dark:text-red-500',
+      messageKey: tunnelDetailModal 
+      ? (isClientTunnel ? 'standalone.openvpn_tunnel.client_cert_expired_complete_message' : 'standalone.openvpn_tunnel.cert_expired_complete_message')
+      : (isClientTunnel ? 'standalone.openvpn_tunnel.client_cert_expired_message' : 'standalone.openvpn_tunnel.cert_expired_message')
+    }
+  }
+  
+  if (shouldShowCertExpiryBadge(expiryTimestamp)) {
+    return {
+      show: true,
+      icon: faTriangleExclamation,
+      colorClass: 'text-amber-700 dark:text-amber-500',
+      messageKey: tunnelDetailModal 
+      ? (isClientTunnel ? 'standalone.openvpn_tunnel.client_cert_expiring_complete_message' : 'standalone.openvpn_tunnel.cert_expiring_complete_message')
+      : (isClientTunnel ? 'standalone.openvpn_tunnel.client_cert_expiring_message' : 'standalone.openvpn_tunnel.cert_expiring_message'),
+      messageParams: {
+        days: getDaysUntilExpiry(expiryTimestamp)
+      }
+    }
+  }
+  return { show: false }
+}
+</script>
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import NeTable from '../NeTable.vue'
-import { NeDropdown } from '@nethesis/vue-components'
-import { NeButton } from '@nethesis/vue-components'
+import { 
+  NeDropdown, 
+  NeButton, 
+  NeTooltip, 
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell
+} from '@nethesis/vue-components'
 import type { ServerTunnel, ClientTunnel } from './TunnelManager.vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
   faCircleArrowDown,
   faCircleCheck,
   faCircleXmark,
-  faTrash
+  faTrash,
+  faMagnifyingGlassPlus,
+  faRefresh,
+  faCircleExclamation,
+  faTriangleExclamation
 } from '@fortawesome/free-solid-svg-icons'
 
 const { t } = useI18n()
@@ -27,72 +95,13 @@ const emit = defineEmits([
   'tunnel-delete',
   'tunnel-edit',
   'tunnel-toggle-enable',
-  'tunnel-download'
+  'tunnel-download',
+  'tunnel-regenerate-certs',
+  'tunnel-show-info'
 ])
 
-// Lists the table headers for the tunnels.
-// The headers vary based on the tunnel type: in the case of a client tunnel, the Remote Hosts header will be included.
-// In the case of a server tunnel, the Local Networks and VPN Network headers will be shown instead.
-const tableHeaders = [
-  {
-    label: t('standalone.openvpn_tunnel.name'),
-    key: 'name'
-  },
-  {
-    label: t('standalone.openvpn_tunnel.port'),
-    key: 'port'
-  },
-  // Include Local Networks header if the tunnel is a server one
-  ...(!props.isClientTunnel
-    ? [
-        {
-          label: t('standalone.openvpn_tunnel.local_networks'),
-          key: 'local_networks'
-        }
-      ]
-    : []),
-  {
-    label: t('standalone.openvpn_tunnel.remote_networks'),
-    key: 'remote_networks'
-  },
-  // Include Remote Hosts header if the tunnel is a client one
-  ...(props.isClientTunnel
-    ? [
-        {
-          label: t('standalone.openvpn_tunnel.remote_hosts'),
-          key: 'remote_hosts'
-        }
-      ]
-    : []),
-  {
-    label: t('standalone.openvpn_tunnel.topology'),
-    key: 'topology'
-  },
-  // Include VPN Network header if the tunnel is a server one
-  ...(!props.isClientTunnel
-    ? [
-        {
-          label: t('standalone.openvpn_tunnel.vpn_network'),
-          key: 'vpn_network'
-        }
-      ]
-    : []),
-  {
-    label: t('standalone.openvpn_tunnel.status'),
-    key: 'status'
-  },
-  {
-    label: t('standalone.openvpn_tunnel.connection'),
-    key: 'connected'
-  },
-  {
-    label: '',
-    key: 'menu'
-  }
-]
-
-function getDropdownItems(item: ServerTunnel) {
-  return [
+function getDropdownItems(item: ServerTunnel | ClientTunnel) {
+  const items = [
     {
       id: 'download',
       label: t('standalone.openvpn_tunnel.download'),
@@ -111,6 +120,16 @@ function getDropdownItems(item: ServerTunnel) {
         emit('tunnel-toggle-enable', item)
       }
     },
+    ...(props.isClientTunnel ? [] : [
+      {
+        id: 'regenerate_certs',
+        label: t('standalone.openvpn_tunnel.regenerate_cert'),
+        icon: faRefresh,
+        action: () => {
+          emit('tunnel-regenerate-certs', item)
+        }
+      }
+    ]),
     {
       id: 'delete',
       label: t('common.delete'),
@@ -121,123 +140,201 @@ function getDropdownItems(item: ServerTunnel) {
       }
     }
   ]
+  return items
 }
 
 function getCellClasses(item: ServerTunnel | ClientTunnel) {
   return !item.enabled ? ['text-gray-400', 'dark:text-gray-700'] : []
 }
+
+function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientTunnel {
+  return 'remote_host' in item
+}
 </script>
 
 <template>
-  <NeTable :data="tunnels" :headers="tableHeaders">
-    <template #name="{ item }: { item: ServerTunnel | ClientTunnel }">
-      <p :class="[...getCellClasses(item)]">{{ item.ns_name }}</p>
-    </template>
-    <template #port="{ item }: { item: ServerTunnel | ClientTunnel }">
-      <p :class="[...getCellClasses(item)]">{{ item.port }}</p>
-    </template>
-    <template v-if="!props.isClientTunnel" #local_networks="{ item }: { item: ServerTunnel }">
-      <template v-if="item.local_network.length > 0">
-        <p
-          v-for="(local, idx) in item.local_network.slice(0, 2)"
-          :key="local"
-          :class="[...getCellClasses(item)]"
-        >
-          {{ local }}{{ item.local_network.length > 2 && idx == 1 ? '...' : '' }}
-        </p>
-      </template>
-      <p v-else :class="[...getCellClasses(item)]">-</p>
-    </template>
-    <template #remote_networks="{ item }: { item: ServerTunnel | ClientTunnel }">
-      <template v-if="item.remote_network.length > 0">
-        <p
-          v-for="(remote, idx) in item.remote_network.slice(0, 2)"
-          :key="remote"
-          :class="[...getCellClasses(item)]"
-        >
-          {{ remote }}{{ item.remote_network.length > 2 && idx == 1 ? '...' : '' }}
-        </p>
-      </template>
-      <p v-else :class="[...getCellClasses(item)]">-</p>
-    </template>
-    <template v-if="props.isClientTunnel" #remote_hosts="{ item }: { item: ClientTunnel }">
-      <template v-if="item.remote_host.length > 0">
-        <p
-          v-for="(remoteHost, idx) in item.remote_host.slice(0, 2)"
-          :key="remoteHost"
-          :class="[...getCellClasses(item)]"
-        >
-          {{ remoteHost }}{{ item.remote_host.length > 2 && idx == 1 ? '...' : '' }}
-        </p>
-      </template>
-    </template>
-    <template #topology="{ item }: { item: ServerTunnel | ClientTunnel }">
-      <p :class="[...getCellClasses(item)]">
-        {{
-          item.topology === 'subnet'
-            ? t('standalone.openvpn_tunnel.subnet')
-            : t('standalone.openvpn_tunnel.p2p')
-        }}
-      </p>
-    </template>
-    <template v-if="!props.isClientTunnel" #vpn_network="{ item }: { item: ServerTunnel }">
-      <p :class="[...getCellClasses(item)]">{{ item.vpn_network }}</p>
-    </template>
-    <template #status="{ item }: { item: ServerTunnel | ClientTunnel }">
-      <div :class="['flex', 'flex-row', 'items-center', ...getCellClasses(item)]">
-        <font-awesome-icon
-          :icon="['fas', item.enabled ? 'circle-check' : 'circle-xmark']"
-          class="mr-2 h-5 w-5"
-          aria-hidden="true"
-        />
-        <p>
-          {{
-            item.enabled
-              ? t('standalone.openvpn_tunnel.enabled')
-              : t('standalone.openvpn_tunnel.disabled')
-          }}
-        </p>
-      </div>
-    </template>
-    <template #connected="{ item }: { item: ServerTunnel | ClientTunnel }">
-      <div :class="['flex', 'flex-row', 'items-center', ...getCellClasses(item)]">
-        <font-awesome-icon
-          :icon="['fas', item.connected ? 'circle-check' : 'circle-xmark']"
-          :class="[
-            'mr-2',
-            'h-5',
-            'w-5',
-            item.connected && item.enabled
-              ? 'text-green-600 dark:text-green-400'
-              : item.enabled
-                ? 'text-red-600 dark:text-red-400'
-                : ''
-          ]"
-          aria-hidden="true"
-        />
-        <p>
-          {{
-            item.connected
-              ? t('standalone.openvpn_tunnel.connected')
-              : t('standalone.openvpn_tunnel.not_connected')
-          }}
-        </p>
-      </div>
-    </template>
-    <template #menu="{ item }: { item: ServerTunnel }">
-      <div class="align-center flex justify-end">
-        <NeButton kind="tertiary" @click="emit('tunnel-edit', item)">
-          <template #prefix>
+  <NeTable v-if="tunnels"
+    card-breakpoint="xl"
+    :skeleton-columns="6"
+    :skeleton-rows="5"
+  >
+    <NeTableHead>
+      <NeTableHeadCell column-key="name">
+        {{ t('standalone.openvpn_tunnel.name') }}
+      </NeTableHeadCell>
+      <NeTableHeadCell column-key="port">
+        {{ t('standalone.openvpn_tunnel.port') }}
+      </NeTableHeadCell>
+      <NeTableHeadCell v-if="!props.isClientTunnel" column-key="local_networks">
+        {{ t('standalone.openvpn_tunnel.local_networks') }}
+      </NeTableHeadCell>
+      <NeTableHeadCell column-key="remote_networks">
+        {{ t('standalone.openvpn_tunnel.remote_networks') }}
+      </NeTableHeadCell>
+      <NeTableHeadCell v-if="props.isClientTunnel" column-key="remote_hosts">
+        {{ t('standalone.openvpn_tunnel.remote_hosts') }}
+      </NeTableHeadCell>
+      <NeTableHeadCell column-key="topology">
+        {{ t('standalone.openvpn_tunnel.topology') }}
+      </NeTableHeadCell>
+      <NeTableHeadCell v-if="!props.isClientTunnel" column-key="vpn_network">
+        {{ t('standalone.openvpn_tunnel.vpn_network') }}
+      </NeTableHeadCell>
+      <NeTableHeadCell column-key="status">
+        {{ t('standalone.openvpn_tunnel.status') }}
+      </NeTableHeadCell>
+      <NeTableHeadCell column-key="connection">
+        {{ t('standalone.openvpn_tunnel.connection') }}
+      </NeTableHeadCell>
+      <NeTableHeadCell column-key="menu">
+        <!-- no header for actions -->
+      </NeTableHeadCell>
+    </NeTableHead>
+    <NeTableBody>
+      <NeTableRow v-for="item in tunnels" :key="item.ns_name">
+        <NeTableCell :data-label="t('standalone.openvpn_tunnel.name')">
+          <span class="flex items-center gap-3">
+            <NeButton
+              size="sm"
+              kind="tertiary"
+              class="w-8 h-8 p-0 shrink-0"
+              :disabled="!item.enabled"
+              @click="emit('tunnel-show-info', item)">
+              <FontAwesomeIcon
+                :icon="faMagnifyingGlassPlus"
+                class="h-4 w-4 shrink-0"
+                aria-hidden="true"
+              />
+            </NeButton>
+            <p :class="[...getCellClasses(item)]">{{ item.ns_name }}</p>
+            <NeTooltip v-if="item.cert_expiry_ts && getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).show" interactive>
+              <template #trigger>
+                <FontAwesomeIcon
+                  :icon="getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).icon"
+                  :class="['h-4 w-4', getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).colorClass]"
+                  aria-hidden="true"
+                />
+              </template>
+              <template #content>
+                <p class="text-center">{{ t(getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).messageKey!) }}</p>
+              </template>
+            </NeTooltip>
+          </span>
+        </NeTableCell>
+        <NeTableCell :data-label="t('standalone.openvpn_tunnel.port')">
+          <p :class="[...getCellClasses(item)]">{{ item.port }}</p>
+        </NeTableCell>
+        <NeTableCell v-if="!checkIsClientTunnel(item)" :data-label="t('standalone.openvpn_tunnel.local_networks')">
+          <template v-if="item.local_network.length > 0">
+            <p
+              v-for="(local, idx) in item.local_network.slice(0, 2)"
+              :key="local"
+              :class="[...getCellClasses(item)]"
+            >
+              {{ local }}{{ item.local_network.length > 2 && idx == 1 ? '...' : '' }}
+            </p>
+          </template>
+          <p v-else :class="[...getCellClasses(item)]">-</p>
+        </NeTableCell >
+        <NeTableCell :data-label="t('standalone.openvpn_tunnel.remote_networks')">
+          <template v-if="item.remote_network.length > 0">
+            <p
+              v-for="(remote, idx) in item.remote_network.slice(0, 2)"
+              :key="remote"
+              :class="[...getCellClasses(item)]"
+            >
+              {{ remote }}{{ item.remote_network.length > 2 && idx == 1 ? '...' : '' }}
+            </p>
+          </template>
+          <p v-else :class="[...getCellClasses(item)]">-</p>          
+        </NeTableCell>
+        <NeTableCell v-if="checkIsClientTunnel(item)" :data-label="t('standalone.openvpn_tunnel.remote_hosts')">
+          <template v-if="item.remote_host.length > 0">
+            <p
+              v-for="(remoteHost, idx) in item.remote_host.slice(0, 2)"
+              :key="remoteHost"
+              :class="[...getCellClasses(item)]"
+            >
+              {{ remoteHost }}{{ item.remote_host.length > 2 && idx == 1 ? '...' : '' }}
+            </p>
+          </template>
+        </NeTableCell>
+        <NeTableCell :data-label="t('standalone.openvpn_tunnel.topology')">
+          <p :class="[...getCellClasses(item)]">
+            {{
+              item.topology === 'subnet'
+                ? t('standalone.openvpn_tunnel.subnet')
+                : t('standalone.openvpn_tunnel.p2p')
+            }}
+          </p>
+        </NeTableCell>
+        <NeTableCell v-if="!checkIsClientTunnel(item)" :data-label="t('standalone.openvpn_tunnel.vpn_network')">
+          <p :class="[...getCellClasses(item)]">{{ item.vpn_network }}</p>
+        </NeTableCell>
+        <NeTableCell :data-label="t('standalone.openvpn_tunnel.status')">
+          <div :class="['flex', 'flex-row', 'items-center', ...getCellClasses(item)]">
             <font-awesome-icon
-              :icon="['fas', 'pen-to-square']"
-              class="h-4 w-4"
+              :icon="['fas', item.enabled ? 'circle-check' : 'circle-xmark']"
+              :class="[
+                'mr-2',
+                'h-5',
+                'w-5',
+                item.enabled 
+                  ? 'text-green-700 dark:text-green-500' 
+                  : ''
+                ]"
               aria-hidden="true"
             />
-          </template>
-          {{ t('common.edit') }}
-        </NeButton>
-        <NeDropdown :items="getDropdownItems(item)" :align-to-right="true" />
-      </div>
-    </template>
+            <p>
+              {{
+                item.enabled
+                  ? t('standalone.openvpn_tunnel.enabled')
+                  : t('standalone.openvpn_tunnel.disabled')
+              }}
+            </p>
+          </div>
+        </NeTableCell>
+        <NeTableCell :data-label="t('standalone.openvpn_tunnel.connection')">
+          <div :class="['flex', 'flex-row', 'items-center', ...getCellClasses(item)]">
+            <font-awesome-icon
+              :icon="['fas', item.connected ? 'circle-check' : 'circle-xmark']"
+              :class="[
+                'mr-2',
+                'h-5',
+                'w-5',
+                item.connected && item.enabled
+                  ? 'text-green-700 dark:text-green-500'
+                  : item.enabled
+                  ? 'text-red-700 dark:text-red-500'
+                  : ''
+              ]"
+              aria-hidden="true"
+            />
+            <p>
+              {{
+                item.connected
+                  ? t('standalone.openvpn_tunnel.connected')
+                  : t('standalone.openvpn_tunnel.not_connected')
+              }}
+            </p>
+          </div>
+        </NeTableCell>
+        <NeTableCell>
+          <div class="align-center flex justify-end">
+            <NeButton kind="tertiary" @click="emit('tunnel-edit', item)">
+              <template #prefix>
+                <font-awesome-icon
+                  :icon="['fas', 'pen-to-square']"
+                  class="h-4 w-4"
+                  aria-hidden="true"
+                />
+              </template>
+              {{ t('common.edit') }}
+            </NeButton>
+            <NeDropdown :items="getDropdownItems(item)" :align-to-right="true" />
+          </div>
+        </NeTableCell>
+      </NeTableRow>
+    </NeTableBody>
   </NeTable>
 </template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6eca090ef..5dd3aacf3 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -425,7 +425,8 @@
     "cannot_set_uci_configuration": "Cannot set UCI configuration",
     "cannot_reuse_old_password": "New password must be different from the old one",
     "duplicate_ip": "IP has already been used",
-    "duplicate_port": "Port has already been used"
+    "duplicate_port": "Port has already been used",
+    "cannot_regenerate_cert": "Cannot regenerate certificates"
   },
   "ne_text_input": {
     "show_password": "Show password",
@@ -2072,7 +2073,28 @@
       "topology_tooltip_subnet_description": "This method offers a straightforward configuration approach. Instead of using a point-to-point setup, utilize a subnet configuration by specifying a local IP address and subnet mask for the tun interface. In this mode, each connected client is assigned a unique IP address, and it is compatible with Windows systems as well.",
       "topology_tooltip_p2p_description": "Implement a point-to-point topology where the client's tun interface remote endpoint consistently points to the server's tun interface local endpoint. This configuration assigns a single IP address to each connected client. Utilize this mode exclusively when none of the connected clients operate on Windows systems.",
       "strong": "Strong",
-      "weak": "Weak"
+      "weak": "Weak",
+      "regenerate_cert": "Regenerate certificates",
+      "regenerate_cert_message": "Certificate regeneration (client and server) requires an OpenVPN tunnel restart, with possible VPN traffic interruption for a brief period. The client certificate used on the other machine will remain functional (provided it is valid and not expired), and can be replaced with the newly generated certificate at any time later.",
+      "regenerate_cert_button": "Regenerate",
+      "tunnel_name_max_length": "Maximum 10 characters allowed",
+      "bytes_received": "Bytes received",
+      "bytes_sent": "Bytes sent",
+      "cert_expiry": "Certificates expire",
+      "client_cert_expiry": "Client certificate expire",
+      "real_address": "Real address",
+      "since": "Connection start",
+      "virtual_address": "Virtual address",
+      "remote_host": "Remote host",
+      "tunnel_details": "Tunnel details",
+      "cert_expiring_message": "Certificates expiring soon",
+      "client_cert_expiring_message": "Certificate expiring soon",
+      "cert_expiring_complete_message": "The certificates will expire in {days} days",
+      "client_cert_expiring_complete_message": "The client certificate will expire in {days} days",
+      "cert_expired_message": "Certificates are expired",
+      "client_cert_expired_message": "Certificate is expired",
+      "cert_expired_complete_message": "The certificates are expired",
+      "client_cert_expired_complete_message": "The client certificate is expired"
     },
     "ipsec_tunnel": {
       "title": "IPsec tunnel",
diff --git a/src/i18n/it.json b/src/i18n/it.json
index 15513d13e..72f1ccc88 100644
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@@ -425,7 +425,8 @@
     "unauthorized_action": "Azione non autorizzata",
     "duplicate_ip": "L'IP è già stato utilizzato",
     "duplicate_port": "La porta è già stata utilizzata",
-    "cannot_restart_ipsec": "Impossibile riavviare il servizio IPsec"
+    "cannot_restart_ipsec": "Impossibile riavviare il servizio IPsec",
+    "cannot_regenerate_cert": "Impossibile rigenerare i certificati"
   },
   "login": {
     "sign_in": "Accedi",
@@ -1466,7 +1467,28 @@
       "disabled": "Disabilitato",
       "weak": "Debole",
       "strong": "Forte",
-      "short_name": "OVPN TUN"
+      "short_name": "OVPN TUN",
+      "regenerate_cert": "Rigenera certificati",
+      "regenerate_cert_message": "La rigenerazione dei certificati (client e server) richiede il riavvio del tunnel OpenVPN, con la possibile interruzione del traffico VPN per un breve periodo. Il certificato client utilizzato sull'altra macchina continuerà ad essere funzionante (purchè valido e non scaduto), e sarà possibile sostituirlo con il nuovo appena generato in un secondo momento.",
+      "regenerate_cert_button": "Rigenera",
+      "tunnel_name_max_length": "Massimo 10 caratteri",
+      "bytes_received": "Bytes ricevuti",
+      "bytes_sent": "Bytes inviati",
+      "cert_expiry": "Scadenza certificati",
+      "client_cert_expiry": "Scadenza certificato client",
+      "real_address": "Indirizzo reale",
+      "since": "Inizio connessione",
+      "virtual_address": "Indirizzo virtuale",
+      "remote_host": "Host remoto",
+      "tunnel_details": "Dettagli tunnel",
+      "cert_expiring_message": "Certificati in scadenza",
+      "client_cert_expiring_message": "Certificato in scadenza",
+      "cert_expiring_complete_message": "I certificati scadranno tra {days} giorni",
+      "client_cert_expiring_complete_message": "Il certificato del client scadrà tra {days} giorni",
+      "cert_expired_message": "Certificati scaduti",
+      "client_cert_expired_message": "Certificato scaduto",
+      "cert_expired_complete_message": "I certificati sono scaduti",
+      "client_cert_expired_complete_message": "Il certificato del client è scaduto"
     },
     "ipsec_tunnel": {
       "local_identifier_tooltip": "Inserire una stringa che identifica la macchina corrente; questa stringa dovrebbe iniziare con il carattere '{'@'}. Sull'altra estremità del tunnel, gli identificatori dovrebbero essere invertiti",

From 104f8f01a2ed58af0230e632923d3c73dc3141b0 Mon Sep 17 00:00:00 2001
From: Matteo Di Lorenzi <matteo.dilorenzi@nethesis.it>
Date: Mon, 26 Jan 2026 17:14:32 +0100
Subject: [PATCH 2/5] fix(openvpn-tunnel): clean up code formatting for
 prettier analysis

---
 .../openvpn_tunnel/TunnelInfoModal.vue        | 111 +++++++++-------
 .../standalone/openvpn_tunnel/TunnelTable.vue | 125 +++++++++++-------
 2 files changed, 139 insertions(+), 97 deletions(-)

diff --git a/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue b/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
index f746bd198..45e84d2ea 100644
--- a/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
+++ b/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
@@ -6,22 +6,26 @@
 import { NeModal } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
 import type { ServerTunnel, ClientTunnel } from './TunnelManager.vue'
-import { watch, ref, computed } from 'vue';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { getCertificateStatus } from './TunnelTable.vue';
+import { watch, ref, computed } from 'vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { getCertificateStatus } from './TunnelTable.vue'
 
 const { t, locale } = useI18n()
 
-const{ itemToShow = null } = defineProps<{
+const { itemToShow = null } = defineProps<{
   itemToShow?: ServerTunnel | ClientTunnel | null
 }>()
 
-const _itemToShow = ref<ServerTunnel | ClientTunnel>();
-watch(() => itemToShow, (newVal) => {
+const _itemToShow = ref<ServerTunnel | ClientTunnel>()
+watch(
+  () => itemToShow,
+  (newVal) => {
     if (newVal !== null) {
-        _itemToShow.value = newVal;
+      _itemToShow.value = newVal
     }
-}, { immediate: true });
+  },
+  { immediate: true }
+)
 
 const emit = defineEmits(['close'])
 
@@ -31,16 +35,20 @@ function isClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientTunnel
 
 const certificateStatus = computed(() => {
   if (!_itemToShow.value?.cert_expiry_ts) return { show: false }
-  return getCertificateStatus(_itemToShow.value.cert_expiry_ts, isClientTunnel(_itemToShow.value), true)
+  return getCertificateStatus(
+    _itemToShow.value.cert_expiry_ts,
+    isClientTunnel(_itemToShow.value),
+    true
+  )
 })
 
 const fieldLabels = computed(() => {
   const isTunnelClient = _itemToShow.value ? isClientTunnel(_itemToShow.value) : false
-  
+
   return {
     bytes_received: t('standalone.openvpn_tunnel.bytes_received'),
     bytes_sent: t('standalone.openvpn_tunnel.bytes_sent'),
-    cert_expiry_ts: isTunnelClient 
+    cert_expiry_ts: isTunnelClient
       ? t('standalone.openvpn_tunnel.client_cert_expiry')
       : t('standalone.openvpn_tunnel.cert_expiry'),
     connected: t('standalone.openvpn_tunnel.connection'),
@@ -55,7 +63,7 @@ const fieldLabels = computed(() => {
     topology: t('standalone.openvpn_tunnel.topology'),
     virtual_address: t('standalone.openvpn_tunnel.virtual_address'),
     vpn_network: t('standalone.openvpn_tunnel.vpn_network'),
-    remote_host: t('standalone.openvpn_tunnel.remote_host'),
+    remote_host: t('standalone.openvpn_tunnel.remote_host')
   }
 })
 
@@ -70,7 +78,9 @@ function formatFieldValue(key: string, value: any): string {
 
   // Handle boolean-like fields
   if (key === 'connected') {
-    return value ? t('standalone.openvpn_tunnel.connected') : t('standalone.openvpn_tunnel.not_connected')
+    return value
+      ? t('standalone.openvpn_tunnel.connected')
+      : t('standalone.openvpn_tunnel.not_connected')
   }
 
   if (key === 'enabled') {
@@ -104,165 +114,165 @@ function isFieldVisible(key: string, value: any): boolean {
     @close="emit('close')"
     @primary-click="emit('close')"
   >
-    <div class="grid grid-cols-1 md:grid-cols-[auto_1fr] gap-4">
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-[auto_1fr]">
       <!-- ns_name -->
       <template v-if="isFieldVisible('ns_name', _itemToShow?.ns_name)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['ns_name'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('ns_name', _itemToShow?.ns_name) }}
         </p>
       </template>
 
       <!-- id -->
       <template v-if="isFieldVisible('id', _itemToShow?.id)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['id'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('id', _itemToShow?.id) }}
         </p>
       </template>
 
       <!-- port -->
       <template v-if="isFieldVisible('port', _itemToShow?.port)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['port'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('port', _itemToShow?.port) }}
         </p>
       </template>
 
       <!-- enabled -->
       <template v-if="isFieldVisible('enabled', _itemToShow?.enabled)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['enabled'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('enabled', _itemToShow?.enabled) }}
         </p>
       </template>
 
       <!-- topology -->
       <template v-if="isFieldVisible('topology', _itemToShow?.topology)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['topology'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('topology', _itemToShow?.topology) }}
         </p>
       </template>
 
       <!-- local_network -->
       <template v-if="isFieldVisible('local_network', (_itemToShow as any)?.local_network)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['local_network'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('local_network', (_itemToShow as any)?.local_network) }}
         </p>
       </template>
 
       <!-- remote_network -->
       <template v-if="isFieldVisible('remote_network', _itemToShow?.remote_network)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['remote_network'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('remote_network', _itemToShow?.remote_network) }}
         </p>
       </template>
 
       <!-- remote_host -->
       <template v-if="isFieldVisible('remote_host', (_itemToShow as any)?.remote_host)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['remote_host'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('remote_host', (_itemToShow as any)?.remote_host) }}
         </p>
       </template>
 
       <!-- vpn_network -->
       <template v-if="isFieldVisible('vpn_network', (_itemToShow as any)?.vpn_network)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['vpn_network'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('vpn_network', (_itemToShow as any)?.vpn_network) }}
         </p>
       </template>
 
       <!-- real_address -->
       <template v-if="isFieldVisible('real_address', (_itemToShow as any)?.real_address)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['real_address'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('real_address', (_itemToShow as any)?.real_address) }}
         </p>
       </template>
 
       <!-- virtual_address -->
       <template v-if="isFieldVisible('virtual_address', (_itemToShow as any)?.virtual_address)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['virtual_address'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('virtual_address', (_itemToShow as any)?.virtual_address) }}
         </p>
       </template>
 
       <!-- connected -->
       <template v-if="isFieldVisible('connected', _itemToShow?.connected)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['connected'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('connected', _itemToShow?.connected) }}
         </p>
       </template>
 
       <!-- since -->
       <template v-if="isFieldVisible('since', _itemToShow?.since)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['since'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('since', _itemToShow?.since) }}
         </p>
       </template>
 
       <!-- bytes_received -->
       <template v-if="isFieldVisible('bytes_received', _itemToShow?.bytes_received)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['bytes_received'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('bytes_received', _itemToShow?.bytes_received) }}
         </p>
       </template>
 
       <!-- bytes_sent -->
       <template v-if="isFieldVisible('bytes_sent', _itemToShow?.bytes_sent)">
-        <p class="font-semibold text-sm">
+        <p class="text-sm font-semibold">
           {{ fieldLabels['bytes_sent'] }}
         </p>
-        <p class="text-gray-600 dark:text-gray-400 text-sm">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{ formatFieldValue('bytes_sent', _itemToShow?.bytes_sent) }}
         </p>
       </template>
 
       <!-- cert_expiry_ts -->
       <template v-if="isFieldVisible('cert_expiry_ts', _itemToShow?.cert_expiry_ts)">
-        <p class="font-semibold text-sm">
-            {{ fieldLabels['cert_expiry_ts'] }}
-        </p>        
+        <p class="text-sm font-semibold">
+          {{ fieldLabels['cert_expiry_ts'] }}
+        </p>
         <div class="flex flex-col gap-2">
-          <p class="text-gray-600 dark:text-gray-400 text-sm">
-              {{ formatFieldValue('cert_expiry_ts', _itemToShow?.cert_expiry_ts) }}
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            {{ formatFieldValue('cert_expiry_ts', _itemToShow?.cert_expiry_ts) }}
           </p>
           <span v-if="certificateStatus.show" class="flex items-center gap-2">
             <FontAwesomeIcon
@@ -270,7 +280,7 @@ function isFieldVisible(key: string, value: any): boolean {
               :class="['h-4 w-4', certificateStatus.colorClass]"
               aria-hidden="true"
             />
-            <p class="text-gray-600 dark:text-gray-400 text-sm">
+            <p class="text-sm text-gray-600 dark:text-gray-400">
               {{ t(certificateStatus.messageKey!, certificateStatus.messageParams!) }}
             </p>
           </span>
@@ -279,4 +289,3 @@ function isFieldVisible(key: string, value: any): boolean {
     </div>
   </NeModal>
 </template>
-
diff --git a/src/components/standalone/openvpn_tunnel/TunnelTable.vue b/src/components/standalone/openvpn_tunnel/TunnelTable.vue
index d90d4e948..91c52964e 100644
--- a/src/components/standalone/openvpn_tunnel/TunnelTable.vue
+++ b/src/components/standalone/openvpn_tunnel/TunnelTable.vue
@@ -3,7 +3,6 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 <script lang="ts">
-
 // certificate expiry warning threshold in days
 export const CERT_EXPIRY_WARNING_DAYS = 30
 
@@ -16,7 +15,7 @@ export interface CertificateStatusResult {
 }
 
 export function getDaysUntilExpiry(expiryTimestamp: number): number {
-  const secondsUntilExpiry = expiryTimestamp - (Date.now() / 1000)
+  const secondsUntilExpiry = expiryTimestamp - Date.now() / 1000
   return Math.floor(secondsUntilExpiry / 86400)
 }
 
@@ -26,29 +25,41 @@ export function shouldShowCertExpiryBadge(expiryTimestamp: number): boolean {
 }
 
 export function isCertificatesExpired(expiryTimestamp: number): boolean {
-  return expiryTimestamp <= (Date.now() / 1000)
+  return expiryTimestamp <= Date.now() / 1000
 }
 
-export function getCertificateStatus(expiryTimestamp: number, isClientTunnel: boolean = false, tunnelDetailModal: boolean = false): CertificateStatusResult {
+export function getCertificateStatus(
+  expiryTimestamp: number,
+  isClientTunnel: boolean = false,
+  tunnelDetailModal: boolean = false
+): CertificateStatusResult {
   if (isCertificatesExpired(expiryTimestamp)) {
     return {
       show: true,
       icon: faCircleExclamation,
       colorClass: 'text-red-700 dark:text-red-500',
-      messageKey: tunnelDetailModal 
-      ? (isClientTunnel ? 'standalone.openvpn_tunnel.client_cert_expired_complete_message' : 'standalone.openvpn_tunnel.cert_expired_complete_message')
-      : (isClientTunnel ? 'standalone.openvpn_tunnel.client_cert_expired_message' : 'standalone.openvpn_tunnel.cert_expired_message')
+      messageKey: tunnelDetailModal
+        ? isClientTunnel
+          ? 'standalone.openvpn_tunnel.client_cert_expired_complete_message'
+          : 'standalone.openvpn_tunnel.cert_expired_complete_message'
+        : isClientTunnel
+          ? 'standalone.openvpn_tunnel.client_cert_expired_message'
+          : 'standalone.openvpn_tunnel.cert_expired_message'
     }
   }
-  
+
   if (shouldShowCertExpiryBadge(expiryTimestamp)) {
     return {
       show: true,
       icon: faTriangleExclamation,
       colorClass: 'text-amber-700 dark:text-amber-500',
-      messageKey: tunnelDetailModal 
-      ? (isClientTunnel ? 'standalone.openvpn_tunnel.client_cert_expiring_complete_message' : 'standalone.openvpn_tunnel.cert_expiring_complete_message')
-      : (isClientTunnel ? 'standalone.openvpn_tunnel.client_cert_expiring_message' : 'standalone.openvpn_tunnel.cert_expiring_message'),
+      messageKey: tunnelDetailModal
+        ? isClientTunnel
+          ? 'standalone.openvpn_tunnel.client_cert_expiring_complete_message'
+          : 'standalone.openvpn_tunnel.cert_expiring_complete_message'
+        : isClientTunnel
+          ? 'standalone.openvpn_tunnel.client_cert_expiring_message'
+          : 'standalone.openvpn_tunnel.cert_expiring_message',
       messageParams: {
         days: getDaysUntilExpiry(expiryTimestamp)
       }
@@ -60,10 +71,10 @@ export function getCertificateStatus(expiryTimestamp: number, isClientTunnel: bo
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { 
-  NeDropdown, 
-  NeButton, 
-  NeTooltip, 
+import {
+  NeDropdown,
+  NeButton,
+  NeTooltip,
   NeTable,
   NeTableHead,
   NeTableHeadCell,
@@ -120,16 +131,18 @@ function getDropdownItems(item: ServerTunnel | ClientTunnel) {
         emit('tunnel-toggle-enable', item)
       }
     },
-    ...(props.isClientTunnel ? [] : [
-      {
-        id: 'regenerate_certs',
-        label: t('standalone.openvpn_tunnel.regenerate_cert'),
-        icon: faRefresh,
-        action: () => {
-          emit('tunnel-regenerate-certs', item)
-        }
-      }
-    ]),
+    ...(props.isClientTunnel
+      ? []
+      : [
+          {
+            id: 'regenerate_certs',
+            label: t('standalone.openvpn_tunnel.regenerate_cert'),
+            icon: faRefresh,
+            action: () => {
+              emit('tunnel-regenerate-certs', item)
+            }
+          }
+        ]),
     {
       id: 'delete',
       label: t('common.delete'),
@@ -153,11 +166,7 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
 </script>
 
 <template>
-  <NeTable v-if="tunnels"
-    card-breakpoint="xl"
-    :skeleton-columns="6"
-    :skeleton-rows="5"
-  >
+  <NeTable v-if="tunnels" card-breakpoint="xl" :skeleton-columns="6" :skeleton-rows="5">
     <NeTableHead>
       <NeTableHeadCell column-key="name">
         {{ t('standalone.openvpn_tunnel.name') }}
@@ -197,9 +206,10 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
             <NeButton
               size="sm"
               kind="tertiary"
-              class="w-8 h-8 p-0 shrink-0"
+              class="h-8 w-8 shrink-0 p-0"
               :disabled="!item.enabled"
-              @click="emit('tunnel-show-info', item)">
+              @click="emit('tunnel-show-info', item)"
+            >
               <FontAwesomeIcon
                 :icon="faMagnifyingGlassPlus"
                 class="h-4 w-4 shrink-0"
@@ -207,16 +217,32 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
               />
             </NeButton>
             <p :class="[...getCellClasses(item)]">{{ item.ns_name }}</p>
-            <NeTooltip v-if="item.cert_expiry_ts && getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).show" interactive>
+            <NeTooltip
+              v-if="
+                item.cert_expiry_ts &&
+                getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).show
+              "
+              interactive
+            >
               <template #trigger>
                 <FontAwesomeIcon
                   :icon="getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).icon"
-                  :class="['h-4 w-4', getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).colorClass]"
+                  :class="[
+                    'h-4 w-4',
+                    getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).colorClass
+                  ]"
                   aria-hidden="true"
                 />
               </template>
               <template #content>
-                <p class="text-center">{{ t(getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).messageKey!) }}</p>
+                <p class="text-center">
+                  {{
+                    t(
+                      getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item))
+                        .messageKey!
+                    )
+                  }}
+                </p>
               </template>
             </NeTooltip>
           </span>
@@ -224,7 +250,10 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
         <NeTableCell :data-label="t('standalone.openvpn_tunnel.port')">
           <p :class="[...getCellClasses(item)]">{{ item.port }}</p>
         </NeTableCell>
-        <NeTableCell v-if="!checkIsClientTunnel(item)" :data-label="t('standalone.openvpn_tunnel.local_networks')">
+        <NeTableCell
+          v-if="!checkIsClientTunnel(item)"
+          :data-label="t('standalone.openvpn_tunnel.local_networks')"
+        >
           <template v-if="item.local_network.length > 0">
             <p
               v-for="(local, idx) in item.local_network.slice(0, 2)"
@@ -235,7 +264,7 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
             </p>
           </template>
           <p v-else :class="[...getCellClasses(item)]">-</p>
-        </NeTableCell >
+        </NeTableCell>
         <NeTableCell :data-label="t('standalone.openvpn_tunnel.remote_networks')">
           <template v-if="item.remote_network.length > 0">
             <p
@@ -246,9 +275,12 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
               {{ remote }}{{ item.remote_network.length > 2 && idx == 1 ? '...' : '' }}
             </p>
           </template>
-          <p v-else :class="[...getCellClasses(item)]">-</p>          
+          <p v-else :class="[...getCellClasses(item)]">-</p>
         </NeTableCell>
-        <NeTableCell v-if="checkIsClientTunnel(item)" :data-label="t('standalone.openvpn_tunnel.remote_hosts')">
+        <NeTableCell
+          v-if="checkIsClientTunnel(item)"
+          :data-label="t('standalone.openvpn_tunnel.remote_hosts')"
+        >
           <template v-if="item.remote_host.length > 0">
             <p
               v-for="(remoteHost, idx) in item.remote_host.slice(0, 2)"
@@ -268,7 +300,10 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
             }}
           </p>
         </NeTableCell>
-        <NeTableCell v-if="!checkIsClientTunnel(item)" :data-label="t('standalone.openvpn_tunnel.vpn_network')">
+        <NeTableCell
+          v-if="!checkIsClientTunnel(item)"
+          :data-label="t('standalone.openvpn_tunnel.vpn_network')"
+        >
           <p :class="[...getCellClasses(item)]">{{ item.vpn_network }}</p>
         </NeTableCell>
         <NeTableCell :data-label="t('standalone.openvpn_tunnel.status')">
@@ -279,10 +314,8 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
                 'mr-2',
                 'h-5',
                 'w-5',
-                item.enabled 
-                  ? 'text-green-700 dark:text-green-500' 
-                  : ''
-                ]"
+                item.enabled ? 'text-green-700 dark:text-green-500' : ''
+              ]"
               aria-hidden="true"
             />
             <p>
@@ -305,8 +338,8 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
                 item.connected && item.enabled
                   ? 'text-green-700 dark:text-green-500'
                   : item.enabled
-                  ? 'text-red-700 dark:text-red-500'
-                  : ''
+                    ? 'text-red-700 dark:text-red-500'
+                    : ''
               ]"
               aria-hidden="true"
             />

From 89a826f21aaf2b8febeccfbf323abff3ce0bc5ac Mon Sep 17 00:00:00 2001
From: Matteo Di Lorenzi <matteo.dilorenzi@nethesis.it>
Date: Wed, 28 Jan 2026 12:17:42 +0100
Subject: [PATCH 3/5] refactor(openvpn-tunnel): simplify field rendering and
 update translations

---
 .../openvpn_tunnel/TunnelInfoModal.vue        | 145 ++++++++----------
 .../standalone/openvpn_tunnel/TunnelTable.vue |  17 +-
 src/i18n/en.json                              |  19 +--
 src/i18n/it.json                              |  19 +--
 4 files changed, 87 insertions(+), 113 deletions(-)

diff --git a/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue b/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
index 45e84d2ea..b178818b5 100644
--- a/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
+++ b/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
@@ -42,59 +42,6 @@ const certificateStatus = computed(() => {
   )
 })
 
-const fieldLabels = computed(() => {
-  const isTunnelClient = _itemToShow.value ? isClientTunnel(_itemToShow.value) : false
-
-  return {
-    bytes_received: t('standalone.openvpn_tunnel.bytes_received'),
-    bytes_sent: t('standalone.openvpn_tunnel.bytes_sent'),
-    cert_expiry_ts: isTunnelClient
-      ? t('standalone.openvpn_tunnel.client_cert_expiry')
-      : t('standalone.openvpn_tunnel.cert_expiry'),
-    connected: t('standalone.openvpn_tunnel.connection'),
-    enabled: t('standalone.openvpn_tunnel.status'),
-    id: 'Tunnel ID',
-    local_network: t('standalone.openvpn_tunnel.local_networks'),
-    ns_name: t('standalone.openvpn_tunnel.name'),
-    port: t('standalone.openvpn_tunnel.port'),
-    real_address: t('standalone.openvpn_tunnel.real_address'),
-    remote_network: t('standalone.openvpn_tunnel.remote_networks'),
-    since: t('standalone.openvpn_tunnel.since'),
-    topology: t('standalone.openvpn_tunnel.topology'),
-    virtual_address: t('standalone.openvpn_tunnel.virtual_address'),
-    vpn_network: t('standalone.openvpn_tunnel.vpn_network'),
-    remote_host: t('standalone.openvpn_tunnel.remote_host')
-  }
-})
-
-function formatFieldValue(key: string, value: any): string {
-  if (value === null || value === undefined || value === '') return ''
-
-  // Handle timestamps
-  if ((key === 'cert_expiry_ts' || key === 'since') && typeof value === 'number') {
-    const date = new Date(value * 1000)
-    return date.toLocaleString(locale.value)
-  }
-
-  // Handle boolean-like fields
-  if (key === 'connected') {
-    return value
-      ? t('standalone.openvpn_tunnel.connected')
-      : t('standalone.openvpn_tunnel.not_connected')
-  }
-
-  if (key === 'enabled') {
-    return value ? t('standalone.openvpn_tunnel.enabled') : t('standalone.openvpn_tunnel.disabled')
-  }
-
-  // Handle arrays
-  if (Array.isArray(value)) {
-    return value.join(', ')
-  }
-
-  return String(value)
-}
-
 function isFieldVisible(key: string, value: any): boolean {
   // Check if field has a meaningful value
   if (value === null || value === undefined || value === '') return false
@@ -118,161 +65,189 @@ function isFieldVisible(key: string, value: any): boolean {
       <!-- ns_name -->
       <template v-if="isFieldVisible('ns_name', _itemToShow?.ns_name)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['ns_name'] }}
+          {{ t('standalone.openvpn_tunnel.name') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('ns_name', _itemToShow?.ns_name) }}
+          {{ _itemToShow?.ns_name ? _itemToShow?.ns_name : '' }}
         </p>
       </template>
 
       <!-- id -->
       <template v-if="isFieldVisible('id', _itemToShow?.id)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['id'] }}
+          {{ t('standalone.openvpn_tunnel.tunnel_id') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('id', _itemToShow?.id) }}
+          {{ _itemToShow?.id ? _itemToShow?.id : '' }}
         </p>
       </template>
 
       <!-- port -->
       <template v-if="isFieldVisible('port', _itemToShow?.port)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['port'] }}
+          {{ t('standalone.openvpn_tunnel.port') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('port', _itemToShow?.port) }}
+          {{ _itemToShow?.port ? _itemToShow?.port : '' }}
         </p>
       </template>
 
       <!-- enabled -->
       <template v-if="isFieldVisible('enabled', _itemToShow?.enabled)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['enabled'] }}
+          {{ t('standalone.openvpn_tunnel.status') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('enabled', _itemToShow?.enabled) }}
+          {{
+            _itemToShow?.enabled
+              ? t('standalone.openvpn_tunnel.enabled')
+              : t('standalone.openvpn_tunnel.disabled')
+          }}
         </p>
       </template>
 
       <!-- topology -->
       <template v-if="isFieldVisible('topology', _itemToShow?.topology)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['topology'] }}
+          {{ t('standalone.openvpn_tunnel.topology') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('topology', _itemToShow?.topology) }}
+          {{
+            _itemToShow?.topology
+              ? _itemToShow?.topology === 'subnet'
+                ? t('standalone.openvpn_tunnel.subnet')
+                : t('standalone.openvpn_tunnel.p2p')
+              : ''
+          }}
         </p>
       </template>
 
       <!-- local_network -->
       <template v-if="isFieldVisible('local_network', (_itemToShow as any)?.local_network)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['local_network'] }}
+          {{ t('standalone.openvpn_tunnel.local_networks') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('local_network', (_itemToShow as any)?.local_network) }}
+          {{
+            (_itemToShow as any)?.local_network
+              ? (_itemToShow as any)?.local_network.join(', ')
+              : ''
+          }}
         </p>
       </template>
 
       <!-- remote_network -->
       <template v-if="isFieldVisible('remote_network', _itemToShow?.remote_network)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['remote_network'] }}
+          {{ t('standalone.openvpn_tunnel.remote_networks') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('remote_network', _itemToShow?.remote_network) }}
+          {{ _itemToShow?.remote_network ? _itemToShow?.remote_network.join(', ') : '' }}
         </p>
       </template>
 
       <!-- remote_host -->
       <template v-if="isFieldVisible('remote_host', (_itemToShow as any)?.remote_host)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['remote_host'] }}
+          {{ t('standalone.openvpn_tunnel.remote_host') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('remote_host', (_itemToShow as any)?.remote_host) }}
+          {{
+            (_itemToShow as any)?.remote_host ? (_itemToShow as any)?.remote_host.join(', ') : ''
+          }}
         </p>
       </template>
 
       <!-- vpn_network -->
       <template v-if="isFieldVisible('vpn_network', (_itemToShow as any)?.vpn_network)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['vpn_network'] }}
+          {{ t('standalone.openvpn_tunnel.vpn_network') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('vpn_network', (_itemToShow as any)?.vpn_network) }}
+          {{ (_itemToShow as any)?.vpn_network ? (_itemToShow as any)?.vpn_network : '' }}
         </p>
       </template>
 
       <!-- real_address -->
       <template v-if="isFieldVisible('real_address', (_itemToShow as any)?.real_address)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['real_address'] }}
+          {{ t('standalone.openvpn_tunnel.real_address') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('real_address', (_itemToShow as any)?.real_address) }}
+          {{ (_itemToShow as any)?.real_address ? (_itemToShow as any)?.real_address : '' }}
         </p>
       </template>
 
       <!-- virtual_address -->
       <template v-if="isFieldVisible('virtual_address', (_itemToShow as any)?.virtual_address)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['virtual_address'] }}
+          {{ t('standalone.openvpn_tunnel.virtual_address') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('virtual_address', (_itemToShow as any)?.virtual_address) }}
+          {{ (_itemToShow as any)?.virtual_address ? (_itemToShow as any)?.virtual_address : '' }}
         </p>
       </template>
 
       <!-- connected -->
       <template v-if="isFieldVisible('connected', _itemToShow?.connected)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['connected'] }}
+          {{ t('standalone.openvpn_tunnel.connection') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('connected', _itemToShow?.connected) }}
+          {{
+            _itemToShow?.connected
+              ? t('standalone.openvpn_tunnel.connected')
+              : t('standalone.openvpn_tunnel.not_connected')
+          }}
         </p>
       </template>
 
       <!-- since -->
       <template v-if="isFieldVisible('since', _itemToShow?.since)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['since'] }}
+          {{ t('standalone.openvpn_tunnel.since') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('since', _itemToShow?.since) }}
+          {{ _itemToShow?.since ? new Date(_itemToShow.since * 1000).toLocaleString(locale) : '' }}
         </p>
       </template>
 
       <!-- bytes_received -->
       <template v-if="isFieldVisible('bytes_received', _itemToShow?.bytes_received)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['bytes_received'] }}
+          {{ t('standalone.openvpn_tunnel.bytes_received') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('bytes_received', _itemToShow?.bytes_received) }}
+          {{ _itemToShow?.bytes_received ? _itemToShow.bytes_received : '' }}
         </p>
       </template>
 
       <!-- bytes_sent -->
       <template v-if="isFieldVisible('bytes_sent', _itemToShow?.bytes_sent)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['bytes_sent'] }}
+          {{ t('standalone.openvpn_tunnel.bytes_sent') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ formatFieldValue('bytes_sent', _itemToShow?.bytes_sent) }}
+          {{ _itemToShow?.bytes_sent ? _itemToShow.bytes_sent : '' }}
         </p>
       </template>
 
       <!-- cert_expiry_ts -->
       <template v-if="isFieldVisible('cert_expiry_ts', _itemToShow?.cert_expiry_ts)">
         <p class="text-sm font-semibold">
-          {{ fieldLabels['cert_expiry_ts'] }}
+          {{
+            isClientTunnel(_itemToShow!)
+              ? t('standalone.openvpn_tunnel.client_cert_expiry')
+              : t('standalone.openvpn_tunnel.cert_expiry')
+          }}
         </p>
         <div class="flex flex-col gap-2">
           <p class="text-sm text-gray-600 dark:text-gray-400">
-            {{ formatFieldValue('cert_expiry_ts', _itemToShow?.cert_expiry_ts) }}
+            {{
+              _itemToShow?.cert_expiry_ts
+                ? new Date(_itemToShow.cert_expiry_ts * 1000).toLocaleString(locale)
+                : ''
+            }}
           </p>
           <span v-if="certificateStatus.show" class="flex items-center gap-2">
             <FontAwesomeIcon
diff --git a/src/components/standalone/openvpn_tunnel/TunnelTable.vue b/src/components/standalone/openvpn_tunnel/TunnelTable.vue
index 91c52964e..79fc67026 100644
--- a/src/components/standalone/openvpn_tunnel/TunnelTable.vue
+++ b/src/components/standalone/openvpn_tunnel/TunnelTable.vue
@@ -92,7 +92,8 @@ import {
   faMagnifyingGlassPlus,
   faRefresh,
   faCircleExclamation,
-  faTriangleExclamation
+  faTriangleExclamation,
+  faPenToSquare
 } from '@fortawesome/free-solid-svg-icons'
 
 const { t } = useI18n()
@@ -308,8 +309,8 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
         </NeTableCell>
         <NeTableCell :data-label="t('standalone.openvpn_tunnel.status')">
           <div :class="['flex', 'flex-row', 'items-center', ...getCellClasses(item)]">
-            <font-awesome-icon
-              :icon="['fas', item.enabled ? 'circle-check' : 'circle-xmark']"
+            <FontAwesomeIcon
+              :icon="item.enabled ? faCircleCheck : faCircleXmark"
               :class="[
                 'mr-2',
                 'h-5',
@@ -329,8 +330,8 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
         </NeTableCell>
         <NeTableCell :data-label="t('standalone.openvpn_tunnel.connection')">
           <div :class="['flex', 'flex-row', 'items-center', ...getCellClasses(item)]">
-            <font-awesome-icon
-              :icon="['fas', item.connected ? 'circle-check' : 'circle-xmark']"
+            <FontAwesomeIcon
+              :icon="item.connected ? faCircleCheck : faCircleXmark"
               :class="[
                 'mr-2',
                 'h-5',
@@ -356,11 +357,7 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
           <div class="align-center flex justify-end">
             <NeButton kind="tertiary" @click="emit('tunnel-edit', item)">
               <template #prefix>
-                <font-awesome-icon
-                  :icon="['fas', 'pen-to-square']"
-                  class="h-4 w-4"
-                  aria-hidden="true"
-                />
+                <FontAwesomeIcon :icon="faPenToSquare" class="h-4 w-4" aria-hidden="true" />
               </template>
               {{ t('common.edit') }}
             </NeButton>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 5dd3aacf3..f815936eb 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -2078,14 +2078,6 @@
       "regenerate_cert_message": "Certificate regeneration (client and server) requires an OpenVPN tunnel restart, with possible VPN traffic interruption for a brief period. The client certificate used on the other machine will remain functional (provided it is valid and not expired), and can be replaced with the newly generated certificate at any time later.",
       "regenerate_cert_button": "Regenerate",
       "tunnel_name_max_length": "Maximum 10 characters allowed",
-      "bytes_received": "Bytes received",
-      "bytes_sent": "Bytes sent",
-      "cert_expiry": "Certificates expire",
-      "client_cert_expiry": "Client certificate expire",
-      "real_address": "Real address",
-      "since": "Connection start",
-      "virtual_address": "Virtual address",
-      "remote_host": "Remote host",
       "tunnel_details": "Tunnel details",
       "cert_expiring_message": "Certificates expiring soon",
       "client_cert_expiring_message": "Certificate expiring soon",
@@ -2094,7 +2086,16 @@
       "cert_expired_message": "Certificates are expired",
       "client_cert_expired_message": "Certificate is expired",
       "cert_expired_complete_message": "The certificates are expired",
-      "client_cert_expired_complete_message": "The client certificate is expired"
+      "client_cert_expired_complete_message": "The client certificate is expired",
+      "bytes_received": "Bytes received",
+      "bytes_sent": "Bytes sent",
+      "client_cert_expiry": "Client certificate expire",
+      "cert_expiry": "Certificates expire",
+      "tunnel_id": "Tunnel ID",
+      "real_address": "Real address",
+      "since": "Connection start",
+      "virtual_address": "Virtual address",
+      "remote_host": "Remote hosts"
     },
     "ipsec_tunnel": {
       "title": "IPsec tunnel",
diff --git a/src/i18n/it.json b/src/i18n/it.json
index 72f1ccc88..20ea8c954 100644
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@@ -1472,14 +1472,6 @@
       "regenerate_cert_message": "La rigenerazione dei certificati (client e server) richiede il riavvio del tunnel OpenVPN, con la possibile interruzione del traffico VPN per un breve periodo. Il certificato client utilizzato sull'altra macchina continuerà ad essere funzionante (purchè valido e non scaduto), e sarà possibile sostituirlo con il nuovo appena generato in un secondo momento.",
       "regenerate_cert_button": "Rigenera",
       "tunnel_name_max_length": "Massimo 10 caratteri",
-      "bytes_received": "Bytes ricevuti",
-      "bytes_sent": "Bytes inviati",
-      "cert_expiry": "Scadenza certificati",
-      "client_cert_expiry": "Scadenza certificato client",
-      "real_address": "Indirizzo reale",
-      "since": "Inizio connessione",
-      "virtual_address": "Indirizzo virtuale",
-      "remote_host": "Host remoto",
       "tunnel_details": "Dettagli tunnel",
       "cert_expiring_message": "Certificati in scadenza",
       "client_cert_expiring_message": "Certificato in scadenza",
@@ -1488,7 +1480,16 @@
       "cert_expired_message": "Certificati scaduti",
       "client_cert_expired_message": "Certificato scaduto",
       "cert_expired_complete_message": "I certificati sono scaduti",
-      "client_cert_expired_complete_message": "Il certificato del client è scaduto"
+      "client_cert_expired_complete_message": "Il certificato del client è scaduto",
+      "bytes_received": "Bytes ricevuti",
+      "bytes_sent": "Bytes inviati",
+      "client_cert_expiry": "Scadenza certificato client",
+      "cert_expiry": "Scadenza certificati",
+      "tunnel_id": "ID Tunnel",
+      "real_address": "Indirizzo reale",
+      "since": "Inizio connessione",
+      "virtual_address": "Indirizzo virtuale",
+      "remote_host": "Host remoti"
     },
     "ipsec_tunnel": {
       "local_identifier_tooltip": "Inserire una stringa che identifica la macchina corrente; questa stringa dovrebbe iniziare con il carattere '{'@'}. Sull'altra estremità del tunnel, gli identificatori dovrebbero essere invertiti",

From 504c34444507301b7580810ffa08f9a478fc3749 Mon Sep 17 00:00:00 2001
From: Matteo Di Lorenzi <matteo.dilorenzi@nethesis.it>
Date: Thu, 29 Jan 2026 12:38:54 +0100
Subject: [PATCH 4/5] refactor(openvpn-tunnel): remove redundant field
 visibility checks and streamline template rendering

---
 .../openvpn_tunnel/TunnelInfoModal.vue        | 261 +++++++++---------
 .../openvpn_tunnel/TunnelManager.vue          |  24 +-
 2 files changed, 145 insertions(+), 140 deletions(-)

diff --git a/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue b/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
index b178818b5..ef3da8720 100644
--- a/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
+++ b/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
@@ -42,12 +42,6 @@ const certificateStatus = computed(() => {
   )
 })
 
-function isFieldVisible(key: string, value: any): boolean {
-  // Check if field has a meaningful value
-  if (value === null || value === undefined || value === '') return false
-  if (Array.isArray(value) && value.length === 0) return false
-  return true
-}
 </script>
 
 <template>
@@ -61,206 +55,211 @@ function isFieldVisible(key: string, value: any): boolean {
     @close="emit('close')"
     @primary-click="emit('close')"
   >
-    <div class="grid grid-cols-1 gap-4 md:grid-cols-[auto_1fr]">
+    <div v-if="_itemToShow !== undefined" class="grid grid-cols-1 gap-4 md:grid-cols-[auto_1fr]">
+      
+      <!-- fields visible both for server and client tunnels -->
+      
       <!-- ns_name -->
-      <template v-if="isFieldVisible('ns_name', _itemToShow?.ns_name)">
-        <p class="text-sm font-semibold">
-          {{ t('standalone.openvpn_tunnel.name') }}
-        </p>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ _itemToShow?.ns_name ? _itemToShow?.ns_name : '' }}
-        </p>
-      </template>
+      <p class="text-sm font-semibold">
+        {{ t('standalone.openvpn_tunnel.name') }}
+      </p>
+      <p class="text-sm text-gray-600 dark:text-gray-400">
+        {{ _itemToShow.ns_name }}
+      </p>
 
       <!-- id -->
-      <template v-if="isFieldVisible('id', _itemToShow?.id)">
-        <p class="text-sm font-semibold">
-          {{ t('standalone.openvpn_tunnel.tunnel_id') }}
-        </p>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ _itemToShow?.id ? _itemToShow?.id : '' }}
-        </p>
-      </template>
+      <p class="text-sm font-semibold">
+        {{ t('standalone.openvpn_tunnel.tunnel_id') }}
+      </p>
+      <p class="text-sm text-gray-600 dark:text-gray-400">
+        {{ _itemToShow.id }}
+      </p>
 
       <!-- port -->
-      <template v-if="isFieldVisible('port', _itemToShow?.port)">
-        <p class="text-sm font-semibold">
-          {{ t('standalone.openvpn_tunnel.port') }}
-        </p>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ _itemToShow?.port ? _itemToShow?.port : '' }}
-        </p>
-      </template>
+      <p class="text-sm font-semibold">
+        {{ t('standalone.openvpn_tunnel.port') }}
+      </p>
+      <p class="text-sm text-gray-600 dark:text-gray-400">
+        {{ _itemToShow.port }}
+      </p>
 
       <!-- enabled -->
-      <template v-if="isFieldVisible('enabled', _itemToShow?.enabled)">
-        <p class="text-sm font-semibold">
-          {{ t('standalone.openvpn_tunnel.status') }}
-        </p>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{
-            _itemToShow?.enabled
-              ? t('standalone.openvpn_tunnel.enabled')
-              : t('standalone.openvpn_tunnel.disabled')
-          }}
-        </p>
-      </template>
+      <p class="text-sm font-semibold">
+        {{ t('standalone.openvpn_tunnel.status') }}
+      </p>
+      <p class="text-sm text-gray-600 dark:text-gray-400">
+        {{
+          _itemToShow.enabled
+            ? t('standalone.openvpn_tunnel.enabled')
+            : t('standalone.openvpn_tunnel.disabled')
+        }}
+      </p>
 
       <!-- topology -->
-      <template v-if="isFieldVisible('topology', _itemToShow?.topology)">
-        <p class="text-sm font-semibold">
-          {{ t('standalone.openvpn_tunnel.topology') }}
-        </p>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{
-            _itemToShow?.topology
-              ? _itemToShow?.topology === 'subnet'
-                ? t('standalone.openvpn_tunnel.subnet')
-                : t('standalone.openvpn_tunnel.p2p')
-              : ''
-          }}
-        </p>
-      </template>
-
-      <!-- local_network -->
-      <template v-if="isFieldVisible('local_network', (_itemToShow as any)?.local_network)">
-        <p class="text-sm font-semibold">
-          {{ t('standalone.openvpn_tunnel.local_networks') }}
-        </p>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{
-            (_itemToShow as any)?.local_network
-              ? (_itemToShow as any)?.local_network.join(', ')
-              : ''
-          }}
-        </p>
-      </template>
+      <p class="text-sm font-semibold">
+        {{ t('standalone.openvpn_tunnel.topology') }}
+      </p>
+      <p class="text-sm text-gray-600 dark:text-gray-400">
+        {{
+          _itemToShow.topology
+            ? _itemToShow.topology === 'subnet'
+              ? t('standalone.openvpn_tunnel.subnet')
+              : t('standalone.openvpn_tunnel.p2p')
+            : ''
+        }}
+      </p>
 
       <!-- remote_network -->
-      <template v-if="isFieldVisible('remote_network', _itemToShow?.remote_network)">
+      <p class="text-sm font-semibold">
+        {{ t('standalone.openvpn_tunnel.remote_networks') }}
+      </p>
+      <p class="text-sm text-gray-600 dark:text-gray-400">
+        <template v-if="_itemToShow.remote_network.length > 0">
+          {{ _itemToShow.remote_network.join(', ') }}
+        </template>
+        <template v-else>
+          -
+        </template>
+      </p>
+
+      <!-- fields visible only for client tunnels (both connected and not) -->
+
+      <!-- remote_host -->
+      <template v-if="isClientTunnel(_itemToShow)">
         <p class="text-sm font-semibold">
-          {{ t('standalone.openvpn_tunnel.remote_networks') }}
+          {{ t('standalone.openvpn_tunnel.remote_host') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ _itemToShow?.remote_network ? _itemToShow?.remote_network.join(', ') : '' }}
+          <template v-if="_itemToShow.remote_host.length > 0">
+            {{ _itemToShow.remote_host.join(', ') }}
+          </template>
+          <template v-else>
+            -
+          </template>
         </p>
       </template>
 
-      <!-- remote_host -->
-      <template v-if="isFieldVisible('remote_host', (_itemToShow as any)?.remote_host)">
+      <!-- fields visible only for server tunnels (both connected and not) -->
+
+      <!-- local_network -->
+      <template v-if="!isClientTunnel(_itemToShow)">
         <p class="text-sm font-semibold">
-          {{ t('standalone.openvpn_tunnel.remote_host') }}
+          {{ t('standalone.openvpn_tunnel.local_networks') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{
-            (_itemToShow as any)?.remote_host ? (_itemToShow as any)?.remote_host.join(', ') : ''
-          }}
+          <template v-if="_itemToShow.local_network.length > 0">
+            {{ _itemToShow.local_network.join(', ') }}
+          </template>
+          <template v-else>
+            -
+          </template>
         </p>
       </template>
 
       <!-- vpn_network -->
-      <template v-if="isFieldVisible('vpn_network', (_itemToShow as any)?.vpn_network)">
+      <template v-if="!isClientTunnel(_itemToShow)">
         <p class="text-sm font-semibold">
           {{ t('standalone.openvpn_tunnel.vpn_network') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ (_itemToShow as any)?.vpn_network ? (_itemToShow as any)?.vpn_network : '' }}
+          {{ _itemToShow.vpn_network }}
         </p>
       </template>
 
+      <!-- fields visible only for connected server tunnels -->
+      
       <!-- real_address -->
-      <template v-if="isFieldVisible('real_address', (_itemToShow as any)?.real_address)">
+      <template v-if="!isClientTunnel(_itemToShow) && _itemToShow.connected">
         <p class="text-sm font-semibold">
           {{ t('standalone.openvpn_tunnel.real_address') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ (_itemToShow as any)?.real_address ? (_itemToShow as any)?.real_address : '' }}
+          {{ _itemToShow.real_address }}
         </p>
       </template>
 
       <!-- virtual_address -->
-      <template v-if="isFieldVisible('virtual_address', (_itemToShow as any)?.virtual_address)">
+      <template v-if="!isClientTunnel(_itemToShow) && _itemToShow.connected">
         <p class="text-sm font-semibold">
           {{ t('standalone.openvpn_tunnel.virtual_address') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ (_itemToShow as any)?.virtual_address ? (_itemToShow as any)?.virtual_address : '' }}
+          {{ _itemToShow.virtual_address }}
         </p>
       </template>
 
+      <!-- connection section -->
+
       <!-- connected -->
-      <template v-if="isFieldVisible('connected', _itemToShow?.connected)">
-        <p class="text-sm font-semibold">
-          {{ t('standalone.openvpn_tunnel.connection') }}
-        </p>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{
-            _itemToShow?.connected
-              ? t('standalone.openvpn_tunnel.connected')
-              : t('standalone.openvpn_tunnel.not_connected')
-          }}
-        </p>
-      </template>
+      <p class="text-sm font-semibold">
+        {{ t('standalone.openvpn_tunnel.connection') }}
+      </p>
+      <p class="text-sm text-gray-600 dark:text-gray-400">
+        {{
+          _itemToShow.connected
+            ? t('standalone.openvpn_tunnel.connected')
+            : t('standalone.openvpn_tunnel.not_connected')
+        }}
+      </p>
 
       <!-- since -->
-      <template v-if="isFieldVisible('since', _itemToShow?.since)">
+      <template v-if="_itemToShow.connected">
         <p class="text-sm font-semibold">
           {{ t('standalone.openvpn_tunnel.since') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ _itemToShow?.since ? new Date(_itemToShow.since * 1000).toLocaleString(locale) : '' }}
+          {{ _itemToShow.since ? new Date(_itemToShow.since * 1000).toLocaleString(locale) : '-' }}
         </p>
       </template>
 
-      <!-- bytes_received -->
-      <template v-if="isFieldVisible('bytes_received', _itemToShow?.bytes_received)">
+      <!-- bytes_sent -->
+      <template v-if="_itemToShow.connected">
         <p class="text-sm font-semibold">
-          {{ t('standalone.openvpn_tunnel.bytes_received') }}
+          {{ t('standalone.openvpn_tunnel.bytes_sent') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ _itemToShow?.bytes_received ? _itemToShow.bytes_received : '' }}
+          {{ _itemToShow.bytes_sent ? _itemToShow.bytes_sent : '-' }}
         </p>
       </template>
 
-      <!-- bytes_sent -->
-      <template v-if="isFieldVisible('bytes_sent', _itemToShow?.bytes_sent)">
+      <!-- bytes_received -->
+      <template v-if="_itemToShow.connected">
         <p class="text-sm font-semibold">
-          {{ t('standalone.openvpn_tunnel.bytes_sent') }}
+          {{ t('standalone.openvpn_tunnel.bytes_received') }}
         </p>
         <p class="text-sm text-gray-600 dark:text-gray-400">
-          {{ _itemToShow?.bytes_sent ? _itemToShow.bytes_sent : '' }}
+          {{ _itemToShow.bytes_received ? _itemToShow.bytes_received : '-' }}
         </p>
       </template>
 
       <!-- cert_expiry_ts -->
-      <template v-if="isFieldVisible('cert_expiry_ts', _itemToShow?.cert_expiry_ts)">
-        <p class="text-sm font-semibold">
+      <p class="text-sm font-semibold">
+        {{
+          isClientTunnel(_itemToShow!)
+            ? t('standalone.openvpn_tunnel.client_cert_expiry')
+            : t('standalone.openvpn_tunnel.cert_expiry')
+        }}
+      </p>
+      <div class="flex flex-col gap-2">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           {{
-            isClientTunnel(_itemToShow!)
-              ? t('standalone.openvpn_tunnel.client_cert_expiry')
-              : t('standalone.openvpn_tunnel.cert_expiry')
+            _itemToShow.cert_expiry_ts
+              ? new Date(_itemToShow.cert_expiry_ts * 1000).toLocaleString(locale)
+              : ''
           }}
         </p>
-        <div class="flex flex-col gap-2">
+        <span v-if="certificateStatus.show" class="flex items-center gap-2">
+          <FontAwesomeIcon
+            :icon="certificateStatus.icon"
+            :class="['h-4 w-4', certificateStatus.colorClass]"
+            aria-hidden="true"
+          />
           <p class="text-sm text-gray-600 dark:text-gray-400">
-            {{
-              _itemToShow?.cert_expiry_ts
-                ? new Date(_itemToShow.cert_expiry_ts * 1000).toLocaleString(locale)
-                : ''
-            }}
+            {{ t(certificateStatus.messageKey!, certificateStatus.messageParams!) }}
           </p>
-          <span v-if="certificateStatus.show" class="flex items-center gap-2">
-            <FontAwesomeIcon
-              :icon="certificateStatus.icon"
-              :class="['h-4 w-4', certificateStatus.colorClass]"
-              aria-hidden="true"
-            />
-            <p class="text-sm text-gray-600 dark:text-gray-400">
-              {{ t(certificateStatus.messageKey!, certificateStatus.messageParams!) }}
-            </p>
-          </span>
-        </div>
-      </template>
+        </span>
+      </div>
+
     </div>
   </NeModal>
 </template>
diff --git a/src/components/standalone/openvpn_tunnel/TunnelManager.vue b/src/components/standalone/openvpn_tunnel/TunnelManager.vue
index 2c9f14c14..24400badc 100644
--- a/src/components/standalone/openvpn_tunnel/TunnelManager.vue
+++ b/src/components/standalone/openvpn_tunnel/TunnelManager.vue
@@ -26,31 +26,37 @@ import { ubusCall } from '@/lib/standalone/ubus'
 import { getProductName } from '@/lib/config'
 
 export type ServerTunnel = {
+  /* always available */
+  cert_expiry_ts: number
+  connected: boolean
+  enabled: boolean
   id: string
+  local_network: string[]
   ns_name: string
   port: string
-  topology: string
-  enabled: boolean
-  local_network: string[]
   remote_network: string[]
+  topology: string
   vpn_network: string
-  connected: boolean
-  cert_expiry_ts?: number
+  /* only available on connected tunnels */
   bytes_received?: string
   bytes_sent?: string
+  real_address?: string
   since?: number
+  virtual_address?: string
 }
 
 export type ClientTunnel = {
+  /* always available */
+  cert_expiry_ts: number
+  connected: boolean
+  enabled: boolean
   id: string
   ns_name: string
-  topology: string
-  enabled: boolean
   port: string
   remote_host: string[]
   remote_network: string[]
-  connected: boolean
-  cert_expiry_ts?: number
+  topology: string
+  /* only available on connected tunnels */
   bytes_received?: string
   bytes_sent?: string
   since?: number

From d679484b52df1f9dcb3bc1cbeab94ab7c9541970 Mon Sep 17 00:00:00 2001
From: Matteo Di Lorenzi <matteo.dilorenzi@nethesis.it>
Date: Thu, 29 Jan 2026 12:41:33 +0100
Subject: [PATCH 5/5] refactor(openvpn-tunnel): clean up template formatting
 and remove unnecessary whitespace

---
 .../openvpn_tunnel/TunnelInfoModal.vue        | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue b/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
index ef3da8720..5942ed2be 100644
--- a/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
+++ b/src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
@@ -41,7 +41,6 @@ const certificateStatus = computed(() => {
     true
   )
 })
-
 </script>
 
 <template>
@@ -56,9 +55,8 @@ const certificateStatus = computed(() => {
     @primary-click="emit('close')"
   >
     <div v-if="_itemToShow !== undefined" class="grid grid-cols-1 gap-4 md:grid-cols-[auto_1fr]">
-      
       <!-- fields visible both for server and client tunnels -->
-      
+
       <!-- ns_name -->
       <p class="text-sm font-semibold">
         {{ t('standalone.openvpn_tunnel.name') }}
@@ -117,9 +115,7 @@ const certificateStatus = computed(() => {
         <template v-if="_itemToShow.remote_network.length > 0">
           {{ _itemToShow.remote_network.join(', ') }}
         </template>
-        <template v-else>
-          -
-        </template>
+        <template v-else> - </template>
       </p>
 
       <!-- fields visible only for client tunnels (both connected and not) -->
@@ -133,9 +129,7 @@ const certificateStatus = computed(() => {
           <template v-if="_itemToShow.remote_host.length > 0">
             {{ _itemToShow.remote_host.join(', ') }}
           </template>
-          <template v-else>
-            -
-          </template>
+          <template v-else> - </template>
         </p>
       </template>
 
@@ -150,9 +144,7 @@ const certificateStatus = computed(() => {
           <template v-if="_itemToShow.local_network.length > 0">
             {{ _itemToShow.local_network.join(', ') }}
           </template>
-          <template v-else>
-            -
-          </template>
+          <template v-else> - </template>
         </p>
       </template>
 
@@ -167,7 +159,7 @@ const certificateStatus = computed(() => {
       </template>
 
       <!-- fields visible only for connected server tunnels -->
-      
+
       <!-- real_address -->
       <template v-if="!isClientTunnel(_itemToShow) && _itemToShow.connected">
         <p class="text-sm font-semibold">
@@ -259,7 +251,6 @@ const certificateStatus = computed(() => {
           </p>
         </span>
       </div>
-
     </div>
   </NeModal>
 </template>