Status page certificate expiry

src/components/PublicGroupList.vue

@@ -60,6 +60,7 @@
                                                     @click="$refs.monitorSettingDialog.show(group, monitor)"
                                                 />
                                             </span>
+                                            <p v-if="showCertificateExpiry" class="item-name"> Expiry: {{ formatExpiry(monitor) }} </p>
                                         </div>
                                         <div v-if="showTags" class="tags">
                                             <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
@@ -103,6 +104,10 @@ export default {
         /** Should tags be shown? */
         showTags: {
             type: Boolean,
+        },
+        /** Should expiry be shown? */
+        showCertificateExpiry: {
+            type: Boolean,
         }
     },
     data() {
@@ -154,6 +159,19 @@ export default {
             }
             return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://" && !this.editMode;
         },
+
+        /**
+         * Returns formatted certificate expiry or Bad cert message
+         * @param {Object} monitor Monitor to show expiry for
+         * @returns {string}
+         */
+        formatExpiry(monitor) {
+            if (monitor?.element?.validCert) {
+                return monitor.element.certExpiryDaysRemaining + " days";
+            } else {
+                return monitor.element.certExpiryDaysRemaining;
+            }
+        },
     }
 };
 </script>

src/pages/StatusPage.vue

@@ -54,6 +54,12 @@
                     <label class="form-check-label" for="show-powered-by">{{ $t("Show Powered By") }}</label>
                 </div>
 
+                <!-- Show certificate expiry -->
+                <div class="my-3 form-check form-switch">
+                    <input id="show-certificate-expiry" v-model="config.showCertificateExpiry" class="form-check-input" type="checkbox">
+                    <label class="form-check-label" for="show-certificate-expiry">{{ $t("Show Certificate Expiry") }}</label>
+                </div>
+
                 <div v-if="false" class="my-3">
                     <label for="password" class="form-label">{{ $t("Password") }} <sup>{{ $t("Coming Soon") }}</sup></label>
                     <input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
@@ -309,7 +315,7 @@
                     👀 {{ $t("statusPageNothing") }}
                 </div>
 
-                <PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" />
+                <PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" :show-certificate-expiry="config.showCertificateExpiry" />
             </div>
 
             <footer class="mt-5 mb-4">