Feat: Add cert exp. settings

src/components/ActionInput.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="input-group mb-3">
+        <input
+            ref="input"
+            v-model="model"
+            class="form-control"
+            :type="type"
+            :placeholder="placeholder"
+            :disabled="!enabled"
+        >
+        <a class="btn btn-outline-primary" @click="action()">
+            <font-awesome-icon :icon="icon" />
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        modelValue: {
+            type: String,
+            default: ""
+        },
+        enabled: {
+            type: Boolean,
+            default: true
+        },
+        placeholder: {
+            type: String,
+            default: ""
+        },
+        icon: {
+            type: String,
+            required: true,
+        },
+        type: {
+            type: String,
+            default: "text",
+        },
+        action: {
+            type: Function,
+            default: () => {},
+        }
+    },
+    emits: [ "update:modelValue" ],
+    computed: {
+        model: {
+            get() {
+                return this.modelValue;
+            },
+            set(value) {
+                this.$emit("update:modelValue", value);
+            }
+        }
+    },
+    created() {
+
+    },
+    methods: {
+    }
+};
+</script>

src/components/settings/Notifications.vue

@@ -20,16 +20,74 @@
             </button>
         </div>
 
+        <div class="my-4">
+            <h4>{{ $t("settingsCertificateExpiry") }}</h4>
+            <p>{{ $t("certificationExpiryDescription") }}</p>
+            <div class="mt-2 mb-4 ps-2 cert-exp-days col-12 col-xl-6">
+                <div v-for="day in settings.tlsExpiryNotifyDays" :key="day" class="d-flex align-items-center justify-content-between cert-exp-day-row py-2">
+                    <span>{{ day }} {{ $t("day(s)") }}</span>
+                    <button type="button" class="btn btn-outline-primary ms-2 px-3 py-1" @click="removeExpiryNotifDay(day)">
+                        <font-awesome-icon class="" icon="times" />
+                    </button>
+                </div>
+            </div>
+            <div class="col-12 col-xl-6">
+                <ActionInput v-model="expiryNotifInput" :type="'number'" :placeholder="$t('day(s)')" :icon="'plus'" :action="() => addExpiryNotifDay(expiryNotifInput)" />
+            </div>
+            <div>
+                <button class="btn btn-primary" type="button" @click="saveSettings()">
+                    {{ $t("Save") }}
+                </button>
+            </div>
+        </div>
+
         <NotificationDialog ref="notificationDialog" />
     </div>
 </template>
 
 <script>
 import NotificationDialog from "../../components/NotificationDialog.vue";
+import ActionInput from "../ActionInput.vue";
 
 export default {
     components: {
-        NotificationDialog
+        NotificationDialog,
+        ActionInput,
+    },
+
+    data() {
+        return {
+            expiryNotifInput: null,
+        };
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    },
+
+    methods: {
+        removeExpiryNotifDay(day) {
+            this.settings.tlsExpiryNotifyDays = this.settings.tlsExpiryNotifyDays.filter(d => d !== day);
+        },
+        addExpiryNotifDay(day) {
+            if (day != null && day !== "") {
+                const parsedDay = parseInt(day);
+                if (parsedDay != null && !isNaN(parsedDay) && parsedDay > 0) {
+                    if (!this.settings.tlsExpiryNotifyDays.includes(parsedDay)) {
+                        this.settings.tlsExpiryNotifyDays.push(parseInt(day));
+                        this.expiryNotifInput = null;
+                    }
+                }
+            }
+        },
     },
 };
 </script>
@@ -43,4 +101,16 @@ export default {
         color: $dark-font-color;
     }
 }
+
+.cert-exp-days .cert-exp-day-row {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+
+    .dark & {
+        border-bottom: 1px solid $dark-border-color;
+    }
+}
+
+.cert-exp-days .cert-exp-day-row:last-child {
+    border: none;
+}
 </style>