Merge branch 'master' into DeeJayPee_master

2025-08-22 03:30:11 +08:00 · 2021-10-08 01:27:06 +08:00
parent 044c78aa2d 7907c07034
commit 5b4af550fb
68 changed files with 1622 additions and 521 deletions
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -321,7 +321,7 @@ h2 {
    .item {
        display: block;
        text-decoration: none;
-        padding: 14px 15px;
+        padding: 13px 15px 10px 15px;
        border-radius: 10px;
        transition: all ease-in-out 0.15s;

--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -38,7 +38,7 @@ export default {
            beatMargin: 4,
            move: false,
            maxBeat: -1,
-        };
+        }
    },
    computed: {

@@ -69,12 +69,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 +84,7 @@ export default {
            return {
                padding: `${topBottom}px ${leftRight}px`,
                width: "100%",
-            };
+            }
        },

        barStyle() {
@@ -94,12 +94,12 @@ export default {
                return {
                    transition: "all ease-in-out 0.25s",
                    transform: `translateX(${width}px)`,
-                };
+                }

            }
            return {
                transform: "translateX(0)",
-            };
+            }

        },

@@ -109,7 +109,7 @@ export default {
                height: this.beatHeight + "px",
                margin: this.beatMargin + "px",
                "--hover-scale": this.hoverScale,
-            };
+            }
        },

    },
@@ -120,7 +120,7 @@ export default {

                setTimeout(() => {
                    this.move = false;
-                }, 300);
+                }, 300)
            },
            deep: true,
        },
@@ -162,7 +162,7 @@ export default {
    methods: {
        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))
            }
        },

@@ -170,7 +170,7 @@ export default {
            return `${this.$root.datetime(beat.time)} - ${beat.msg}`;
        }
    },
-};
+}
 </script>

 <style lang="scss" scoped>
@@ -183,9 +183,6 @@ export default {
 }

 .hp-bar-big {
-    display: flex;
-    justify-content: flex-end;
-
    .beat {
        display: inline-block;
        background-color: $primary;
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -3,10 +3,10 @@
        <div class="list-header">
            <div class="placeholder"></div>
            <div class="search-wrapper">
-                <a v-if="!searchText" class="search-icon">
+                <a v-if="searchText == ''" class="search-icon">
                    <font-awesome-icon icon="search" />
                </a>
-                <a v-if="searchText" class="search-icon" @click="clearSearchText">
+                <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...')" />
@@ -19,21 +19,21 @@

            <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-6 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar === 'bottom' || $root.userHeartbeatBar === 'none' }">
+                    <div class="col-9 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
                        <div class="info">
                            <Uptime :monitor="item" type="24" :pill="true" />
-                            <span class="ms-1">{{ item.name }}</span>
+                            {{ item.name }}
                        </div>
                        <div class="tags">
                            <Tag v-for="tag in item.tags" :key="tag" :item="tag" :size="'sm'" />
                        </div>
                    </div>
-                    <div v-show="$root.userHeartbeatBar === 'normal'" :key="$root.userHeartbeatBar" class="col-6 col-md-4 small-padding">
+                    <div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-3 col-md-4">
                        <HeartbeatBar size="small" :monitor-id="item.id" />
                    </div>
                </div>

-                <div v-if="$root.userHeartbeatBar === 'bottom'" class="row">
+                <div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
                    <div class="col-12">
                        <HeartbeatBar size="small" :monitor-id="item.id" />
                    </div>
@@ -47,6 +47,7 @@
 import HeartbeatBar from "../components/HeartbeatBar.vue";
 import Uptime from "../components/Uptime.vue";
 import Tag from "../components/Tag.vue";
+import { getMonitorRelativeURL } from "../util.ts";

 export default {
    components: {
@@ -95,7 +96,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)
@@ -109,7 +110,7 @@ export default {
    },
    methods: {
        monitorURL(id) {
-            return "/dashboard/" + id;
+            return getMonitorRelativeURL(id);
        },
        clearSearchText() {
            this.searchText = "";
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -68,11 +68,11 @@
 </template>

 <script lang="ts">
-import { Modal } from "bootstrap"
-import { ucfirst } from "../util.ts"
+import { Modal } from "bootstrap";
+import { ucfirst } from "../util.ts";

 import Confirm from "./Confirm.vue";
-import NotificationFormList from "./notifications"
+import NotificationFormList from "./notifications";

 export default {
    components: {
@@ -93,41 +93,40 @@ export default {
                isDefault: false,
                // Do not set default value here, please scroll to show()
            }
-        }
+        };
    },

    computed: {
        currentForm() {
            if (!this.notification.type) {
-                return null
+                return null;
            }
-            return NotificationFormList[this.notification.type]
+            return NotificationFormList[this.notification.type];
        }
    },

    watch: {
        "notification.type"(to, from) {
            let oldName;
-
            if (from) {
-                oldName = `My ${ucfirst(from)} Alert (1)`;
+                oldName = this.getUniqueDefaultName(from);
            } else {
                oldName = "";
            }

            if (! this.notification.name || this.notification.name === oldName) {
-                this.notification.name = `My ${ucfirst(to)} Alert (1)`
+                this.notification.name = this.getUniqueDefaultName(to);
            }
        },
    },
    mounted() {
-        this.modal = new Modal(this.$refs.modal)
+        this.modal = new Modal(this.$refs.modal);
    },
    methods: {

        deleteConfirm() {
            this.modal.hide();
-            this.$refs.confirmDelete.show()
+            this.$refs.confirmDelete.show();
        },

        show(notificationID) {
@@ -146,19 +145,19 @@ export default {
                    name: "",
                    type: null,
                    isDefault: false,
-                }
+                };

                // Set Default value here
                this.notification.type = this.notificationTypes[0];
            }

-            this.modal.show()
+            this.modal.show();
        },

        submit() {
            this.processing = true;
            this.$root.getSocket().emit("addNotification", this.notification, this.id, (res) => {
-                this.$root.toastRes(res)
+                this.$root.toastRes(res);
                this.processing = false;

                if (res.ok) {
@@ -170,30 +169,45 @@ export default {
                    }

                }
-            })
+            });
        },

        test() {
            this.processing = true;
            this.$root.getSocket().emit("testNotification", this.notification, (res) => {
-                this.$root.toastRes(res)
+                this.$root.toastRes(res);
                this.processing = false;
-            })
+            });
        },

        deleteNotification() {
            this.processing = true;
            this.$root.getSocket().emit("deleteNotification", this.id, (res) => {
-                this.$root.toastRes(res)
+                this.$root.toastRes(res);
                this.processing = false;

                if (res.ok) {
-                    this.modal.hide()
+                    this.modal.hide();
                }
-            })
+            });
        },
+        /**
+         * @param {keyof NotificationFormList} notificationKey
+         * @return {string}
+         */
+        getUniqueDefaultName(notificationKey) {
+            let index = 1;
+            let name = "";
+            do {
+                name = this.$t("defaultNotificationName", {
+                    notification: this.$t(notificationKey).replace(/\(.+\)/, "").trim(),
+                    number: index++
+                });
+            } while (this.$root.notificationList.find(it => it.name === name));
+            return name;
+        }
    },
-}
+};
 </script>

 <style lang="scss" scoped>
--- a/src/components/TagsManager.vue
+++ b/src/components/TagsManager.vue
@@ -1,7 +1,7 @@
 <template>
    <div>
-        <h4 class="mb-3">{{ $t("Tags") }}</h4>
-        <div class="mb-3 p-1">
+        <h4 class="mt-5 mb-3">{{ $t("Tags") }}</h4>
+        <div v-if="selectedTags.length > 0" class="mb-2 p-1">
            <tag
                v-for="item in selectedTags"
                :key="item.id"
@@ -124,8 +124,8 @@
 import { Modal } from "bootstrap";
 import VueMultiselect from "vue-multiselect";
 import Tag from "../components/Tag.vue";
-import { useToast } from "vue-toastification"
-const toast = useToast()
+import { useToast } from "vue-toastification";
+const toast = useToast();

 export default {
    components: {
@@ -186,7 +186,7 @@ export default {
                    color: "#7C3AED" },
                { name: this.$t("Pink"),
                    color: "#DB2777" },
-            ]
+            ];
        },
        validateDraftTag() {
            let nameInvalid = false;
@@ -227,7 +227,7 @@ export default {
                invalid,
                nameInvalid,
                valueInvalid,
-            }
+            };
        },
    },
    mounted() {
@@ -243,7 +243,7 @@ export default {
                if (res.ok) {
                    this.existingTags = res.tags;
                } else {
-                    toast.error(res.msg)
+                    toast.error(res.msg);
                }
            });
        },
@@ -277,7 +277,7 @@ export default {
                        name: this.newDraftTag.select.name,
                        value: this.newDraftTag.value,
                        new: true,
-                    })
+                    });
                }
            } else {
                // Add new Tag
@@ -286,7 +286,7 @@ export default {
                    name: this.newDraftTag.name.trim(),
                    value: this.newDraftTag.value,
                    new: true,
-                })
+                });
            }
            this.clearDraftTag();
        },
@@ -348,7 +348,7 @@ export default {
                        if (tag.name == newTag.name && tag.color == newTag.color) {
                            tag.id = newTagResult.id;
                        }
-                    })
+                    });
                } else {
                    tagId = newTag.id;
                }
--- a/src/components/Uptime.vue
+++ b/src/components/Uptime.vue
@@ -22,33 +22,33 @@ export default {
                return Math.round(this.$root.uptimeList[key] * 10000) / 100 + "%";
            }

