Merge remote-tracking branch 'origin/master' into feature/482-add-description-to-monitor

# Conflicts:
#	server/database.js
#	server/model/monitor.js
#	src/icon.js
#	src/languages/en.js
#	src/languages/es-ES.js

src/components/ActionInput.vue

@@ -0,0 +1,86 @@
+<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>
+/**
+ * Generic input field with a customizable action on the right.
+ * Action is passed in as a function.
+ */
+export default {
+    props: {
+        /**
+         * The value of the input field.
+         */
+        modelValue: {
+            type: String,
+            default: ""
+        },
+        /**
+         * Whether the input field is enabled / disabled.
+         */
+        enabled: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * Placeholder text for the input field.
+         */
+        placeholder: {
+            type: String,
+            default: ""
+        },
+        /**
+         * The icon displayed in the right button of the input field.
+         * Accepts a Font Awesome icon string identifier.
+         * @example "plus"
+         */
+        icon: {
+            type: String,
+            required: true,
+        },
+        /**
+         * The input type of the input field.
+         * @example "email"
+         */
+        type: {
+            type: String,
+            default: "text",
+        },
+        /**
+         * The action to be performed when the button is clicked.
+         * Action is passed in as a function.
+         */
+        action: {
+            type: Function,
+            default: () => {},
+        }
+    },
+    emits: [ "update:modelValue" ],
+    computed: {
+        /**
+         * Send value update to parent on change.
+         */
+        model: {
+            get() {
+                return this.modelValue;
+            },
+            set(value) {
+                this.$emit("update:modelValue", value);
+            }
+        }
+    },
+};
+</script>

src/components/CertificateInfo.vue

@@ -25,10 +25,12 @@ export default {
         CertificateInfoRow,
     },
     props: {
+        /** Object representing certificate */
         certInfo: {
             type: Object,
             required: true,
         },
+        /** Is the TLS certificate valid? */
         valid: {
             type: Boolean,
             required: true,

src/components/CertificateInfoRow.vue

@@ -11,23 +11,23 @@
                 <table class="text-start">
                     <tbody>
                         <tr class="my-3">
-                            <td class="px-3">Subject:</td>
+                            <td class="px-3">{{ $t("Subject:") }}</td>
                             <td>{{ formatSubject(cert.subject) }}</td>
                         </tr>
                         <tr class="my-3">
-                            <td class="px-3">Valid To:</td>
+                            <td class="px-3">{{ $t("Valid To:") }}</td>
                             <td><Datetime :value="cert.validTo" /></td>
                         </tr>
                         <tr class="my-3">
-                            <td class="px-3">Days Remaining:</td>
+                            <td class="px-3">{{ $t("Days Remaining:") }}</td>
                             <td>{{ cert.daysRemaining }}</td>
                         </tr>
                         <tr class="my-3">
-                            <td class="px-3">Issuer:</td>
+                            <td class="px-3">{{ $t("Issuer:") }}</td>
                             <td>{{ formatSubject(cert.issuer) }}</td>
                         </tr>
                         <tr class="my-3">
-                            <td class="px-3">Fingerprint:</td>
+                            <td class="px-3">{{ $t("Fingerprint:") }}</td>
                             <td>{{ cert.fingerprint }}</td>
                         </tr>
                     </tbody>
@@ -56,12 +56,19 @@ export default {
         Datetime,
     },
     props: {
+        /** Object representing certificate */
         cert: {
             type: Object,
             required: true,
         },
     },
     methods: {
+        /**
+         * Format the subject of the certificate
+         * @param {Object} subject Object representing the certificates
+         * subject
+         * @returns {string}
+         */
         formatSubject(subject) {
             if (subject.O && subject.CN && subject.C) {
                 return `${subject.CN} - ${subject.O} (${subject.C})`;

src/components/Confirm.vue

@@ -25,36 +25,44 @@
 </template>
 
 <script>
-import { Modal } from "bootstrap"
+import { Modal } from "bootstrap";
 
 export default {
     props: {
+        /** Style of button */
         btnStyle: {
             type: String,
             default: "btn-primary",
         },
+        /** Text to use as yes */
         yesText: {
             type: String,
             default: "Yes",     // TODO: No idea what to translate this
         },
+        /** Text to use as no */
         noText: {
             type: String,
             default: "No",
         },
     },
+    emits: [ "yes" ],
     data: () => ({
         modal: null,
     }),
     mounted() {
-        this.modal = new Modal(this.$refs.modal)
+        this.modal = new Modal(this.$refs.modal);
     },
     methods: {
+        /** Show the confirm dialog */
         show() {
-            this.modal.show()
+            this.modal.show();
         },
+        /**
+         * @emits string "yes" Notify the parent when Yes is pressed
+         */
         yes() {
             this.$emit("yes");
         },
     },
-}
+};
 </script>

src/components/CopyableInput.vue

@@ -25,38 +25,47 @@ let timeout;
 
 export default {
     props: {
+        /** ID of this input */
         id: {
             type: String,
             default: ""
         },
+        /** Type of input */
         type: {
             type: String,
             default: "text"
         },
+        /** The value of the input */
         modelValue: {
             type: String,
             default: ""
         },
+        /** A placeholder to use */
         placeholder: {
             type: String,
             default: ""
         },
+        /** Should the field auto complete */
         autocomplete: {
             type: String,
             default: undefined,
         },
+        /** Is the input required? */
         required: {
             type: Boolean
         },
+        /** Should the input be read only? */
         readonly: {
             type: String,
             default: undefined,
         },
+        /** Is the input disabled? */
         disabled: {
             type: String,
             default: undefined,
         },
     },
+    emits: [ "update:modelValue" ],
     data() {
         return {
             visibility: "password",
@@ -78,14 +87,21 @@ export default {
     },
     methods: {
 
+        /** Show the input */
         showInput() {
             this.visibility = "text";
         },
 
+        /** Hide the input */
         hideInput() {
             this.visibility = "password";
         },
 
+        /**
+         * Copy the provided text to the users clipboard
+         * @param {string} textToCopy
+         * @returns {Promise<void>}
+         */
         copyToClipboard(textToCopy) {
             this.icon = "check";
 

src/components/CountUp.vue

@@ -5,16 +5,21 @@
 
 <script lang="ts">
 
-import { sleep } from "../util.ts"
+import { sleep } from "../util.ts";
 
 export default {
 
     props: {
-        value: [String, Number],
+        /** Value to count */
+        value: {
+            type: [ String, Number ],
+            default: 0,
+        },
         time: {
             type: Number,
             default: 0.3,
         },
+        /** Unit of the value */
         unit: {
             type: String,
             default: "ms",
@@ -25,12 +30,12 @@ export default {
         return {
             output: "",
             frameDuration: 30,
-        }
+        };
     },
 
     computed: {
         isNum() {
-            return typeof this.value === "number"
+            return typeof this.value === "number";
         },
     },
 
@@ -40,12 +45,10 @@ export default {
             let frames = 12;
             let step = Math.floor(diff / frames);
 
-            if (isNaN(step) || ! this.isNum || (diff > 0 && step < 1) || (diff < 0 && step > 1) || diff === 0) {
-                // Lazy to NOT this condition, hahaha.
-            } else {
+            if (! (isNaN(step) || ! this.isNum || (diff > 0 && step < 1) || (diff < 0 && step > 1) || diff === 0)) {
                 for (let i = 1; i < frames; i++) {
                     this.output += step;
-                    await sleep(15)
+                    await sleep(15);
                 }
             }
 
@@ -59,5 +62,5 @@ export default {
 
     methods: {},
 
-}
+};
 </script>

src/components/Datetime.vue

@@ -3,17 +3,14 @@
 </template>
 
 <script>
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime"
-import utc from "dayjs/plugin/utc"
-import timezone from "dayjs/plugin/timezone" // dependent on utc plugin
-dayjs.extend(utc)
-dayjs.extend(timezone)
-dayjs.extend(relativeTime)
-
 export default {
     props: {
-        value: String,
+        /** Value of date time */
+        value: {
+            type: String,
+            default: null,
+        },
+        /** Should only the date be displayed? */
         dateOnly: {
             type: Boolean,
             default: false,
@@ -29,5 +26,5 @@ export default {
             }
         },
     },
-}
+};
 </script>

src/components/DockerHostDialog.vue

@@ -0,0 +1,186 @@
+<template>
+    <form @submit.prevent="submit">
+        <div ref="modal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 id="exampleModalLabel" class="modal-title">
+                            {{ $t("Setup Docker Host") }}
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label for="docker-name" class="form-label">{{ $t("Friendly Name") }}</label>
+                            <input id="docker-name" v-model="dockerHost.name" type="text" class="form-control" required>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="docker-type" class="form-label">{{ $t("Connection Type") }}</label>
+                            <select id="docker-type" v-model="dockerHost.dockerType" class="form-select">
+                                <option v-for="type in connectionTypes" :key="type" :value="type">{{ $t(type) }}</option>
+                            </select>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="docker-daemon" class="form-label">{{ $t("Docker Daemon") }}</label>
+                            <input id="docker-daemon" v-model="dockerHost.dockerDaemon" type="text" class="form-control" required>
+
+                            <div class="form-text">
+                                {{ $t("Examples") }}:
+                                <ul>
+                                    <li>/var/run/docker.sock</li>
+                                    <li>http://localhost:2375</li>
+                                    <li>https://localhost:2376 (TLS)</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="modal-footer">
+                        <button v-if="id" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
+                            {{ $t("Delete") }}
+                        </button>
+                        <button type="button" class="btn btn-warning" :disabled="processing" @click="test">
+                            {{ $t("Test") }}
+                        </button>
+                        <button type="submit" class="btn btn-primary" :disabled="processing">
+                            <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
+                            {{ $t("Save") }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+
+    <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteDockerHost">
+        {{ $t("deleteDockerHostMsg") }}
+    </Confirm>
+</template>
+
+<script lang="ts">
+import { Modal } from "bootstrap";
+import Confirm from "./Confirm.vue";
+import { useToast } from "vue-toastification";
+const toast = useToast();
+
+export default {
+    components: {
+        Confirm,
+    },
+    props: {},
+    emits: [ "added" ],
+    data() {
+        return {
+            modal: null,
+            processing: false,
+            id: null,
+            connectionTypes: [ "socket", "tcp" ],
+            dockerHost: {
+                name: "",
+                dockerDaemon: "",
+                dockerType: "",
+                // Do not set default value here, please scroll to show()
+            }
+        };
+    },
+
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+    methods: {
+
+        /** Confirm deletion of docker host */
+        deleteConfirm() {
+            this.modal.hide();
+            this.$refs.confirmDelete.show();
+        },
+
+        /**
+         * Show specified docker host
+         * @param {number} dockerHostID
+         */
+        show(dockerHostID) {
+            if (dockerHostID) {
+                let found = false;
+
+                this.id = dockerHostID;
+
+                for (let n of this.$root.dockerHostList) {
+                    if (n.id === dockerHostID) {
+                        this.dockerHost = n;
+                        found = true;
+                        break;
+                    }
+                }
+
+                if (!found) {
+                    toast.error("Docker Host not found!");
+                }
+
+            } else {
+                this.id = null;
+                this.dockerHost = {
+                    name: "",
+                    dockerType: "socket",
+                    dockerDaemon: "/var/run/docker.sock",
+                };
+            }
+
+            this.modal.show();
+        },
+
+        /** Add docker host */
+        submit() {
+            this.processing = true;
+            this.$root.getSocket().emit("addDockerHost", this.dockerHost, this.id, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok) {
+                    this.modal.hide();
+
+                    // Emit added event, doesn't emit edit.
+                    if (! this.id) {
+                        this.$emit("added", res.id);
+                    }
+
+                }
+            });
+        },
+
+        /** Test the docker host */
+        test() {
+            this.processing = true;
+            this.$root.getSocket().emit("testDockerHost", this.dockerHost, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+            });
+        },
+
+        /** Delete this docker host */
+        deleteDockerHost() {
+            this.processing = true;
+            this.$root.getSocket().emit("deleteDockerHost", this.id, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok) {
+                    this.modal.hide();
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+</style>

src/components/HeartbeatBar.vue

@@ -5,7 +5,7 @@
                 v-for="(beat, index) in shortBeatList"
                 :key="index"
                 class="beat"
-                :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2) }"
+                :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2), 'maintenance' : (beat.status === 3) }"
                 :style="beatStyle"
                 :title="getBeatTitle(beat)"
             />
@@ -17,14 +17,17 @@
 
 export default {
     props: {
+        /** Size of the heartbeat bar */
         size: {
             type: String,
             default: "big",
         },
+        /** ID of the monitor */
         monitorId: {
             type: Number,
             required: true,
         },
+        /** Array of the monitors heartbeats */
         heartbeatList: {
             type: Array,
             default: null,
@@ -38,7 +41,7 @@ export default {
             beatMargin: 4,
             move: false,
             maxBeat: -1,
-        }
+        };
     },
     computed: {
 
@@ -69,12 +72,12 @@ export default {
             if (start < 0) {
                 // Add empty placeholder
                 for (let i = start; i < 0; i++) {
-                    placeholders.push(0)
+                    placeholders.push(0);
                 }
                 start = 0;
             }
 
-            return placeholders.concat(this.beatList.slice(start))
+            return placeholders.concat(this.beatList.slice(start));
         },
 
         wrapStyle() {
@@ -84,7 +87,7 @@ export default {
             return {
                 padding: `${topBottom}px ${leftRight}px`,
                 width: "100%",
-            }
+            };
         },
 
         barStyle() {
@@ -94,12 +97,12 @@ export default {
                 return {
                     transition: "all ease-in-out 0.25s",
                     transform: `translateX(${width}px)`,
-                }
+                };
 
             }
             return {
                 transform: "translateX(0)",
-            }
+            };
 
         },
 
@@ -109,7 +112,7 @@ export default {
                 height: this.beatHeight + "px",
                 margin: this.beatMargin + "px",
                 "--hover-scale": this.hoverScale,
-            }
+            };
         },
 
     },
@@ -120,7 +123,7 @@ export default {
 
                 setTimeout(() => {
                     this.move = false;
-                }, 300)
+                }, 300);
             },
             deep: true,
         },
@@ -160,17 +163,25 @@ export default {
         this.resize();
     },
     methods: {
+        /** Resize the heartbeat bar */
         resize() {
             if (this.$refs.wrap) {
-                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2))
+                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
             }
         },
 
+        /**
+         * Get the title of the beat.
+         * Used as the hover tooltip on the heartbeat bar.
+         * @param {Object} beat Beat to get title from
+         * @returns {string}
+         */
         getBeatTitle(beat) {
-            return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : ``);
-        }
+            return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : "");
+        },
+
     },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -200,6 +211,10 @@ export default {
             background-color: $warning;
         }
 
+        &.maintenance {
+            background-color: $maintenance;
+        }
+
         &:not(.empty):hover {
             transition: all ease-in-out 0.15s;
             opacity: 0.8;

src/components/HiddenInput.vue

@@ -24,42 +24,49 @@
 <script>
 export default {
     props: {
+        /** The value of the input */
         modelValue: {
             type: String,
             default: ""
         },
+        /** A placeholder to use */
         placeholder: {
             type: String,
             default: ""
         },
+        /** Maximum length of the input */
         maxlength: {
             type: Number,
             default: 255
         },
+        /** Should the field auto complete */
         autocomplete: {
             type: String,
-            default: undefined,
+            default: "new-password",
         },
+        /** Is the input required? */
         required: {
             type: Boolean
         },
+        /** Should the input be read only? */
         readonly: {
             type: String,
             default: undefined,
         },
     },
+    emits: [ "update:modelValue" ],
     data() {
         return {
             visibility: "password",
-        }
+        };
     },
     computed: {
         model: {
             get() {
-                return this.modelValue
+                return this.modelValue;
             },
             set(value) {
-                this.$emit("update:modelValue", value)
+                this.$emit("update:modelValue", value);
             }
         }
     },
@@ -67,12 +74,14 @@ export default {
 
     },
     methods: {
+        /** Show users input in plain text */
         showInput() {
             this.visibility = "text";
         },
+        /** Censor users input */
         hideInput() {
             this.visibility = "password";
         },
     }
-}
+};
 </script>

src/components/Login.vue

@@ -16,8 +16,8 @@
 
                 <div v-if="tokenRequired">
                     <div class="form-floating mt-3">
-                        <input id="floatingToken" v-model="token" type="text" maxlength="6" class="form-control" placeholder="123456">
-                        <label for="floatingToken">{{ $t("Token") }}</label>
+                        <input id="otp" v-model="token" type="text" maxlength="6" class="form-control" placeholder="123456">
+                        <label for="otp">{{ $t("Token") }}</label>
                     </div>
                 </div>
 
@@ -54,7 +54,17 @@ export default {
             tokenRequired: false,
         };
     },
