Skip to content

feat(ovpntunnel): show all cert expirations #690

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gsanchietti wants to merge 2 commits into
base: main
Choose a base branch
from
+60 −57
Open

feat(ovpntunnel): show all cert expirations #690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d849dc5
feat(ovpntunnel): show all cert expirations
gsanchietti Feb 4, 2026
09090c5
fix(i18n): update Italian translation keys for certificate expiration
Copilot Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 24 additions & 37 deletions src/components/standalone/openvpn_tunnel/TunnelInfoModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@
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 } from 'vue'

const { t, locale } = useI18n()

Expand All @@ -32,15 +30,6 @@ 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
)
})
Comment on lines -35 to -43
Copy link
Collaborator

@m-dilorenzi m-dilorenzi Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing this assignment will make the icon notifying the certificate expiration no longer visible inside the tunnel details modal. Is it correct?

</script>

<template>
Expand Down Expand Up @@ -224,33 +213,31 @@ const certificateStatus = computed(() => {
</p>
</template>

<!-- cert_expiry_ts -->
<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">
<!-- certificates -->
<template v-if="!isClientTunnel(_itemToShow!) && _itemToShow.certificates.server">
<p class="text-sm font-semibold">
{{ t('standalone.openvpn_tunnel.server_cert_expiration') }}
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
{{ new Date(_itemToShow.certificates.server * 1000).toLocaleString(locale) }}
</p>
</template>
<template v-if="_itemToShow.certificates.client">
<p class="text-sm font-semibold">
{{ t('standalone.openvpn_tunnel.client_cert_expiration') }}
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
{{
_itemToShow.cert_expiry_ts
? new Date(_itemToShow.cert_expiry_ts * 1000).toLocaleString(locale)
: ''
}}
{{ new Date(_itemToShow.certificates.client * 1000).toLocaleString(locale) }}
</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>
Comment on lines -243 to -253
Copy link
Collaborator

@m-dilorenzi m-dilorenzi Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above, here we are removing the icon and the detail message if needed.

</template>
<template v-if="_itemToShow.certificates.CA">
<p class="text-sm font-semibold">
{{ t('standalone.openvpn_tunnel.ca_cert_expiration') }}
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
{{ new Date(_itemToShow.certificates.CA * 1000).toLocaleString(locale) }}
</p>
</template>
</div>
</NeModal>
</template>
11 changes: 9 additions & 2 deletions src/components/standalone/openvpn_tunnel/TunnelManager.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,11 @@ import { getProductName } from '@/lib/config'

export type ServerTunnel = {
/* always available */
cert_expiry_ts: number
certificates: {
server: number
client: number
CA: number
}
connected: boolean
enabled: boolean
id: string
Expand All @@ -47,7 +51,10 @@ export type ServerTunnel = {

export type ClientTunnel = {
/* always available */
cert_expiry_ts: number
certificates: {
client: number
CA: number
}
connected: boolean
enabled: boolean
id: string
Expand Down
27 changes: 17 additions & 10 deletions src/components/standalone/openvpn_tunnel/TunnelTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,19 @@ export function isCertificatesExpired(expiryTimestamp: number): boolean {
}

export function getCertificateStatus(
Copy link
Collaborator

@m-dilorenzi m-dilorenzi Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Within this function, we must decide whether to compute expiration information for the CA certificate as well.

expiryTimestamp: number,
certificates: { [key: string]: number },
isClientTunnel: boolean = false,
tunnelDetailModal: boolean = false
): CertificateStatusResult {
if (isCertificatesExpired(expiryTimestamp)) {
// Determine which certificate to check (client for client tunnels, server for server tunnels)
const certToCheck = isClientTunnel ? certificates.client : certificates.server

// If the certificate is not available, return no status to show
if (!certToCheck) {
return { show: false }
}

if (isCertificatesExpired(certToCheck)) {
return {
show: true,
icon: faCircleExclamation,
Expand All @@ -48,7 +56,7 @@ export function getCertificateStatus(
}
}

if (shouldShowCertExpiryBadge(expiryTimestamp)) {
if (shouldShowCertExpiryBadge(certToCheck)) {
return {
show: true,
icon: faTriangleExclamation,
Expand All @@ -61,7 +69,7 @@ export function getCertificateStatus(
? 'standalone.openvpn_tunnel.client_cert_expiring_message'
: 'standalone.openvpn_tunnel.cert_expiring_message',
messageParams: {
days: getDaysUntilExpiry(expiryTimestamp)
days: getDaysUntilExpiry(certToCheck)
}
}
}
Expand Down Expand Up @@ -220,17 +228,17 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
<p :class="[...getCellClasses(item)]">{{ item.ns_name }}</p>
<NeTooltip
v-if="
item.cert_expiry_ts &&
getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).show
item.certificates &&
getCertificateStatus(item.certificates, checkIsClientTunnel(item)).show
"
interactive
>
<template #trigger>
<FontAwesomeIcon
:icon="getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).icon"
:icon="getCertificateStatus(item.certificates, checkIsClientTunnel(item)).icon"
:class="[
'h-4 w-4',
getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item)).colorClass
getCertificateStatus(item.certificates, checkIsClientTunnel(item)).colorClass
]"
aria-hidden="true"
/>
Expand All @@ -239,8 +247,7 @@ function checkIsClientTunnel(item: ServerTunnel | ClientTunnel): item is ClientT
<p class="text-center">
{{
t(
getCertificateStatus(item.cert_expiry_ts, checkIsClientTunnel(item))
.messageKey!
getCertificateStatus(item.certificates, checkIsClientTunnel(item)).messageKey!
)
}}
</p>
Expand Down
9 changes: 5 additions & 4 deletions src/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2086,8 +2086,8 @@
"regenerate_cert_button": "Regenerate",
"tunnel_name_max_length": "Maximum 10 characters allowed",
"tunnel_details": "Tunnel details",
"cert_expiring_message": "Certificates expiring soon",
"client_cert_expiring_message": "Certificate expiring soon",
"cert_expiring_message": "Server certificate will expire soon",
"client_cert_expiring_message": "Client certificate will expire 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",
Expand All @@ -2096,8 +2096,9 @@
"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",
"server_cert_expiration": "Server certificate expiration",
"client_cert_expiration": "Client certificate expiration",
"ca_cert_expiration": "CA certificate expiration",
"tunnel_id": "Tunnel ID",
"real_address": "Real address",
"since": "Connection start",
Expand Down
9 changes: 5 additions & 4 deletions src/i18n/it.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1477,8 +1477,8 @@
"regenerate_cert_button": "Rigenera",
"tunnel_name_max_length": "Massimo 10 caratteri",
"tunnel_details": "Dettagli tunnel",
"cert_expiring_message": "Certificati in scadenza",
"client_cert_expiring_message": "Certificato in scadenza",
"cert_expiring_message": "Il certificato del server scadrà presto",
"client_cert_expiring_message": "Il certificato del client scadrà presto",
"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",
Expand All @@ -1487,8 +1487,9 @@
"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",
"server_cert_expiration": "Scadenza certificato server",
"client_cert_expiration": "Scadenza certificato client",
"ca_cert_expiration": "Scadenza certificato CA",
"tunnel_id": "ID Tunnel",
"real_address": "Indirizzo reale",
"since": "Inizio connessione",
Expand Down
Loading