-            return this.$t("notAvailableShort");
+            return this.$t("notAvailableShort")
        },

        color() {
            if (this.lastHeartBeat.status === 0) {
-                return "danger";
+                return "danger"
            }

            if (this.lastHeartBeat.status === 1) {
-                return "primary";
+                return "primary"
            }

            if (this.lastHeartBeat.status === 2) {
-                return "warning";
+                return "warning"
            }

-            return "secondary";
+            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() {
@@ -59,7 +59,7 @@ export default {
            return "";
        },
    },
-};
+}
 </script>

 <style>
--- a/src/components/notifications/Apprise.vue
+++ b/src/components/notifications/Apprise.vue
@@ -1,20 +1,21 @@
 <template>
    <div class="mb-3">
-        <label for="apprise-url" class="form-label">Apprise URL</label>
+        <label for="apprise-url" class="form-label">{{ $t("Apprise URL") }}</label>
        <input id="apprise-url" v-model="$parent.notification.appriseURL" type="text" class="form-control" required>
        <div class="form-text">
-            <p>Example: twilio://AccountSid:AuthToken@FromPhoneNo</p>
-            <p>
-                Read more: <a href="https://github.com/caronc/apprise/wiki#notification-services" target="_blank">https://github.com/caronc/apprise/wiki#notification-services</a>
-            </p>
+            <p>{{ $t("Example:", ["twilio://AccountSid:AuthToken@FromPhoneNo"]) }}</p>
+            <i18n-t tag="p" keypath="Read more:">
+                <a href="https://github.com/caronc/apprise/wiki#notification-services" target="_blank">https://github.com/caronc/apprise/wiki#notification-services</a>
+            </i18n-t>
        </div>
    </div>
    <div class="mb-3">
-        <p>
-            Status:
-            <span v-if="appriseInstalled" class="text-primary">Apprise is installed</span>
-            <span v-else class="text-danger">Apprise is not installed. <a href="https://github.com/caronc/apprise" target="_blank">Read more</a></span>
-        </p>
+        <i18n-t tag="p" keypath="Status:">
+            <span v-if="appriseInstalled" class="text-primary">{{ $t("appriseInstalled") }}</span>
+            <i18n-t v-else tag="span" keypath="appriseNotInstalled" class="text-danger">
+                <a href="https://github.com/caronc/apprise" target="_blank">{{ $t("Read more") }}</a>
+            </i18n-t>
+        </i18n-t>
    </div>
 </template>

@@ -23,12 +24,12 @@ export default {
    data() {
        return {
            appriseInstalled: false
-        }
+        };
    },
    mounted() {
        this.$root.getSocket().emit("checkApprise", (installed) => {
            this.appriseInstalled = installed;
-        })
+        });
    },
-}
+};
 </script>
--- a/src/components/notifications/Discord.vue
+++ b/src/components/notifications/Discord.vue
@@ -1,20 +1,19 @@
 <template>
    <div class="mb-3">
-        <label for="discord-webhook-url" class="form-label">Discord Webhook URL</label>
+        <label for="discord-webhook-url" class="form-label">{{ $t("Discord Webhook URL") }}</label>
        <input id="discord-webhook-url" v-model="$parent.notification.discordWebhookUrl" type="text" class="form-control" required autocomplete="false">
        <div class="form-text">
-            You can get this by going to Server Settings -> Integrations -> Create Webhook
+            {{ $t("wayToGetDiscordURL") }}
        </div>
    </div>

    <div class="mb-3">
-        <label for="discord-username" class="form-label">Bot Display Name</label>
+        <label for="discord-username" class="form-label">{{ $t("Bot Display Name") }}</label>
        <input id="discord-username" v-model="$parent.notification.discordUsername" type="text" class="form-control" autocomplete="false" :placeholder="$root.appName">
    </div>

-
    <div class="mb-3">
-        <label for="discord-prefix-message" class="form-label">Prefix Custom Message</label>
-        <input id="discord-prefix-message" v-model="$parent.notification.discordPrefixMessage" type="text" class="form-control" autocomplete="false" placeholder="Hello @everyone is...">
+        <label for="discord-prefix-message" class="form-label">{{ $t("Prefix Custom Message") }}</label>
+        <input id="discord-prefix-message" v-model="$parent.notification.discordPrefixMessage" type="text" class="form-control" autocomplete="false" :placeholder="$t('Hello @everyone is...')">
    </div>
 </template>
--- a/src/components/notifications/Gotify.vue
+++ b/src/components/notifications/Gotify.vue
@@ -1,17 +1,17 @@
 <template>
    <div class="mb-3">
-        <label for="gotify-application-token" class="form-label">Application Token</label>
+        <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>
    </div>
    <div class="mb-3">
-        <label for="gotify-server-url" class="form-label">Server URL</label>
+        <label for="gotify-server-url" class="form-label">{{ $t("Server URL") }}</label>
        <div class="input-group mb-3">
            <input id="gotify-server-url" v-model="$parent.notification.gotifyserverurl" type="text" class="form-control" required>
        </div>
    </div>

    <div class="mb-3">
-        <label for="gotify-priority" class="form-label">Priority</label>
+        <label for="gotify-priority" class="form-label">{{ $t("Priority") }}</label>
        <input id="gotify-priority" v-model="$parent.notification.gotifyPriority" type="number" class="form-control" required min="0" max="10" step="1">
    </div>
 </template>
--- a/src/components/notifications/Line.vue
+++ b/src/components/notifications/Line.vue
@@ -1,21 +1,21 @@
 <template>
    <div class="mb-3">
-        <label for="line-channel-access-token" class="form-label">Channel access token</label>
+        <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>
    </div>
-    <div class="form-text">
-        Line Developers Console - <b>Basic Settings</b>
-    </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>
        <input id="line-user-id" v-model="$parent.notification.lineUserID" type="text" class="form-control" required>
    </div>
-    <div class="form-text">
-        Line Developers Console - <b>Messaging API</b>
-    </div>
-    <div class="form-text" style="margin-top: 8px;">
-        First access the <a href="https://developers.line.biz/console/" target="_blank">Line Developers Console</a>, create a provider and channel (Messaging API), then you can get the channel access token and user id from the above mentioned menu items.
-    </div>
+    <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
+        <b>{{ $t("Messaging API") }}</b>
+    </i18n-t>
+    <i18n-t tag="div" keypath="wayToGetLineChannelToken" class="form-text" style="margin-top: 8px;">
+        <a href="https://developers.line.biz/console/" target="_blank">{{ $t("Line Developers Console") }}</a>
+    </i18n-t>
 </template>

 <script>
@@ -25,5 +25,5 @@ export default {
    components: {
        HiddenInput,
    },
-}
+};
 </script>
--- a/src/components/notifications/LunaSea.vue
+++ b/src/components/notifications/LunaSea.vue
@@ -1,9 +1,9 @@
 <template>
    <div class="mb-3">
-        <label for="lunasea-device" class="form-label">LunaSea Device ID<span style="color: red;"><sup>*</sup></span></label>
+        <label for="lunasea-device" class="form-label">{{ $t("LunaSea Device ID") }}<span style="color: red;"><sup>*</sup></span></label>
        <input id="lunasea-device" v-model="$parent.notification.lunaseaDevice" type="text" class="form-control" required>
        <div class="form-text">
-            <p><span style="color: red;"><sup>*</sup></span>Required</p>
+            <p><span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}</p>
        </div>
    </div>
 </template>
--- a/src/components/notifications/Mattermost.vue
+++ b/src/components/notifications/Mattermost.vue
@@ -1,32 +1,32 @@
 <template>
    <div class="mb-3">
-        <label for="mattermost-webhook-url" class="form-label">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">Username</label>
+        <label for="mattermost-username" class="form-label">{{ $t("Username") }}</label>
        <input id="mattermost-username" v-model="$parent.notification.mattermostusername" type="text" class="form-control">
-        <label for="mattermost-iconurl" class="form-label">Icon URL</label>
+        <label for="mattermost-iconurl" class="form-label">{{ $t("Icon URL") }}</label>
        <input id="mattermost-iconurl" v-model="$parent.notification.mattermosticonurl" type="text" class="form-control">
-        <label for="mattermost-iconemo" class="form-label">Icon Emoji</label>
+        <label for="mattermost-iconemo" class="form-label">{{ $t("Icon Emoji") }}</label>
        <input id="mattermost-iconemo" v-model="$parent.notification.mattermosticonemo" type="text" class="form-control">
-        <label for="mattermost-channel" class="form-label">Channel Name</label>
+        <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>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>
            <p style="margin-top: 8px;">
-                More info about webhooks on: <a href="https://docs.mattermost.com/developer/webhooks-incoming.html" target="_blank">https://docs.mattermost.com/developer/webhooks-incoming.html</a>
+                {{ $t("aboutMattermostChannelName") }}
            </p>
            <p style="margin-top: 8px;">
-                You can override the default channel that webhook posts to by entering the channel name into "Channel Name" field. This needs to be enabled in Mattermost webhook settings. Ex: #other-channel
+                {{ $t("aboutKumaURL") }}
            </p>
            <p style="margin-top: 8px;">
-                If you leave the Uptime Kuma URL field blank, it will default to the Project Github page.
-            </p>
-            <p style="margin-top: 8px;">
-                You can provide a link to a picture in "Icon URL" to override the default profile picture. Will not be used if Icon Emoji is set.
-            </p>
-            <p style="margin-top: 8px;">
-                Emoji cheat sheet: <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a> Note: emoji takes preference over Icon URL.
+                {{ $t("aboutIconURL") }}
            </p>
+            <i18n-t tag="p" keypath="emojiCheatSheet" style="margin-top: 8px;">
+                <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
+            </i18n-t>
        </div>
    </div>
 </template>