+
+    mounted() {
+        document.title += " - Login";
+    },
+
+    unmounted() {
+        document.title = document.title.replace(" - Login", "");
+    },
+
     methods: {
+        /** Submit the user details and attempt to log in */
         submit() {
             this.processing = true;
 

src/components/MaintenanceTime.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div v-if="maintenance.strategy === 'manual'" class="timeslot">
+            {{ $t("Manual") }}
+        </div>
+        <div v-else-if="maintenance.timeslotList.length > 0" class="timeslot">
+            {{ maintenance.timeslotList[0].startDateServerTimezone }}
+            <span class="to">-</span>
+            {{ maintenance.timeslotList[0].endDateServerTimezone }}
+            (UTC{{ maintenance.timeslotList[0].serverTimezoneOffset }})
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        maintenance: {
+            type: Object,
+            required: true
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.timeslot {
+    margin-top: 5px;
+    display: inline-block;
+    font-size: 14px;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 20px;
+    padding: 0 10px;
+
+    .to {
+        margin: 0 6px;
+    }
+
+    .dark & {
+        color: white;
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+</style>

src/components/MonitorList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="shadow-box mb-3">
+    <div class="shadow-box mb-3" :style="boxStyle">
         <div class="list-header">
             <div class="placeholder"></div>
             <div class="search-wrapper">
@@ -9,7 +9,9 @@
                 <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
                     <font-awesome-icon icon="times" />
                 </a>
-                <input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" />
+                <form>
+                    <input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" autocomplete="off" />
+                </form>
             </div>
         </div>
         <div class="monitor-list" :class="{ scrollbar: scrollbar }">
@@ -19,7 +21,7 @@
 
             <router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }">
                 <div class="row">
-                    <div class="col-9 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
+                    <div class="col-9 col-md-8 small-padding" :class="{ 'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
                         <div class="info">
                             <Uptime :monitor="item" type="24" :pill="true" />
                             {{ item.name }}
@@ -37,7 +39,7 @@
                 </div>
 
                 <div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
-                    <div class="col-12">
+                    <div class="col-12 bottom-style">
                         <HeartbeatBar size="small" :monitor-id="item.id" />
                     </div>
                 </div>
@@ -48,8 +50,8 @@
 
 <script>
 import HeartbeatBar from "../components/HeartbeatBar.vue";
-import Uptime from "../components/Uptime.vue";
 import Tag from "../components/Tag.vue";
+import Uptime from "../components/Uptime.vue";
 import { getMonitorRelativeURL } from "../util.ts";
 
 export default {
@@ -59,6 +61,7 @@ export default {
         Tag,
     },
     props: {
+        /** Should the scrollbar be shown */
         scrollbar: {
             type: Boolean,
         },
@@ -66,9 +69,28 @@ export default {
     data() {
         return {
             searchText: "",
+            windowTop: 0,
         };
     },
     computed: {
+        /**
+         * Improve the sticky appearance of the list by increasing its
+         * height as user scrolls down.
+         * Not used on mobile.
+         */
+        boxStyle() {
+            if (window.innerWidth > 550) {
+                return {
+                    height: `calc(100vh - 160px + ${this.windowTop}px)`,
+                };
+            } else {
+                return {
+                    height: "calc(100vh - 160px)",
+                };
+            }
+
+        },
+
         sortedMonitorList() {
             let result = Object.values(this.$root.monitorList);
 
@@ -99,7 +121,7 @@ export default {
 
             // Simple filter by search text
             // finds monitor name, tag name or tag value
-            if (this.searchText != "") {
+            if (this.searchText !== "") {
                 const loweredSearchText = this.searchText.toLowerCase();
                 result = result.filter(monitor => {
                     return monitor.name.toLowerCase().includes(loweredSearchText)
@@ -111,10 +133,30 @@ export default {
             return result;
         },
     },
+    mounted() {
+        window.addEventListener("scroll", this.onScroll);
+    },
+    beforeUnmount() {
+        window.removeEventListener("scroll", this.onScroll);
+    },
     methods: {
+        /** Handle user scroll */
+        onScroll() {
+            if (window.top.scrollY <= 133) {
+                this.windowTop = window.top.scrollY;
+            } else {
+                this.windowTop = 133;
+            }
+        },
+        /**
+         * Get URL of monitor
+         * @param {number} id ID of monitor
+         * @returns {string} Relative URL of monitor
+         */
         monitorURL(id) {
             return getMonitorRelativeURL(id);
         },
+        /** Clear the search bar */
         clearSearchText() {
             this.searchText = "";
         }
@@ -125,6 +167,12 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars.scss";
 
+.shadow-box {
+    height: calc(100vh - 150px);
+    position: sticky;
+    top: 10px;
+}
+
 .small-padding {
     padding-left: 5px !important;
     padding-right: 5px !important;
@@ -161,20 +209,37 @@ export default {
 .search-icon {
     padding: 10px;
     color: #c0c0c0;
+
+    // Clear filter button (X)
+    svg[data-icon="times"] {
+        cursor: pointer;
+        transition: all ease-in-out 0.1s;
+
+        &:hover {
+            opacity: 0.5;
+        }
+    }
 }
 
 .search-input {
     max-width: 15em;
 }
 
-.monitorItem {
+.monitor-item {
     width: 100%;
 }
 
 .tags {
-    padding-left: 62px;
+    margin-top: 4px;
+    padding-left: 67px;
     display: flex;
     flex-wrap: wrap;
     gap: 0;
 }
+
+.bottom-style {
+    padding-left: 67px;
+    margin-top: 5px;
+}
+
 </style>

src/components/NotificationDialog.vue

@@ -13,7 +13,10 @@
                         <div class="mb-3">
                             <label for="notification-type" class="form-label">{{ $t("Notification Type") }}</label>
                             <select id="notification-type" v-model="notification.type" class="form-select">
-                                <option v-for="type in notificationTypes" :key="type" :value="type">{{ $t(type) }}</option>
+                                <option v-for="(name, type) in notificationNameList.regularList" :key="type" :value="type">{{ name }}</option>
+                                <optgroup :label="$t('notificationRegional')">
+                                    <option v-for="(name, type) in notificationNameList.regionalList" :key="type" :value="type">{{ name }}</option>
+                                </optgroup>
                             </select>
                         </div>
 
@@ -67,9 +70,8 @@
     </Confirm>
 </template>
 
-<script lang="ts">
+<script>
 import { Modal } from "bootstrap";
-import { ucfirst } from "../util.ts";
 
 import Confirm from "./Confirm.vue";
 import NotificationFormList from "./notifications";
@@ -79,13 +81,15 @@ export default {
         Confirm,
     },
     props: {},
-    emits: ["added"],
+    emits: [ "added" ],
     data() {
         return {
             model: null,
             processing: false,
             id: null,
-            notificationTypes: Object.keys(NotificationFormList),
+            notificationTypes: Object.keys(NotificationFormList).sort((a, b) => {
+                return a.toLowerCase().localeCompare(b.toLowerCase());
+            }),
             notification: {
                 name: "",
                 /** @type { null | keyof NotificationFormList } */
@@ -102,7 +106,91 @@ export default {
                 return null;
             }
             return NotificationFormList[this.notification.type];
-        }
+        },
+
+        notificationNameList() {
+            let regularList = {
+                "alerta": "Alerta",
+                "AlertNow": "AlertNow",
+                "apprise": this.$t("apprise"),
+                "Bark": "Bark",
+                "clicksendsms": "ClickSend SMS",
+                "discord": "Discord",
+                "GoogleChat": "Google Chat (Google Workspace)",
+                "gorush": "Gorush",
+                "gotify": "Gotify",
+                "HomeAssistant": "Home Assistant",
+                "Kook": "Kook",
+                "line": "LINE Messenger",
+                "LineNotify": "LINE Notify",
+                "lunasea": "LunaSea",
+                "matrix": "Matrix",
+                "mattermost": "Mattermost",
+                "ntfy": "Ntfy",
+                "octopush": "Octopush",
+                "OneBot": "OneBot",
+                "PagerDuty": "PagerDuty",
+                "pushbullet": "Pushbullet",
+                "PushByTechulus": "Push by Techulus",
+                "pushover": "Pushover",
+                "pushy": "Pushy",
+                "rocket.chat": "Rocket.Chat",
+                "signal": "Signal",
+                "slack": "Slack",
+                "squadcast": "SquadCast",
+                "SMSEagle": "SMSEagle",
+                "smtp": this.$t("smtp"),
+                "stackfield": "Stackfield",
+                "teams": "Microsoft Teams",
+                "telegram": "Telegram",
+                "Splunk": "Splunk",
+                "webhook": "Webhook",
+                "GoAlert": "GoAlert",
+                "ZohoCliq": "ZohoCliq"
+            };
+
+            // Put notifications here if it's not supported in most regions or its documentation is not in English
+            let regionalList = {
+                "AliyunSMS": "AliyunSMS (阿里云短信服务)",
+                "DingDing": "DingDing (钉钉自定义机器人)",
+                "Feishu": "Feishu (飞书)",
+                "FreeMobile": "FreeMobile (mobile.free.fr)",
+                "PushDeer": "PushDeer",
+                "promosms": "PromoSMS",
+                "serwersms": "SerwerSMS.pl",
+                "SMSManager": "SmsManager (smsmanager.cz)",
+                "WeCom": "WeCom (企业微信群机器人)",
+                "ServerChan": "ServerChan (Server酱)",
+            };
+
+            // Sort by notification name
+            // No idea how, but it works
+            // https://stackoverflow.com/questions/1069666/sorting-object-property-by-values
+            let sort = (list2) => {
+                return Object.entries(list2)
+                    .sort(([ , a ], [ , b ]) => a.localeCompare(b))
+                    .reduce((r, [ k, v ]) => ({
+                        ...r,
+                        [k]: v
+                    }), {});
+            };
+
+            return {
+                regularList: sort(regularList),
+                regionalList: sort(regionalList),
+            };
+        },
+
+        notificationFullNameList() {
+            let list = {};
+            for (let [ key, value ] of Object.entries(this.notificationNameList.regularList)) {
+                list[key] = value;
+            }
+            for (let [ key, value ] of Object.entries(this.notificationNameList.regionalList)) {
+                list[key] = value;
+            }
+            return list;
+        },
     },
 
     watch: {
@@ -124,11 +212,16 @@ export default {
     },
     methods: {
 
+        /** Show dialog to confirm deletion */
         deleteConfirm() {
             this.modal.hide();
             this.$refs.confirmDelete.show();
         },
 
+        /**
+         * Show settings for specified notification
+         * @param {number} notificationID ID of notification to show
+         */
         show(notificationID) {
             if (notificationID) {
                 this.id = notificationID;
@@ -143,17 +236,15 @@ export default {
                 this.id = null;
                 this.notification = {
                     name: "",
-                    type: null,
+                    type: "telegram",
                     isDefault: false,
                 };
-
-                // Set Default value here
-                this.notification.type = this.notificationTypes[0];
             }
 
             this.modal.show();
         },
 
+        /** Submit the form to the server */
         submit() {
             this.processing = true;
             this.$root.getSocket().emit("addNotification", this.notification, this.id, (res) => {
@@ -172,6 +263,7 @@ export default {
             });
         },
 
+        /** Test the notification endpoint */
         test() {
             this.processing = true;
             this.$root.getSocket().emit("testNotification", this.notification, (res) => {
@@ -180,6 +272,7 @@ export default {
             });
         },
 
+        /** Delete the notification endpoint */
         deleteNotification() {
             this.processing = true;
             this.$root.getSocket().emit("deleteNotification", this.id, (res) => {
@@ -192,15 +285,17 @@ export default {
             });
         },
         /**
+         * Get a unique default name for the notification
          * @param {keyof NotificationFormList} notificationKey
          * @return {string}
          */
         getUniqueDefaultName(notificationKey) {
+
             let index = 1;
             let name = "";
             do {
                 name = this.$t("defaultNotificationName", {
-                    notification: this.$t(notificationKey).replace(/\(.+\)/, "").trim(),
+                    notification: this.notificationFullNameList[notificationKey].replace(/\(.+\)/, "").trim(),
                     number: index++
                 });
             } while (this.$root.notificationList.find(it => it.name === name));

src/components/PingChart.vue

@@ -16,18 +16,14 @@
     </div>
 </template>
 
-<script lang="ts">
+<script lang="js">
 import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
 import "chartjs-adapter-dayjs";
+import dayjs from "dayjs";
 import { LineChart } from "vue-chart-3";
 import { useToast } from "vue-toastification";
-import { UP, DOWN, PENDING } from "../util.ts";
+import { DOWN, PENDING, MAINTENANCE, log } from "../util.ts";
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
 const toast = useToast();
 
 Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
@@ -35,6 +31,7 @@ Chart.register(LineController, BarController, LineElement, PointElement, TimeSca
 export default {
     components: { LineChart },
     props: {
+        /** ID of monitor */
         monitorId: {
             type: Number,
             required: true,
@@ -162,7 +159,8 @@ export default {
         },
         chartData() {
             let pingData = [];  // Ping Data for Line Chart, y-axis contains ping time
-            let downData = [];  // Down Data for Bar Chart, y-axis is 1 if target is down, 0 if target is up
+            let downData = [];  // Down Data for Bar Chart, y-axis is 1 if target is down (red color), under maintenance (blue color) or pending (orange color), 0 if target is up
+            let colorData = []; // Color Data for Bar Chart
 
             let heartbeatList = this.heartbeatList ||
              (this.monitorId in this.$root.heartbeatList && this.$root.heartbeatList[this.monitorId]) ||
@@ -184,8 +182,9 @@ export default {
                     });
                     downData.push({
                         x,
-                        y: beat.status === DOWN ? 1 : 0,
+                        y: (beat.status === DOWN || beat.status === MAINTENANCE || beat.status === PENDING) ? 1 : 0,
                     });
+                    colorData.push((beat.status === MAINTENANCE) ? "rgba(23,71,245,0.41)" : ((beat.status === PENDING) ? "rgba(245,182,23,0.41)" : "#DC354568"));
                 });
 
             return {
@@ -204,7 +203,7 @@ export default {
                         type: "bar",
                         data: downData,
                         borderColor: "#00000000",
-                        backgroundColor: "#DC354568",
+                        backgroundColor: colorData,
                         yAxisID: "y1",
                         barThickness: "flex",
                         barPercentage: 1,
@@ -217,9 +216,11 @@ export default {
     watch: {
         // Update chart data when the selected chart period changes
         chartPeriodHrs: function (newPeriod) {
+
+            // eslint-disable-next-line eqeqeq
             if (newPeriod == "0") {
-                newPeriod = null;
                 this.heartbeatList = null;
+                this.$root.storage().removeItem(`chart-period-${this.monitorId}`);
             } else {
                 this.loading = true;
 
@@ -228,6 +229,7 @@ export default {
                         toast.error(res.msg);
                     } else {
                         this.heartbeatList = res.data;
+                        this.$root.storage()[`chart-period-${this.monitorId}`] = newPeriod;
                     }
                     this.loading = false;
                 });
@@ -239,7 +241,11 @@ export default {
         // And mirror latest change to this.heartbeatList
         this.$watch(() => this.$root.heartbeatList[this.monitorId],
             (heartbeatList) => {
-                if (this.chartPeriodHrs != 0) {
+
+                log.debug("ping_chart", `this.chartPeriodHrs type ${typeof this.chartPeriodHrs}, value: ${this.chartPeriodHrs}`);
+
+                // eslint-disable-next-line eqeqeq
+                if (this.chartPeriodHrs != "0") {
                     const newBeat = heartbeatList.at(-1);
                     if (newBeat && dayjs.utc(newBeat.time) > dayjs.utc(this.heartbeatList.at(-1)?.time)) {
                         this.heartbeatList.push(heartbeatList.at(-1));
@@ -248,6 +254,12 @@ export default {
             },
             { deep: true }
         );
+
+        // Load chart period from storage if saved
+        let period = this.$root.storage()[`chart-period-${this.monitorId}`];
+        if (period != null) {
+            this.chartPeriodHrs = Math.min(period, 6);
+        }
     }
 };
 </script>
@@ -278,7 +290,7 @@ export default {
 
         .dropdown-item {
             border-radius: 0.3rem;
-            padding: 2px 16px 4px 16px;
+            padding: 2px 16px 4px;
 
             .dark & {
                 background: $dark-bg;
@@ -286,6 +298,7 @@ export default {
 
             .dark &:hover {
                 background: $dark-font-color;
+                color: $dark-font-color2;
             }
         }
 

src/components/PluginItem.vue

@@ -0,0 +1,102 @@
+<template>
+    <div v-if="! (!plugin.installed && plugin.local)" class="plugin-item pt-4 pb-2">
+        <div class="info">
+            <h5>{{ plugin.fullName }}</h5>
+            <p class="description">
+                {{ plugin.description }}
+            </p>
+            <span class="version">{{ $t("Version") }}: {{ plugin.version }} <a v-if="plugin.repo" :href="plugin.repo" target="_blank">Repo</a></span>
+        </div>
+        <div class="buttons">
+            <button v-if="status === 'installing'" class="btn btn-primary" disabled>{{ $t("installing") }}</button>
+            <button v-else-if="status === 'uninstalling'" class="btn btn-danger" disabled>{{ $t("uninstalling") }}</button>
+            <button v-else-if="plugin.installed || status === 'installed'" class="btn btn-danger" @click="deleteConfirm">{{ $t("uninstall") }}</button>
+            <button v-else class="btn btn-primary" @click="install">{{ $t("install") }}</button>
+        </div>
+
+        <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="uninstall">
+            {{ $t("confirmUninstallPlugin") }}
+        </Confirm>
+    </div>
+</template>
+
+<script>
+import Confirm from "./Confirm.vue";
+
+export default {
+    components: {
+        Confirm,
+    },
+    props: {
+        plugin: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            status: "",
+        };
+    },
+    methods: {
+        /**
+         * Show confirmation for deleting a tag
+         */
+        deleteConfirm() {
+            this.$refs.confirmDelete.show();
+        },
+
+        install() {
+            this.status = "installing";
+
+            this.$root.getSocket().emit("installPlugin", this.plugin.repo, this.plugin.name, (res) => {
+                if (res.ok) {
+                    this.status = "";
+                    // eslint-disable-next-line vue/no-mutating-props
+                    this.plugin.installed = true;
+                } else {
+                    this.$root.toastRes(res);
+                }
+            });
+        },
+
+        uninstall() {
+            this.status = "uninstalling";
+
+            this.$root.getSocket().emit("uninstallPlugin", this.plugin.name, (res) => {
+                if (res.ok) {
+                    this.status = "";
+                    // eslint-disable-next-line vue/no-mutating-props
+                    this.plugin.installed = false;
+                } else {
+                    this.$root.toastRes(res);
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.plugin-item {
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+
+    .info {
+        margin-right: 10px;
+    }
+
+    .description {
+        font-size: 13px;
+        margin-bottom: 0;
+    }
+
+    .version {
+        font-size: 13px;
+    }
+}
+</style>

src/components/ProxyDialog.vue

@@ -0,0 +1,214 @@
+<template>
+    <form @submit.prevent="submit">
+        <div ref="modal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 id="exampleModalLabel" class="modal-title">
+                            {{ $t("Setup Proxy") }}
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label for="proxy-protocol" class="form-label">{{ $t("Proxy Protocol") }}</label>
+                            <select id="proxy-protocol" v-model="proxy.protocol" class="form-select">
+                                <option value="https">HTTPS</option>
+                                <option value="http">HTTP</option>
+                                <option value="socks">SOCKS</option>
+                                <option value="socks5">SOCKS v5</option>
+                                <option value="socks5h">SOCKS v5 (+DNS)</option>
+                                <option value="socks4">SOCKS v4</option>
+                            </select>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="proxy-host" class="form-label">{{ $t("Proxy Server") }}</label>
+                            <div class="d-flex">
+                                <input id="proxy-host" v-model="proxy.host" type="text" class="form-control" required :placeholder="$t('Server Address')">
+                                <input v-model="proxy.port" type="number" class="form-control ms-2" style="width: 100px;" required min="1" max="65535" :placeholder="$t('Port')">
+                            </div>
+                        </div>
+
+                        <div class="mb-3">
+                            <div class="form-check form-switch">
+                                <input id="mark-auth" v-model="proxy.auth" class="form-check-input" type="checkbox">
+                                <label for="mark-auth" class="form-check-label">{{ $t("Proxy server has authentication") }}</label>
+                            </div>
+                        </div>
+
+                        <div v-if="proxy.auth" class="mb-3">
+                            <label for="proxy-username" class="form-label">{{ $t("User") }}</label>
+                            <input id="proxy-username" v-model="proxy.username" type="text" class="form-control" required>
+                        </div>
+
+                        <div v-if="proxy.auth" class="mb-3">
+                            <label for="proxy-password" class="form-label">{{ $t("Password") }}</label>
+                            <input id="proxy-password" v-model="proxy.password" type="password" class="form-control" required>
+                        </div>
+
+                        <div class="mb-3 mt-4">
+                            <hr class="dropdown-divider mb-4">
+
+                            <div class="form-check form-switch">
+                                <input id="mark-active" v-model="proxy.active" class="form-check-input" type="checkbox">
+                                <label for="mark-active" class="form-check-label">{{ $t("enabled") }}</label>
+                            </div>
+                            <div class="form-text">
+                                {{ $t("enableProxyDescription") }}
+                            </div>
+
+                            <br />
+
+                            <div class="form-check form-switch">
+                                <input id="mark-default" v-model="proxy.default" class="form-check-input" type="checkbox">
+                                <label for="mark-default" class="form-check-label">{{ $t("setAsDefault") }}</label>
+                            </div>
+                            <div class="form-text">
+                                {{ $t("setAsDefaultProxyDescription") }}
+                            </div>
+
+                            <br />
+
+                            <div class="form-check form-switch">
+                                <input id="apply-existing" v-model="proxy.applyExisting" class="form-check-input" type="checkbox">
+                                <label class="form-check-label" for="apply-existing">{{ $t("Apply on all existing monitors") }}</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="modal-footer">
+                        <button v-if="id" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
+                            {{ $t("Delete") }}
+                        </button>
+                        <button type="submit" class="btn btn-primary" :disabled="processing">
+                            <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
+                            {{ $t("Save") }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+
+    <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteProxy">
+        {{ $t("deleteProxyMsg") }}
+    </Confirm>
+</template>
+
+<script lang="ts">
+import { Modal } from "bootstrap";
+
+import Confirm from "./Confirm.vue";
+
+export default {
+    components: {
+        Confirm,
+    },
+    props: {},
+    emits: [ "added" ],
+    data() {
+        return {
+            model: null,
+            processing: false,
+            id: null,
+            proxy: {
+                protocol: null,
+                host: null,
+                port: null,
+                auth: false,
+                username: null,
+                password: null,
+                active: false,
+                default: false,
+                applyExisting: false,
+            }
+        };
+    },
+
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+
+    methods: {
+        /** Show dialog to confirm deletion */
+        deleteConfirm() {
+            this.modal.hide();
+            this.$refs.confirmDelete.show();
+        },
+
+        /**
+         * Show settings for specified proxy
+         * @param {number} proxyID ID of proxy to show
+         */
+        show(proxyID) {
+            if (proxyID) {
+                this.id = proxyID;
+
+                for (let proxy of this.$root.proxyList) {
+                    if (proxy.id === proxyID) {
+                        this.proxy = proxy;
+                        break;
+                    }
+                }
+            } else {
+                this.id = null;
+                this.proxy = {
+                    protocol: "https",
+                    host: null,
+                    port: null,
+                    auth: false,
+                    username: null,
+                    password: null,
+                    active: true,
+                    default: false,
+                    applyExisting: false,
+                };
+            }
+
+            this.modal.show();
+        },
+
+        /** Submit form data for saving */
+        submit() {
+            this.processing = true;
+            this.$root.getSocket().emit("addProxy", this.proxy, this.id, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok) {
+                    this.modal.hide();
+
+                    // Emit added event, doesn't emit edit.
+                    if (! this.id) {
+                        this.$emit("added", res.id);
+                    }
+                }
+            });
+        },
+
+        /** Delete this proxy */
+        deleteProxy() {
+            this.processing = true;
+            this.$root.getSocket().emit("deleteProxy", this.id, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok) {
+                    this.modal.hide();
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+</style>

src/components/PublicGroupList.vue

@@ -39,9 +39,30 @@
                                             <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
 
                                             <Uptime :monitor="monitor.element" type="24" :pill="true" />
-                                            {{ monitor.element.name }}
+                                            <a
+                                                v-if="showLink(monitor)"
+                                                :href="monitor.element.url"
+                                                class="item-name"
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                            >
+                                                {{ monitor.element.name }}
+                                            </a>
+                                            <p v-else class="item-name"> {{ monitor.element.name }} </p>
+                                            <span
+                                                v-if="showLink(monitor, true)"
+                                                title="Toggle Clickable Link"
+                                            >
+                                                <font-awesome-icon
+                                                    v-if="editMode"
+                                                    :class="{'link-active': monitor.element.sendUrl, 'btn-link': true}"
+                                                    icon="link" class="action me-3"
+
+                                                    @click="toggleLink(group.index, monitor.index)"
+                                                />
+                                            </span>
                                         </div>
-                                        <div class="tags">
+                                        <div v-if="showTags" class="tags">
                                             <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
                                         </div>
                                     </div>
@@ -72,10 +93,15 @@ export default {
         Tag,
     },
     props: {
+        /** Are we in edit mode? */
         editMode: {
             type: Boolean,
             required: true,
         },
+        /** Should tags be shown? */
+        showTags: {
+            type: Boolean,
+        }
     },
     data() {
         return {
@@ -91,13 +117,50 @@ export default {
 
     },
     methods: {
+        /**
+         * Remove the specified group
+         * @param {number} index Index of group to remove
+         */
         removeGroup(index) {
             this.$root.publicGroupList.splice(index, 1);
         },
 
+        /**
+         * Remove a monitor from a group
+         * @param {number} groupIndex Index of group to remove monitor
+         * from
+         * @param {number} index Index of monitor to remove
+         */
         removeMonitor(groupIndex, index) {
             this.$root.publicGroupList[groupIndex].monitorList.splice(index, 1);
         },
+
+        /**
+         * Toggle the value of sendUrl
+         * @param {number} groupIndex Index of group monitor is member of
+         * @param {number} index Index of monitor within group
+         */
+        toggleLink(groupIndex, index) {
+            this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl = !this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl;
+        },
+
+        /**
+         * Should a link to the monitor be shown?
+         * Attempts to guess if a link should be shown based upon if
+         * sendUrl is set and if the URL is default or not.
+         * @param {Object} monitor Monitor to check
+         * @param {boolean} [ignoreSendUrl=false] Should the presence of the sendUrl
+         * property be ignored. This will only work in edit mode.
+         * @returns {boolean}
+         */
+        showLink(monitor, ignoreSendUrl = false) {
+            // We must check if there are any elements in monitorList to
+            // prevent undefined errors if it hasn't been loaded yet
+            if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) {
+                return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword";
+            }
+            return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://" && !this.editMode;
+        },
     }
 };
 </script>
@@ -116,6 +179,22 @@ export default {
     min-height: 46px;
 }
 
+.item-name {
+    padding-left: 5px;
+    padding-right: 5px;
+    margin: 0;
+    display: inline-block;
+}
+
+.btn-link {
+    color: #bbbbbb;
+    margin-left: 5px;
+}
+
+.link-active {
+    color: $primary;
+}
+
 .flip-list-move {
     transition: transform 0.5s;
 }
@@ -142,8 +221,12 @@ export default {
 
 .mobile {
     .item {
-        padding: 13px 0 10px 0;
+        padding: 13px 0 10px;
     }
 }
 
+.bg-maintenance {
+    background-color: $maintenance;
+}
+
 </style>

src/components/Status.vue

@@ -5,7 +5,11 @@
 <script>
 export default {
     props: {
-        status: Number,
+        /** Current status of monitor */
+        status: {
+            type: Number,
+            default: 0,
+        }
     },
 
     computed: {
@@ -22,6 +26,10 @@ export default {
                 return "warning";
             }
 
+            if (this.status === 3) {
+                return "maintenance";
+            }
+
             return "secondary";
         },
 
@@ -38,6 +46,10 @@ export default {
                 return this.$t("Pending");
             }
 
+            if (this.status === 3) {
+                return this.$t("statusMaintenance");
+            }
+
             return this.$t("Unknown");
         },
     },

src/components/Tag.vue

@@ -1,13 +1,14 @@
 <template>
-    <div class="tag-wrapper rounded d-inline-flex"
-         :class="{ 'px-3': size == 'normal',
-                   'py-1': size == 'normal',
-                   'm-2': size == 'normal',
-                   'px-2': size == 'sm',
-                   'py-0': size == 'sm',
-                   'm-1': size == 'sm',
-         }"
-         :style="{ backgroundColor: item.color, fontSize: size == 'sm' ? '0.7em' : '1em' }"
+    <div
+        class="tag-wrapper rounded d-inline-flex"
+        :class="{ 'px-3': size == 'normal',
+                  'py-1': size == 'normal',
+                  'm-2': size == 'normal',
+                  'px-2': size == 'sm',
+                  'py-0': size == 'sm',
+                  'm-1': size == 'sm',
+        }"
+        :style="{ backgroundColor: item.color, fontSize: size == 'sm' ? '0.7em' : '1em' }"
     >
         <span class="tag-text">{{ displayText }}</span>
         <span v-if="remove != null" class="ps-1 btn-remove" @click="remove(item)">
@@ -17,16 +18,28 @@
 </template>
 
 <script>
+/**
+* @typedef {import('./TagsManager.vue').Tag} Tag
+*/
+
 export default {
     props: {
+        /** Object representing tag
+         * @type {Tag}
+         */
         item: {
             type: Object,
             required: true,
         },
+        /** Function to remove tag */
         remove: {
             type: Function,
             default: null,
         },
+        /**
+         * Size of tag
+         * @type {"normal" | "small"}
+         */
         size: {
             type: String,
             default: "normal",
@@ -34,14 +47,14 @@ export default {
     },
     computed: {
         displayText() {
-            if (this.item.value == "") {
+            if (this.item.value === "" || this.item.value === undefined) {
                 return this.item.name;
             } else {
                 return `${this.item.name}: ${this.item.value}`;
             }
         }
     }
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/components/TagEditDialog.vue

@@ -0,0 +1,468 @@
+<template>
+    <form @submit.prevent="submit">
+        <div ref="modal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 id="exampleModalLabel" class="modal-title">
+                            {{ $t("Edit Tag") }}
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label for="tag-name" class="form-label">{{ $t("Name") }}</label>
+                            <input
+                                id="tag-name"
+                                v-model="tag.name"
+                                type="text"
+                                class="form-control"
+                                :class="{'is-invalid': nameInvalid}"
+                                required
+                            >
+                            <div class="invalid-feedback">
+                                {{ $t("Tag with this name already exist.") }}
+                            </div>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="tag-color" class="form-label">{{ $t("color") }}</label>
+                            <div class="d-flex">
+                                <div class="col-8 pe-1">
+                                    <vue-multiselect
+                                        v-model="selectedColor"
+                                        :options="colorOptions"
+                                        :multiple="false"
+                                        :searchable="true"
+                                        :placeholder="$t('color')"
+                                        track-by="color"
+                                        label="name"
+                                        select-label=""
+                                        deselect-label=""
+                                    >
+                                        <template #option="{ option }">
+                                            <div
+                                                class="mx-2 py-1 px-3 rounded d-inline-flex"
+                                                style="height: 24px; color: white;"
+                                                :style="{ backgroundColor: option.color + ' !important' }"
+                                            >
+                                                <span>{{ option.name }}</span>
+                                            </div>
+                                        </template>
+                                        <template #singleLabel="{ option }">
+                                            <div
+                                                class="py-1 px-3 rounded d-inline-flex"
+                                                style="height: 24px; color: white;"
+                                                :style="{ backgroundColor: option.color + ' !important' }"
+                                            >
+                                                <span>{{ option.name }}</span>
+                                            </div>
+                                        </template>
+                                    </vue-multiselect>
+                                </div>
+                                <div class="col-4 ps-1">
+                                    <input id="tag-color-hex" v-model="tag.color" type="text" class="form-control">
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="tag-monitors" class="form-label">{{ $tc("Monitor", selectedMonitors.length) }}</label>
+                            <div class="tag-monitors-list">
+                                <router-link v-for="monitor in selectedMonitors" :key="monitor.id" class="d-flex align-items-center justify-content-between text-decoration-none tag-monitors-list-row py-2 px-3" :to="monitorURL(monitor.id)" @click="modal.hide()">
+                                    <span>{{ monitor.name }}</span>
+                                    <button type="button" class="btn-rm-monitor btn btn-outline-danger ms-2 py-1" @click.stop.prevent="removeMonitor(monitor.id)">
+                                        <font-awesome-icon class="" icon="times" />
+                                    </button>
+                                </router-link>
+                            </div>
+                            <div v-if="allMonitorList.length > 0" class="pt-3 px-3">
+                                <label class="form-label">{{ $t("Add a monitor") }}:</label>
+                                <select v-model="selectedAddMonitor" class="form-control">
+                                    <option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="modal-footer">
+                        <button v-if="tag" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
+                            {{ $t("Delete") }}
+                        </button>
+                        <button type="submit" class="btn btn-primary" :disabled="processing">
+                            <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
+                            {{ $t("Save") }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+
+    <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteTag">
+        {{ $t("confirmDeleteTagMsg") }}
+    </Confirm>
+</template>
+
+<script>
+import { Modal } from "bootstrap";
+import Confirm from "./Confirm.vue";
+import VueMultiselect from "vue-multiselect";
+import { colorOptions } from "../util-frontend";
+import { useToast } from "vue-toastification";
+import { getMonitorRelativeURL } from "../util.ts";
+const toast = useToast();
+
+export default {
+    components: {
+        VueMultiselect,
+        Confirm,
+    },
+    props: {
+        updated: {
+            type: Function,
+            default: () => {},
+        },
+        existingTags: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data() {
+        return {
+            modal: null,
+            processing: false,
+            selectedColor: {
+                name: null,
+                color: null,
+            },
+            tag: {
+                id: null,
+                name: "",
+                color: "",
+                // Do not set default value here, please scroll to show()
+            },
+            monitors: [],
+            removingMonitor: [],
+            addingMonitor: [],
+            selectedAddMonitor: null,
+            nameInvalid: false,
+        };
+    },
+
+    computed: {
+        colorOptions() {
+            if (!colorOptions(this).find(option => option.color === this.tag.color)) {
+                return colorOptions(this).concat(
+                    {
+                        name: "custom",
+                        color: this.tag.color
+                    });
+            } else {
+                return colorOptions(this);
+            }
+        },
+        selectedMonitors() {
+            return this.monitors
+                .concat(Object.values(this.$root.monitorList).filter(monitor => this.addingMonitor.includes(monitor.id)))
+                .filter(monitor => !this.removingMonitor.includes(monitor.id));
+        },
+        allMonitorList() {
+            return Object.values(this.$root.monitorList).filter(monitor => !this.selectedMonitors.includes(monitor));
+        },
+    },
+
+    watch: {
+        // Set color option to "Custom" when a unknown color is entered
+        "tag.color"(to, from) {
+            if (to !== "" && colorOptions(this).find(x => x.color === to) == null) {
+                this.selectedColor.name = this.$t("Custom");
+                this.selectedColor.color = to;
+            }
+        },
+        "tag.name"(to, from) {
+            if (to != null) {
+                this.validate();
+            }
+        },
+        selectedColor(to, from) {
+            if (to != null) {
+                this.tag.color = to.color;
+            }
+        },
+        /**
+         * Selected a monitor and add to the list.
+         */
+        selectedAddMonitor(monitor) {
+            if (monitor) {
+                if (this.removingMonitor.includes(monitor.id)) {
+                    this.removingMonitor = this.removingMonitor.filter(id => id !== monitor.id);
+                } else {
+                    this.addingMonitor.push(monitor.id);
+                }
+                this.selectedAddMonitor = null;
+            }
+        },
+    },
+
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+
+    methods: {
+        /**
+         * Show confirmation for deleting a tag
+         */
+        deleteConfirm() {
+            this.$refs.confirmDelete.show();
+        },
+
+        /**
+         * Reset the editTag form
+         */
+        reset() {
+            this.selectedColor = null;
+            this.tag = {
+                id: null,
+                name: "",
+                color: "",
+            };
+            this.monitors = [];
+            this.removingMonitor = [];
+            this.addingMonitor = [];
+        },
+
+        /**
+         * Check for existing tags of the same name, set invalid input
+         * @returns {boolean} True if editing tag is valid
+         */
+        validate() {
+            this.nameInvalid = false;
+            const sameName = this.existingTags.find((existingTag) => existingTag.name === this.tag.name);
+            if (sameName != null && sameName.id !== this.tag.id) {
+                this.nameInvalid = true;
+                return false;
+            }
+            return true;
+        },
+
+        /**
+         * Load tag information for display in the edit dialog
+         * @param {Object} tag tag object to edit
+         * @returns {void}
+         */
+        show(tag) {
+            if (tag) {
+                this.selectedColor = this.colorOptions.find(x => x.color === tag.color) ?? {
+                    name: this.$t("Custom"),
+                    color: tag.color
+                };
+                this.tag.id = tag.id;
+                this.tag.name = tag.name;
+                this.tag.color = tag.color;
+                this.monitors = this.monitorsByTag(tag.id);
+                this.removingMonitor = [];
+                this.addingMonitor = [];
+                this.selectedAddMonitor = null;
+            }
+
+            this.modal.show();
+        },
+
+        /**
+         * Submit tag and monitorTag changes to server
+         * @returns {void}
+         */
+        async submit() {
+            this.processing = true;
+            let editResult = true;
+
+            if (!this.validate()) {
+                this.processing = false;
+                return;
+            }
+
+            if (this.tag.id == null) {
+                await this.addTagAsync(this.tag).then((res) => {
+                    if (!res.ok) {
+                        this.$root.toastRes(res.msg);
+                        editResult = false;
+                    } else {
+                        this.tag.id = res.tag.id;
+                        this.updated();
+                    }
+                });
+            }
+
+            if (!editResult) {
+                return;
+            }
+
+            for (let addId of this.addingMonitor) {
+                await this.addMonitorTagAsync(this.tag.id, addId, "").then((res) => {
+                    if (!res.ok) {
+                        toast.error(res.msg);
+                        editResult = false;
+                    }
+                });
+            }
+
+            for (let removeId of this.removingMonitor) {
+                this.monitors.find(monitor => monitor.id === removeId)?.tags.forEach(async (monitorTag) => {
+                    await this.deleteMonitorTagAsync(this.tag.id, removeId, monitorTag.value).then((res) => {
+                        if (!res.ok) {
+                            toast.error(res.msg);
+                            editResult = false;
+                        }
+                    });
+                });
+            }
+
+            this.$root.getSocket().emit("editTag", this.tag, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok && editResult) {
+                    this.updated();
+                    this.modal.hide();
+                }
+            });
+        },
+
+        /**
+         * Delete the editing tag from server
+         * @returns {void}
+         */
+        async deleteTag() {
+            this.processing = true;
+            await this.deleteTagAsync(this.tag.id).then((res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok) {
+                    this.updated();
+                    this.modal.hide();
+                }
+            });
+        },
+
+        /**
+         * Remove a monitor from the monitors list locally
+         * @param {number} id id of the tag to remove
+         * @returns {void}
+         */
+        removeMonitor(id) {
+            if (this.addingMonitor.includes(id)) {
+                this.addingMonitor = this.addingMonitor.filter(x => x !== id);
+            } else {
+                this.removingMonitor.push(id);
+            }
+        },
+
+        /**
+         * Get monitors which has a specific tag locally
+         * @param {number} tagId id of the tag to filter
+         * @returns {Object[]} list of monitors which has a specific tag
+         */
+        monitorsByTag(tagId) {
+            return Object.values(this.$root.monitorList).filter((monitor) => {
+                return monitor.tags.find(monitorTag => monitorTag.tag_id === tagId);
+            });
+        },
+
+        /**
+         * Get URL of monitor
+         * @param {number} id ID of monitor
+         * @returns {string} Relative URL of monitor
+         */
+        monitorURL(id) {
+            return getMonitorRelativeURL(id);
+        },
+
+        /**
+         * Add a tag asynchronously
+         * @param {Object} newTag Object representing new tag to add
+         * @returns {Promise<void>}
+         */
+        addTagAsync(newTag) {
+            return new Promise((resolve) => {
+                this.$root.getSocket().emit("addTag", newTag, resolve);
+            });
+        },
+
+        /**
+         * Delete a tag asynchronously
+         * @param {number} tagId ID of tag to delete
+         * @returns {Promise<void>}
+         */
+        deleteTagAsync(tagId) {
+            return new Promise((resolve) => {
+                this.$root.getSocket().emit("deleteTag", tagId, resolve);
+            });
+        },
+
+        /**
+         * Add a tag to a monitor asynchronously
+         * @param {number} tagId ID of tag to add
+         * @param {number} monitorId ID of monitor to add tag to
+         * @param {string} value Value of tag
+         * @returns {Promise<void>}
+         */
+        addMonitorTagAsync(tagId, monitorId, value) {
+            return new Promise((resolve) => {
+                this.$root.getSocket().emit("addMonitorTag", tagId, monitorId, value, resolve);
+            });
+        },
+        /**
+         * Delete a tag from a monitor asynchronously
+         * @param {number} tagId ID of tag to remove
+         * @param {number} monitorId ID of monitor to remove tag from
+         * @param {string} value Value of tag
+         * @returns {Promise<void>}
+         */
+        deleteMonitorTagAsync(tagId, monitorId, value) {
+            return new Promise((resolve) => {
+                this.$root.getSocket().emit("deleteMonitorTag", tagId, monitorId, value, resolve);
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+
+.btn-rm-monitor {
+    padding-left: 11px;
+    padding-right: 11px;
+}
+
+.tag-monitors-list {
+    max-height: 40vh;
+    overflow-y: scroll;
+}
+
+.tag-monitors-list .tag-monitors-list-row {
+    cursor: pointer;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+
+    .dark & {
+        border-bottom: 1px solid $dark-border-color;
+    }
+
+    &:hover {
+        background-color: $highlight-white;
+    }
+
+    .dark &:hover {
+        background-color: $dark-bg2;
+    }
+}
+
+</style>

src/components/TagsManager.vue

@@ -34,18 +34,20 @@
                             label="name"
                         >
                             <template #option="{ option }">
-                                <div class="mx-2 py-1 px-3 rounded d-inline-flex"
-                                     style="margin-top: -5px; margin-bottom: -5px; height: 24px;"
-                                     :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
+                                <div
+                                    class="mx-2 py-1 px-3 rounded d-inline-flex"
+                                    style="margin-top: -5px; margin-bottom: -5px; height: 24px;"
+                                    :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
                                 >
                                     <span>
                                         {{ option.name }}</span>
                                 </div>
                             </template>
                             <template #singleLabel="{ option }">
-                                <div class="py-1 px-3 rounded d-inline-flex"
-                                     style="height: 24px;"
-                                     :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
+                                <div
+                                    class="py-1 px-3 rounded d-inline-flex"
+                                    style="height: 24px;"
+                                    :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
                                 >
                                     <span>{{ option.name }}</span>
                                 </div>
@@ -53,10 +55,11 @@
                         </vue-multiselect>
                         <div v-if="newDraftTag.select?.name == null" class="d-flex mb-2">
                             <div class="w-50 pe-2">
-                                <input v-model="newDraftTag.name" class="form-control"
-                                       :class="{'is-invalid': validateDraftTag.nameInvalid}"
-                                       :placeholder="$t('Name')"
-                                       @keydown.enter.prevent="onEnter"
+                                <input
+                                    v-model="newDraftTag.name" class="form-control"
+                                    :class="{'is-invalid': validateDraftTag.nameInvalid}"
+                                    :placeholder="$t('Name')"
+                                    @keydown.enter.prevent="onEnter"
                                 />
                                 <div class="invalid-feedback">
                                     {{ $t("Tag with this name already exist.") }}
@@ -75,17 +78,19 @@
                                     deselect-label=""
                                 >
                                     <template #option="{ option }">
-                                        <div class="mx-2 py-1 px-3 rounded d-inline-flex"
-                                             style="height: 24px; color: white;"
-                                             :style="{ backgroundColor: option.color + ' !important' }"
+                                        <div
+                                            class="mx-2 py-1 px-3 rounded d-inline-flex"
+                                            style="height: 24px; color: white;"
+                                            :style="{ backgroundColor: option.color + ' !important' }"
                                         >
                                             <span>{{ option.name }}</span>
                                         </div>
                                     </template>
                                     <template #singleLabel="{ option }">
-                                        <div class="py-1 px-3 rounded d-inline-flex"
-                                             style="height: 24px; color: white;"
-                                             :style="{ backgroundColor: option.color + ' !important' }"
+                                        <div
+                                            class="py-1 px-3 rounded d-inline-flex"
+                                            style="height: 24px; color: white;"
+                                            :style="{ backgroundColor: option.color + ' !important' }"
                                         >
                                             <span>{{ option.name }}</span>
                                         </div>
@@ -94,10 +99,11 @@
                             </div>
                         </div>
                         <div class="mb-2">
-                            <input v-model="newDraftTag.value" class="form-control"
-                                   :class="{'is-invalid': validateDraftTag.valueInvalid}"
-                                   :placeholder="$t('value (optional)')"
-                                   @keydown.enter.prevent="onEnter"
+                            <input
+                                v-model="newDraftTag.value" class="form-control"
+                                :class="{'is-invalid': validateDraftTag.valueInvalid}"
+                                :placeholder="$t('value (optional)')"
+                                @keydown.enter.prevent="onEnter"
                             />
                             <div class="invalid-feedback">
                                 {{ $t("Tag with this value already exist.") }}
@@ -123,16 +129,32 @@
 <script>
 import { Modal } from "bootstrap";
 import VueMultiselect from "vue-multiselect";
-import Tag from "../components/Tag.vue";
 import { useToast } from "vue-toastification";
+import { colorOptions } from "../util-frontend";
+import Tag from "../components/Tag.vue";
 const toast = useToast();
 
+/**
+ * @typedef Tag
+ * @type {object}
+ * @property {number | undefined} id
+ * @property {number | undefined} monitor_id
+ * @property {number | undefined} tag_id
+ * @property {string} value
+ * @property {string} name
+ * @property {string} color
+ * @property {boolean | undefined} new
+ */
+
 export default {
     components: {
         Tag,
         VueMultiselect,
     },
     props: {
+        /** Array of tags to be pre-selected
+         * @type {Tag[]}
+         */
         preSelectedTags: {
             type: Array,
             default: () => [],
@@ -140,10 +162,14 @@ export default {
     },
     data() {
         return {
+            /** @type {Modal | null} */
             modal: null,
+            /** @type {Tag[]} */
             existingTags: [],
             processing: false,
+            /** @type {Tag[]} */
             newTags: [],
+            /** @type {Tag[]} */
             deleteTags: [],
             newDraftTag: {
                 name: null,
@@ -159,52 +185,35 @@ export default {
         tagOptions() {
             const tagOptions = this.existingTags;
             for (const tag of this.newTags) {
-                if (!tagOptions.find(t => t.name == tag.name && t.color == tag.color)) {
+                if (!tagOptions.find(t => t.name === tag.name && t.color === tag.color)) {
                     tagOptions.push(tag);
                 }
             }
             return tagOptions;
         },
         selectedTags() {
-            return this.preSelectedTags.concat(this.newTags).filter(tag => !this.deleteTags.find(monitorTag => monitorTag.id == tag.id));
+            return this.preSelectedTags.concat(this.newTags).filter(tag => !this.deleteTags.find(monitorTag => monitorTag.id === tag.id));
         },
         colorOptions() {
-            return [
-                { name: this.$t("Gray"),
-                    color: "#4B5563" },
-                { name: this.$t("Red"),
-                    color: "#DC2626" },
-                { name: this.$t("Orange"),
-                    color: "#D97706" },
-                { name: this.$t("Green"),
-                    color: "#059669" },
-                { name: this.$t("Blue"),
-                    color: "#2563EB" },
-                { name: this.$t("Indigo"),
-                    color: "#4F46E5" },
-                { name: this.$t("Purple"),
-                    color: "#7C3AED" },
-                { name: this.$t("Pink"),
-                    color: "#DB2777" },
-            ];
+            return colorOptions(this);
         },
         validateDraftTag() {
             let nameInvalid = false;
             let valueInvalid = false;
             let invalid = true;
-            if (this.deleteTags.find(tag => tag.name == this.newDraftTag.select?.name && tag.value == this.newDraftTag.value)) {
+            if (this.deleteTags.find(tag => tag.name === this.newDraftTag.select?.name && tag.value === this.newDraftTag.value)) {
                 // Undo removing a Tag
                 nameInvalid = false;
                 valueInvalid = false;
                 invalid = false;
-            } else if (this.existingTags.filter(tag => tag.name === this.newDraftTag.name).length > 0) {
+            } else if (this.existingTags.filter(tag => tag.name === this.newDraftTag.name).length > 0 && this.newDraftTag.select == null) {
                 // Try to create new tag with existing name
                 nameInvalid = true;
                 invalid = true;
             } else if (this.newTags.concat(this.preSelectedTags).filter(tag => (
-                tag.name == this.newDraftTag.select?.name && tag.value == this.newDraftTag.value
+                tag.name === this.newDraftTag.select?.name && tag.value === this.newDraftTag.value
             ) || (
-                tag.name == this.newDraftTag.name && tag.value == this.newDraftTag.value
+                tag.name === this.newDraftTag.name && tag.value === this.newDraftTag.value
             )).length > 0) {
                 // Try to add a tag with existing name and value
                 valueInvalid = true;
@@ -235,9 +244,11 @@ export default {
         this.getExistingTags();
     },
     methods: {
+        /** Show the add tag dialog */
         showAddDialog() {
             this.modal.show();
         },
+        /** Get all existing tags */
         getExistingTags() {
             this.$root.getSocket().emit("getTags", (res) => {
                 if (res.ok) {
@@ -247,15 +258,26 @@ export default {
                 }
             });
         },
+        /**
+         * Delete the specified tag
+         * @param {Object} tag Object representing tag to delete
+         */
         deleteTag(item) {
             if (item.new) {
                 // Undo Adding a new Tag
-                this.newTags = this.newTags.filter(tag => !(tag.name == item.name && tag.value == item.value));
+                this.newTags = this.newTags.filter(tag => !(tag.name === item.name && tag.value === item.value));
             } else {
                 // Remove an Existing Tag
                 this.deleteTags.push(item);
             }
         },
+        /**
+         * Get colour of text inside the tag
+         * @param {Object} option The tag that needs to be displayed.
+         * Defaults to "white" unless the tag has no color, which will
+         * then return the body color (based on application theme)
+         * @returns string
+         */
         textColor(option) {
             if (option.color) {
                 return "white";
@@ -263,12 +285,13 @@ export default {
                 return this.$root.theme === "light" ? "var(--bs-body-color)" : "inherit";
             }
         },
+        /** Add a draft tag */
         addDraftTag() {
             console.log("Adding Draft Tag: ", this.newDraftTag);
             if (this.newDraftTag.select != null) {
-                if (this.deleteTags.find(tag => tag.name == this.newDraftTag.select.name && tag.value == this.newDraftTag.value)) {
+                if (this.deleteTags.find(tag => tag.name === this.newDraftTag.select.name && tag.value === this.newDraftTag.value)) {
                     // Undo removing a tag
-                    this.deleteTags = this.deleteTags.filter(tag => !(tag.name == this.newDraftTag.select.name && tag.value == this.newDraftTag.value));
+                    this.deleteTags = this.deleteTags.filter(tag => !(tag.name === this.newDraftTag.select.name && tag.value === this.newDraftTag.value));
                 } else {
                     // Add an existing Tag
                     this.newTags.push({
@@ -290,6 +313,7 @@ export default {
             }
             this.clearDraftTag();
         },
+        /** Remove a draft tag */
         clearDraftTag() {
             this.newDraftTag = {
                 name: null,
@@ -301,26 +325,51 @@ export default {
             };
             this.modal.hide();
         },
+        /**
+         * Add a tag asynchronously
+         * @param {Object} newTag Object representing new tag to add
+         * @returns {Promise<void>}
+         */
         addTagAsync(newTag) {
             return new Promise((resolve) => {
                 this.$root.getSocket().emit("addTag", newTag, resolve);
             });
         },
+        /**
+         * Add a tag to a monitor asynchronously
+         * @param {number} tagId ID of tag to add
+         * @param {number} monitorId ID of monitor to add tag to
+         * @param {string} value Value of tag
+         * @returns {Promise<void>}
+         */
         addMonitorTagAsync(tagId, monitorId, value) {
             return new Promise((resolve) => {
                 this.$root.getSocket().emit("addMonitorTag", tagId, monitorId, value, resolve);
             });
         },
+        /**
+         * Delete a tag from a monitor asynchronously
+         * @param {number} tagId ID of tag to remove
+         * @param {number} monitorId ID of monitor to remove tag from
+         * @param {string} value Value of tag
+         * @returns {Promise<void>}
+         */
         deleteMonitorTagAsync(tagId, monitorId, value) {
             return new Promise((resolve) => {
                 this.$root.getSocket().emit("deleteMonitorTag", tagId, monitorId, value, resolve);
             });
         },
+        /** Handle pressing Enter key when inside the modal */
         onEnter() {
             if (!this.validateDraftTag.invalid) {
                 this.addDraftTag();
             }
         },
+        /**
+         * Submit the form data
+         * @param {number} monitorId ID of monitor this change affects
+         * @returns {void}
+         */
         async submit(monitorId) {
             console.log(`Submitting tag changes for monitor ${monitorId}...`);
             this.processing = true;
@@ -345,7 +394,7 @@ export default {
                     tagId = newTagResult.id;
                     // Assign the new ID to the tags of the same name & color
                     this.newTags.map(tag => {
-                        if (tag.name == newTag.name && tag.color == newTag.color) {
+                        if (tag.name === newTag.name && tag.color === newTag.color) {
                             tag.id = newTagResult.id;
                         }
                     });

src/components/ToggleSection.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="my-3 py-3">
+        <h5 @click="isOpen = !isOpen">
+            <div
+                class="
+                    w-50
+                    d-flex
+                    justify-content-between
+                    align-items-center
+                    pe-2
+                "
+            >
+                <span class="pb-2">{{ heading }}</span>
+                <font-awesome-icon
+                    icon="chevron-down"
+                    class="animated"
+                    :class="{ open: isOpen }"
+                />
+            </div>
+        </h5>
+        <transition name="slide-fade-up">
+            <div v-if="isOpen" class="mt-3">
+                <slot></slot>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        /** Heading of the section */
+        heading: {
+            type: String,
+            default: "",
+        },
+        /** Should the section be open by default? */
+        defaultOpen: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            isOpen: this.defaultOpen,
+        };
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+h5::after {
+    content: "";
+    display: block;
+    width: 50%;
+    padding-top: 8px;
+    border-bottom: 1px solid $dark-border-color;
+}
+
+.open {
+    transform: rotate(180deg);
+}
+
+.animated {
+    transition: all 0.2s $easing-in;
+}
+</style>

src/components/TwoFADialog.vue

@@ -19,6 +19,19 @@
                             </div>
                             <p v-if="showURI && twoFAStatus == false" class="text-break mt-2">{{ uri }}</p>
 
+                            <div v-if="!(uri && twoFAStatus == false)" class="mb-3">
+                                <label for="current-password" class="form-label">
+                                    {{ $t("Current Password") }}
+                                </label>
+                                <input
+                                    id="current-password"
+                                    v-model="currentPassword"
+                                    type="password"
+                                    class="form-control"
+                                    required
+                                />
+                            </div>
+
                             <button v-if="uri == null && twoFAStatus == false" class="btn btn-primary" type="button" @click="prepare2FA()">
                                 {{ $t("Enable 2FA") }}
                             </button>
@@ -33,7 +46,7 @@
                                     <input v-model="token" type="text" maxlength="6" class="form-control">
                                     <button class="btn btn-outline-primary" type="button" @click="verifyToken()">{{ $t("Verify Token") }}</button>
                                 </div>
-                                <p v-show="tokenValid" class="mt-2" style="color: green">{{ $t("tokenValidSettingsMsg") }}</p>
+                                <p v-show="tokenValid" class="mt-2" style="color: green;">{{ $t("tokenValidSettingsMsg") }}</p>
                             </div>
                         </div>
                     </div>
@@ -59,11 +72,11 @@
 </template>
 
 <script lang="ts">
-import { Modal } from "bootstrap"
+import { Modal } from "bootstrap";
 import Confirm from "./Confirm.vue";
-import VueQrcode from "vue-qrcode"
-import { useToast } from "vue-toastification"
-const toast = useToast()
+import VueQrcode from "vue-qrcode";
+import { useToast } from "vue-toastification";
+const toast = useToast();
 
 export default {
     components: {
@@ -73,35 +86,40 @@ export default {
     props: {},
     data() {
         return {
+            currentPassword: "",
             processing: false,
             uri: null,
             tokenValid: false,
             twoFAStatus: null,
             token: null,
             showURI: false,
-        }
+        };
     },
     mounted() {
-        this.modal = new Modal(this.$refs.modal)
+        this.modal = new Modal(this.$refs.modal);
         this.getStatus();
     },
     methods: {
+        /** Show the dialog */
         show() {
-            this.modal.show()
+            this.modal.show();
         },
 
+        /** Show dialog to confirm enabling 2FA */
         confirmEnableTwoFA() {
-            this.$refs.confirmEnableTwoFA.show()
+            this.$refs.confirmEnableTwoFA.show();
         },
 
+        /** Show dialog to confirm disabling 2FA */
         confirmDisableTwoFA() {
-            this.$refs.confirmDisableTwoFA.show()
+            this.$refs.confirmDisableTwoFA.show();
         },
 
+        /** Prepare 2FA configuration */
         prepare2FA() {
             this.processing = true;
 
-            this.$root.getSocket().emit("prepare2FA", (res) => {
+            this.$root.getSocket().emit("prepare2FA", this.currentPassword, (res) => {
                 this.processing = false;
 
                 if (res.ok) {
@@ -109,51 +127,57 @@ export default {
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
+        /** Save the current 2FA configuration */
         save2FA() {
             this.processing = true;
 
-            this.$root.getSocket().emit("save2FA", (res) => {
+            this.$root.getSocket().emit("save2FA", this.currentPassword, (res) => {
                 this.processing = false;
 
                 if (res.ok) {
-                    this.$root.toastRes(res)
+                    this.$root.toastRes(res);
                     this.getStatus();
+                    this.currentPassword = "";
                     this.modal.hide();
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
+        /** Disable 2FA for this user */
         disable2FA() {
             this.processing = true;
 
-            this.$root.getSocket().emit("disable2FA", (res) => {
+            this.$root.getSocket().emit("disable2FA", this.currentPassword, (res) => {
                 this.processing = false;
 
                 if (res.ok) {
-                    this.$root.toastRes(res)
+                    this.$root.toastRes(res);
                     this.getStatus();
+                    this.currentPassword = "";
                     this.modal.hide();
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
+        /** Verify the token generated by the user */
         verifyToken() {
-            this.$root.getSocket().emit("verifyToken", this.token, (res) => {
+            this.$root.getSocket().emit("verifyToken", this.token, this.currentPassword, (res) => {
                 if (res.ok) {
                     this.tokenValid = res.valid;
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
+        /** Get current status of 2FA */
         getStatus() {
             this.$root.getSocket().emit("twoFAStatus", (res) => {
                 if (res.ok) {
@@ -161,10 +185,10 @@ export default {
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
     },
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/components/Uptime.vue

@@ -1,12 +1,23 @@
 <template>
-    <span :class="className" :title="24 + $t('-hour')">{{ uptime }}</span>
+    <span :class="className" :title="title">{{ uptime }}</span>
 </template>
 
 <script>
+import { DOWN, MAINTENANCE, PENDING, UP } from "../util.ts";
+
 export default {
     props: {
-        monitor: Object,
-        type: String,
+        /** Monitor this represents */
+        monitor: {
+            type: Object,
+            default: null,
+        },
+        /** Type of monitor */
+        type: {
+            type: String,
+            default: null,
+        },
+        /** Is this a pill? */
         pill: {
             type: Boolean,
             default: false,
@@ -15,40 +26,53 @@ export default {
 
     computed: {
         uptime() {
+            if (this.type === "maintenance") {
+                return this.$t("statusMaintenance");
+            }
 
             let key = this.monitor.id + "_" + this.type;
 
             if (this.$root.uptimeList[key] !== undefined) {
-                return Math.round(this.$root.uptimeList[key] * 10000) / 100 + "%";
+                let result = Math.round(this.$root.uptimeList[key] * 10000) / 100;
+                // Only perform sanity check on status page. See louislam/uptime-kuma#2628
+                if (this.$route.path.startsWith("/status") && result > 100) {
+                    return "100%";
+                } else {
+                    return result + "%";
+                }
             }
 
-            return this.$t("notAvailableShort")
+            return this.$t("notAvailableShort");
         },
 
         color() {
-            if (this.lastHeartBeat.status === 0) {
-                return "danger"
+            if (this.lastHeartBeat.status === MAINTENANCE) {
+                return "maintenance";
             }
 
-            if (this.lastHeartBeat.status === 1) {
-                return "primary"
+            if (this.lastHeartBeat.status === DOWN) {
+                return "danger";
             }
 
-            if (this.lastHeartBeat.status === 2) {
-                return "warning"
+            if (this.lastHeartBeat.status === UP) {
+                return "primary";
             }
 
-            return "secondary"
+            if (this.lastHeartBeat.status === PENDING) {
+                return "warning";
+            }
+
+            return "secondary";
         },
 
         lastHeartBeat() {
             if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) {
-                return this.$root.lastHeartbeatList[this.monitor.id]
+                return this.$root.lastHeartbeatList[this.monitor.id];
             }
 
             return {
                 status: -1,
-            }
+            };
         },
 
         className() {
@@ -58,8 +82,16 @@ export default {
 
             return "";
         },
+
+        title() {
+            if (this.type === "720") {
+                return `30${this.$t("-day")}`;
+            }
+
+            return `24${this.$t("-hour")}`;
+        }
     },
-}
+};
 </script>
 
 <style>

src/components/notifications/AlertNow.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="mb-3">
+        <label for="alertnow-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color: red;"><sup>*</sup></span></label>
+        <input id="alertnow-webhook-url" v-model="$parent.notification.alertNowWebhookURL" type="text" class="form-control" required>
+
+        <div class="form-text">
+            <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
+            <i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
+                <a href="https://service.opsnow.com/docs/alertnow/en/user-guide-alertnow-en.html#standard" target="_blank">{{ $t("here") }}</a>
+            </i18n-t>
+        </div>
+    </div>
+</template>

src/components/notifications/Alerta.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="mb-3">
+        <label for="alerta-api-endpoint" class="form-label">{{ $t("alertaApiEndpoint") }}</label>
+        <input id="alerta-api-endpoint" v-model="$parent.notification.alertaApiEndpoint" type="text" class="form-control" required>
+        <label for="alerta-environment" class="form-label">{{ $t("alertaEnvironment") }}</label>
+        <input id="alerta-environment" v-model="$parent.notification.alertaEnvironment" type="text" class="form-control" required>
+        <label for="alerta-api-key" class="form-label">{{ $t("alertaApiKey") }}</label>
+        <input id="alerta-api-key" v-model="$parent.notification.alertaApiKey" type="text" class="form-control" required>
+        <label for="alerta-alert-state" class="form-label">{{ $t("alertaAlertState") }}</label>
+        <input id="alerta-alert-state" v-model="$parent.notification.alertaAlertState" type="text" class="form-control" placeholder="critical" required>
+        <label for="alerta-recover-state" class="form-label">{{ $t("alertaRecoverState") }}</label>
+        <input id="alerta-recover-state" v-model="$parent.notification.alertaRecoverState" type="text" class="form-control" placeholder="cleared" required>
+    </div>
+</template>

src/components/notifications/AliyunSms.vue

@@ -6,7 +6,7 @@
         <label for="secretAccessKey" class="form-label">{{ $t("SecretAccessKey") }}<span style="color: red;"><sup>*</sup></span></label>
         <input id="secretAccessKey" v-model="$parent.notification.secretAccessKey" type="text" class="form-control" required>
 
-        <label for="phonenumber" class="form-label">{{ $t("Phonenumber") }}<span style="color: red;"><sup>*</sup></span></label>
+        <label for="phonenumber" class="form-label">{{ $t("PhoneNumbers") }}<span style="color: red;"><sup>*</sup></span></label>
         <input id="phonenumber" v-model="$parent.notification.phonenumber" type="text" class="form-control" required>
 
         <label for="templateCode" class="form-label">{{ $t("TemplateCode") }}<span style="color: red;"><sup>*</sup></span></label>
@@ -16,7 +16,7 @@
         <input id="signName" v-model="$parent.notification.signName" type="text" class="form-control" required>
 
         <div class="form-text">
-            <p>Sms template must contain parameters: <br> <code>${name} ${time} ${status} ${msg}</code></p>
+            <p>{{ $t("Sms template must contain parameters: ") }}<br> <code>${name} ${time} ${status} ${msg}</code></p>
             <i18n-t tag="p" keypath="Read more:">
                 <a href="https://help.aliyun.com/document_detail/101414.html" target="_blank">https://help.aliyun.com/document_detail/101414.html</a>
             </i18n-t>

src/components/notifications/Apprise.vue

@@ -8,6 +8,9 @@
                 <a href="https://github.com/caronc/apprise/wiki#notification-services" target="_blank">https://github.com/caronc/apprise/wiki#notification-services</a>
             </i18n-t>
         </div>
+
+        <label for="title" class="form-label">{{ $t("Title") }}</label>
+        <input id="title" v-model="$parent.notification.title" type="text" class="form-control">
     </div>
     <div class="mb-3">
         <i18n-t tag="p" keypath="Status:">

src/components/notifications/Bark.vue

@@ -2,9 +2,6 @@
     <div class="mb-3">
         <label for="Bark Endpoint" class="form-label">{{ $t("Bark Endpoint") }}<span style="color: red;"><sup>*</sup></span></label>
         <input id="Bark Endpoint" v-model="$parent.notification.barkEndpoint" type="text" class="form-control" required>
-        <div class="form-text">
-            <p><span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}</p>
-        </div>
         <i18n-t tag="div" keypath="wayToGetTeamsURL" class="form-text">
             <a
                 href="https://github.com/Finb/Bark"
@@ -12,4 +9,45 @@
             >{{ $t("here") }}</a>
         </i18n-t>
     </div>
+    <div class="mb-3">
+        <label for="Bark Group" class="form-label">{{ $t("Bark Group") }}</label>
+        <input id="Bark Group" v-model="$parent.notification.barkGroup" type="text" class="form-control" required>
+    </div>
+    <div class="mb-3">
+        <label for="Bark Sound" class="form-label">{{ $t("Bark Sound") }}</label>
+        <select id="Bark Sound" v-model="$parent.notification.barkSound" class="form-select" required>
+            <option value="alarm">alarm</option>
+            <option value="anticipate">anticipate</option>
+            <option value="bell">bell</option>
+            <option value="birdsong">birdsong</option>
+            <option value="bloom">bloom</option>
+            <option value="calypso">calypso</option>
+            <option value="chime">chime</option>
+            <option value="choo">choo</option>
+            <option value="descent">descent</option>
+            <option value="electronic">electronic</option>
+            <option value="fanfare">fanfare</option>
+            <option value="glass">glass</option>
+            <option value="gotosleep">gotosleep</option>
+            <option value="healthnotification">healthnotification</option>
+            <option value="horn">horn</option>
+            <option value="ladder">ladder</option>
+            <option value="mailsent">mailsent</option>
+            <option value="minuet">minuet</option>
+            <option value="multiwayinvitation">multiwayinvitation</option>
+            <option value="newmail">newmail</option>
+            <option value="newsflash">newsflash</option>
+            <option value="noir">noir</option>
+            <option value="paymentsuccess">paymentsuccess</option>
+            <option value="shake">shake</option>
+            <option value="sherwoodforest">sherwoodforest</option>
+            <option value="silence">silence</option>
+            <option value="spell">spell</option>
+            <option value="suspense">suspense</option>
+            <option value="telegraph">telegraph</option>
+            <option value="tiptoes">tiptoes</option>
+            <option value="typewriters">typewriters</option>
+            <option value="update">update</option>
+        </select>
+    </div>
 </template>

src/components/notifications/ClickSendSMS.vue

@@ -1,13 +1,12 @@
 <template>
     <div class="mb-3">
-        <label for="clicksendsms-login" class="form-label">API Username</label>
-        <div class="form-text">
-            {{ $t("apiCredentials") }}
+        <label for="clicksendsms-login" class="form-label">{{ $t("API Username") }}</label>
+        <i18n-t tag="div" class="form-text" keypath="wayToGetClickSendSMSToken">
             <a href="http://dashboard.clicksend.com/account/subaccounts" target="_blank">{{ $t("here") }}</a>
-        </div>
+        </i18n-t>
         <input id="clicksendsms-login" v-model="$parent.notification.clicksendsmsLogin" type="text" class="form-control" required>
-        <label for="clicksendsms-key" class="form-label">API Key</label>
-        <HiddenInput id="clicksendsms-key" v-model="$parent.notification.clicksendsmsPassword" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <label for="clicksendsms-key" class="form-label">{{ $t("API Key") }}</label>
+        <HiddenInput id="clicksendsms-key" v-model="$parent.notification.clicksendsmsPassword" :required="true" autocomplete="new-password"></HiddenInput>
     </div>
     <div class="mb-3">
         <div class="form-text">
@@ -16,15 +15,15 @@
         </div>
     </div>
     <div class="mb-3">
-        <label for="clicksendsms-to-number" class="form-label">Recipient Number</label>
+        <label for="clicksendsms-to-number" class="form-label">{{ $t("Recipient Number") }}</label>
         <input id="clicksendsms-to-number" v-model="$parent.notification.clicksendsmsToNumber" type="text" minlength="8" maxlength="14" class="form-control" required>
     </div>
     <div class="mb-3">
-        <label for="clicksendsms-sender-name" class="form-label">From Name/Number -
-            <a href="https://help.clicksend.com/article/4kgj7krx00-what-is-a-sender-id-or-sender-number" target="_blank">More Info</a>
+        <label for="clicksendsms-sender-name" class="form-label">{{ $t("From Name/Number") }} -
+            <a href="https://help.clicksend.com/article/4kgj7krx00-what-is-a-sender-id-or-sender-number" target="_blank">{{ $t("Read more") }}</a>
         </label>
         <input id="clicksendsms-sender-name" v-model="$parent.notification.clicksendsmsSenderName" type="text" minlength="3" maxlength="11" class="form-control">
-        <div class="form-text">Leave blank to use a shared sender number.</div>
+        <div class="form-text">{{ $t("Leave blank to use a shared sender number.") }}</div>
     </div>
 </template>
 <script>

src/components/notifications/DingDing.vue

@@ -7,9 +7,9 @@
         <input id="secretKey" v-model="$parent.notification.secretKey" type="text" class="form-control" required>
 
         <div class="form-text">
-            <p>For safety, must use secret key</p>
+            <p>{{ $t("For safety, must use secret key") }}</p>
             <i18n-t tag="p" keypath="Read more:">
-                <a href="https://developers.dingtalk.com/document/robots/custom-robot-access" target="_blank">https://developers.dingtalk.com/document/robots/custom-robot-access</a>
+                <a href="https://developers.dingtalk.com/document/robots/custom-robot-access" target="_blank">https://developers.dingtalk.com/document/robots/custom-robot-access</a> <a href="https://open.dingtalk.com/document/robots/customize-robot-security-settings#title-7fs-kgs-36x" target="_blank">https://open.dingtalk.com/document/robots/customize-robot-security-settings#title-7fs-kgs-36x</a>
             </i18n-t>
         </div>
     </div>

src/components/notifications/FreeMobile.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="mb-3">
+        <label for="freemobileUser" class="form-label">{{ $t("Free Mobile User Identifier") }}<span style="color: red;"><sup>*</sup></span></label>
+        <input id="freemobileUser" v-model="$parent.notification.freemobileUser" type="text" class="form-control" required>
+    </div>
+
+    <div class="mb-3">
+        <label for="freemobilePass" class="form-label">{{ $t("Free Mobile API Key") }}<span style="color: red;"><sup>*</sup></span></label>
+        <input id="freemobilePass" v-model="$parent.notification.freemobilePass" type="text" class="form-control" required>
+    </div>
+</template>
+

src/components/notifications/GoAlert.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="mb-3">
+        <label for="goalert-base-url" class="form-label">{{ $t("Base URL") }}</label>
+        <div class="input-group mb-3">
+            <input id="goalert-base-url" v-model="$parent.notification.goAlertBaseURL" type="text" class="form-control" required>
+        </div>
+        <i18n-t tag="div" keypath="goAlertInfo" class="form-text">
+            <a href="https://goalert.me" target="_blank">https://goalert.me</a>
+        </i18n-t>
+    </div>
+
+    <div class="mb-3">
+        <label for="goalert-token" class="form-label">{{ $t("Token") }}</label>
+        <HiddenInput id="goalert-token" v-model="$parent.notification.goAlertToken" autocomplete="new-password" :required="true"></HiddenInput>
+
+        <div class="form-text">
+            {{ $t("goAlertIntegrationKeyInfo") }}
+        </div>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/GoogleChat.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="mb-3">
+        <label for="google-chat-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color: red;"><sup>*</sup></span></label>
+        <input id="google-chat-webhook-url" v-model="$parent.notification.googleChatWebhookURL" type="text" class="form-control" required>
+
+        <div class="form-text">
+            <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
+            <i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
+                <a href="https://developers.google.com/chat/how-tos/webhooks" target="_blank">https://developers.google.com/chat/how-tos/webhooks</a>
+            </i18n-t>
+        </div>
+    </div>
+</template>

src/components/notifications/Gorush.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="mb-3">
+        <label for="gorush-device-token" class="form-label">{{ $t("Device Token") }}</label><span style="color: red;"><sup>*</sup></span>
+        <div class="input-group mb-3">
+            <input id="gorush-device-token" v-model="$parent.notification.gorushDeviceToken" type="text" class="form-control" required>
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <label for="gorush-server-url" class="form-label">{{ $t("Server URL") }}</label><span style="color: red;"><sup>*</sup></span>
+        <div class="input-group mb-3">
+            <input id="gorush-server-url" v-model="$parent.notification.gorushServerURL" type="text" class="form-control" required>
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <label for="gorush-platform" class="form-label">{{ $t("Platform") }}</label><span style="color: red;"><sup>*</sup></span>
+        <select id="gorush-platform" v-model="$parent.notification.gorushPlatform" class="form-select">
+            <option value="ios">iOS</option>
+            <option value="android">{{ $t("Android") }}</option>
+            <option value="huawei">{{ $t("Huawei") }}</option>
+        </select>
+    </div>
+
+    <div class="mb-3">
+        <label for="gorush-title" class="form-label">{{ $t("Title") }}</label>
+        <input id="gorush-title" v-model="$parent.notification.gorushTitle" type="text" class="form-control">
+    </div>
+
+    <div class="mb-3">
+        <label for="gorush-priority" class="form-label">{{ $t("Priority") }}</label>
+        <select id="gorush-priority" v-model="$parent.notification.gorushPriority" class="form-select">
+            <option value="normal">{{ $t("Normal") }}</option>
+            <option value="high">{{ $t("High") }}</option>
+        </select>
+    </div>
+
+    <div class="mb-3">
+        <label for="gorush-retry" class="form-label">{{ $t("Retry") }}</label>
+        <input id="gorush-retry" v-model="$parent.notification.gorushRetry" type="number" class="form-control">
+    </div>
+
+    <div class="mb-3">
+        <label for="gorush-topic" class="form-label">{{ $t("Topic") }}</label>
+        <input id="gorush-topic" v-model="$parent.notification.gorushTopic" type="text" class="form-control">
+    </div>
+
+    <div class="form-text">
+        <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
+    </div>
+</template>

src/components/notifications/Gotify.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="mb-3">
         <label for="gotify-application-token" class="form-label">{{ $t("Application Token") }}</label>
-        <HiddenInput id="gotify-application-token" v-model="$parent.notification.gotifyapplicationToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="gotify-application-token" v-model="$parent.notification.gotifyapplicationToken" :required="true" autocomplete="new-password"></HiddenInput>
     </div>
     <div class="mb-3">
         <label for="gotify-server-url" class="form-label">{{ $t("Server URL") }}</label>
@@ -28,5 +28,5 @@ export default {
             this.$parent.notification.gotifyPriority = 8;
         }
     },
-}
+};
 </script>

src/components/notifications/HomeAssistant.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="mb-3">
+        <label for="homeAssistantUrl" class="form-label">{{ $t("Home Assistant URL") }}<span style="color: red;"><sup>*</sup></span></label>
+        <input id="homeAssistantUrl" v-model="$parent.notification.homeAssistantUrl" type="url" class="form-control" required>
+    </div>
+
+    <div class="mb-3">
+        <label for="longLivedAccessToken" class="form-label">{{ $t("Long-Lived Access Token") }}<span style="color: red;"><sup>*</sup></span></label>
+        <input id="longLivedAccessToken" v-model="$parent.notification.longLivedAccessToken" type="text" class="form-control" required>
+
+        <div class="form-text">
+            <p>{{ $t("Long-Lived Access Token can be created by clicking on your profile name (bottom left) and scrolling to the bottom then click Create Token. ") }}</p>
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <label for="notificationService" class="form-label">{{ $t("Notification Service") }}</label>
+        <input id="notificationService" v-model="$parent.notification.notificationService" type="text" :placeholder="$t('default: notify all devices')" class="form-control">
+
+        <div class="form-text">
+            <p>{{ $t('A list of Notification Services can be found in Home Assistant under "Developer Tools > Services" search for "notification" to find your device/phone name.') }}</p>
+            <p>{{ $t("Automations can optionally be triggered in Home Assistant:") }}</p>
+            <p>
+                {{ $t("Trigger type:") }} <code>Event</code><br />
+                {{ $t("Event type:") }} <code>call_service</code><br />
+                {{ $t("Event data:") }}
+            </p>
+            <pre>domain: notify
+service: mobile_app_my_phone # change to your device name
+service_data:
+  title: Uptime Kuma
+  data:
+    status: 0 # 0=down 1=up
+    # name: Optional Uptime Kuma Monitor Name to filter by</pre>
+            <p>
+                {{ $t("Then choose an action, for example switch the scene to where an RGB light is red.") }}
+            </p>
+        </div>
+    </div>
+</template>

src/components/notifications/Kook.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="mb-3">
+        <label for="kook-bot-token" class="form-label">{{ $t("Bot Token") }}</label>
+        <HiddenInput id="kook-bot-token" v-model="$parent.notification.kookBotToken" :required="true" autocomplete="new-password"></HiddenInput>
+        <i18n-t tag="div" keypath="wayToGetKookBotToken" class="form-text">
+            <a href="https://developer.kookapp.cn/bot" target="_blank">https://developer.kookapp.cn/bot</a>
+        </i18n-t>
+    </div>
+
+    <div class="mb-3">
+        <label for="kook-guild-id" class="form-label">{{ $t("Guild ID") }}</label>
+
+        <div class="input-group mb-3">
+            <input id="kook-guild-id" v-model="$parent.notification.kookGuildID" type="text" class="form-control" required>
+        </div>
+
+        <div class="form-text">
+            <p style="margin-top: 8px;">
+                {{ $t("wayToGetKookGuildID") }}
+            </p>
+        </div>
+    </div>
+
+    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+        <a href="https://developer.kookapp.cn" target="_blank">https://developer.kookapp.cn</a>
+    </i18n-t>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+export default {
+    components: {
+        HiddenInput,
+    }
+};
+</script>

src/components/notifications/Line.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="mb-3">
         <label for="line-channel-access-token" class="form-label">{{ $t("Channel access token") }}</label>
-        <HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="new-password"></HiddenInput>
     </div>
     <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
         <b>{{ $t("Basic Settings") }}</b>
     </i18n-t>
     <div class="mb-3" style="margin-top: 12px;">
-        <label for="line-user-id" class="form-label">User ID</label>
+        <label for="line-user-id" class="form-label">{{ $t("User ID") }}</label>
         <input id="line-user-id" v-model="$parent.notification.lineUserID" type="text" class="form-control" required>
     </div>
     <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">

src/components/notifications/LineNotify.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="mb-3">
+        <label for="line-notify-access-token" class="form-label">{{ $t("Access Token") }}</label>
+        <input id="line-notify-access-token" v-model="$parent.notification.lineNotifyAccessToken" type="text" class="form-control" :required="true">
+    </div>
+    <i18n-t tag="div" keypath="wayToGetLineNotifyToken" class="form-text" style="margin-top: 8px;">
+        <a href="https://notify-bot.line.me/" target="_blank">https://notify-bot.line.me/</a>
+    </i18n-t>
+</template>

src/components/notifications/Matrix.vue

@@ -9,7 +9,7 @@
     </div>
     <div class="mb-3">
         <label for="access-token" class="form-label">{{ $t("Access Token") }}</label><span style="color: red;"><sup>*</sup></span>
-        <HiddenInput id="access-token" v-model="$parent.notification.accessToken" :required="true" autocomplete="one-time-code" :maxlength="500"></HiddenInput>
+        <HiddenInput id="access-token" v-model="$parent.notification.accessToken" :required="true" autocomplete="new-password" :maxlength="500"></HiddenInput>
     </div>
 
     <div class="form-text">

src/components/notifications/Mattermost.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="mb-3">
-        <label for="mattermost-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color:red;"><sup>*</sup></span></label>
+        <label for="mattermost-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color: red;"><sup>*</sup></span></label>
         <input id="mattermost-webhook-url" v-model="$parent.notification.mattermostWebhookUrl" type="text" class="form-control" required>
         <label for="mattermost-username" class="form-label">{{ $t("Username") }}</label>
         <input id="mattermost-username" v-model="$parent.notification.mattermostusername" type="text" class="form-control">
@@ -11,7 +11,7 @@
         <label for="mattermost-channel" class="form-label">{{ $t("Channel Name") }}</label>
         <input id="mattermost-channel-name" v-model="$parent.notification.mattermostchannel" type="text" class="form-control">
         <div class="form-text">
-            <span style="color:red;"><sup>*</sup></span>{{ $t("Required") }}
+            <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
             <i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
                 <a href="https://docs.mattermost.com/developer/webhooks-incoming.html" target="_blank">https://docs.mattermost.com/developer/webhooks-incoming.html</a>
             </i18n-t>

src/components/notifications/Ntfy.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="mb-3">
+        <label for="ntfy-ntfytopic" class="form-label">{{ $t("ntfy Topic") }}</label>
+        <div class="input-group mb-3">
+            <input id="ntfy-ntfytopic" v-model="$parent.notification.ntfytopic" type="text" class="form-control" required>
+        </div>
+    </div>
+    <div class="mb-3">
+        <label for="ntfy-server-url" class="form-label">{{ $t("Server URL") }}</label>
+        <div class="input-group mb-3">
+            <input id="ntfy-server-url" v-model="$parent.notification.ntfyserverurl" type="text" class="form-control" required>
+        </div>
+    </div>
+    <div class="mb-3">
+        <label for="ntfy-priority" class="form-label">{{ $t("Priority") }}</label>
+        <input id="ntfy-priority" v-model="$parent.notification.ntfyPriority" type="number" class="form-control" required min="1" max="5" step="1">
+    </div>
+    <div class="mb-3">
+        <label for="ntfy-username" class="form-label">{{ $t("Username") }} ({{ $t("Optional") }})</label>
+        <div class="input-group mb-3">
+            <input id="ntfy-username" v-model="$parent.notification.ntfyusername" type="text" class="form-control">
+        </div>
+    </div>
+    <div class="mb-3">
+        <label for="ntfy-password" class="form-label">{{ $t("Password") }} ({{ $t("Optional") }})</label>
+        <div class="input-group mb-3">
+            <HiddenInput id="ntfy-password" v-model="$parent.notification.ntfypassword" autocomplete="new-password"></HiddenInput>
+        </div>
+    </div>
+    <div class="mb-3">
+        <label for="ntfy-icon" class="form-label">{{ $t("IconUrl") }}</label>
+        <input id="ntfy-icon" v-model="$parent.notification.ntfyIcon" type="text" class="form-control">
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+    mounted() {
+        if (typeof this.$parent.notification.ntfyPriority === "undefined") {
+            this.$parent.notification.ntfyserverurl = "https://ntfy.sh";
+            this.$parent.notification.ntfyPriority = 5;
+        }
+    },
+};
+</script>

src/components/notifications/Octopush.vue

@@ -1,18 +1,18 @@
 <template>
     <div class="mb-3">
-        <label for="octopush-version" class="form-label">Octopush API Version</label>
+        <label for="octopush-version" class="form-label">{{ $t("Octopush API Version") }}</label>
         <select id="octopush-version" v-model="$parent.notification.octopushVersion" class="form-select">
-            <option value="2">Octopush (endpoint: api.octopush.com)</option>
-            <option value="1">Legacy Octopush-DM (endpoint: www.octopush-dm.com)</option>
+            <option value="2">{{ $t("octopush") }} ({{ $t("endpoint") }}: api.octopush.com)</option>
+            <option value="1">{{ $t("Legacy Octopush-DM") }} ({{ $t("endpoint") }}: www.octopush-dm.com)</option>
         </select>
         <div class="form-text">
             {{ $t("octopushLegacyHint") }}
         </div>
     </div>
     <div class="mb-3">
-        <label for="octopush-key" class="form-label">API KEY</label>
-        <HiddenInput id="octopush-key" v-model="$parent.notification.octopushAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
-        <label for="octopush-login" class="form-label">API LOGIN</label>
+        <label for="octopush-key" class="form-label">{{ $t("octopushAPIKey") }}</label>
+        <HiddenInput id="octopush-key" v-model="$parent.notification.octopushAPIKey" :required="true" autocomplete="new-password"></HiddenInput>
+        <label for="octopush-login" class="form-label">{{ $t("octopushLogin") }}</label>
         <input id="octopush-login" v-model="$parent.notification.octopushLogin" type="text" class="form-control" required>
     </div>
     <div class="mb-3">

src/components/notifications/OneBot.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="mb-3">
+        <div class="mb-3">
+            <label for="onebot-http-addr" class="form-label">{{ $t("onebotHttpAddress") }}<span style="color: red;"><sup>*</sup></span></label>
+            <input id="HttpUrl" v-model="$parent.notification.httpAddr" type="text" class="form-control" required>
+        </div>
+        <div class="mb-3">
+            <label for="onebot-access-token" class="form-label">AccessToken<span style="color: red;"><sup>*</sup></span></label>
+            <input id="HttpUrl" v-model="$parent.notification.accessToken" type="text" class="form-control" required>
+            <div class="form-text">
+                <p>{{ $t("onebotSafetyTips") }}</p>
+            </div>
+        </div>
+
+        <div class="mb-3">
+            <label for="onebot-msg-type" class="form-label">{{ $t("onebotMessageType") }}</label>
+            <select id="onebot-msg-type" v-model="$parent.notification.msgType" class="form-select">
+                <option value="group">{{ $t("onebotGroupMessage") }}</option>
+                <option value="private">{{ $t("onebotPrivateMessage") }}</option>
+            </select>
+        </div>
+
+        <div class="mb-3">
+            <label for="onebot-reciever-id" class="form-label">{{ $t("onebotUserOrGroupId") }}<span style="color: red;"><sup>*</sup></span></label>
+            <input id="secretKey" v-model="$parent.notification.recieverId" type="text" class="form-control" required>
+        </div>
+
+        <div class="form-text">
+            <i18n-t tag="p" keypath="Read more:">
+                <a href="https://github.com/botuniverse/onebot-11" target="_blank">https://github.com/botuniverse/onebot-11</a>
+            </i18n-t>
+        </div>
+    </div>
+</template>

src/components/notifications/PagerDuty.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="mb-3">
+        <label for="pagerduty-integration-key" class="form-label">{{ $t("Integration Key") }}</label>
+        <HiddenInput id="pagerduty-integration-key" v-model="$parent.notification.pagerdutyIntegrationKey" :required="true" autocomplete="false"></HiddenInput>
+        <i18n-t tag="div" keypath="wayToGetPagerDutyKey" class="form-text">
+            <a href="https://support.pagerduty.com/docs/services-and-integrations" target="_blank">{{ $t("here") }}</a>
+        </i18n-t>
+    </div>
+    <div class="mb-3">
+        <label for="pagerduty-integration-url" class="form-label">{{ $t("Integration URL") }}</label>
+        <input id="pagerduty-integration-url" v-model="$parent.notification.pagerdutyIntegrationUrl" type="text" class="form-control" autocomplete="false">
+    </div>
+    <div class="mb-3">
+        <label for="pagerduty-priority" class="form-label">{{ $t("Priority") }}</label>
+        <select id="pagerduty-priority" v-model="$parent.notification.pagerdutyPriority" class="form-select">
+            <option value="info">{{ $t("info") }}</option>
+            <option value="warning" selected="selected">{{ $t("warning") }}</option>
+            <option value="error">{{ $t("error") }}</option>
+            <option value="critical">{{ $t("critical") }}</option>
+        </select>
+    </div>
+    <div class="mb-3">
+        <label for="pagerduty-resolve" class="form-label">{{ $t("Auto resolve or acknowledged") }}</label>
+        <select id="pagerduty-resolve" v-model="$parent.notification.pagerdutyAutoResolve" class="form-select">
+            <option value="0" selected="selected">{{ $t("do nothing") }}</option>
+            <option value="acknowledge">{{ $t("auto acknowledged") }}</option>
+            <option value="resolve">{{ $t("auto resolve") }}</option>
+        </select>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+    mounted() {
+        if (typeof this.$parent.notification.pagerdutyIntegrationUrl === "undefined") {
+            this.$parent.notification.pagerdutyIntegrationUrl = "https://events.pagerduty.com/v2/enqueue";
+        }
+    }
+};
+</script>

src/components/notifications/PromoSMS.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="mb-3">
-        <label for="promosms-login" class="form-label">API LOGIN</label>
+        <label for="promosms-login" class="form-label">{{ $t("promosmsLogin") }}</label>
         <input id="promosms-login" v-model="$parent.notification.promosmsLogin" type="text" class="form-control" required>
-        <label for="promosms-key" class="form-label">API PASSWORD</label>
-        <HiddenInput id="promosms-key" v-model="$parent.notification.promosmsPassword" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <label for="promosms-key" class="form-label">{{ $t("promosmsPassword") }}</label>
+        <HiddenInput id="promosms-key" v-model="$parent.notification.promosmsPassword" :required="true" autocomplete="new-password"></HiddenInput>
     </div>
     <div class="mb-3">
         <label for="promosms-type-sms" class="form-label">{{ $t("SMS Type") }}</label>
@@ -26,6 +26,10 @@
         <label for="promosms-sender-name" class="form-label">{{ $t("promosmsSMSSender") }}</label>
         <input id="promosms-sender-name" v-model="$parent.notification.promosmsSenderName" type="text" minlength="3" maxlength="11" class="form-control">
     </div>
+    <div class="form-check form-switch">
+        <input id="promosms-allow-long" v-model="$parent.notification.promosmsAllowLongSMS" type="checkbox" class="form-check-input">
+        <label for="promosms-allow-long" class="form-label">{{ $t("promosmsAllowLongSMS") }}</label>
+    </div>
 </template>
 
 <script>

src/components/notifications/PushDeer.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="mb-3">
+        <label for="pushdeer-key" class="form-label">{{ $t("PushDeer Key") }}</label>
+        <HiddenInput id="pushdeer-key" v-model="$parent.notification.pushdeerKey" :required="true" autocomplete="new-password" placeholder="PDUxxxx"></HiddenInput>
+    </div>
+
+    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+        <a href="http://www.pushdeer.com/" rel="noopener noreferrer" target="_blank">http://www.pushdeer.com/</a>
+    </i18n-t>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/Pushbullet.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="mb-3">
         <label for="pushbullet-access-token" class="form-label">{{ $t("Access Token") }}</label>
-        <HiddenInput id="pushbullet-access-token" v-model="$parent.notification.pushbulletAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="pushbullet-access-token" v-model="$parent.notification.pushbulletAccessToken" :required="true" autocomplete="new-password"></HiddenInput>
     </div>
 
     <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">

src/components/notifications/Pushover.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="mb-3">
         <label for="pushover-user" class="form-label">{{ $t("User Key") }}<span style="color: red;"><sup>*</sup></span></label>
-        <HiddenInput id="pushover-user" v-model="$parent.notification.pushoveruserkey" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="pushover-user" v-model="$parent.notification.pushoveruserkey" :required="true" autocomplete="new-password"></HiddenInput>
         <label for="pushover-app-token" class="form-label">{{ $t("Application Token") }}<span style="color: red;"><sup>*</sup></span></label>
-        <HiddenInput id="pushover-app-token" v-model="$parent.notification.pushoverapptoken" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="pushover-app-token" v-model="$parent.notification.pushoverapptoken" :required="true" autocomplete="new-password"></HiddenInput>
         <label for="pushover-device" class="form-label">{{ $t("Device") }}</label>
         <input id="pushover-device" v-model="$parent.notification.pushoverdevice" type="text" class="form-control">
         <label for="pushover-device" class="form-label">{{ $t("Message Title") }}</label>
@@ -18,28 +18,29 @@
         </select>
         <label for="pushover-sound" class="form-label">{{ $t("Notification Sound") }}</label>
         <select id="pushover-sound" v-model="$parent.notification.pushoversounds" class="form-select">
-            <option>pushover</option>
-            <option>bike</option>
-            <option>bugle</option>
-            <option>cashregister</option>
-            <option>classical</option>
-            <option>cosmic</option>
-            <option>falling</option>
-            <option>gamelan</option>
-            <option>incoming</option>
-            <option>intermission</option>
-            <option>mechanical</option>
-            <option>pianobar</option>
-            <option>siren</option>
-            <option>spacealarm</option>
-            <option>tugboat</option>
-            <option>alien</option>
-            <option>climb</option>
-            <option>persistent</option>
-            <option>echo</option>
-            <option>updown</option>
-            <option>vibrate</option>
-            <option>none</option>
+            <option value="pushover">{{ $t("pushoversounds pushover") }}</option>
+            <option value="bike">{{ $t("pushoversounds bike") }}</option>
+            <option value="bugle">{{ $t("pushoversounds bugle") }}</option>
+            <option value="cashregister">{{ $t("pushoversounds cashregister") }}</option>
+            <option value="classical">{{ $t("pushoversounds classical") }}</option>
+            <option value="cosmic">{{ $t("pushoversounds cosmic") }}</option>
+            <option value="falling">{{ $t("pushoversounds falling") }}</option>
+            <option value="gamelan">{{ $t("pushoversounds gamelan") }}</option>
+            <option value="incoming">{{ $t("pushoversounds incoming") }}</option>
+            <option value="intermission">{{ $t("pushoversounds intermission") }}</option>
+            <option value="magic">{{ $t("pushoversounds magic") }}</option>
+            <option value="mechanical">{{ $t("pushoversounds mechanical") }}</option>
+            <option value="pianobar">{{ $t("pushoversounds pianobar") }}</option>
+            <option value="siren">{{ $t("pushoversounds siren") }}</option>
+            <option value="spacealarm">{{ $t("pushoversounds spacealarm") }}</option>
+            <option value="tugboat">{{ $t("pushoversounds tugboat") }}</option>
+            <option value="alien">{{ $t("pushoversounds alien") }}</option>
+            <option value="climb">{{ $t("pushoversounds climb") }}</option>
+            <option value="persistent">{{ $t("pushoversounds persistent") }}</option>
+            <option value="echo">{{ $t("pushoversounds echo") }}</option>
+            <option value="updown">{{ $t("pushoversounds updown") }}</option>
+            <option value="vibrate">{{ $t("pushoversounds vibrate") }}</option>
+            <option value="none">{{ $t("pushoversounds none") }}</option>
         </select>
         <div class="form-text">
             <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
@@ -63,5 +64,5 @@ export default {
     components: {
         HiddenInput,
     },
-}
+};
 </script>

src/components/notifications/Pushy.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="mb-3">
-        <label for="pushy-app-token" class="form-label">API_KEY</label>
-        <HiddenInput id="pushy-app-token" v-model="$parent.notification.pushyAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <label for="pushy-app-token" class="form-label">{{ $t("pushyAPIKey") }}</label>
+        <HiddenInput id="pushy-app-token" v-model="$parent.notification.pushyAPIKey" :required="true" autocomplete="new-password"></HiddenInput>
     </div>
 
     <div class="mb-3">
-        <label for="pushy-user-key" class="form-label">USER_TOKEN</label>
+        <label for="pushy-user-key" class="form-label">{{ $t("pushyToken") }}</label>
         <div class="input-group mb-3">
-            <HiddenInput id="pushy-user-key" v-model="$parent.notification.pushyToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+            <HiddenInput id="pushy-user-key" v-model="$parent.notification.pushyToken" :required="true" autocomplete="new-password"></HiddenInput>
         </div>
     </div>
     <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">

src/components/notifications/SMSEagle.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="mb-3">
+        <label for="smseagle-url" class="form-label">{{ $t("smseagleUrl") }}</label>
+        <input id="smseagle-url" v-model="$parent.notification.smseagleUrl" type="text" minlength="7" class="form-control" placeholder="http://127.0.0.1" required>
+    </div>
+    <div class="mb-3">
+        <label for="smseagle-token" class="form-label">{{ $t("smseagleToken") }}</label>
+        <HiddenInput id="smseagle-token" v-model="$parent.notification.smseagleToken" :required="true"></HiddenInput>
+    </div>
+    <div class="mb-3">
+        <label for="smseagle-recipient-type" class="form-label">{{ $t("smseagleRecipientType") }}</label>
+        <select id="smseagle-recipient-type" v-model="$parent.notification.smseagleRecipientType" class="form-select">
+            <option value="smseagle-to" selected>{{ $t("smseagleTo") }}</option>
+            <option value="smseagle-group">{{ $t("smseagleGroup") }}</option>
+            <option value="smseagle-contact">{{ $t("smseagleContact") }}</option>
+        </select>
+    </div>
+    <div class="mb-3">
+        <label for="smseagle-recipient" class="form-label">{{ $t("smseagleRecipient") }}</label>
+        <input id="smseagle-recipient" v-model="$parent.notification.smseagleRecipient" type="text" class="form-control" required>
+    </div>
+    <div class="mb-3">
+        <label for="smseagle-priority" class="form-label">{{ $t("smseaglePriority") }}</label>
+        <input id="smseagle-priority" v-model="$parent.notification.smseaglePriority" type="number" class="form-control" min="0" max="9" step="1" placeholder="0">
+    </div>
+    <div class="mb-3 form-check form-switch">
+        <label for="smseagle-encoding" class="form-label">{{ $t("smseagleEncoding") }}</label>
+        <input id="smseagle-encoding" v-model="$parent.notification.smseagleEncoding" type="checkbox" class="form-check-input">
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/SMSManager.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="mb-3">
+        <label for="smsmanager-key" class="form-label">{{ $t("API Key") }}</label>
+        <div class="form-text">
+            {{ $t("SMSManager API Docs") }}
+            <a href="https://smsmanager.cz/api/http#send" target="_blank">{{ $t("here") }}</a>
+        </div>
+        <input id="smsmanager-key" v-model="$parent.notification.smsmanagerApiKey" type="text" class="form-control">
+    </div>
+    <div class="mb-3">
+        <label for="smsmanager-numbers" class="form-label"> {{ $t("Recipients") }}</label>
+        <div class="form-text">
+            {{ $t("You can divide numbers with") }} <b>,</b> {{ $t("or") }} <b>;</b>
+        </div>
+        <input id="smsmanager-numbers" v-model="$parent.notification.numbers" type="text" class="form-control">
+    </div>
+    <div class="mb-3">
+        <label for="smsmanager-messageType" class="form-label">{{ $t("Gateway Type") }}</label>
+        <select id="smsmanager-messageType" v-model="$parent.notification.messageType" class="form-select">
+            <option value="economy">{{ $t("Economy") }}</option>
+            <option value="lowcost">{{ $t("Lowcost") }}</option>
+            <option value="high" selected>{{ $t("High") }}</option>
+        </select>
+    </div>
+    <div class="mb-3">
+        <div class="form-text">
+            {{ $t("checkPrice", [$t("SMSManager")]) }}
+            <a href="https://smsmanager.cz/rozesilani-sms/ceny/ceska-republika/" target="_blank">{{ $t("here") }}</a>
+        </div>
+    </div>
+</template>

src/components/notifications/SMTP.vue

@@ -1,82 +1,117 @@
 <template>
-    <div class="mb-3">
-        <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
-        <input id="hostname" v-model="$parent.notification.smtpHost" type="text" class="form-control" required>
-    </div>
-
-    <div class="mb-3">
-        <label for="port" class="form-label">{{ $t("Port") }}</label>
-        <input id="port" v-model="$parent.notification.smtpPort" type="number" class="form-control" required min="0" max="65535" step="1">
-    </div>
-
-    <div class="mb-3">
-        <label for="secure" class="form-label">{{ $t("Security") }}</label>
-        <select id="secure" v-model="$parent.notification.smtpSecure" class="form-select">
-            <option :value="false">{{ $t("secureOptionNone") }}</option>
-            <option :value="true">{{ $t("secureOptionTLS") }}</option>
-        </select>
-    </div>
-
-    <div class="mb-3">
-        <div class="form-check">
-            <input id="ignore-tls-error" v-model="$parent.notification.smtpIgnoreTLSError" class="form-check-input" type="checkbox" value="">
-            <label class="form-check-label" for="ignore-tls-error">
-                {{ $t("Ignore TLS Error") }}
-            </label>
+    <div>
+        <div class="mb-3">
+            <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
+            <input id="hostname" v-model="$parent.notification.smtpHost" type="text" class="form-control" required>
         </div>
-    </div>
 
-    <div class="mb-3">
-        <label for="username" class="form-label">{{ $t("Username") }}</label>
-        <input id="username" v-model="$parent.notification.smtpUsername" type="text" class="form-control" autocomplete="false">
-    </div>
-
-    <div class="mb-3">
-        <label for="password" class="form-label">{{ $t("Password") }}</label>
-        <HiddenInput id="password" v-model="$parent.notification.smtpPassword" :required="false" autocomplete="one-time-code"></HiddenInput>
-    </div>
-
-    <div class="mb-3">
-        <label for="from-email" class="form-label">{{ $t("From Email") }}</label>
-        <input id="from-email" v-model="$parent.notification.smtpFrom" type="text" class="form-control" required autocomplete="false" placeholder="&quot;Uptime Kuma&quot; &lt;example@kuma.pet&gt;">
-        <div class="form-text">
+        <div class="mb-3">
+            <label for="port" class="form-label">{{ $t("Port") }}</label>
+            <input id="port" v-model="$parent.notification.smtpPort" type="number" class="form-control" required min="0" max="65535" step="1">
         </div>
-    </div>
 
-    <div class="mb-3">
-        <label for="to-email" class="form-label">{{ $t("To Email") }}</label>
-        <input id="to-email" v-model="$parent.notification.smtpTo" type="text" class="form-control" autocomplete="false" placeholder="example2@kuma.pet, example3@kuma.pet" :required="!hasRecipient">
-    </div>
+        <div class="mb-3">
+            <label for="secure" class="form-label">{{ $t("Security") }}</label>
+            <select id="secure" v-model="$parent.notification.smtpSecure" class="form-select">
+                <option :value="false">{{ $t("secureOptionNone") }}</option>
+                <option :value="true">{{ $t("secureOptionTLS") }}</option>
+            </select>
+        </div>
 
-    <div class="mb-3">
-        <label for="to-cc" class="form-label">{{ $t("smtpCC") }}</label>
-        <input id="to-cc" v-model="$parent.notification.smtpCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
-    </div>
+        <div class="mb-3">
+            <div class="form-check">
+                <input id="ignore-tls-error" v-model="$parent.notification.smtpIgnoreTLSError" class="form-check-input" type="checkbox" value="">
+                <label class="form-check-label" for="ignore-tls-error">
+                    {{ $t("Ignore TLS Error") }}
+                </label>
+            </div>
+        </div>
 
-    <div class="mb-3">
-        <label for="to-bcc" class="form-label">{{ $t("smtpBCC") }}</label>
-        <input id="to-bcc" v-model="$parent.notification.smtpBCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
-    </div>
+        <div class="mb-3">
+            <label for="username" class="form-label">{{ $t("Username") }}</label>
+            <input id="username" v-model="$parent.notification.smtpUsername" type="text" class="form-control" autocomplete="false">
+        </div>
 
-    <div class="mb-3">
-        <label for="subject-email" class="form-label">{{ $t("emailCustomSubject") }}</label>
-        <input id="subject-email" v-model="$parent.notification.customSubject" type="text" class="form-control" autocomplete="false" placeholder="">
-        <div v-pre class="form-text">
-            (leave blank for default one)<br />
-            {{NAME}}: Service Name<br />
-            {{HOSTNAME_OR_URL}}: Hostname or URL<br />
-            {{URL}}: URL<br />
-            {{STATUS}}: Status<br />
+        <div class="mb-3">
+            <label for="password" class="form-label">{{ $t("Password") }}</label>
+            <HiddenInput id="password" v-model="$parent.notification.smtpPassword" :required="false" autocomplete="new-password"></HiddenInput>
+        </div>
+
+        <div class="mb-3">
+            <label for="from-email" class="form-label">{{ $t("From Email") }}</label>
+            <input id="from-email" v-model="$parent.notification.smtpFrom" type="text" class="form-control" required autocomplete="false" placeholder="&quot;Uptime Kuma&quot; &lt;example@kuma.pet&gt;">
+            <div class="form-text">
+            </div>
+        </div>
+
+        <div class="mb-3">
+            <label for="to-email" class="form-label">{{ $t("To Email") }}</label>
+            <input id="to-email" v-model="$parent.notification.smtpTo" type="text" class="form-control" autocomplete="false" placeholder="example2@kuma.pet, example3@kuma.pet" :required="!hasRecipient">
+        </div>
+
+        <div class="mb-3">
+            <label for="to-cc" class="form-label">{{ $t("smtpCC") }}</label>
+            <input id="to-cc" v-model="$parent.notification.smtpCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
+        </div>
+
+        <div class="mb-3">
+            <label for="to-bcc" class="form-label">{{ $t("smtpBCC") }}</label>
+            <input id="to-bcc" v-model="$parent.notification.smtpBCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
+        </div>
+
+        <ToggleSection :heading="$t('smtpDkimSettings')">
+            <i18n-t tag="div" keypath="smtpDkimDesc" class="form-text mb-3">
+                <a href="https://nodemailer.com/dkim/" target="_blank">{{ $t("documentation") }}</a>
+            </i18n-t>
+
+            <div class="mb-3">
+                <label for="dkim-domain" class="form-label">{{ $t("smtpDkimDomain") }}</label>
+                <input id="dkim-domain" v-model="$parent.notification.smtpDkimDomain" type="text" class="form-control" autocomplete="false" placeholder="example.com">
+            </div>
+            <div class="mb-3">
+                <label for="dkim-key-selector" class="form-label">{{ $t("smtpDkimKeySelector") }}</label>
+                <input id="dkim-key-selector" v-model="$parent.notification.smtpDkimKeySelector" type="text" class="form-control" autocomplete="false" placeholder="2017">
+            </div>
+            <div class="mb-3">
+                <label for="dkim-private-key" class="form-label">{{ $t("smtpDkimPrivateKey") }}</label>
+                <textarea id="dkim-private-key" v-model="$parent.notification.smtpDkimPrivateKey" rows="5" type="text" class="form-control" autocomplete="false" placeholder="-----BEGIN PRIVATE KEY-----"></textarea>
+            </div>
+            <div class="mb-3">
+                <label for="dkim-hash-algo" class="form-label">{{ $t("smtpDkimHashAlgo") }}</label>
+                <input id="dkim-hash-algo" v-model="$parent.notification.smtpDkimHashAlgo" type="text" class="form-control" autocomplete="false" placeholder="sha256">
+            </div>
+            <div class="mb-3">
+                <label for="dkim-header-fields" class="form-label">{{ $t("smtpDkimheaderFieldNames") }}</label>
+                <input id="dkim-header-fields" v-model="$parent.notification.smtpDkimheaderFieldNames" type="text" class="form-control" autocomplete="false" placeholder="message-id:date:from:to">
+            </div>
+            <div class="mb-3">
+                <label for="dkim-skip-fields" class="form-label">{{ $t("smtpDkimskipFields") }}</label>
+                <input id="dkim-skip-fields" v-model="$parent.notification.smtpDkimskipFields" type="text" class="form-control" autocomplete="false" placeholder="message-id:date">
+            </div>
+        </ToggleSection>
+
+        <div class="mb-3">
+            <label for="subject-email" class="form-label">{{ $t("emailCustomSubject") }}</label>
+            <input id="subject-email" v-model="$parent.notification.customSubject" type="text" class="form-control" autocomplete="false" placeholder="">
+            <div v-pre class="form-text">
+                (leave blank for default one)<br />
+                {{NAME}}: Service Name<br />
+                {{HOSTNAME_OR_URL}}: Hostname or URL<br />
+                {{URL}}: URL<br />
+                {{STATUS}}: Status<br />
+            </div>
         </div>
     </div>
 </template>
 
 <script>
 import HiddenInput from "../HiddenInput.vue";
+import ToggleSection from "../ToggleSection.vue";
 
 export default {
     components: {
         HiddenInput,
+        ToggleSection,
     },
     computed: {
         hasRecipient() {

src/components/notifications/ServerChan.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="mb-3">
+        <label for="serverchan-sendkey" class="form-label">{{ $t("SendKey") }}</label>
+        <HiddenInput id="serverchan-sendkey" v-model="$parent.notification.serverChanSendKey" :required="true" autocomplete="new-password"></HiddenInput>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/SerwerSMS.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="mb-3">
         <label for="serwersms-key" class="form-label">{{ $t('serwersmsAPIPassword') }}</label>
-        <HiddenInput id="serwersms-key" v-model="$parent.notification.serwersmsPassword" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="serwersms-key" v-model="$parent.notification.serwersmsPassword" :required="true" autocomplete="new-password"></HiddenInput>
     </div>
     <div class="mb-3">
         <label for="serwersms-phone-number" class="form-label">{{ $t("serwersmsPhoneNumber") }}</label>

src/components/notifications/Splunk.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="mb-3">
+        <label for="splunk-rest-url" class="form-label">{{ $t("Splunk Rest URL") }}</label>
+        <HiddenInput id="splunk-rest-url" v-model="$parent.notification.splunkRestURL" :required="true" autocomplete="false"></HiddenInput>
+    </div>
+    <div class="mb-3">
+        <label for="splunk-severity" class="form-label">{{ $t("Severity") }}</label>
+        <select id="splunk-severity" v-model="$parent.notification.splunkSeverity" class="form-select">
+            <option value="INFO">{{ $t("info") }}</option>
+            <option value="WARNING">{{ $t("warning") }}</option>
+            <option value="CRITICAL" selected="selected">{{ $t("critical") }}</option>
+        </select>
+    </div>
+    <div class="mb-3">
+        <label for="splunk-resolve" class="form-label">{{ $t("Auto resolve or acknowledged") }}</label>
+        <select id="splunk-resolve" v-model="$parent.notification.splunkAutoResolve" class="form-select">
+            <option value="0" selected="selected">{{ $t("do nothing") }}</option>
+            <option value="ACKNOWLEDGEMENT">{{ $t("auto acknowledged") }}</option>
+            <option value="RECOVERY">{{ $t("auto resolve") }}</option>
+        </select>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/Squadcast.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="mb-3">
+        <label for="webhook-url" class="form-label">{{ $t("Post URL") }}</label>
+        <input id="webhook-url" v-model="$parent.notification.squadcastWebhookURL" type="url" pattern="https?://.+" class="form-control" required>
+    </div>
+</template>

src/components/notifications/TechulusPush.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="mb-3">
+        <label for="push-api-key" class="form-label">{{ $t("API Key") }}</label>
+        <HiddenInput id="push-api-key" v-model="$parent.notification.pushAPIKey" :required="true" autocomplete="new-password"></HiddenInput>
+    </div>
+
+    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+        <a href="https://docs.push.techulus.com" target="_blank">https://docs.push.techulus.com</a>
+    </i18n-t>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/Telegram.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="mb-3">
         <label for="telegram-bot-token" class="form-label">{{ $t("Bot Token") }}</label>
-        <HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="new-password"></HiddenInput>
         <i18n-t tag="div" keypath="wayToGetTelegramToken" class="form-text">
             <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>
         </i18n-t>
@@ -28,6 +28,30 @@
                 <a :href="telegramGetUpdatesURL('withToken')" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL("masked") }}</a>
             </p>
         </div>
+
+        <label for="message_thread_id" class="form-label">{{ $t("telegramMessageThreadID") }}</label>
+        <input id="message_thread_id" v-model="$parent.notification.telegramMessageThreadID" type="text" class="form-control">
+        <p class="form-text">{{ $t("telegramMessageThreadIDDescription") }}</p>
+
+        <div class="form-check form-switch">
+            <input v-model="$parent.notification.telegramSendSilently" class="form-check-input" type="checkbox">
+            <label class="form-check-label">{{ $t("telegramSendSilently") }}</label>
+        </div>
+
+        <div class="form-text">
+            {{ $t("telegramSendSilentlyDescription") }}
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <div class="form-check form-switch">
+            <input v-model="$parent.notification.telegramProtectContent" class="form-check-input" type="checkbox">
+            <label class="form-check-label">{{ $t("telegramProtectContent") }}</label>
+        </div>
+
+        <div class="form-text">
+            {{ $t("telegramProtectContentDescription") }}
+        </div>
     </div>
 </template>
 
@@ -42,6 +66,11 @@ export default {
         HiddenInput,
     },
     methods: {
+        /**
+         * Get the URL for telegram updates
+         * @param {string} [mode=masked] Should the token be masked?
+         * @returns {string} formatted URL
+         */
         telegramGetUpdatesURL(mode = "masked") {
             let token = `<${this.$t("YOUR BOT TOKEN HERE")}>`;
 
@@ -55,6 +84,8 @@ export default {
 
             return `https://api.telegram.org/bot${token}/getUpdates`;
         },
+
+        /** Get the telegram chat ID */
         async autoGetTelegramChatID() {
             try {
                 let res = await axios.get(this.telegramGetUpdatesURL("withToken"));
@@ -63,9 +94,9 @@ export default {
                     let update = res.data.result[res.data.result.length - 1];
 
                     if (update.channel_post) {
-                        this.notification.telegramChatID = update.channel_post.chat.id;
+                        this.$parent.notification.telegramChatID = update.channel_post.chat.id;
                     } else if (update.message) {
-                        this.notification.telegramChatID = update.message.chat.id;
+                        this.$parent.notification.telegramChatID = update.message.chat.id;
                     } else {
                         throw new Error(this.$t("chatIDNotFound"));
                     }

src/components/notifications/WeCom.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="mb-3">
+        <label for="WeCom Bot Key" class="form-label">{{ $t("WeCom Bot Key") }}<span style="color: red;"><sup>*</sup></span></label>
+        <input id="WeCom Bot Key" v-model="$parent.notification.weComBotKey" type="text" class="form-control" required>
+        <div class="form-text">
+            <p><span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}</p>
+        </div>
+        <i18n-t tag="p" keypath="Read more:">
+            <a href="https://work.weixin.qq.com/api/doc/90000/90136/91770" target="_blank">https://work.weixin.qq.com/api/doc/90000/90136/91770</a>
+        </i18n-t>
+    </div>
+</template>

src/components/notifications/Webhook.vue

@@ -1,22 +1,32 @@
 <template>
     <div class="mb-3">
         <label for="webhook-url" class="form-label">{{ $t("Post URL") }}</label>
-        <input id="webhook-url" v-model="$parent.notification.webhookURL" type="url" pattern="https?://.+" class="form-control" required>
+        <input
+            id="webhook-url"
+            v-model="$parent.notification.webhookURL"
+            type="url"
+            pattern="https?://.+"
+            class="form-control"
+            required
+        />
     </div>
 
     <div class="mb-3">
-        <label for="webhook-content-type" class="form-label">{{ $t("Content Type") }}</label>
-        <select id="webhook-content-type" v-model="$parent.notification.webhookContentType" class="form-select" required>
-            <option value="json">
-                application/json
-            </option>
-            <option value="form-data">
-                multipart/form-data
-            </option>
+        <label for="webhook-content-type" class="form-label">{{
+            $t("Content Type")
+        }}</label>
+        <select
+            id="webhook-content-type"
+            v-model="$parent.notification.webhookContentType"
+            class="form-select"
+            required
+        >
+            <option value="json">application/json</option>
+            <option value="form-data">multipart/form-data</option>
         </select>
 
         <div class="form-text">
-            <p>{{ $t("webhookJsonDesc", ["\"application/json\""]) }}</p>
+            <p>{{ $t("webhookJsonDesc", ['"application/json"']) }}</p>
             <i18n-t tag="p" keypath="webhookFormDataDesc">
                 <template #multipart>"multipart/form-data"</template>
                 <template #decodeFunction>
@@ -25,4 +35,44 @@
             </i18n-t>
         </div>
     </div>
+
+    <div class="mb-3">
+        <i18n-t
+            tag="label"
+            class="form-label"
+            for="additionalHeaders"
+            keypath="webhookAdditionalHeadersTitle"
+        >
+        </i18n-t>
+        <textarea
+            id="additionalHeaders"
+            v-model="$parent.notification.webhookAdditionalHeaders"
+            class="form-control"
+            :placeholder="headersPlaceholder"
+        ></textarea>
+        <div class="form-text">
+            <i18n-t tag="p" keypath="webhookAdditionalHeadersDesc"> </i18n-t>
+        </div>
+    </div>
 </template>
+
+<script>
+export default {
+    computed: {
+        headersPlaceholder() {
+            return this.$t("Example:", [
+                `
+{
+    "HeaderName": "HeaderValue"
+}`,
+            ]);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+textarea {
+    min-height: 200px;
+}
+</style>

src/components/notifications/ZohoCliq.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="mb-3">
+        <label for="zcliq-webhookurl" class="form-label">{{ $t("Webhook URL") }}</label>
+        <input
+            id="zcliq-webhookurl"
+            v-model="$parent.notification.webhookUrl"
+            type="text"
+            class="form-control"
+            required
+        />
+        <i18n-t tag="div" keypath="wayToGetZohoCliqURL" class="form-text">
+            <a
+                href="https://www.zoho.com/cliq/help/platform/webhook-tokens.html"
+                target="_blank"
+            >{{ $t("here") }}</a>
+        </i18n-t>
+    </div>
+</template>

src/components/notifications/index.js

@@ -1,29 +1,50 @@
-import STMP from "./SMTP.vue"
-import Telegram from "./Telegram.vue";
+import Alerta from "./Alerta.vue";
+import AlertNow from "./AlertNow.vue";
+import AliyunSMS from "./AliyunSms.vue";
+import Apprise from "./Apprise.vue";
+import Bark from "./Bark.vue";
+import ClickSendSMS from "./ClickSendSMS.vue";
+import DingDing from "./DingDing.vue";
 import Discord from "./Discord.vue";
-import Webhook from "./Webhook.vue";
-import Signal from "./Signal.vue";
+import Feishu from "./Feishu.vue";
+import FreeMobile from "./FreeMobile.vue";
+import GoogleChat from "./GoogleChat.vue";
+import Gorush from "./Gorush.vue";
 import Gotify from "./Gotify.vue";
-import Slack from "./Slack.vue";
-import RocketChat from "./RocketChat.vue";
-import Teams from "./Teams.vue";
+import HomeAssistant from "./HomeAssistant.vue";
+import Kook from "./Kook.vue";
+import Line from "./Line.vue";
+import LineNotify from "./LineNotify.vue";
+import LunaSea from "./LunaSea.vue";
+import Matrix from "./Matrix.vue";
+import Mattermost from "./Mattermost.vue";
+import Ntfy from "./Ntfy.vue";
+import Octopush from "./Octopush.vue";
+import OneBot from "./OneBot.vue";
+import PagerDuty from "./PagerDuty.vue";
+import PromoSMS from "./PromoSMS.vue";
+import Pushbullet from "./Pushbullet.vue";
+import PushDeer from "./PushDeer.vue";
 import Pushover from "./Pushover.vue";
 import Pushy from "./Pushy.vue";
-import Octopush from "./Octopush.vue";
-import PromoSMS from "./PromoSMS.vue";
-import ClickSendSMS from "./ClickSendSMS.vue";
-import LunaSea from "./LunaSea.vue";
-import Feishu from "./Feishu.vue";
-import Apprise from "./Apprise.vue";
-import Pushbullet from "./Pushbullet.vue";
-import Line from "./Line.vue";
-import Mattermost from "./Mattermost.vue";
-import Matrix from "./Matrix.vue";
-import AliyunSMS from "./AliyunSms.vue";
-import DingDing from "./DingDing.vue";
-import Bark from "./Bark.vue";
+import RocketChat from "./RocketChat.vue";
+import ServerChan from "./ServerChan.vue";
 import SerwerSMS from "./SerwerSMS.vue";
-import Stackfield from './Stackfield.vue';
+import Signal from "./Signal.vue";
+import SMSManager from "./SMSManager.vue";
+import Slack from "./Slack.vue";
+import Squadcast from "./Squadcast.vue";
+import SMSEagle from "./SMSEagle.vue";
+import Stackfield from "./Stackfield.vue";
+import STMP from "./SMTP.vue";
+import Teams from "./Teams.vue";
+import TechulusPush from "./TechulusPush.vue";
+import Telegram from "./Telegram.vue";
+import Webhook from "./Webhook.vue";
+import WeCom from "./WeCom.vue";
+import GoAlert from "./GoAlert.vue";
+import ZohoCliq from "./ZohoCliq.vue";
+import Splunk from "./Splunk.vue";
 
 /**
  * Manage all notification form.
@@ -31,32 +52,53 @@ import Stackfield from './Stackfield.vue';
  * @type { Record<string, any> }
  */
 const NotificationFormList = {
-    "telegram": Telegram,
-    "webhook": Webhook,
-    "smtp": STMP,
-    "discord": Discord,
-    "teams": Teams,
-    "signal": Signal,
-    "gotify": Gotify,
-    "slack": Slack,
-    "rocket.chat": RocketChat,
-    "pushover": Pushover,
-    "pushy": Pushy,
-    "octopush": Octopush,
-    "promosms": PromoSMS,
-    "clicksendsms": ClickSendSMS,
-    "lunasea": LunaSea,
-    "Feishu": Feishu,
+    "alerta": Alerta,
+    "AlertNow": AlertNow,
     "AliyunSMS": AliyunSMS,
     "apprise": Apprise,
-    "pushbullet": Pushbullet,
-    "line": Line,
-    "mattermost": Mattermost,
-    "matrix": Matrix,
-    "DingDing": DingDing,
     "Bark": Bark,
+    "clicksendsms": ClickSendSMS,
+    "DingDing": DingDing,
+    "discord": Discord,
+    "Feishu": Feishu,
+    "FreeMobile": FreeMobile,
+    "GoogleChat": GoogleChat,
+    "gorush": Gorush,
+    "gotify": Gotify,
+    "HomeAssistant": HomeAssistant,
+    "Kook": Kook,
+    "line": Line,
+    "LineNotify": LineNotify,
+    "lunasea": LunaSea,
+    "matrix": Matrix,
+    "mattermost": Mattermost,
+    "ntfy": Ntfy,
+    "octopush": Octopush,
+    "OneBot": OneBot,
+    "PagerDuty": PagerDuty,
+    "promosms": PromoSMS,
+    "pushbullet": Pushbullet,
+    "PushByTechulus": TechulusPush,
+    "PushDeer": PushDeer,
+    "pushover": Pushover,
+    "pushy": Pushy,
+    "rocket.chat": RocketChat,
     "serwersms": SerwerSMS,
+    "signal": Signal,
+    "SMSManager": SMSManager,
+    "slack": Slack,
+    "squadcast": Squadcast,
+    "SMSEagle": SMSEagle,
+    "smtp": STMP,
     "stackfield": Stackfield,
-}
+    "teams": Teams,
+    "telegram": Telegram,
+    "Splunk": Splunk,
+    "webhook": Webhook,
+    "WeCom": WeCom,
+    "GoAlert": GoAlert,
+    "ServerChan": ServerChan,
+    "ZohoCliq": ZohoCliq
+};
 
-export default NotificationFormList
+export default NotificationFormList;

src/components/settings/About.vue

@@ -4,14 +4,44 @@
             <object class="my-4" width="200" height="200" data="/icon.svg" />
             <div class="fs-4 fw-bold">Uptime Kuma</div>
             <div>{{ $t("Version") }}: {{ $root.info.version }}</div>
-            <div class="my-1 update-link"><a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a></div>
+            <div class="frontend-version">{{ $t("Frontend Version") }}: {{ $root.frontendVersion }}</div>
+
+            <div v-if="!$root.isFrontendBackendVersionMatched" class="alert alert-warning mt-4" role="alert">
+                ⚠️ {{ $t("Frontend Version do not match backend version!") }}
+            </div>
+
+            <div class="my-3 update-link"><a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a></div>
+
+            <div class="mt-1">
+                <div class="form-check">
+                    <label><input v-model="settings.checkUpdate" type="checkbox" @change="saveSettings()" /> {{ $t("Show update if available") }}</label>
+                </div>
+
+                <div class="form-check">
+                    <label><input v-model="settings.checkBeta" type="checkbox" :disabled="!settings.checkUpdate" @change="saveSettings()" /> {{ $t("Also check beta release") }}</label>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
 export default {
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    },
 
+    watch: {
+
+    }
 };
 </script>
 
@@ -19,7 +49,18 @@ export default {
 .logo {
     margin: 4em 1em;
 }
+
 .update-link {
-    font-size: 0.9em;
+    font-size: 0.8em;
 }
+
+.frontend-version {
+    font-size: 0.9em;
+    color: #cccccc;
+
+    .dark & {
+        color: #333333;
+    }
+}
+
 </style>

src/components/settings/Backup.vue

@@ -1,6 +1,12 @@
 <template>
     <div>
         <div class="my-4">
+            <div class="alert alert-warning" role="alert" style="border-radius: 15px;">
+                {{ $t("backupOutdatedWarning") }}<br />
+                <br />
+                {{ $t("backupRecommend") }}
+            </div>
+
             <h4 class="mt-4 mb-2">{{ $t("Export Backup") }}</h4>
 
             <p>
@@ -69,7 +75,7 @@
 
             <div class="mb-2">
                 <input
-                    id="importBackup"
+                    id="import-backend"
                     type="file"
                     class="form-control"
                     accept="application/json"
@@ -94,7 +100,7 @@
             <div
                 v-if="importAlert"
                 class="alert alert-danger mt-3"
-                style="padding: 6px 16px"
+                style="padding: 6px 16px;"
             >
                 {{ importAlert }}
             </div>
@@ -133,10 +139,15 @@ export default {
     },
 
     methods: {
+        /**
+         * Show the confimation dialog confirming the configuration
+         * be imported
+         */
         confirmImport() {
             this.$refs.confirmImport.show();
         },
 
+        /** Download a backup of the configuration */
         downloadBackup() {
             let time = dayjs().format("YYYY_MM_DD-hh_mm_ss");
             let fileName = `Uptime_Kuma_Backup_${time}.json`;
@@ -157,9 +168,13 @@ export default {
             downloadItem.click();
         },
 
+        /**
+         * Import the specified backup file
+         * @returns {?string}
+         */
         importBackup() {
             this.processing = true;
-            let uploadItem = document.getElementById("importBackup").files;
+            let uploadItem = document.getElementById("import-backend").files;
 
             if (uploadItem.length <= 0) {
                 this.processing = false;
@@ -198,7 +213,7 @@ export default {
 @import "../../assets/vars.scss";
 
 .dark {
-    #importBackup {
+    #import-backend {
         &::file-selector-button {
             color: $primary;
             background-color: $dark-bg;

src/components/settings/Docker.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <div class="dockerHost-list my-4">
+            <p v-if="$root.dockerHostList.length === 0">
+                {{ $t("Not available, please setup.") }}
+            </p>
+
+            <ul class="list-group mb-3" style="border-radius: 1rem;">
+                <li v-for="(dockerHost, index) in $root.dockerHostList" :key="index" class="list-group-item">
+                    {{ dockerHost.name }}<br>
+                    <a href="#" @click="$refs.dockerHostDialog.show(dockerHost.id)">{{ $t("Edit") }}</a>
+                </li>
+            </ul>
+
+            <button class="btn btn-primary me-2" type="button" @click="$refs.dockerHostDialog.show()">
+                {{ $t("Setup Docker Host") }}
+            </button>
+        </div>
+
+        <DockerHostDialog ref="dockerHostDialog" />
+    </div>
+</template>
+
+<script>
+import DockerHostDialog from "../../components/DockerHostDialog.vue";
+
+export default {
+    components: {
+        DockerHostDialog,
+    },
+
+    data() {
+        return {};
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    }
+};
+</script>

src/components/settings/General.vue

@@ -1,10 +1,10 @@
 <template>
     <div>
-        <form class="my-4" @submit.prevent="saveGeneral">
-            <!-- Timezone -->
+        <form class="my-4" autocomplete="off" @submit.prevent="saveGeneral">
+            <!-- Client side Timezone -->
             <div class="mb-4">
                 <label for="timezone" class="form-label">
-                    {{ $t("Timezone") }}
+                    {{ $t("Display Timezone") }}
                 </label>
                 <select id="timezone" v-model="$root.userTimezone" class="form-select">
                     <option value="auto">
@@ -20,6 +20,23 @@
                 </select>
             </div>
 
+            <!-- Server Timezone -->
+            <div class="mb-4">
+                <label for="timezone" class="form-label">
+                    {{ $t("Server Timezone") }}
+                </label>
+                <select id="timezone" v-model="settings.serverTimezone" class="form-select">
+                    <option value="UTC">UTC</option>
+                    <option
+                        v-for="(timezone, index) in timezoneList"
+                        :key="index"
+                        :value="timezone.value"
+                    >
+                        {{ timezone.name }}
+                    </option>
+                </select>
+            </div>
+
             <!-- Search Engine -->
             <div class="mb-4">
                 <label class="form-label">
@@ -32,7 +49,7 @@
                         v-model="settings.searchEngineIndex"
                         class="form-check-input"
                         type="radio"
-                        name="flexRadioDefault"
+                        name="searchEngineIndex"
                         :value="true"
                         required
                     />
@@ -46,7 +63,7 @@
                         v-model="settings.searchEngineIndex"
                         class="form-check-input"
                         type="radio"
-                        name="flexRadioDefault"
+                        name="searchEngineIndex"
                         :value="false"
                         required
                     />
@@ -62,31 +79,31 @@
 
                 <div class="form-check">
                     <input
-                        id="entryPageYes"
+                        id="entryPageDashboard"
                         v-model="settings.entryPage"
                         class="form-check-input"
                         type="radio"
-                        name="statusPage"
+                        name="entryPage"
                         value="dashboard"
                         required
                     />
-                    <label class="form-check-label" for="entryPageYes">
+                    <label class="form-check-label" for="entryPageDashboard">
                         {{ $t("Dashboard") }}
                     </label>
                 </div>
 
-                <div class="form-check">
+                <div v-for="statusPage in $root.statusPageList" :key="statusPage.id" class="form-check">
                     <input
-                        id="entryPageNo"
+                        :id="'status-page-' + statusPage.id"
                         v-model="settings.entryPage"
                         class="form-check-input"
                         type="radio"
-                        name="statusPage"
-                        value="statusPage"
+                        name="entryPage"
+                        :value="'statusPage-' + statusPage.slug"
                         required
                     />
-                    <label class="form-check-label" for="entryPageNo">
-                        {{ $t("Status Page") }}
+                    <label class="form-check-label" :for="'status-page-' + statusPage.id">
+                        {{ $t("Status Page") }} - {{ statusPage.title }}
                     </label>
                 </div>
             </div>
@@ -105,6 +122,7 @@
                         name="primaryBaseURL"
                         placeholder="https://"
                         pattern="https?://.+"
+                        autocomplete="new-password"
                     />
                     <button class="btn btn-outline-primary" type="button" @click="autoGetPrimaryBaseURL">
                         {{ $t("Auto Get") }}
@@ -122,7 +140,7 @@
                 <HiddenInput
                     id="steamAPIKey"
                     v-model="settings.steamAPIKey"
-                    autocomplete="one-time-code"
+                    autocomplete="new-password"
                 />
                 <div class="form-text">
                     {{ $t("steamApiKeyDescription") }}
@@ -132,6 +150,46 @@
                 </div>
             </div>
 
+            <!-- DNS Cache -->
+            <div class="mb-4">
+                <label class="form-label">
+                    {{ $t("Enable DNS Cache") }}
+                    <div class="form-text">
+                        ⚠️ {{ $t("dnsCacheDescription") }}
+                    </div>
+                </label>
+
+                <div class="form-check">
+                    <input
+                        id="dnsCacheEnable"
+                        v-model="settings.dnsCache"
+                        class="form-check-input"
+                        type="radio"
+                        name="dnsCache"
+                        :value="true"
+                        required
+                    />
+                    <label class="form-check-label" for="dnsCacheEnable">
+                        {{ $t("Enable") }}
+                    </label>
+                </div>
+
+                <div class="form-check">
+                    <input
+                        id="dnsCacheDisable"
+                        v-model="settings.dnsCache"
+                        class="form-check-input"
+                        type="radio"
+                        name="dnsCache"
+                        :value="false"
+                        required
+                    />
+                    <label class="form-check-label" for="dnsCacheDisable">
+                        {{ $t("Disable") }}
+                    </label>
+                </div>
+            </div>
+
             <!-- Save Button -->
             <div>
                 <button class="btn btn-primary" type="submit">
@@ -145,11 +203,7 @@
 <script>
 import HiddenInput from "../../components/HiddenInput.vue";
 import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
 import { timezoneList } from "../../util-frontend";
-dayjs.extend(utc);
-dayjs.extend(timezone);
 
 export default {
     components: {
@@ -178,10 +232,12 @@ export default {
     },
 
     methods: {
+        /** Save the settings */
         saveGeneral() {
             localStorage.timezone = this.$root.userTimezone;
             this.saveSettings();
         },
+        /** Get the base URL of the application */
         autoGetPrimaryBaseURL() {
             this.settings.primaryBaseURL = location.protocol + "//" + location.host;
         },
@@ -189,4 +245,3 @@ export default {
 };
 </script>
 
-<style></style>

src/components/settings/MonitorHistory.vue

@@ -7,6 +7,7 @@
                         settings.keepDataPeriodDays,
                     ])
                 }}
+                {{ $t("infiniteRetention") }}
             </label>
             <input
                 id="keepDataPeriodDays"
@@ -14,9 +15,12 @@
                 type="number"
                 class="form-control"
                 required
-                min="1"
+                min="0"
                 step="1"
             />
+            <div v-if="settings.keepDataPeriodDays < 0" class="form-text">
+                {{ $t("dataRetentionTimeError") }}
+            </div>
         </div>
         <div class="my-4">
             <button class="btn btn-primary" type="button" @click="saveSettings()">
@@ -52,7 +56,7 @@
 
 <script>
 import Confirm from "../../components/Confirm.vue";
-import { debug } from "../../util.ts";
+import { log } from "../../util.ts";
 import { useToast } from "vue-toastification";
 
 const toast = useToast();
@@ -90,33 +94,37 @@ export default {
     },
 
     methods: {
+        /** Get the current size of the database */
         loadDatabaseSize() {
-            debug("load database size");
+            log.debug("monitorhistory", "load database size");
             this.$root.getSocket().emit("getDatabaseSize", (res) => {
                 if (res.ok) {
                     this.databaseSize = res.size;
-                    debug("database size: " + res.size);
+                    log.debug("monitorhistory", "database size: " + res.size);
                 } else {
-                    debug(res);
+                    log.debug("monitorhistory", res);
                 }
             });
         },
 
+        /** Request that the database is shrunk */
         shrinkDatabase() {
             this.$root.getSocket().emit("shrinkDatabase", (res) => {
                 if (res.ok) {
                     this.loadDatabaseSize();
                     toast.success("Done");
                 } else {
-                    debug(res);
+                    log.debug("monitorhistory", res);
                 }
             });
         },
 
+        /** Show the dialog to confirm clearing stats */
         confirmClearStatistics() {
             this.$refs.confirmClearStatistics.show();
         },
 
+        /** Send the request to clear stats */
         clearStatistics() {
             this.$root.clearStatistics((res) => {
                 if (res.ok) {
@@ -129,5 +137,3 @@ export default {
     },
 };
 </script>
-
-<style></style>

src/components/settings/Notifications.vue

@@ -20,16 +20,92 @@
             </button>
         </div>
 
+        <div class="my-4 pt-4">
+            <h5 class="my-4 settings-subheading">{{ $t("settingsCertificateExpiry") }}</h5>
+            <p>{{ $t("certificationExpiryDescription") }}</p>
+            <p>{{ $t("notificationDescription") }}</p>
+            <div class="mt-1 mb-3 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 }} {{ $tc("day", day) }}</span>
+                    <button type="button" class="btn-rm-expiry btn btn-outline-danger ms-2 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')" :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 {
+            /**
+             * Variable to store the input for new certificate expiry day.
+             */
+            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: {
+        /**
+         * Remove a day from expiry notification days.
+         * @param {number} day The day to remove.
+         */
+        removeExpiryNotifDay(day) {
+            this.settings.tlsExpiryNotifyDays = this.settings.tlsExpiryNotifyDays.filter(d => d !== day);
+        },
+        /**
+         * Add a new expiry notification day.
+         * Will verify:
+         * - day is not null or empty string.
+         * - day is a number.
+         * - day is > 0.
+         * - The day is not already in the list.
+         * @param {number} day The day number to add.
+         */
+        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.settings.tlsExpiryNotifyDays.sort((a, b) => a - b);
+                        this.expiryNotifInput = null;
+                    }
+                }
+            }
+        },
     },
 };
 </script>
@@ -37,10 +113,27 @@ export default {
 <style lang="scss" scoped>
 @import "../../assets/vars.scss";
 
+.btn-rm-expiry {
+    padding-left: 11px;
+    padding-right: 11px;
+}
+
 .dark {
     .list-group-item {
         background-color: $dark-bg2;
         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>

src/components/settings/Plugins.vue

@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <div class="mt-3">{{ remotePluginListMsg }}</div>
+        <PluginItem v-for="plugin in remotePluginList" :key="plugin.id" :plugin="plugin" />
+    </div>
+</template>
+
+<script>
+import PluginItem from "../PluginItem.vue";
+
+export default {
+    components: {
+        PluginItem
+    },
+
+    data() {
+        return {
+            remotePluginList: [],
+            remotePluginListMsg: "",
+        };
+    },
+
+    computed: {
+        pluginList() {
+            return this.$parent.$parent.$parent.pluginList;
+        },
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    },
+
+    async mounted() {
+        this.loadList();
+    },
+
+    methods: {
+        loadList() {
+            this.remotePluginListMsg = this.$t("Loading") + "...";
+
+            this.$root.getSocket().emit("getPluginList", (res) => {
+                if (res.ok) {
+                    this.remotePluginList = res.pluginList;
+                    this.remotePluginListMsg = "";
+                } else {
+                    this.remotePluginListMsg = this.$t("loadingError") + " " + res.msg;
+                }
+            });
+        }
+    },
+};
+</script>

src/components/settings/Proxies.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <!-- Proxies -->
+        <div class="proxy-list my-4">
+            <p v-if="$root.proxyList.length === 0">
+                {{ $t("Not available, please setup.") }}
+            </p>
+            <p v-else>
+                {{ $t("proxyDescription") }}
+            </p>
+
+            <ul class="list-group mb-3" style="border-radius: 1rem;">
+                <li v-for="(proxy, index) in $root.proxyList" :key="index" class="list-group-item">
+                    {{ proxy.host }}:{{ proxy.port }} ({{ proxy.protocol }})
+                    <span v-if="proxy.default === true" class="badge bg-primary ms-2">{{ $t("Default") }}</span><br>
+                    <a href="#" @click="$refs.proxyDialog.show(proxy.id)">{{ $t("Edit") }}</a>
+                </li>
+            </ul>
+
+            <button class="btn btn-primary me-2" type="button" @click="$refs.proxyDialog.show()">
+                {{ $t("Setup Proxy") }}
+            </button>
+        </div>
+
+        <ProxyDialog ref="proxyDialog" />
+    </div>
+</template>
+
+<script>
+import ProxyDialog from "../../components/ProxyDialog.vue";
+
+export default {
+    components: {
+        ProxyDialog
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/vars.scss";
+
+.dark {
+    .list-group-item {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
+    }
+}
+</style>

src/components/settings/ReverseProxy.vue

@@ -0,0 +1,202 @@
+<template>
+    <div>
+        <h4 class="mt-4">Cloudflare Tunnel</h4>
+
+        <div class="my-3">
+            <div>
+                cloudflared:
+                <span v-if="installed === true" class="text-primary">{{ $t("Installed") }}</span>
+                <span v-else-if="installed === false" class="text-danger">{{ $t("Not installed") }}</span>
+            </div>
+
+            <div>
+                {{ $t("Status") }}:
+                <span v-if="running" class="text-primary">{{ $t("Running") }}</span>
+                <span v-else-if="!running" class="text-danger">{{ $t("Not running") }}</span>
+            </div>
+
+            <div v-if="false">
+                {{ message }}
+            </div>
+
+            <div v-if="errorMessage" class="mt-3">
+                {{ $t("Message:") }}
+                <textarea v-model="errorMessage" class="form-control" readonly></textarea>
+            </div>
+
+            <i18n-t v-if="installed === false" tag="p" keypath="wayToGetCloudflaredURL">
+                <a
+                    href="https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation/"
+                    target="_blank"
+                >{{ $t("cloudflareWebsite") }}</a>
+            </i18n-t>
+        </div>
+
+        <!-- If installed show token input -->
+        <div v-if="installed" class="mb-2">
+            <div class="mb-4">
+                <label class="form-label" for="cloudflareTunnelToken">
+                    Cloudflare Tunnel {{ $t("Token") }}
+                </label>
+                <HiddenInput
+                    id="cloudflareTunnelToken"
+                    v-model="cloudflareTunnelToken"
+                    autocomplete="new-password"
+                    :readonly="running"
+                />
+                <div class="form-text">
+                    <div v-if="cloudflareTunnelToken" class="mb-3">
+                        <span v-if="!running" class="remove-token" @click="removeToken">{{ $t("Remove Token") }}</span>
+                    </div>
+
+                    {{ $t("Don't know how to get the token? Please read the guide:") }}<br />
+                    <a href="https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy-with-Cloudflare-Tunnel" target="_blank">
+                        https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy-with-Cloudflare-Tunnel
+                    </a>
+                </div>
+            </div>
+
+            <div>
+                <button v-if="!running" class="btn btn-primary" type="submit" @click="start">
+                    {{ $t("Start") }} cloudflared
+                </button>
+
+                <button v-if="running" class="btn btn-danger" type="submit" @click="$refs.confirmStop.show();">
+                    {{ $t("Stop") }} cloudflared
+                </button>
+
+                <Confirm ref="confirmStop" btn-style="btn-danger" :yes-text="$t('Stop') + ' cloudflared'" :no-text="$t('Cancel')" @yes="stop">
+                    {{ $t("The current connection may be lost if you are currently connecting via Cloudflare Tunnel. Are you sure want to stop it? Type your current password to confirm it.") }}
+
+                    <p class="mt-2">{{ $t("disableCloudflaredNoAuthMsg") }}</p>
+
+                    <div v-if="!settings.disableAuth" class="mt-3">
+                        <label for="current-password2" class="form-label">
+                            {{ $t("Current Password") }}
+                        </label>
+                        <input
+                            id="current-password2"
+                            v-model="currentPassword"
+                            type="password"
+                            class="form-control"
+                            required
+                        />
+                    </div>
+                </Confirm>
+            </div>
+        </div>
+
+        <h4 class="mt-4">{{ $t("Other Software") }}</h4>
+        <div>
+            {{ $t("For example: nginx, Apache and Traefik.") }} <br />
+            {{ $t("Please read") }} <a href="https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy" target="_blank">https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy</a>.
+        </div>
+
+        <h4 class="my-4">{{ $t("HTTP Headers") }}</h4>
+        <div class="my-3">
+            <label class="form-label">
+                {{ $t("Trust Proxy") }}
+            </label>
+            <div class="form-check">
+                <input
+                    id="trustProxyYes"
+                    v-model="settings.trustProxy"
+                    class="form-check-input"
+                    type="radio"
+                    name="trustProxyYes"
+                    :value="true"
+                    required
+                />
+                <label class="form-check-label" for="trustProxyYes">
+                    {{ $t("Yes") }}
+                </label>
+            </div>
+            <div class="form-check">
+                <input
+                    id="trustProxyNo"
+                    v-model="settings.trustProxy"
+                    class="form-check-input"
+                    type="radio"
+                    name="flexRadioDefault"
+                    :value="false"
+                    required
+                />
+                <label class="form-check-label" for="trustProxyNo">
+                    {{ $t("No") }}
+                </label>
+            </div>
+
+            <div class="form-text">
+                {{ $t("trustProxyDescription") }}
+            </div>
+        </div>
+
+        <div>
+            <button class="btn btn-primary" type="submit" @click="saveSettings()">
+                {{ $t("Save") }}
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../../components/HiddenInput.vue";
+import Confirm from "../Confirm.vue";
+
+const prefix = "cloudflared_";
+
+export default {
+    components: {
+        HiddenInput,
+        Confirm
+    },
+    data() {
+        // See /src/mixins/socket.js
+        return this.$root.cloudflared;
+    },
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    },
+    watch: {
+
+    },
+    created() {
+        this.$root.getSocket().emit(prefix + "join");
+    },
+    unmounted() {
+        this.$root.getSocket().emit(prefix + "leave");
+    },
+    methods: {
+        /** Start the Cloudflare tunnel */
+        start() {
+            this.$root.getSocket().emit(prefix + "start", this.cloudflareTunnelToken);
+        },
+        /** Stop the Cloudflare tunnel */
+        stop() {
+            this.$root.getSocket().emit(prefix + "stop", this.currentPassword, (res) => {
+                this.$root.toastRes(res);
+            });
+        },
+        /** Remove the token for the Cloudflare tunnel */
+        removeToken() {
+            this.$root.getSocket().emit(prefix + "removeToken");
+            this.cloudflareTunnelToken = "";
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.remove-token {
+    text-decoration: underline;
+    cursor: pointer;
+}
+</style>

src/components/settings/Security.vue

@@ -4,11 +4,11 @@
             <!-- Change Password -->
             <template v-if="!settings.disableAuth">
                 <p>
-                    {{ $t("Current User") }}: <strong>{{ username }}</strong>
+                    {{ $t("Current User") }}: <strong>{{ $root.username }}</strong>
                     <button v-if="! settings.disableAuth" id="logout-btn" class="btn btn-danger ms-4 me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
                 </p>
 
-                <h5 class="my-4">{{ $t("Change Password") }}</h5>
+                <h5 class="my-4 settings-subheading">{{ $t("Change Password") }}</h5>
                 <form class="mb-3" @submit.prevent="savePassword">
                     <div class="mb-3">
                         <label for="current-password" class="form-label">
@@ -62,7 +62,7 @@
             </template>
 
             <div v-if="! settings.disableAuth" class="mt-5 mb-3">
-                <h5 class="my-4">
+                <h5 class="my-4 settings-subheading">
                     {{ $t("Two Factor Authentication") }}
                 </h5>
                 <div class="mb-4">
@@ -78,7 +78,7 @@
 
             <div class="my-4">
                 <!-- Advanced -->
-                <h5 class="my-4">{{ $t("Advanced") }}</h5>
+                <h5 class="my-4 settings-subheading">{{ $t("Advanced") }}</h5>
 
                 <div class="mb-4">
                     <button v-if="settings.disableAuth" id="enableAuth-btn" class="btn btn-outline-primary me-2 mb-2" @click="enableAuth">{{ $t("Enable Auth") }}</button>
@@ -90,132 +90,24 @@
         <TwoFADialog ref="TwoFADialog" />
 
         <Confirm ref="confirmDisableAuth" btn-style="btn-danger" :yes-text="$t('I understand, please disable')" :no-text="$t('Leave')" @yes="disableAuth">
-            <template v-if="$i18n.locale === 'es-ES' ">
-                <p>Seguro que deseas <strong>deshabilitar la autenticación</strong>?</p>
-                <p>Es para <strong>quien implementa autenticación de terceros</strong> ante Uptime Kuma como por ejemplo Cloudflare Access.</p>
-                <p>Por favor usar con cuidado.</p>
-            </template>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <p v-html="$t('disableauth.message1')"></p>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <p v-html="$t('disableauth.message2')"></p>
+            <p>{{ $t("Please use this option carefully!") }}</p>
 
-            <template v-else-if="$i18n.locale === 'pt-BR' ">
-                <p>Você tem certeza que deseja <strong>desativar a autenticação</strong>?</p>
-                <p>Isso é para <strong>alguém que tem autenticação de terceiros</strong> na frente do 'UpTime Kuma' como o Cloudflare Access.</p>
-                <p>Por favor, utilize isso com cautela.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'zh-HK' ">
-                <p>你是否確認<strong>取消登入認証</strong>？</p>
-                <p>這個功能是設計給已有<strong>第三方認証</strong>的用家，例如 Cloudflare Access。</p>
-                <p>請小心使用。</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'zh-CN' ">
-                <p>是否确定 <strong>取消登录验证</strong>？</p>
-                <p>这是为 <strong>有第三方认证</strong> 的用户提供的功能，如 Cloudflare Access</p>
-                <p>请谨慎使用！</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'zh-TW' ">
-                <p>你是否要<strong>取消登入驗證</strong>？</p>
-                <p>此功能是設計給已有<strong>第三方認證</strong>的使用者，例如 Cloudflare Access。</p>
-                <p>請謹慎使用。</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'de-DE' ">
-                <p>Bist du sicher das du die <strong>Authentifizierung deaktivieren</strong> möchtest?</p>
-                <p>Es ist für <strong>jemanden der eine externe Authentifizierung</strong> vor Uptime Kuma geschaltet hat, wie z.B. Cloudflare Access.</p>
-                <p>Bitte mit Vorsicht nutzen.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'sr' ">
-                <p>Да ли сте сигурни да желите да <strong>искључите аутентификацију</strong>?</p>
-                <p>То је за <strong>оне који имају додату аутентификацију</strong> испред Uptime Kuma као на пример Cloudflare Access.</p>
-                <p>Молим Вас користите ово са пажњом.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'sr-latn' ">
-                <p>Da li ste sigurni da želite da <strong>isključite autentifikaciju</strong>?</p>
-                <p>To je za <strong>one koji imaju dodatu autentifikaciju</strong> ispred Uptime Kuma kao na primer Cloudflare Access.</p>
-                <p>Molim Vas koristite ovo sa pažnjom.</p>
-            </template>
-
-            <template v-if="$i18n.locale === 'hr-HR' ">
-                <p>Jeste li sigurni da želite <strong>isključiti autentikaciju</strong>?</p>
-                <p>To je za <strong>korisnike koji imaju vanjsku autentikaciju stranice</strong> ispred Uptime Kume, poput usluge Cloudflare Access.</p>
-                <p>Pažljivo koristite ovu opciju.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'tr-TR' ">
-                <p><strong>Şifreli girişi devre dışı bırakmak istediğinizden</strong>emin misiniz?</p>
-                <p>Bu, Uptime Kuma'nın önünde Cloudflare Access gibi <strong>üçüncü taraf yetkilendirmesi olan</strong> kişiler içindir.</p>
-                <p>Lütfen dikkatli kullanın.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'ko-KR' ">
-                <p>정말로 <strong>인증 기능을 끌까요</strong>?</p>
-                <p>이 기능은 <strong>Cloudflare Access와 같은 서드파티 인증</strong>을 Uptime Kuma 앞에 둔 사용자를 위한 기능이에요.</p>
-                <p>신중하게 사용하세요.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'pl' ">
-                <p>Czy na pewno chcesz <strong>wyłączyć autoryzację</strong>?</p>
-                <p>Jest przeznaczony dla <strong>kogoś, kto ma autoryzację zewnętrzną</strong> przed Uptime Kuma, taką jak Cloudflare Access.</p>
-                <p>Proszę używać ostrożnie.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'et-EE' ">
-                <p>Kas soovid <strong>lülitada autentimise välja</strong>?</p>
-                <p>Kastuamiseks <strong>välise autentimispakkujaga</strong>, näiteks Cloudflare Access.</p>
-                <p>Palun kasuta vastutustundlikult.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'it-IT' ">
-                <p>Si è certi di voler <strong>disabilitare l'autenticazione</strong>?</p>
-                <p>È per <strong>chi ha l'autenticazione gestita da terze parti</strong> messa davanti ad Uptime Kuma, ad esempio Cloudflare Access.</p>
-                <p>Utilizzare con attenzione.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'id-ID' ">
-                <p>Apakah Anda yakin ingin <strong>menonaktifkan autentikasi</strong>?</p>
-                <p>Ini untuk <strong>mereka yang memiliki autentikasi pihak ketiga</strong> diletakkan di depan Uptime Kuma, misalnya akses Cloudflare.</p>
-                <p>Gunakan dengan hati-hati.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'ru-RU' ">
-                <p>Вы уверены, что хотите <strong>отключить авторизацию</strong>?</p>
-                <p>Это подходит для <strong>тех, у кого стоит другая авторизация</strong> перед открытием Uptime Kuma, например Cloudflare Access.</p>
-                <p>Пожалуйста, используйте с осторожностью.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'fa' ">
-                <p>آیا مطمئن هستید که میخواهید <strong>احراز هویت را غیر فعال کنید</strong>?</p>
-                <p>این ویژگی برای کسانی است که <strong> لایه امنیتی شخص ثالث دیگر بر روی این آدرس فعال کرده‌اند</strong>، مانند Cloudflare Access.</p>
-                <p>لطفا از این امکان با دقت استفاده کنید.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'bg-BG' ">
-                <p>Сигурни ли сте, че желаете да <strong>изключите удостоверяването</strong>?</p>
-                <p>Използва се в случаите, когато <strong>има настроен алтернативен метод за удостоверяване</strong> преди Uptime Kuma, например Cloudflare Access.</p>
-                <p>Моля, използвайте с повишено внимание.</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'hu' ">
-                <p>Biztos benne, hogy <strong>kikapcsolja a hitelesítést</strong>?</p>
-                <p>Akkor érdemes, ha <strong>van 3rd-party hitelesítés</strong> az Uptime Kuma-t megelőzően mint a Cloudflare Access.</p>
-                <p>Használja megfontoltan!</p>
-            </template>
-
-            <template v-else-if="$i18n.locale === 'nb-NO' ">
-                <p>Er du sikker på at du vil <strong>deaktiver autentisering</strong>?</p>
-                <p>Dette er for <strong>de som har tredjepartsautorisering</strong> foran Uptime Kuma, for eksempel Cloudflare Access.</p>
-                <p>Vennligst vær forsiktig.</p>
-            </template>
-
-            <!-- English (en) -->
-            <template v-else>
-                <p>Are you sure want to <strong>disable auth</strong>?</p>
-                <p>It is for <strong>someone who have 3rd-party auth</strong> in front of Uptime Kuma such as Cloudflare Access.</p>
-                <p>Please use it carefully.</p>
-            </template>
+            <div class="mb-3">
+                <label for="current-password2" class="form-label">
+                    {{ $t("Current Password") }}
+                </label>
+                <input
+                    id="current-password2"
+                    v-model="password.currentPassword"
+                    type="password"
+                    class="form-control"
+                    required
+                />
+            </div>
         </Confirm>
     </div>
 </template>
@@ -232,7 +124,6 @@ export default {
 
     data() {
         return {
-            username: "",
             invalidPassword: false,
             password: {
                 currentPassword: "",
@@ -260,11 +151,8 @@ export default {
         },
     },
 
-    mounted() {
-        this.loadUsername();
-    },
-
     methods: {
+        /** Check new passwords match before saving them */
         savePassword() {
             if (this.password.newPassword !== this.password.repeatNewPassword) {
                 this.invalidPassword = true;
@@ -282,19 +170,20 @@ export default {
             }
         },
 
-        loadUsername() {
-            const jwtPayload = this.$root.getJWTPayload();
-
-            if (jwtPayload) {
-                this.username = jwtPayload.username;
-            }
-        },
-
+        /** Disable authentication for web app access */
         disableAuth() {
             this.settings.disableAuth = true;
-            this.saveSettings();
+
+            // Need current password to disable auth
+            // Set it to empty if done
+            this.saveSettings(() => {
+                this.password.currentPassword = "";
+                this.$root.username = null;
+                this.$root.socket.token = "autoLogin";
+            }, this.password.currentPassword);
         },
 
+        /** Enable authentication for web app access */
         enableAuth() {
             this.settings.disableAuth = false;
             this.saveSettings();
@@ -302,6 +191,7 @@ export default {
             location.reload();
         },
 
+        /** Show confirmation dialog for disable auth */
         confirmDisableAuth() {
             this.$refs.confirmDisableAuth.show();
         },
@@ -309,15 +199,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss" scoped>
-@import "../../assets/vars.scss";
-
-h5:after {
-    content: "";
-    display: block;
-    width: 50%;
-    padding-top: 8px;
-    border-bottom: 1px solid $dark-border-color;
-}
-</style>

src/components/settings/Tags.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="my-4">
+        <div class="mx-4 pt-1 my-3">
+            <button class="btn btn-primary" @click.stop="addTag"><font-awesome-icon icon="plus" /> {{ $t("Add New Tag") }}</button>
+        </div>
+
+        <div class="tags-list my-3">
+            <div v-for="(tag, index) in tagsList" :key="tag.id" class="d-flex align-items-center mx-4 py-1 tags-list-row" :disabled="processing" @click="editTag(index)">
+                <div class="col-5 ps-1">
+                    <Tag :item="tag" />
+                </div>
+                <div class="col-5 px-1">
+                    <div>{{ monitorsByTag(tag.id).length }} {{ $tc("Monitor", monitorsByTag(tag.id).length) }}</div>
+                </div>
+                <div class="col-2 pe-3 d-flex justify-content-end">
+                    <button type="button" class="btn ms-2 py-1">
+                        <font-awesome-icon class="" icon="edit" />
+                    </button>
+                    <button type="button" class="btn-rm-tag btn btn-outline-danger ms-2 py-1" :disabled="processing" @click.stop="deleteConfirm(index)">
+                        <font-awesome-icon class="" icon="trash" />
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <TagEditDialog ref="tagEditDialog" :updated="tagsUpdated" :existing-tags="tagsList" />
+        <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteTag">
+            {{ $t("confirmDeleteTagMsg") }}
+        </Confirm>
+    </div>
+</template>
+
+<script>
+import { useToast } from "vue-toastification";
+import TagEditDialog from "../../components/TagEditDialog.vue";
+import Tag from "../Tag.vue";
+import Confirm from "../Confirm.vue";
+const toast = useToast();
+
+export default {
+    components: {
+        Confirm,
+        TagEditDialog,
+        Tag,
+    },
+
+    data() {
+        return {
+            processing: false,
+            tagsList: null,
+            deletingTag: null,
+        };
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    },
+
+    mounted() {
+        this.getExistingTags();
+    },
+
+    methods: {
+        /**
+         * Reflect tag changes in the UI by fetching data. Callback for the edit tag dialog.
+         * @returns {void}
+         */
+        tagsUpdated() {
+            this.getExistingTags();
+            this.$root.getMonitorList();
+        },
+
+        /**
+         * Get list of tags from server
+         * @returns {void}
+         */
+        getExistingTags() {
+            this.processing = true;
+            this.$root.getSocket().emit("getTags", (res) => {
+                this.processing = false;
+                if (res.ok) {
+                    this.tagsList = res.tags;
+                } else {
+                    toast.error(res.msg);
+                }
+            });
+        },
+
+        /**
+         * Show confirmation for deleting a tag
+         * @param {number} index index of the tag to delete in the local tagsList
+         * @returns {void}
+         */
+        deleteConfirm(index) {
+            this.deletingTag = this.tagsList[index];
+            this.$refs.confirmDelete.show();
+        },
+
+        /**
+         * Show dialog for adding a new tag
+         * @returns {void}
+         */
+        addTag() {
+            this.$refs.tagEditDialog.reset();
+            this.$refs.tagEditDialog.show();
+        },
+
+        /**
+         * Show dialog for editing a tag
+         * @param {number} index index of the tag to edit in the local tagsList
+         * @returns {void}
+         */
+        editTag(index) {
+            this.$refs.tagEditDialog.show(this.tagsList[index]);
+        },
+
+        /**
+         * Delete the tag "deletingTag" from server
+         * @returns {void}
+         */
+        deleteTag() {
+            this.processing = true;
+            this.$root.getSocket().emit("deleteTag", this.deletingTag.id, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok) {
+                    this.tagsUpdated();
+                }
+            });
+        },
+
+        /**
+         * Get monitors which has a specific tag locally
+         * @param {number} tagId id of the tag to filter
+         * @returns {Object[]} list of monitors which has a specific tag
+         */
+        monitorsByTag(tagId) {
+            return Object.values(this.$root.monitorList).filter((monitor) => {
+                return monitor.tags.find(monitorTag => monitorTag.tag_id === tagId);
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/vars.scss";
+
+.btn-rm-tag {
+    padding-left: 11px;
+    padding-right: 11px;
+}
+
+.tags-list .tags-list-row {
+    cursor: pointer;
+    border-top: 1px solid rgba(0, 0, 0, 0.125);
+
+    .dark & {
+        border-top: 1px solid $dark-border-color;
+    }
+
+    &:hover {
+        background-color: $highlight-white;
+    }
+
+    .dark &:hover {
+        background-color: $dark-bg2;
+    }
+}
+
+</style>