From e548a9d0feeae547dfc63816ee94f4f812d322e8 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Fri, 10 Apr 2026 09:41:12 +0100
Subject: [PATCH] feat(certificates): Add per-cert renewal and auto-renew
 controls

Clicking a certificate now opens a details view showing its
deployment link, with actions to renew it immediately or toggle
auto-renewal. Each card exposes a quick renew shortcut, and
deployments gain a Renew SSL action that renews all their
certificates at once.
---
 src/services/api.ts                |  15 +-
 src/views/CertificatesView.vue     | 343 ++++++++++++++++++++++++++++-
 src/views/DeploymentDetailView.vue |  36 +++
 3 files changed, 384 insertions(+), 10 deletions(-)
 mode change 100644 => 100755 src/services/api.ts
 mode change 100644 => 100755 src/views/CertificatesView.vue
 mode change 100644 => 100755 src/views/DeploymentDetailView.vue

diff --git a/src/services/api.ts b/src/services/api.ts
old mode 100644
new mode 100755
index cfed1f1..3d6ee2d
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -157,12 +157,25 @@ export const networksApi = {
 
 export const certificatesApi = {
   list: () => apiClient.get<{ certificates: Certificate[] }>("/certificates"),
+  get: (domain: string) => apiClient.get<{ certificate: Certificate }>(`/certificates/${encodeURIComponent(domain)}`),
   request: (domain: string) =>
     apiClient.post<{ message: string; result: any }>("/certificates", {
       domain,
     }),
   renew: () => apiClient.post<{ message: string; result: any }>("/certificates/renew"),
-  delete: (domain: string) => apiClient.delete(`/certificates/${domain}`),
+  renewOne: (domain: string) =>
+    apiClient.post<{ message: string; domain: string; result: any }>(
+      `/certificates/${encodeURIComponent(domain)}/renew`,
+    ),
+  setAutoRenew: (domain: string, autoRenew: boolean) =>
+    apiClient.patch<{ domain: string; auto_renew: boolean }>(`/certificates/${encodeURIComponent(domain)}/auto-renew`, {
+      auto_renew: autoRenew,
+    }),
+  renewDeployment: (name: string) =>
+    apiClient.post<{ message: string; deployment: string; result: any }>(
+      `/deployments/${encodeURIComponent(name)}/certificates/renew`,
+    ),
+  delete: (domain: string) => apiClient.delete(`/certificates/${encodeURIComponent(domain)}`),
 };
 
 export const proxyApi = {
diff --git a/src/views/CertificatesView.vue b/src/views/CertificatesView.vue
old mode 100644
new mode 100755
index f519888..1ec7962
--- a/src/views/CertificatesView.vue
+++ b/src/views/CertificatesView.vue
@@ -56,13 +56,22 @@
 
       <template #grid="{ items }">
         <div class="certificates-grid">
-          <div v-for="cert in items" :key="cert.domain" class="cert-card" :class="cert.status">
+          <div
+            v-for="cert in items"
+            :key="cert.domain"
+            class="cert-card"
+            :class="cert.status"
+            @click="openDetails(cert)"
+          >
             <div class="cert-header">
               <div class="cert-status">
                 <span class="status-badge" :class="cert.status">
                   <i :class="statusIcon(cert.status)" />
                   {{ cert.status }}
                 </span>
+                <span v-if="cert.auto_renew" class="auto-renew-chip" title="Auto-renew enabled">
+                  <i class="pi pi-sync" /> auto
+                </span>
               </div>
               <div class="cert-domain">
                 <i class="pi pi-lock" />
@@ -98,14 +107,26 @@
                 <i class="pi pi-folder" />
                 <span>{{ cert.path }}</span>
               </div>
-              <button
-                v-if="canDelete"
-                class="btn btn-danger-sm"
-                :disabled="deleting === cert.domain"
-                @click.stop="handleDelete(cert.domain)"
-              >
-                <i :class="deleting === cert.domain ? 'pi pi-spin pi-spinner' : 'pi pi-trash'" />
-              </button>
+              <div class="cert-actions">
+                <button
+                  v-if="canWrite"
+                  class="btn btn-icon-sm"
+                  :disabled="renewingDomain === cert.domain"
+                  title="Renew certificate"
+                  @click.stop="handleRenewOne(cert.domain)"
+                >
+                  <i :class="renewingDomain === cert.domain ? 'pi pi-spin pi-spinner' : 'pi pi-sync'" />
+                </button>
+                <button
+                  v-if="canDelete"
+                  class="btn btn-danger-sm"
+                  :disabled="deleting === cert.domain"
+                  title="Delete certificate"
+                  @click.stop="handleDelete(cert.domain)"
+                >
+                  <i :class="deleting === cert.domain ? 'pi pi-spin pi-spinner' : 'pi pi-trash'" />
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -125,6 +146,95 @@
     />
 
     <Teleport to="body">
+      <div v-if="detailsCert" class="modal-overlay" @click.self="closeDetails">
+        <div class="modal-container modal-lg">
+          <div class="modal-header">
+            <h3>
+              <i class="pi pi-shield" />
+              Certificate Details
+            </h3>
+            <button class="close-btn" @click="closeDetails">
+              <i class="pi pi-times" />
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="details-grid">
+              <div class="info-item">
+                <span class="info-label">Domain</span>
+                <span class="info-value">{{ detailsCert.domain }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">Status</span>
+                <span class="status-badge" :class="detailsCert.status">
+                  <i :class="statusIcon(detailsCert.status)" />
+                  {{ detailsCert.status }}
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">Issuer</span>
+                <span class="info-value">{{ detailsCert.issuer }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">Days Left</span>
+                <span class="info-value days-left" :class="daysLeftClass(detailsCert.days_left)">
+                  {{ detailsCert.days_left }} days
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">Valid From</span>
+                <span class="info-value">{{ formatDate(detailsCert.not_before) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">Expires</span>
+                <span class="info-value">{{ formatDate(detailsCert.not_after) }}</span>
+              </div>
+              <div v-if="detailsCert.deployment_id" class="info-item info-item-wide">
+                <span class="info-label">Deployment</span>
+                <router-link
+                  class="info-value deployment-link"
+                  :to="`/deployments/${detailsCert.deployment_id}`"
+                  @click="closeDetails"
+                >
+                  <i class="pi pi-box" />
+                  {{ detailsCert.deployment_id }}
+                </router-link>
+              </div>
+              <div class="info-item info-item-wide">
+                <span class="info-label">Path</span>
+                <span class="info-value path">{{ detailsCert.path }}</span>
+              </div>
+            </div>
+
+            <div v-if="canWrite" class="auto-renew-row">
+              <div>
+                <div class="auto-renew-title">Auto-Renewal</div>
+                <div class="hint">When enabled, this certificate will be renewed automatically before it expires.</div>
+              </div>
+              <label class="switch">
+                <input
+                  type="checkbox"
+                  :checked="detailsCert.auto_renew"
+                  :disabled="autoRenewSaving"
+                  @change="handleAutoRenewToggle($event)"
+                />
+                <span class="slider" />
+              </label>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary" @click="closeDetails">Close</button>
+            <button
+              v-if="canWrite"
+              class="btn btn-primary"
+              :disabled="renewingDomain === detailsCert.domain"
+              @click="handleRenewOne(detailsCert.domain)"
+            >
+              <i :class="renewingDomain === detailsCert.domain ? 'pi pi-spin pi-spinner' : 'pi pi-sync'" />
+              {{ renewingDomain === detailsCert.domain ? "Renewing..." : "Renew Now" }}
+            </button>
+          </div>
+        </div>
+      </div>
       <div v-if="showRequestModal" class="modal-overlay" @click.self="showRequestModal = false">
         <div class="modal-container">
           <div class="modal-header">
@@ -207,11 +317,15 @@ const showRequestModal = ref(false);
 const newDomain = ref("");
 const requesting = ref(false);
 const renewingAll = ref(false);
+const renewingDomain = ref<string | null>(null);
 const deleting = ref<string | null>(null);
 
 const showDeleteModal = ref(false);
 const domainToDelete = ref<string | null>(null);
 
+const detailsCert = ref<Certificate | null>(null);
+const autoRenewSaving = ref(false);
+
 const columns = [
   { key: "domain", label: "Domain", sortable: true },
   { key: "status", label: "Status", sortable: true },
@@ -272,6 +386,56 @@ const handleRenewAll = async () => {
   }
 };
 
+const handleRenewOne = async (domain: string) => {
+  renewingDomain.value = domain;
+  try {
+    await certificatesApi.renewOne(domain);
+    notifications.success("Certificate Renewed", `Certificate for ${domain} has been renewed`);
+    await fetchCertificates();
+    if (detailsCert.value?.domain === domain) {
+      const refreshed = certificates.value.find((c) => c.domain === domain);
+      if (refreshed) detailsCert.value = refreshed;
+    }
+  } catch (e: any) {
+    const msg = e.response?.data?.error || e.message;
+    notifications.error("Renewal Failed", msg);
+  } finally {
+    renewingDomain.value = null;
+  }
+};
+
+const openDetails = (cert: Certificate) => {
+  detailsCert.value = { ...cert };
+};
+
+const closeDetails = () => {
+  detailsCert.value = null;
+};
+
+const handleAutoRenewToggle = async (event: Event) => {
+  if (!detailsCert.value) return;
+  const target = event.target as HTMLInputElement;
+  const enabled = target.checked;
+  const domain = detailsCert.value.domain;
+  autoRenewSaving.value = true;
+  try {
+    await certificatesApi.setAutoRenew(domain, enabled);
+    detailsCert.value.auto_renew = enabled;
+    const idx = certificates.value.findIndex((c) => c.domain === domain);
+    if (idx >= 0) certificates.value[idx] = { ...certificates.value[idx], auto_renew: enabled };
+    notifications.success(
+      enabled ? "Auto-Renew Enabled" : "Auto-Renew Disabled",
+      `${domain} will ${enabled ? "now be" : "no longer be"} renewed automatically`,
+    );
+  } catch (e: any) {
+    target.checked = !enabled;
+    const msg = e.response?.data?.error || e.message;
+    notifications.error("Update Failed", msg);
+  } finally {
+    autoRenewSaving.value = false;
+  }
+};
+
 const handleDelete = (domain: string) => {
   domainToDelete.value = domain;
   showDeleteModal.value = true;
@@ -742,9 +906,170 @@ onMounted(() => {
   color: #6b7280;
 }
 
+.cert-card {
+  cursor: pointer;
+}
+
+.cert-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-icon-sm {
+  padding: 0.375rem;
+  background: #eef2ff;
+  color: #4338ca;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-icon-sm:hover:not(:disabled) {
+  background: #e0e7ff;
+}
+
+.btn-icon-sm:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cert-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.auto-renew-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  background: #eef2ff;
+  color: #4338ca;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.modal-container.modal-lg {
+  max-width: 640px;
+}
+
+.details-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem 1.5rem;
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.details-grid .info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.details-grid .info-item-wide {
+  grid-column: span 2;
+}
+
+.info-value.path {
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 0.75rem;
+  word-break: break-all;
+}
+
+.deployment-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: #4338ca;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.deployment-link:hover {
+  text-decoration: underline;
+}
+
+.auto-renew-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding-top: 1.25rem;
+}
+
+.auto-renew-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 0.25rem;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #d1d5db;
+  border-radius: 9999px;
+  transition: 0.2s;
+}
+
+.slider::before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.2s;
+}
+
+.switch input:checked + .slider {
+  background-color: #6366f1;
+}
+
+.switch input:checked + .slider::before {
+  transform: translateX(20px);
+}
+
+.switch input:disabled + .slider {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 @media (max-width: 768px) {
   .certificates-grid {
     grid-template-columns: 1fr;
   }
+  .details-grid {
+    grid-template-columns: 1fr;
+  }
+  .details-grid .info-item-wide {
+    grid-column: span 1;
+  }
 }
 </style>
diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue
old mode 100644
new mode 100755
index d8afe15..7a968df
--- a/src/views/DeploymentDetailView.vue
+++ b/src/views/DeploymentDetailView.vue
@@ -245,6 +245,16 @@
                       <i :class="requestingCert ? 'pi pi-spin pi-spinner' : 'pi pi-shield'" />
                       Request SSL
                     </button>
+                    <button
+                      v-if="proxyStatus.ssl_enabled && proxyStatus.certificate_exists"
+                      class="btn btn-sm btn-secondary"
+                      :disabled="renewingSSL"
+                      title="Renew SSL certificates for this deployment"
+                      @click="handleRenewDeploymentSSL"
+                    >
+                      <i :class="renewingSSL ? 'pi pi-spin pi-spinner' : 'pi pi-sync'" />
+                      Renew SSL
+                    </button>
                     <button
                       v-if="proxyStatus.ssl_enabled"
                       class="btn btn-sm btn-warning"
@@ -1463,6 +1473,7 @@ const proxyStatus = ref<ProxyStatus | null>(null);
 const settingUpProxy = ref(false);
 const requestingCert = ref(false);
 const disablingSSL = ref(false);
+const renewingSSL = ref(false);
 const showAddDomainModal = ref(false);
 const addingDomain = ref(false);
 
@@ -1873,6 +1884,31 @@ const handleRequestCertificate = async () => {
   }
 };
 
+const handleRenewDeploymentSSL = async () => {
+  if (!deployment.value) return;
+
+  renewingSSL.value = true;
+  try {
+    const response = await certificatesApi.renewDeployment(deployment.value.name);
+    const result = response.data.result;
+    if (result && result.success === false) {
+      const failed = (result.results || [])
+        .filter((r: any) => !r.success)
+        .map((r: any) => r.domain)
+        .join(", ");
+      notifications.error("Partial Renewal", `Some certificates failed to renew: ${failed}`);
+    } else {
+      notifications.success("SSL Renewed", `Certificates for ${deployment.value.name} have been renewed`);
+    }
+    await fetchDeployment();
+  } catch (err: any) {
+    const msg = err.response?.data?.error || err.message;
+    notifications.error("Renewal Failed", msg);
+  } finally {
+    renewingSSL.value = false;
+  }
+};
+
 const handleDisableSSL = async () => {
   if (!deployment.value) return;