--- a/src/components/notifications/Octopush.vue
+++ b/src/components/notifications/Octopush.vue
@@ -16,27 +16,27 @@
        <input id="octopush-login" v-model="$parent.notification.octopushLogin" type="text" class="form-control" required>
    </div>
    <div class="mb-3">
-        <label for="octopush-type-sms" class="form-label">SMS Type</label>
+        <label for="octopush-type-sms" class="form-label">{{ $t("SMS Type") }}</label>
        <select id="octopush-type-sms" v-model="$parent.notification.octopushSMSType" class="form-select">
-            <option value="sms_premium">Premium (Fast - recommended for alerting)</option>
-            <option value="sms_low_cost">Low Cost (Slow, sometimes blocked by operator)</option>
+            <option value="sms_premium">{{ $t("octopushTypePremium") }}</option>
+            <option value="sms_low_cost">{{ $t("octopushTypeLowCost") }}</option>
        </select>
-        <div class="form-text">
-            Check octopush prices <a href="https://octopush.com/tarifs-sms-international/" target="_blank">https://octopush.com/tarifs-sms-international/</a>.
-        </div>
+        <i18n-t tag="div" keypath="Check octopush prices" class="form-text">
+            <a href="https://octopush.com/tarifs-sms-international/" target="_blank">https://octopush.com/tarifs-sms-international/</a>
+        </i18n-t>
    </div>
    <div class="mb-3">
-        <label for="octopush-phone-number" class="form-label">Phone number (intl format, eg : +33612345678) </label>
+        <label for="octopush-phone-number" class="form-label">{{ $t("octopushPhoneNumber") }}</label>
        <input id="octopush-phone-number" v-model="$parent.notification.octopushPhoneNumber" type="text" class="form-control" required>
    </div>
    <div class="mb-3">
-        <label for="octopush-sender-name" class="form-label">SMS Sender Name : 3-11 alphanumeric characters and space (a-zA-Z0-9)</label>
+        <label for="octopush-sender-name" class="form-label">{{ $t("octopushSMSSender") }}</label>
        <input id="octopush-sender-name" v-model="$parent.notification.octopushSenderName" type="text" minlength="3" maxlength="11" class="form-control">
    </div>

-    <p style="margin-top: 8px;">
-        More info on: <a href="https://octopush.com/api-sms-documentation/envoi-de-sms/" target="_blank">https://octopush.com/api-sms-documentation/envoi-de-sms/</a>
-    </p>
+    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+        <a href="https://octopush.com/api-sms-documentation/envoi-de-sms/" target="_blank">https://octopush.com/api-sms-documentation/envoi-de-sms/</a>
+    </i18n-t>
 </template>

 <script>
@@ -46,5 +46,5 @@ export default {
    components: {
        HiddenInput,
    },
-}
+};
 </script>
--- a/src/components/notifications/Pushbullet.vue
+++ b/src/components/notifications/Pushbullet.vue
@@ -1,12 +1,12 @@
 <template>
    <div class="mb-3">
-        <label for="pushbullet-access-token" class="form-label">Access Token</label>
+        <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>
    </div>

-    <p style="margin-top: 8px;">
-        More info on: <a href="https://docs.pushbullet.com" target="_blank">https://docs.pushbullet.com</a>
-    </p>
+    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+        <a href="https://docs.pushbullet.com" target="_blank">https://docs.pushbullet.com</a>
+    </i18n-t>
 </template>

 <script>
@@ -16,5 +16,5 @@ export default {
    components: {
        HiddenInput,
    },
-}
+};
 </script>
--- a/src/components/notifications/Pushover.vue
+++ b/src/components/notifications/Pushover.vue
@@ -1,14 +1,14 @@
 <template>
    <div class="mb-3">
-        <label for="pushover-user" class="form-label">User Key<span style="color: red;"><sup>*</sup></span></label>
+        <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>
-        <label for="pushover-app-token" class="form-label">Application Token<span style="color: red;"><sup>*</sup></span></label>
+        <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>
-        <label for="pushover-device" class="form-label">Device</label>
+        <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">Message Title</label>
+        <label for="pushover-device" class="form-label">{{ $t("Message Title") }}</label>
        <input id="pushover-title" v-model="$parent.notification.pushovertitle" type="text" class="form-control">
-        <label for="pushover-priority" class="form-label">Priority</label>
+        <label for="pushover-priority" class="form-label">{{ $t("Priority") }}</label>
        <select id="pushover-priority" v-model="$parent.notification.pushoverpriority" class="form-select">
            <option>-2</option>
            <option>-1</option>
@@ -16,7 +16,7 @@
            <option>1</option>
            <option>2</option>
        </select>
-        <label for="pushover-sound" class="form-label">Notification Sound</label>
+        <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>
@@ -42,15 +42,15 @@
            <option>none</option>
        </select>
        <div class="form-text">
-            <span style="color: red;"><sup>*</sup></span>Required
+            <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
+            <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+                <a href="https://pushover.net/api" target="_blank">https://pushover.net/api</a>
+            </i18n-t>
            <p style="margin-top: 8px;">
-                More info on: <a href="https://pushover.net/api" target="_blank">https://pushover.net/api</a>
+                {{ $t("pushoverDesc1") }}
            </p>
            <p style="margin-top: 8px;">
-                Emergency priority (2) has default 30 second timeout between retries and will expire after 1 hour.
-            </p>
-            <p style="margin-top: 8px;">
-                If you want to send notifications to different devices, fill out Device field.
+                {{ $t("pushoverDesc2") }}
            </p>
        </div>
    </div>
--- a/src/components/notifications/Pushy.vue
+++ b/src/components/notifications/Pushy.vue
@@ -10,9 +10,9 @@
            <HiddenInput id="pushy-user-key" v-model="$parent.notification.pushyToken" :required="true" autocomplete="one-time-code"></HiddenInput>
        </div>
    </div>
-    <p style="margin-top: 8px;">
-        More info on: <a href="https://pushy.me/docs/api/send-notifications" target="_blank">https://pushy.me/docs/api/send-notifications</a>
-    </p>
+    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+        <a href="https://pushy.me/docs/api/send-notifications" target="_blank">https://pushy.me/docs/api/send-notifications</a>
+    </i18n-t>
 </template>

 <script>
@@ -22,5 +22,5 @@ export default {
    components: {
        HiddenInput,
    },
-}
+};
 </script>
--- a/src/components/notifications/RocketChat.vue
+++ b/src/components/notifications/RocketChat.vue
@@ -1,29 +1,27 @@
 <template>
    <div class="mb-3">
-        <label for="rocket-webhook-url" class="form-label">Webhook URL<span style="color: red;"><sup>*</sup></span></label>
+        <label for="rocket-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color: red;"><sup>*</sup></span></label>
        <input id="rocket-webhook-url" v-model="$parent.notification.rocketwebhookURL" type="text" class="form-control" required>
-        <label for="rocket-username" class="form-label">Username</label>
+        <label for="rocket-username" class="form-label">{{ $t("Username") }}</label>
        <input id="rocket-username" v-model="$parent.notification.rocketusername" type="text" class="form-control">
-        <label for="rocket-iconemo" class="form-label">Icon Emoji</label>
+        <label for="rocket-iconemo" class="form-label">{{ $t("Icon Emoji") }}</label>
        <input id="rocket-iconemo" v-model="$parent.notification.rocketiconemo" type="text" class="form-control">
-        <label for="rocket-channel" class="form-label">Channel Name</label>
+        <label for="rocket-channel" class="form-label">{{ $t("Channel Name") }}</label>
        <input id="rocket-channel-name" v-model="$parent.notification.rocketchannel" type="text" class="form-control">
-        <label for="rocket-button-url" class="form-label">Uptime Kuma URL</label>
-        <input id="rocket-button" v-model="$parent.notification.rocketbutton" type="text" class="form-control">
        <div class="form-text">
-            <span style="color: red;"><sup>*</sup></span>Required
+            <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
+            <i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
+                <a href="https://docs.rocket.chat/guides/administration/administration/integrations" target="_blank">https://api.slack.com/messaging/webhooks</a>
+            </i18n-t>
            <p style="margin-top: 8px;">
-                More info about webhooks on: <a href="https://docs.rocket.chat/guides/administration/administration/integrations" target="_blank">https://api.slack.com/messaging/webhooks</a>
+                {{ $t("aboutChannelName", [$t("rocket.chat")]) }}
            </p>
            <p style="margin-top: 8px;">
-                Enter the channel name on Rocket.chat Channel Name field if you want to bypass the webhook channel. Ex: #other-channel
-            </p>
-            <p style="margin-top: 8px;">
-                If you leave the Uptime Kuma URL field blank, it will default to the Project Github page.
-            </p>
-            <p style="margin-top: 8px;">
-                Emoji cheat sheet: <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
+                {{ $t("aboutKumaURL") }}
            </p>
+            <i18n-t tag="p" keypath="emojiCheatSheet" style="margin-top: 8px;">
+                <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
+            </i18n-t>
        </div>
    </div>
 </template>
--- a/src/components/notifications/SMTP.vue
+++ b/src/components/notifications/SMTP.vue
@@ -12,8 +12,8 @@
    <div class="mb-3">
        <label for="secure" class="form-label">Secure</label>
        <select id="secure" v-model="$parent.notification.smtpSecure" class="form-select">
-            <option :value="false">None / STARTTLS (25, 587)</option>
-            <option :value="true">TLS (465)</option>
+            <option :value="false">{{ $t("secureOptionNone") }}</option>
+            <option :value="true">{{ $t("secureOptionTLS") }}</option>
        </select>
    </div>

@@ -21,7 +21,7 @@
        <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">
