From ce2abde150c10b01de07e9636ada017be284fc12 Mon Sep 17 00:00:00 2001
From: Monviech <79600909+Monviech@users.noreply.github.com>
Date: Fri, 4 Apr 2025 14:12:27 +0200
Subject: [PATCH] dashboard: Certificates.js adjustments for f90e544 (#8526)

* dashboard: Use search link for certificates not in the trust model

* dashboard: Use toLocaleDateString to only display the expiry date but not the exact time.

* dashboard: Show the commonname of a certificate if it exists. Since certificates from external sources all have the same description, they would not be easily distinguished otherwise.

* Fix style

* dashboard: The value of hidden items must be changed to uuid to ensure uniqueness when hiding certificates

* dashboard: Simplify hiddenItemOptions value
---
 src/opnsense/www/js/widgets/Certificates.js | 28 +++++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/opnsense/www/js/widgets/Certificates.js b/src/opnsense/www/js/widgets/Certificates.js
index e0df7d0dc..1d6356135 100644
--- a/src/opnsense/www/js/widgets/Certificates.js
+++ b/src/opnsense/www/js/widgets/Certificates.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2024 Cedrik Pischem
+ * Copyright (C) 2024-2025 Cedrik Pischem
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -73,7 +73,7 @@ export default class Certificates extends BaseTableWidget {
 
     processItems(items, type, hiddenItems, rows) {
         items.forEach(item => {
-            if (!hiddenItems.includes(item.descr)) {
+            if (!hiddenItems.includes(item.uuid)) {
                 const validTo = new Date(parseInt(item.valid_to) * 1000);
                 const now = new Date();
                 const remainingDays = Math.max(0, Math.floor((validTo - now) / (1000 * 60 * 60 * 24)));
@@ -87,15 +87,26 @@ export default class Certificates extends BaseTableWidget {
                 const statusText = remainingDays === 0 ? this.translations.expired : this.translations.valid;
                 const iconClass = remainingDays === 0 ? 'fa fa-unlock' : 'fa fa-lock';
 
+                // XXX: Format the date without time and timezone as the frontend does not know the timezone of the backend
+                const expirationDateString = validTo.toLocaleDateString(undefined);
+
                 const expirationText = remainingDays === 0
-                    ? `${this.translations.expiredon} ${validTo.toLocaleString()}`
-                    : `${this.translations.expiresin} ${remainingDays} ${this.translations.days}, ${validTo.toLocaleString()}`;
+                    ? `${this.translations.expiredon} ${expirationDateString}`
+                    : `${this.translations.expiresin} ${remainingDays} ${this.translations.days}, ${expirationDateString}`;
 
                 const descrContent = (type === 'cert' || type === 'ca')
-                    ? `<a href="/ui/trust/${type === 'cert' ? 'cert' : 'ca'}#edit=${encodeURIComponent(item.uuid)}"
-                        class="${type}-link" target="_blank" rel="noopener noreferrer">${item.descr}</a>`
+                    // XXX: Certs polled via /usr/local/etc/ssl/ext_sources/*.conf cannot be edited, only search them
+                    ? (!item.uuid.includes('-')
+                        ? `<a href="/ui/trust/${type === 'cert' ? 'cert' : 'ca'}#search=${encodeURIComponent(item.uuid)}"
+                            class="${type}-link" target="_blank" rel="noopener noreferrer">${item.descr}</a>`
+                        : `<a href="/ui/trust/${type === 'cert' ? 'cert' : 'ca'}#edit=${encodeURIComponent(item.uuid)}"
+                            class="${type}-link" target="_blank" rel="noopener noreferrer">${item.descr}</a>`)
                     : `<b>${item.descr}</b>`;
 
+                const commonNameText = item.commonname
+                    ? `<div style="margin-top: 5px;">${item.commonname}</div>`
+                    : '';
+
                 const row = `
                     <div>
                         <i class="${iconClass} ${colorClass} certificate-tooltip" style="cursor: pointer;"
@@ -104,6 +115,7 @@ export default class Certificates extends BaseTableWidget {
                         &nbsp;
                         <span>${descrContent}</span>
                         <br/>
+                        ${commonNameText}
                         <div style="margin-top: 5px; margin-bottom: 5px;">
                             ${expirationText}
                         </div>
@@ -161,13 +173,13 @@ export default class Certificates extends BaseTableWidget {
 
         if (caResponse.rows) {
             caResponse.rows.forEach(ca => {
-                hiddenItemOptions.push({ value: `${ca.descr}`, label: ca.descr });
+                hiddenItemOptions.push({ value: ca.uuid, label: ca.descr });
             });
         }
 
         if (certResponse.rows) {
             certResponse.rows.forEach(cert => {
-                hiddenItemOptions.push({ value: `${cert.descr}`, label: cert.descr });
+                hiddenItemOptions.push({ value: cert.uuid, label: cert.commonname || cert.descr });
             });
         }