-                Ignore TLS Error
+                {{ $t("Ignore TLS Error") }}
            </label>
        </div>
    </div>
@@ -37,24 +37,24 @@
    </div>

    <div class="mb-3">
-        <label for="from-email" class="form-label">From Email</label>
+        <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">To Email</label>
+        <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">CC</label>
+        <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">BCC</label>
+        <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>
 </template>
--- a/src/components/notifications/Signal.vue
+++ b/src/components/notifications/Signal.vue
@@ -1,23 +1,25 @@
 <template>
    <div class="mb-3">
-        <label for="signal-url" class="form-label">Post URL</label>
+        <label for="signal-url" class="form-label">{{ $t("Post URL") }}</label>
        <input id="signal-url" v-model="$parent.notification.signalURL" type="url" pattern="https?://.+" class="form-control" required>
    </div>

    <div class="mb-3">
-        <label for="signal-number" class="form-label">Number</label>
+        <label for="signal-number" class="form-label">{{ $t("Number") }}</label>
        <input id="signal-number" v-model="$parent.notification.signalNumber" type="text" class="form-control" required>
    </div>

    <div class="mb-3">
-        <label for="signal-recipients" class="form-label">Recipients</label>
+        <label for="signal-recipients" class="form-label">{{ $t("Recipients") }}</label>
        <input id="signal-recipients" v-model="$parent.notification.signalRecipients" type="text" class="form-control" required>

        <div class="form-text">
-            You need to have a signal client with REST API.
+            <p style="margin-top: 8px;">
+                {{ $t("needSignalAPI") }}
+            </p>

            <p style="margin-top: 8px;">
-                You can check this url to view how to setup one:
+                {{ $t("wayToCheckSignalURL") }}
            </p>

            <p style="margin-top: 8px;">
@@ -25,7 +27,7 @@
            </p>

            <p style="margin-top: 8px;">
-                IMPORTANT: You cannot mix groups and numbers in recipients!
+                {{ $t("signalImportant") }}
            </p>
        </div>
    </div>
--- a/src/components/notifications/Slack.vue
+++ b/src/components/notifications/Slack.vue
@@ -1,29 +1,28 @@
 <template>
    <div class="mb-3">
-        <label for="slack-webhook-url" class="form-label">Webhook URL<span style="color: red;"><sup>*</sup></span></label>
+        <label for="slack-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color: red;"><sup>*</sup></span></label>
        <input id="slack-webhook-url" v-model="$parent.notification.slackwebhookURL" type="text" class="form-control" required>
-        <label for="slack-username" class="form-label">Username</label>
+        <label for="slack-username" class="form-label">{{ $t("Username") }}</label>
        <input id="slack-username" v-model="$parent.notification.slackusername" type="text" class="form-control">
-        <label for="slack-iconemo" class="form-label">Icon Emoji</label>
+        <label for="slack-iconemo" class="form-label">{{ $t("Icon Emoji") }}</label>
        <input id="slack-iconemo" v-model="$parent.notification.slackiconemo" type="text" class="form-control">
-        <label for="slack-channel" class="form-label">Channel Name</label>
+        <label for="slack-channel" class="form-label">{{ $t("Channel Name") }}</label>
        <input id="slack-channel-name" v-model="$parent.notification.slackchannel" type="text" class="form-control">
-        <label for="slack-button-url" class="form-label">Uptime Kuma URL</label>
-        <input id="slack-button" v-model="$parent.notification.slackbutton" type="text" class="form-control">
+
        <div class="form-text">
-            <span style="color: red;"><sup>*</sup></span>Required
+            <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
+            <i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
+                <a href="https://api.slack.com/messaging/webhooks" target="_blank">https://api.slack.com/messaging/webhooks</a>
+            </i18n-t>
            <p style="margin-top: 8px;">
-                More info about webhooks on: <a href="https://api.slack.com/messaging/webhooks" target="_blank">https://api.slack.com/messaging/webhooks</a>
+                {{ $t("aboutChannelName", [$t("slack")]) }}
            </p>
            <p style="margin-top: 8px;">
-                Enter the channel name on Slack Channel Name field if you want to bypass the webhook channel. Ex: #other-channel
-            </p>
-            <p style="margin-top: 8px;">
-                If you leave the Uptime Kuma URL field blank, it will default to the Project Github page.
-            </p>
-            <p style="margin-top: 8px;">
-                Emoji cheat sheet: <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
+                {{ $t("aboutKumaURL") }}
            </p>
+            <i18n-t tag="p" keypath="emojiCheatSheet" style="margin-top: 8px;">
+                <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
+            </i18n-t>
        </div>
    </div>
 </template>
--- a/src/components/notifications/Teams.vue
+++ b/src/components/notifications/Teams.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="mb-3">
-        <label for="teams-webhookurl" class="form-label">Webhook URL</label>
+        <label for="teams-webhookurl" class="form-label">{{ $t("Webhook URL") }}</label>
        <input
            id="teams-webhookurl"
            v-model="$parent.notification.webhookUrl"
@@ -8,12 +8,11 @@
            class="form-control"
            required
        />
-        <div class="form-text">
-            You can learn how to create a webhook url
+        <i18n-t tag="div" keypath="wayToGetTeamsURL" class="form-text">
            <a
                href="https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook"
                target="_blank"
-            >here</a>.
-        </div>
+            >{{ $t("here") }}</a>
+        </i18n-t>
    </div>
 </template>
--- a/src/components/notifications/Telegram.vue
+++ b/src/components/notifications/Telegram.vue
@@ -1,14 +1,14 @@
 <template>
    <div class="mb-3">
-        <label for="telegram-bot-token" class="form-label">Bot Token</label>
+        <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>
        <div class="form-text">
-            You can get a token from <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>.
+            {{ $t("You can get a token from") }} <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>.
        </div>
    </div>

    <div class="mb-3">
-        <label for="telegram-chat-id" class="form-label">Chat ID</label>
+        <label for="telegram-chat-id" class="form-label">{{ $t("Chat ID") }}</label>

        <div class="input-group mb-3">
            <input id="telegram-chat-id" v-model="$parent.notification.telegramChatID" type="text" class="form-control" required>
@@ -18,10 +18,10 @@
        </div>

        <div class="form-text">
-            Support Direct Chat / Group / Channel's Chat ID
+            {{ $t("supportTelegramChatID") }}

            <p style="margin-top: 8px;">
-                You can get your chat id by sending message to the bot and go to this url to view the chat_id:
+                {{ $t("wayToGetTelegramChatID") }}
            </p>

            <p style="margin-top: 8px;">
@@ -49,7 +49,7 @@ export default {
    },
    computed: {
        telegramGetUpdatesURL() {
-            let token = "<YOUR BOT TOKEN HERE>"
+            let token = `<${this.$t("YOUR BOT TOKEN HERE")}>`

            if (this.$parent.notification.telegramBotToken) {
                token = this.$parent.notification.telegramBotToken;
@@ -71,11 +71,11 @@ export default {
                    } else if (update.message) {
                        this.notification.telegramChatID = update.message.chat.id;
                    } else {
-                        throw new Error("Chat ID is not found, please send a message to this bot first")
+                        throw new Error(this.$t("chatIDNotFound"))
                    }

                } else {
-                    throw new Error("Chat ID is not found, please send a message to this bot first")
+                    throw new Error(this.$t("chatIDNotFound"))
                }

            } catch (error) {
--- a/src/components/notifications/Webhook.vue
+++ b/src/components/notifications/Webhook.vue
@@ -1,11 +1,11 @@
 <template>
    <div class="mb-3">
-        <label for="webhook-url" class="form-label">Post URL</label>
+        <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>
    </div>

    <div class="mb-3">
-        <label for="webhook-content-type" class="form-label">Content Type</label>
+        <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
@@ -17,7 +17,12 @@

        <div class="form-text">
            <p>"application/json" is good for any modern http servers such as express.js</p>
-            <p>"multipart/form-data" is good for PHP, you just need to parse the json by <strong>json_decode($_POST['data'])</strong></p>
+            <i18n-t tag="p" keypath="webhookFormDataDesc">
+                <template #multipart>"multipart/form-data"</template>
+                <template #decodeFunction>
+                    <strong>json_decode($_POST['data'])</strong>
+                </template>
+            </i18n-t>
        </div>
    </div>
 </template>
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -1,12 +1,10 @@
-import { createI18n } from "vue-i18n";
-import bgBG from "./languages/bg-BG";
+import { createI18n } from "vue-i18n/index";
 import daDK from "./languages/da-DK";
 import deDE from "./languages/de-DE";
 import en from "./languages/en";
-import fa from "./languages/fa";
 import esEs from "./languages/es-ES";
-import ptBR from "./languages/pt-BR";
 import etEE from "./languages/et-EE";
+import fa from "./languages/fa";
 import frFR from "./languages/fr-FR";
 import hu from "./languages/hu";
 import itIT from "./languages/it-IT";
@@ -14,11 +12,13 @@ import ja from "./languages/ja";
 import koKR from "./languages/ko-KR";
 import nlNL from "./languages/nl-NL";
 import pl from "./languages/pl";
+import ptBR from "./languages/pt-BR";
+import bgBG from "./languages/bg-BG";
 import ruRU from "./languages/ru-RU";
 import sr from "./languages/sr";
 import srLatn from "./languages/sr-latn";
-import trTR from "./languages/tr-TR";
 import svSE from "./languages/sv-SE";
+import trTR from "./languages/tr-TR";
 import zhCN from "./languages/zh-CN";
 import zhHK from "./languages/zh-HK";

@@ -48,12 +48,13 @@ const languageList = {
 };

 const rtlLangs = ["fa"];
-    
+
 export const currentLocale = () => localStorage.locale || "en";

 export const localeDirection = () => {
-    return rtlLangs.includes(currentLocale()) ? "rtl" : "ltr"
-}
+    return rtlLangs.includes(currentLocale()) ? "rtl" : "ltr";
+};
+
 export const i18n = createI18n({
    locale: currentLocale(),
    fallbackLocale: "en",
--- a/src/languages/bg-BG.js
+++ b/src/languages/bg-BG.js
@@ -1,6 +1,6 @@
 export default {
    languageName: "Български",
-    checkEverySecond: "Проверявай на всеки {0} секунди.",
+    checkEverySecond: "Ще се извършва на всеки {0} секунди.",
    retryCheckEverySecond: "Повторен опит на всеки {0} секунди.",
    retriesDescription: "Максимакен брой опити преди услугата да бъде маркирана като недостъпна и да бъде изпратено известие",
    ignoreTLSError: "Игнорирай TLS/SSL грешки за HTTPS уебсайтове",
@@ -9,19 +9,19 @@ export default {
    acceptedStatusCodesDescription: "Изберете статус кодове, които се считат за успешен отговор.",
    passwordNotMatchMsg: "Повторената парола не съвпада.",
    notificationDescription: "Моля, задайте известието към монитор(и), за да функционира.",
-    keywordDescription: "Търсете ключова дума в обикновен html или JSON отговор - чувствителна е към регистъра",
+    keywordDescription: "Търси ключова дума в чист html или JSON отговор - чувствителна е към регистъра",
    pauseDashboardHome: "Пауза",
    deleteMonitorMsg: "Наистина ли желаете да изтриете този монитор?",
-    deleteNotificationMsg: "Наистина ли желаете да изтриете известието за всички монитори?",
-    resoverserverDescription: "Cloudflare е сървърът по подразбиране, можете да промените сървъра по всяко време.",
+    deleteNotificationMsg: "Наистина ли желаете да изтриете това известяване за всички монитори?",
+    resoverserverDescription: "Cloudflare е сървърът по подразбиране, но можете да го промените по всяко време.",
    rrtypeDescription: "Изберете ресурсния запис, който желаете да наблюдавате",
    pauseMonitorMsg: "Наистина ли желаете да поставите в режим пауза?",
-    enableDefaultNotificationDescription: "За всеки нов монитор това известие ще бъде активирано по подразбиране. Можете да изключите известието за всеки отделен монитор.",
+    enableDefaultNotificationDescription: "За всеки нов монитор това известяване ще бъде активирано по подразбиране. Можете да го изключите за всеки отделен монитор.",
    clearEventsMsg: "Наистина ли желаете да изтриете всички събития за този монитор?",
    clearHeartbeatsMsg: "Наистина ли желаете да изтриете всички записи за честотни проверки на този монитор?",
    confirmClearStatisticsMsg: "Наистина ли желаете да изтриете всички статистически данни?",
-    importHandleDescription: "Изберете 'Пропусни съществуващите', ако искате да пропуснете всеки монитор или известие със същото име. 'Презапис' ще изтрие всеки съществуващ монитор и известие.",
-    confirmImportMsg: "Сигурни ли сте за импортирането на архива? Моля, уверете се, че сте избрали правилната опция за импортиране.",
+    importHandleDescription: "Изберете 'Пропусни съществуващите', ако желаете да пропуснете всеки монитор или известяване със същото име. 'Презапис' ще изтрие всеки съществуващ монитор и известяване.",
+    confirmImportMsg: "Сигурни ли сте, че желаете импортирането на архива? Моля, уверете се, че сте избрали правилната опция за импортиране.",
    twoFAVerifyLabel: "Моля, въведете вашия токен код, за да проверите дали 2FA работи",
    tokenValidSettingsMsg: "Токен кодът е валиден! Вече можете да запазите настройките за 2FA.",
    confirmEnableTwoFAMsg: "Сигурни ли сте, че желаете да активирате 2FA?",
@@ -34,32 +34,32 @@ export default {
    Theme: "Тема",
    General: "Общи",
    Version: "Версия",
-    "Check Update On GitHub": "Провери за актуализация в GitHub",
+    "Check Update On GitHub": "Проверка за актуализация в GitHub",
    List: "Списък",
    Add: "Добави",
    "Add New Monitor": "Добави монитор",
    "Quick Stats": "Кратка статистика",
-    Up: "Достъпни",
-    Down: "Недостъпни",
-    Pending: "В изчакване",
-    Unknown: "Неизвестни",
-    Pause: "В пауза",
+    Up: "Достъпен",
+    Down: "Недостъпен",
+    Pending: "Изчаква",
+    Unknown: "Неизвестен",
+    Pause: "Пауза",
    Name: "Име",
    Status: "Статус",
    DateTime: "Дата и час",
-    Message: "Съобщение",
+    Message: "Отговор",
    "No important events": "Няма важни събития",
    Resume: "Възобнови",
    Edit: "Редактирай",
    Delete: "Изтрий",
    Current: "Текущ",
-    Uptime: "Време на работа",
+    Uptime: "Достъпност",
    "Cert Exp.": "Вал. сертификат",
    days: "дни",
    day: "ден",
-    "-day": "-ден",
+    "-day": "-денa",
    hour: "час",
-    "-hour": "-час",
+    "-hour": "-часa",
    Response: "Отговор",
    Ping: "Пинг",
    "Monitor Type": "Монитор тип",
@@ -78,7 +78,7 @@ export default {
    Save: "Запази",
    Notifications: "Известявания",
    "Not available, please setup.": "Не е налично. Моля, настройте.",
-    "Setup Notification": "Настройка за известяване",
+    "Setup Notification": "Настройки за известявания",
    Light: "Светла",
    Dark: "Тъмна",
    Auto: "Автоматично",
@@ -98,9 +98,9 @@ export default {
    "Disable Auth": "Изключи удостоверяване",
    "Enable Auth": "Включи удостоверяване",
    Logout: "Изход от профила",
-    Leave: "Напускам",
+    Leave: "Отказ",
    "I understand, please disable": "Разбирам. Моля, изключи",
-    Confirm: "Потвърди",
+    Confirm: "Потвърдете",
    Yes: "Да",
    No: "Не",
    Username: "Потребител",
@@ -127,7 +127,7 @@ export default {
    "Default enabled": "Включен по подразбиране",
    "Apply on all existing monitors": "Приложи върху всички съществуващи монитори",
    Create: "Създай",
-    "Clear Data": "Изчисти данни",
+    "Clear Data": "Изтрий данни",
    Events: "Събития",
    Heartbeats: "Проверки",
    "Auto Get": "Автоматияно получаване",
@@ -136,7 +136,7 @@ export default {
    backupDescription3: "Чувствителни данни, като токен кодове за известяване, се съдържат в експортирания файл. Моля, бъдете внимателни с неговото съхранение.",
    alertNoFile: "Моля, изберете файл за импортиране.",
    alertWrongFileType: "Моля, изберете JSON файл.",
-    "Clear all statistics": "Изчисти всички статистики",
+    "Clear all statistics": "Изтрий цялата статистика",
    "Skip existing": "Пропусни съществуващите",
    Overwrite: "Презапиши",
    Options: "Опции",
@@ -152,7 +152,7 @@ export default {
    Token: "Токен код",
    "Show URI": "Покажи URI",
    Tags: "Етикети",
-    "Add New below or Select...": "Добави нов по-долу или избери...",
+    "Add New below or Select...": "Добавете нов по-долу или изберете...",
    "Tag with this name already exist.": "Етикет с това име вече съществува.",
    "Tag with this value already exist.": "Етикет с тази стойност вече съществува.",
    color: "цвят",
@@ -171,11 +171,29 @@ export default {
    "Entry Page": "Основна страница",
    statusPageNothing: "Все още няма нищо тук. Моля, добавете група или монитор.",
    "No Services": "Няма Услуги",
-    "All Systems Operational": "Всички системи функционират",
-    "Partially Degraded Service": "Частично влошена услуга",
-    "Degraded Service": "Влошена услуга",
+    "All Systems Operational": "Всички услуги са достъпни",
+    "Partially Degraded Service": "Част от услугите са недостъпни",
+    "Degraded Service": "Всички услуги са недостъпни",
    "Add Group": "Добави група",
    "Add a monitor": "Добави монитор",
-    "Edit Status Page": "Редактирай статус страница",
+    "Edit Status Page": "Редактиране Статус страница",
    "Go to Dashboard": "Към Таблото",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Поддържа 50+ услуги за инвестяване)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
+    "Status Page": "Статус страница",
 };
--- a/src/languages/da-DK.js
+++ b/src/languages/da-DK.js
@@ -1,5 +1,5 @@
 export default {
-    languageName: "Danish",
+    languageName: "Danish (Danmark)",
    Settings: "Indstillinger",
    Dashboard: "Dashboard",
    "New Update": "Opdatering tilgængelig",
@@ -170,7 +170,7 @@ export default {
    "Avg. Ping": "Gns. Ping",
    "Avg. Response": "Gns. Respons",
    "Entry Page": "Entry Side",
-    "statusPageNothing": "Intet her, tilføj venligst en Gruppe eller en Overvåger.",
+    statusPageNothing: "Intet her, tilføj venligst en Gruppe eller en Overvåger.",
    "No Services": "Ingen Tjenester",
    "All Systems Operational": "Alle Systemer i Drift",
    "Partially Degraded Service": "Delvist Forringet Service",
@@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Tilføj en Overvåger",
    "Edit Status Page": "Rediger Statusside",
    "Go to Dashboard": "Gå til Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/de-DE.js
+++ b/src/languages/de-DE.js
@@ -1,5 +1,5 @@
 export default {
-    languageName: "German",
+    languageName: "Deutsch (Deutschland)",
    Settings: "Einstellungen",
    Dashboard: "Dashboard",
    "New Update": "Update Verfügbar",
@@ -178,4 +178,22 @@ export default {
    "Add a monitor": "Monitor hinzufügen",
    "Edit Status Page": "Bearbeite Statusseite",
    "Go to Dashboard": "Gehe zum Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -178,21 +178,67 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    // Start notification form
+    defaultNotificationName: "My {notification} Alert ({number})",
+    here: "here",
+    "Required": "Required",
    "telegram": "Telegram",
+    "Bot Token": "Bot Token",
+    "You can get a token from": "You can get a token from",
+    "Chat ID": "Chat ID",
+    supportTelegramChatID: "Support Direct Chat / Group / Channel's Chat ID",
+    wayToGetTelegramChatID: "You can get your chat id by sending message to the bot and go to this url to view the chat_id:",
+    "YOUR BOT TOKEN HERE": "YOUR BOT TOKEN HERE",
+    chatIDNotFound: "Chat ID is not found, please send a message to this bot first",
    "webhook": "Webhook",
+    "Post URL": "Post URL",
+    "Content Type": "Content Type",
+    webhookJsonDesc: "{0} is good for any modern http servers such as express.js",
+    webhookFormDataDesc: "{multipart} is good for PHP, you just need to parse the json by {decodeFunction}",
    "smtp": "Email (SMTP)",
+    secureOptionNone: "None / STARTTLS (25, 587)",
+    secureOptionTLS: "TLS (465)",
+    "Ignore TLS Error": "Ignore TLS Error",
+    "From Email": "From Email",
+    "To Email": "To Email",
+    smtpCC: "CC",
+    smtpBCC: "BCC",
    "discord": "Discord",
+    "Discord Webhook URL": "Discord Webhook URL",
+    wayToGetDiscordURL: "You can get this by going to Server Settings -> Integrations -> Create Webhook",
+    "Bot Display Name": "Bot Display Name",
+    "Prefix Custom Message": "Prefix Custom Message",
+    "Hello @everyone is...": "Hello {'@'}everyone is...",
    "teams": "Microsoft Teams",
+    "Webhook URL": "Webhook URL",
+    wayToGetTeamsURL: "You can learn how to create a webhook url {0}.",
    "signal": "Signal",
+    "Number": "Number",
+    "Recipients": "Recipients",
+    needSignalAPI: "You need to have a signal client with REST API.",
+    wayToCheckSignalURL: "You can check this url to view how to setup one:",
+    signalImportant: "IMPORTANT: You cannot mix groups and numbers in recipients!",
    "gotify": "Gotify",
+    "Application Token": "Application Token",
+    "Server URL": "Server URL",
+    "Priority": "Priority",
    "slack": "Slack",
+    "Icon Emoji": "Icon Emoji",
+    "Channel Name": "Channel Name",
+    "Uptime Kuma URL": "Uptime Kuma URL",
+    aboutWebhooks: "More info about webhooks on: {0}",
+    aboutChannelName: "Enter the channel name on {0} Channel Name field if you want to bypass the webhook channel. Ex: #other-channel",
+    aboutKumaURL: "If you leave the Uptime Kuma URL field blank, it will default to the Project Github page.",
+    emojiCheatSheet: "Emoji cheat sheet: {0}",
    "rocket.chat": "Rocket.chat",
-    "pushover": "Pushover",
-    "pushy": "Pushy",
-    "octopush": "Octopush",
-    "lunasea": "LunaSea",
-    "apprise": "Apprise (Support 50+ Notification services)",
-    "pushbullet": "Pushbullet",
-    "line": "Line Messenger",
-    "mattermost": "Mattermost",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
+    // End notification form
 };
--- a/src/languages/es-ES.js
+++ b/src/languages/es-ES.js
@@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/et-EE.js
+++ b/src/languages/et-EE.js
@@ -16,7 +16,7 @@ export default {
    rrtypeDescription: "Vali kirje tüüp, mida soovid jälgida.",
    pauseMonitorMsg: "Kas soovid peatada seire?",
    Settings: "Seaded",
-    "Status Page": "Ülevaade", // hääletuse tulemus, teine: seisundileht, kolmas: Olukord/Olek
+    "Status Page": "Ülevaade",
    Dashboard: "Töölaud",
    "New Update": "Uuem tarkvara versioon on saadaval.",
    Language: "Keel",
@@ -44,7 +44,7 @@ export default {
    Edit: "Muuda",
    Delete: "Eemalda",
    Current: "Hetkeseisund",
-    Uptime: "Eluiga", // todo: launchpad?
+    Uptime: "Eluiga",
    "Cert Exp.": "Sert. aegumine",
    days: "päeva",
    day: "päev",
@@ -109,7 +109,7 @@ export default {
    "Create your admin account": "Admininstraatori konto loomine",
    "Repeat Password": "korda salasõna",
    respTime: "Reageerimisaeg (ms)",
-    notAvailableShort: "N/A", // tõlkimata, umbkaudu rahvusvaheline termin peaks sobima piisavalt
+    notAvailableShort: "N/A",
    enableDefaultNotificationDescription: "Kõik järgnevalt lisatud seired kasutavad seda teavitusteenuset. Seiretelt võib teavitusteenuse ühekaupa eemaldada.",
    clearEventsMsg: "Kas soovid seire kõik sündmused kustutada?",
    clearHeartbeatsMsg: "Kas soovid seire kõik tuksed kustutada?",
@@ -122,7 +122,7 @@ export default {
    "Clear Data": "Eemalda andmed",
    Events: "Sündmused",
    Heartbeats: "Tuksed",
-    "Auto Get": "Hangi automaatselt", // hangi? kõlab liiga otsetõlge
+    "Auto Get": "Hangi automaatselt",
    backupDescription: "Varunda kõik seired ja teavitused JSON faili.",
    backupDescription2: "PS: Varukoopia EI sisalda seirete ajalugu ja sündmustikku.",
    backupDescription3: "Varukoopiad sisaldavad teavitusteenusete pääsuvõtmeid.",
@@ -140,7 +140,7 @@ export default {
    "Two Factor Authentication": "Kaksikautentimine",
    Active: "kasutusel",
    Inactive: "seadistamata",
-    Token: "kaksikautentimise kood", // needs to compensate for no title
+    Token: "kaksikautentimise kood",
    "Show URI": "Näita URId",
    "Clear all statistics": "Tühjenda ajalugu",
    importHandleDescription: "'kombineeri' täiendab varukoopiast ja kirjutab üle samanimelised seireid ja teavitusteenused; 'lisa praegustele' jätab olemasolevad puutumata; 'asenda' kustutab ja asendab kõik seired ja teavitusteenused.",
@@ -150,14 +150,14 @@ export default {
    "Export Backup": "Varukoopia eksportimine",
    "Skip existing": "lisa praegustele",
    Overwrite: "asenda",
-    Options: "Mestimisviis", // reusal of key would be chaos
+    Options: "Mestimisviis",
    "Keep both": "kombineeri",
    Tags: "Sildid",
    "Add New below or Select...": "Leia või lisa all uus…",
    "Tag with this name already exist.": "Selle nimega silt on juba olemas.",
    "Tag with this value already exist.": "Selle väärtusega silt on juba olemas.",
    color: "värvus",
-    "value (optional)": "väärtus (fakultatiivne)", // milline sõna!
+    "value (optional)": "väärtus (fakultatiivne)",
    Gray: "hall",
    Red: "punane",
    Orange: "oranž",
@@ -167,7 +167,7 @@ export default {
    Purple: "lilla",
    Pink: "roosa",
    "Search...": "Otsi…",
-    "Avg. Ping": "Keskmine ping", // pikk, aga nagunii kahel real
+    "Avg. Ping": "Keskmine ping",
    "Avg. Response": "Keskmine reaktsiooniaeg",
    "Entry Page": "Avaleht",
    statusPageNothing: "Kippu ega kõppu; siia saab lisada seireid või -gruppe.",
@@ -178,4 +178,22 @@ export default {
    "Add Group": "Lisa grupp",
    "Edit Status Page": "Muuda lehte",
    "Go to Dashboard": "Töölauale",
+    checkEverySecond: "Kontrolli peale tõrget {0} sekundilise vahega.",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "elektronpost (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (vahendab üle 65 teavitusteenust)",
+    pushbullet: "Pushbullet",
+    line: "LINE",
+    mattermost: "Mattermost",
 };
--- a/src/languages/fa.js
+++ b/src/languages/fa.js
@@ -186,5 +186,22 @@ export default {
    First: "اولین",
    Last: "آخرین",
    Info: "اطلاعات",
-    "Powered By": "نیرو گرفته از",
+    "Powered by": "نیرو گرفته از",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/fr-FR.js
+++ b/src/languages/fr-FR.js
@@ -170,7 +170,7 @@ export default {
    "Avg. Ping": "Ping moyen",
    "Avg. Response": "Réponse moyenne",
    "Entry Page": "Page d'accueil",
-    "statusPageNothing": "Rien ici, veuillez ajouter un groupe ou une sonde.",
+    statusPageNothing: "Rien ici, veuillez ajouter un groupe ou une sonde.",
    "No Services": "Aucun service",
    "All Systems Operational": "Tous les systèmes sont opérationnels",
    "Partially Degraded Service": "Service partiellement dégradé",
@@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Ajouter une sonde",
    "Edit Status Page": "Modifier la page de statut",
    "Go to Dashboard": "Accéder au tableau de bord",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/hu.js
+++ b/src/languages/hu.js
@@ -178,4 +178,22 @@ export default {
    "Add a monitor": "Figyelő hozzáadása",
    "Edit Status Page": "Sátusz oldal szerkesztése",
    "Go to Dashboard": "Menj az irányítópulthoz",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
+    "Status Page": "Status Page",
 };
--- a/src/languages/it-IT.js
+++ b/src/languages/it-IT.js
@@ -169,7 +169,7 @@ export default {
    "Avg. Ping": "Ping medio",
    "Avg. Response": "Risposta media",
    "Entry Page": "Entry Page",
-    "statusPageNothing": "Non c'è nulla qui, aggiungere un gruppo oppure un monitoraggio.",
+    statusPageNothing: "Non c'è nulla qui, aggiungere un gruppo oppure un monitoraggio.",
    "No Services": "Nessun Servizio",
    "All Systems Operational": "Tutti i sistemi sono operativi",
    "Partially Degraded Service": "Servizio parzialmente degradato",
@@ -178,4 +178,22 @@ export default {
    "Add a monitor": "Aggiungi un monitoraggio",
    "Edit Status Page": "Modifica pagina di stato",
    "Go to Dashboard": "Vai al Cruscotto",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/ja.js
+++ b/src/languages/ja.js
@@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/ko-KR.js
+++ b/src/languages/ko-KR.js
@@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/nl-NL.js
+++ b/src/languages/nl-NL.js
@@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/pl.js
+++ b/src/languages/pl.js
@@ -169,14 +169,32 @@ export default {
    "Search...": "Szukaj...",
    "Avg. Ping": "Średni ping",
    "Avg. Response": "Średnia odpowiedź",
-    "Entry Page": "Wejdź na stronę",
-    "statusPageNothing": "Nic tu nie ma, dodaj monitor lub grupę.",
+    "Entry Page": "Strona główna",
+    statusPageNothing: "Nic tu nie ma, dodaj grupę lub monitor.",
    "No Services": "Brak usług",
    "All Systems Operational": "Wszystkie systemy działają",
    "Partially Degraded Service": "Częściowy błąd usługi",
    "Degraded Service": "Błąd usługi",
    "Add Group": "Dodaj grupę",
-    "Add a monitor": "Dodaj monitoe",
+    "Add a monitor": "Dodaj monitor",
    "Edit Status Page": "Edytuj stronę statusu",
    "Go to Dashboard": "Idź do panelu",
+    "Status Page": "Strona statusu",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (obsługuje 50+ usług powiadamiania)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/pt-BR.js
+++ b/src/languages/pt-BR.js
@@ -179,4 +179,21 @@ export default {
    "Add a monitor": "Adicionar um monitor",
    "Edit Status Page": "Editar Página de Status",
    "Go to Dashboard": "Ir para a dashboard",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/ru-RU.js
+++ b/src/languages/ru-RU.js
@@ -43,7 +43,7 @@ export default {
    Delete: "Удалить",
    Current: "Текущий",
    Uptime: "Аптайм",
-    "Cert Exp.": "Сертификат просрочен",
+    "Cert Exp.": "Сертификат истекает",
    days: "дней",
    day: "день",
    "-day": " дней",
@@ -180,8 +180,25 @@ export default {
    "Edit Status Page": "Редактировать",
    "Go to Dashboard": "Панель мониторов",
    "Status Page": "Статус сервисов",
-    "Discard": "Отмена",
+    Discard: "Отмена",
    "Create Incident": "Создать инцидент",
    "Switch to Dark Theme": "Тёмная тема",
    "Switch to Light Theme": "Светлая тема",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/sr-latn.js
+++ b/src/languages/sr-latn.js
@@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/sr.js
+++ b/src/languages/sr.js
@@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/sv-SE.js
+++ b/src/languages/sv-SE.js
@@ -179,4 +179,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/tr-TR.js
+++ b/src/languages/tr-TR.js
@@ -178,4 +178,22 @@ export default {
    "Add a monitor": "Add a monitor",
    "Edit Status Page": "Edit Status Page",
    "Go to Dashboard": "Go to Dashboard",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/zh-CN.js
+++ b/src/languages/zh-CN.js
@@ -170,7 +170,7 @@ export default {
    "Avg. Ping": "平均Ping",
    "Avg. Response": "平均响应",
    "Entry Page": "入口页面",
-    "statusPageNothing": "这里什么也没有，请添加一个分组或一个监控项。",
+    statusPageNothing: "这里什么也没有，请添加一个分组或一个监控项。",
    "No Services": "无服务",
    "All Systems Operational": "所有服务运行正常",
    "Partially Degraded Service": "部分服务出现故障",
@@ -179,4 +179,22 @@ export default {
    "Add a monitor": "添加监控项",
    "Edit Status Page": "编辑状态页",
    "Go to Dashboard": "前往仪表盘",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "Email (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (Support 50+ Notification services)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/languages/zh-HK.js
+++ b/src/languages/zh-HK.js
@@ -1,7 +1,7 @@
 export default {
    languageName: "繁體中文 (香港)",
    Settings: "設定",
-    Dashboard: "錶板",
+    Dashboard: "主控台",
    "New Update": "有更新",
    Language: "語言",
    Appearance: "外觀",
@@ -104,7 +104,7 @@ export default {
    rrtypeDescription: "請選擇 DNS 記錄類型",
    pauseMonitorMsg: "是否確定暫停？",
    "Last Result": "最後結果",
-    "Create your admin account": "製作你的管理員帳號",
+    "Create your admin account": "建立管理員帳號",
    "Repeat Password": "重複密碼",
    respTime: "反應時間 (ms)",
    notAvailableShort: "N/A",
@@ -146,37 +146,55 @@ export default {
    importHandleDescription: "Choose 'Skip existing' if you want to skip every monitor or notification with the same name. 'Overwrite' will delete every existing monitor and notification.",
    confirmImportMsg: "Are you sure to import the backup? Please make sure you've selected the right import option.",
    "Heartbeat Retry Interval": "Heartbeat Retry Interval",
-    "Import Backup": "Import Backup",
-    "Export Backup": "Export Backup",
-    "Skip existing": "Skip existing",
-    Overwrite: "Overwrite",
-    Options: "Options",
-    "Keep both": "Keep both",
-    Tags: "Tags",
+    "Import Backup": "匯入備份",
+    "Export Backup": "匯出備份",
+    "Skip existing": "略過已存在的",
+    Overwrite: "覆蓋",
+    Options: "選項",
+    "Keep both": "兩者並存",
+    Tags: "標籤",
    "Add New below or Select...": "Add New below or Select...",
    "Tag with this name already exist.": "Tag with this name already exist.",
    "Tag with this value already exist.": "Tag with this value already exist.",
-    color: "color",
-    "value (optional)": "value (optional)",
-    Gray: "Gray",
-    Red: "Red",
-    Orange: "Orange",
-    Green: "Green",
-    Blue: "Blue",
-    Indigo: "Indigo",
-    Purple: "Purple",
-    Pink: "Pink",
-    "Search...": "Search...",
-    "Avg. Ping": "Avg. Ping",
-    "Avg. Response": "Avg. Response",
+    color: "顏色",
+    "value (optional)": "值 (非必需)",
+    Gray: "灰",
+    Red: "紅",
+    Orange: "橙",
+    Green: "綠",
+    Blue: "藍",
+    Indigo: "靛",
+    Purple: "紫",
+    Pink: "粉紅",
+    "Search...": "搜尋...",
+    "Avg. Ping": "平均反應時間",
+    "Avg. Response": "平均反應時間",
    "Entry Page": "Entry Page",
    statusPageNothing: "Nothing here, please add a group or a monitor.",
-    "No Services": "No Services",
-    "All Systems Operational": "All Systems Operational",
-    "Partially Degraded Service": "Partially Degraded Service",
-    "Degraded Service": "Degraded Service",
-    "Add Group": "Add Group",
-    "Add a monitor": "Add a monitor",
-    "Edit Status Page": "Edit Status Page",
-    "Go to Dashboard": "Go to Dashboard",
+    "No Services": "沒有服務",
+    "All Systems Operational": "一切正常",
+    "Partially Degraded Service": "部份服務受阻",
+    "Degraded Service": "服務受阻",
+    "Add Group": "新增群組",
+    "Add a monitor": " 新增監測器",
+    "Edit Status Page": "編輯 Status Page",
+    "Go to Dashboard": "前往主控台",
+    "Status Page": "Status Page",
+    telegram: "Telegram",
+    webhook: "Webhook",
+    smtp: "電郵 (SMTP)",
+    discord: "Discord",
+    teams: "Microsoft Teams",
+    signal: "Signal",
+    gotify: "Gotify",
+    slack: "Slack",
+    "rocket.chat": "Rocket.chat",
+    pushover: "Pushover",
+    pushy: "Pushy",
+    octopush: "Octopush",
+    lunasea: "LunaSea",
+    apprise: "Apprise (支援 50 多種通知)",
+    pushbullet: "Pushbullet",
+    line: "Line Messenger",
+    mattermost: "Mattermost",
 };
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 import "bootstrap";
 import { createApp, h } from "vue";
+import contenteditable from "vue-contenteditable";
 import Toast from "vue-toastification";
-import contenteditable from "vue-contenteditable"
 import "vue-toastification/dist/index.css";
 import App from "./App.vue";
 import "./assets/app.scss";
@@ -9,10 +9,9 @@ import { i18n } from "./i18n";
 import { FontAwesomeIcon } from "./icon.js";
 import datetime from "./mixins/datetime";
 import mobile from "./mixins/mobile";
+import publicMixin from "./mixins/public";
 import socket from "./mixins/socket";
 import theme from "./mixins/theme";
-import publicMixin from "./mixins/public";
-
 import { router } from "./router";
 import { appName } from "./util.ts";

@@ -27,10 +26,10 @@ const app = createApp({
    data() {
        return {
            appName: appName
-        }
+        };
    },
    render: () => h(App),
-})
+});

 app.use(router);
 app.use(i18n);
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -256,7 +256,7 @@ export default {
            // Source: https://digitalfortress.tech/tips/top-15-commonly-used-regex/
            ipRegexPattern: "((^\\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\\s*$)|(^\\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:)))(%.+)?\\s*$))",
            // Source: https://stackoverflow.com/questions/106179/regular-expression-to-match-dns-hostname-or-ip-address
-            hostnameRegexPattern: "^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\-]*[a-zA-Z0-9])\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\-]*[A-Za-z0-9])$"
+            hostnameRegexPattern: "^(([a-zA-Z0-9_]|[a-zA-Z0-9_][a-zA-Z0-9\\-_]*[a-zA-Z0-9_])\\.)*([A-Za-z0-9_]|[A-Za-z0-9_][A-Za-z0-9\\-_]*[A-Za-z0-9_])$"
        };
    },

--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -52,9 +52,12 @@
                            </div>
                        </div>

+                        <!-- General Settings -->
                        <h2 class="mt-5 mb-2">{{ $t("General") }}</h2>
+
                        <form class="mb-3" @submit.prevent="saveGeneral">
-                            <div class="mb-3">
+                            <!-- Timezone -->
+                            <div class="mb-4">
                                <label for="timezone" class="form-label">{{ $t("Timezone") }}</label>
                                <select id="timezone" v-model="$root.userTimezone" class="form-select">
                                    <option value="auto">
@@ -66,7 +69,8 @@
                                </select>
                            </div>

-                            <div class="mb-3">
+                            <!-- Search Engine -->
+                            <div class="mb-4">
                                <label class="form-label">{{ $t("Search Engine Visibility") }}</label>

                                <div class="form-check">
@@ -83,7 +87,8 @@
                                </div>
                            </div>

-                            <div class="mb-3">
+                            <!-- Entry Page -->
+                            <div class="mb-4">
                                <label class="form-label">{{ $t("Entry Page") }}</label>

                                <div class="form-check">
@@ -101,6 +106,19 @@
                                </div>
                            </div>

+                            <!-- Primary Base URL -->
+                            <div class="mb-4">
+                                <label class="form-label" for="primaryBaseURL">Primary Base URL</label>
+
+                                <div class="input-group mb-3">
+                                    <input id="primaryBaseURL" v-model="settings.primaryBaseURL" class="form-control" name="primaryBaseURL" placeholder="https://" pattern="https?://.+">
+                                    <button class="btn btn-outline-primary" type="button" @click="autoGetPrimaryBaseURL">Auto Get</button>
+                                </div>
+
+                                <div class="form-text">
+                                </div>
+                            </div>
+
                            <div>
                                <button class="btn btn-primary" type="submit">
                                    {{ $t("Save") }}
@@ -109,6 +127,7 @@
                        </form>

                        <template v-if="loaded">
+                            <!-- Change Password -->
                            <template v-if="! settings.disableAuth">
                                <h2 class="mt-5 mb-2">{{ $t("Change Password") }}</h2>
                                <form class="mb-3" @submit.prevent="savePassword">
@@ -196,36 +215,40 @@
                            <h2 class="mt-5 mb-2">{{ $t("Advanced") }}</h2>

                            <div class="mb-3">
-                                <button v-if="settings.disableAuth" class="btn btn-outline-primary me-1 mb-1" @click="enableAuth">{{ $t("Enable Auth") }}</button>
-                                <button v-if="! settings.disableAuth" class="btn btn-primary me-1 mb-1" @click="confirmDisableAuth">{{ $t("Disable Auth") }}</button>
-                                <button v-if="! settings.disableAuth" class="btn btn-danger me-1 mb-1" @click="$root.logout">{{ $t("Logout") }}</button>
+                                <button v-if="settings.disableAuth" class="btn btn-outline-primary me-2 mb-2" @click="enableAuth">{{ $t("Enable Auth") }}</button>
+                                <button v-if="! settings.disableAuth" class="btn btn-primary me-2 mb-2" @click="confirmDisableAuth">{{ $t("Disable Auth") }}</button>
+                                <button v-if="! settings.disableAuth" class="btn btn-danger me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
                                <button class="btn btn-outline-danger me-1 mb-1" @click="confirmClearStatistics">{{ $t("Clear all statistics") }}</button>
                            </div>
                        </template>
                    </div>

-                    <div class="notification-list col-md-6">
+                    <div class="col-md-6">
                        <div v-if="$root.isMobile" class="mt-3" />

-                        <h2>{{ $t("Notifications") }}</h2>
-                        <p v-if="$root.notificationList.length === 0">
-                            {{ $t("Not available, please setup.") }}
-                        </p>
-                        <p v-else>
-                            {{ $t("notificationDescription") }}
-                        </p>
+                        <!-- Notifications -->
+                        <div class="notification-list ">
+                            <h2>{{ $t("Notifications") }}</h2>
+                            <p v-if="$root.notificationList.length === 0">
+                                {{ $t("Not available, please setup.") }}
+                            </p>
+                            <p v-else>
+                                {{ $t("notificationDescription") }}
+                            </p>

-                        <ul class="list-group mb-3" style="border-radius: 1rem;">
-                            <li v-for="(notification, index) in $root.notificationList" :key="index" class="list-group-item">
-                                {{ notification.name }}<br>
-                                <a href="#" @click="$refs.notificationDialog.show(notification.id)">{{ $t("Edit") }}</a>
-                            </li>
-                        </ul>
+                            <ul class="list-group mb-3" style="border-radius: 1rem;">
+                                <li v-for="(notification, index) in $root.notificationList" :key="index" class="list-group-item">
+                                    {{ notification.name }}<br>
+                                    <a href="#" @click="$refs.notificationDialog.show(notification.id)">{{ $t("Edit") }}</a>
+                                </li>
+                            </ul>

-                        <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
-                            {{ $t("Setup Notification") }}
-                        </button>
+                            <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
+                                {{ $t("Setup Notification") }}
+                            </button>
+                        </div>

+                        <!-- Info -->
                        <h2 class="mt-5">{{ $t("Info") }}</h2>

                        {{ $t("Version") }}: {{ $root.info.version }} <br />
@@ -325,7 +348,7 @@
                <template v-else-if="$i18n.locale === 'bg-BG' ">
                    <p>Сигурни ли сте, че желаете да <strong>изключите удостоверяването</strong>?</p>
                    <p>Използва се в случаите, когато <strong>има настроен алтернативен метод за удостоверяване</strong> преди Uptime Kuma, например Cloudflare Access.</p>
-                    <p>Моля, използвайте внимателно.</p>
+                    <p>Моля, използвайте с повишено внимание.</p>
                </template>

                <template v-else-if="$i18n.locale === 'hu' ">
@@ -400,7 +423,7 @@ export default {

        "$i18n.locale"() {
            localStorage.locale = this.$i18n.locale;
-            setPageLocale()
+            setPageLocale();
        },
    },

@@ -531,6 +554,10 @@ export default {
                }
            });
        },
+
+        autoGetPrimaryBaseURL() {
+            this.settings.primaryBaseURL = location.protocol + "//" + location.host;
+        }
    },
 };
 </script>
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -197,7 +197,7 @@
        </div>

        <footer class="mt-5 mb-4">
-            {{ $t("Powered By") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" )}}</a>
+            {{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
        </footer>
    </div>
 </template>
--- a/src/util.js
+++ b/src/util.js
@@ -7,7 +7,7 @@
 // Backend uses the compiled file util.js
 // Frontend uses util.ts
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.genSecret = exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.STATUS_PAGE_PARTIAL_DOWN = exports.STATUS_PAGE_ALL_UP = exports.STATUS_PAGE_ALL_DOWN = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isDev = void 0;
+exports.getMonitorRelativeURL = exports.genSecret = exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.STATUS_PAGE_PARTIAL_DOWN = exports.STATUS_PAGE_ALL_UP = exports.STATUS_PAGE_ALL_DOWN = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isDev = void 0;
 const _dayjs = require("dayjs");
 const dayjs = _dayjs;
 exports.isDev = process.env.NODE_ENV === "development";
@@ -74,7 +74,7 @@ class TimeLogger {
        this.startTime = dayjs().valueOf();
    }
    print(name) {
-        if (exports.isDev) {
+        if (exports.isDev && process && process.env.TIMELOGGER === "1") {
            console.log(name + ": " + (dayjs().valueOf() - this.startTime) + "ms");
        }
    }
@@ -112,3 +112,7 @@ function genSecret(length = 64) {
    return secret;
 }
 exports.genSecret = genSecret;
+function getMonitorRelativeURL(id) {
+    return "/dashboard/" + id;
+}
+exports.getMonitorRelativeURL = getMonitorRelativeURL;
--- a/src/util.ts
+++ b/src/util.ts
@@ -86,7 +86,7 @@ export class TimeLogger {
    }

    print(name: string) {
-        if (isDev) {
+        if (isDev && process && process.env.TIMELOGGER === "1") {
            console.log(name + ": " + (dayjs().valueOf() - this.startTime) + "ms")
        }
    }
@@ -123,3 +123,7 @@ export function genSecret(length = 64) {
    }
    return secret;
 }
+
+export function getMonitorRelativeURL(id: string) {
+    return "/dashboard/" + id;
+}