Merge branch 'master' into #1059-specify-dns-resolver-port

2025-08-12 01:38:36 +08:00 · 2022-04-24 01:06:45 +01:00
parent a680331dd7 d9c5a7812c
commit d1a3cd047a
83 changed files with 3154 additions and 719 deletions
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -469,6 +469,10 @@ textarea.form-control {
    color: $primary;
 }

+.prism-editor__textarea {
+    outline: none !important;
+}
+
 // Localization

@import "localization.scss";
--- a/src/components/Confirm.vue
+++ b/src/components/Confirm.vue
@@ -42,6 +42,7 @@ export default {
            default: "No",
        },
    },
+    emits: [ "yes" ],
    data: () => ({
        modal: null,
    }),
--- a/src/components/CopyableInput.vue
+++ b/src/components/CopyableInput.vue
@@ -57,6 +57,7 @@ export default {
            default: undefined,
        },
    },
+    emits: [ "update:modelValue" ],
    data() {
        return {
            visibility: "password",
--- a/src/components/CountUp.vue
+++ b/src/components/CountUp.vue
@@ -10,7 +10,7 @@ import { sleep } from "../util.ts";
 export default {

    props: {
-        value: [String, Number],
+        value: [ String, Number ],
        time: {
            type: Number,
            default: 0.3,
--- a/src/components/HiddenInput.vue
+++ b/src/components/HiddenInput.vue
@@ -48,6 +48,7 @@ export default {
            default: undefined,
        },
    },
+    emits: [ "update:modelValue" ],
    data() {
        return {
            visibility: "password",
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -78,7 +78,7 @@ export default {
        Confirm,
    },
    props: {},
-    emits: ["added"],
+    emits: [ "added" ],
    data() {
        return {
            model: null,
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -220,6 +220,7 @@ export default {
            if (newPeriod == "0") {
                newPeriod = null;
                this.heartbeatList = null;
+                this.$root.storage().removeItem(`chart-period-${this.monitorId}`);
            } else {
                this.loading = true;

@@ -228,6 +229,7 @@ export default {
                        toast.error(res.msg);
                    } else {
                        this.heartbeatList = res.data;
+                        this.$root.storage()[`chart-period-${this.monitorId}`] = newPeriod;
                    }
                    this.loading = false;
                });
@@ -248,6 +250,12 @@ export default {
            },
            { deep: true }
        );
+
+        // Load chart period from storage if saved
+        let period = this.$root.storage()[`chart-period-${this.monitorId}`];
+        if (period != null) {
+            this.chartPeriodHrs = Math.min(period, 6);
+        }
    }
 };
 </script>
@@ -286,6 +294,7 @@ export default {

            .dark &:hover {
                background: $dark-font-color;
+                color: $dark-font-color2;
            }
        }

--- a/src/components/ProxyDialog.vue
+++ b/src/components/ProxyDialog.vue
@@ -105,7 +105,7 @@ export default {
        Confirm,
    },
    props: {},
-    emits: ["added"],
+    emits: [ "added" ],
    data() {
        return {
            model: null,
--- a/src/components/notifications/OneBot.vue
+++ b/src/components/notifications/OneBot.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="mb-3">
+        <div class="mb-3">
+            <label for="onebot-http-addr" class="form-label">{{ $t("onebotHttpAddress") }}<span style="color: red;"><sup>*</sup></span></label>
+            <input id="HttpUrl" v-model="$parent.notification.httpAddr" type="text" class="form-control" required>
+        </div>
+        <div class="mb-3">
+            <label for="onebot-access-token" class="form-label">AccessToken<span style="color: red;"><sup>*</sup></span></label>
+            <input id="HttpUrl" v-model="$parent.notification.accessToken" type="text" class="form-control" required>
+            <div class="form-text">
+                <p>{{ $t("onebotSafetyTips") }}</p>
+            </div>
+        </div>
+
+        <div class="mb-3">
+            <label for="onebot-msg-type" class="form-label">{{ $t("onebotMessageType") }}</label>
+            <select id="onebot-msg-type" v-model="$parent.notification.msgType" class="form-select">
+                <option value="group">{{ $t("onebotGroupMessage") }}</option>
+                <option value="private">{{ $t("onebotPrivateMessage") }}</option>
+            </select>
+        </div>
+
+        <div class="mb-3">
+            <label for="onebot-reciever-id" class="form-label">{{ $t("onebotUserOrGroupId") }}<span style="color: red;"><sup>*</sup></span></label>
+            <input id="secretKey" v-model="$parent.notification.recieverId" type="text" class="form-control" required>
+        </div>
+
+        <div class="form-text">
+            <i18n-t tag="p" keypath="Read more:">
+                <a href="https://github.com/botuniverse/onebot-11" target="_blank">https://github.com/botuniverse/onebot-11</a>
+            </i18n-t>
+        </div>
+    </div>
+</template>
--- a/src/components/notifications/PushDeer.vue
+++ b/src/components/notifications/PushDeer.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="mb-3">
+        <label for="pushdeer-key" class="form-label">{{ $t("PushDeer Key") }}</label>
+        <HiddenInput id="pushdeer-key" v-model="$parent.notification.pushdeerKey" :required="true" autocomplete="one-time-code" placeholder="PDUxxxx"></HiddenInput>
+    </div>
+
+    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+        <a href="http://www.pushdeer.com/" rel="noopener noreferrer" target="_blank">http://www.pushdeer.com/</a>
+    </i18n-t>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>
--- a/src/components/notifications/index.js
+++ b/src/components/notifications/index.js
@@ -29,6 +29,8 @@ import WeCom from "./WeCom.vue";
 import GoogleChat from "./GoogleChat.vue";
 import Gorush from "./Gorush.vue";
 import Alerta from "./Alerta.vue";
+import OneBot from "./OneBot.vue";
+import PushDeer from "./PushDeer.vue";

 /**
 * Manage all notification form.
@@ -67,6 +69,8 @@ const NotificationFormList = {
    "GoogleChat": GoogleChat,
    "gorush": Gorush,
    "alerta": Alerta,
+    "OneBot": OneBot,
+    "PushDeer": PushDeer,
 };

 export default NotificationFormList;
--- a/src/components/settings/Security.vue
+++ b/src/components/settings/Security.vue
@@ -4,7 +4,7 @@
            <!-- Change Password -->
            <template v-if="!settings.disableAuth">
                <p>
-                    {{ $t("Current User") }}: <strong>{{ username }}</strong>
+                    {{ $t("Current User") }}: <strong>{{ $root.username }}</strong>
                    <button v-if="! settings.disableAuth" id="logout-btn" class="btn btn-danger ms-4 me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
                </p>

@@ -269,7 +269,6 @@ export default {

    data() {
        return {
-            username: "",
            invalidPassword: false,
            password: {
                currentPassword: "",
@@ -297,10 +296,6 @@ export default {
        },
    },

-    mounted() {
-        this.loadUsername();
-    },
-
    methods: {
        savePassword() {
            if (this.password.newPassword !== this.password.repeatNewPassword) {
@@ -319,14 +314,6 @@ export default {
            }
        },

-        loadUsername() {
-            const jwtPayload = this.$root.getJWTPayload();
-
-            if (jwtPayload) {
-                this.username = jwtPayload.username;
-            }
-        },
-
        disableAuth() {
            this.settings.disableAuth = true;

@@ -334,6 +321,8 @@ export default {
            // Set it to empty if done
            this.saveSettings(() => {
                this.password.currentPassword = "";
+                this.$root.username = null;
+                this.$root.socket.token = "autoLogin";
            }, this.password.currentPassword);
        },

--- a/src/i18n.js
+++ b/src/i18n.js
@@ -43,7 +43,7 @@ for (let lang in languageList) {
    };
 }

-const rtlLangs = ["fa"];
+const rtlLangs = [ "fa" ];

 export const currentLocale = () => localStorage.locale
    || languageList[navigator.language] && navigator.language
--- a/src/icon.js
+++ b/src/icon.js
@@ -34,11 +34,13 @@ import {
    faAward,
    faLink,
    faChevronDown,
+    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
+    faAngleDown,
 } from "@fortawesome/free-solid-svg-icons";

 library.add(
@@ -72,11 +74,13 @@ library.add(
    faAward,
    faLink,
    faChevronDown,
+    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
+    faAngleDown,
 );

 export { FontAwesomeIcon };
--- a/src/languages/bg-BG.js
+++ b/src/languages/bg-BG.js
@@ -197,7 +197,7 @@ export default {
    line: "Line Messenger",
    mattermost: "Mattermost",
    "Status Page": "Статус страница",
-    "Status Pages": "Статус страница",
+    "Status Pages": "Статус страници",
    "Primary Base URL": "Основен базов URL адрес",
    "Push URL": "Генериран Push URL адрес",
    needPushEvery: "Необходимо е да извършвате заявка към този URL адрес на всеки {0} секунди",
@@ -343,7 +343,7 @@ export default {
    "No Monitors": "Няма монитори",
    "Untitled Group": "Група без заглавие",
    Services: "Услуги",
-    Discard: "Премахни",
+    Discard: "Отмени",
    Cancel: "Отмени",
    "Powered by": "Създадено чрез",
    serwersms: "SerwerSMS.pl",
@@ -371,4 +371,97 @@ export default {
    alertaAlertState: "Състояние на тревога",
    alertaRecoverState: "Състояние на възстановяване",
    deleteStatusPageMsg: "Сигурни ли сте, че желаете да изтриете тази статус страница?",
+    Proxies: "Прокси",
+    default: "По подразбиране",
+    enabled: "Включено",
+    setAsDefault: "Зададен по подразбиране",
+    deleteProxyMsg: "Сигурни ли сте, че желаете да изтриете това прокси за всички монитори?",
+    proxyDescription: "За да функционират трябва да бъдат зададени към монитор.",
+    enableProxyDescription: "Това прокси няма да има ефект върху заявките за мониторинг, докато не бъде активирано. Може да контролирате временното деактивиране на проксито от всички монитори чрез статуса на активиране.",
+    setAsDefaultProxyDescription: "Това проки ще бъде включено по подразбиране за новите монитори. Може да го изключите по отделно за всеки един монитор.",
+    "Certificate Chain": "Верига на сертификата",
+    Valid: "Валиден",
+    Invalid: "Невалиден",
+    AccessKeyId: "ID на ключ за достъп",
+    SecretAccessKey: "Тайна на ключа за достъп",
+    PhoneNumbers: "Телефонни номера",
+    TemplateCode: "Шаблон Код",
+    SignName: "Знак име",
+    "Sms template must contain parameters: ": "SMS шаблонът трябва да съдържа следните параметри: ",
+    "Bark Endpoint": "Bark крайна точка",
+    WebHookUrl: "URL адрес на уеб кука",
+    SecretKey: "Таен ключ",
+    "For safety, must use secret key": "За сигурност, трябва да се използва таен ключ",
+    "Device Token": "Токен за устройство",
+    Platform: "Платформа",
+    iOS: "iOS",
+    Android: "Android",
+    Huawei: "Huawei",
+    High: "Висок",
+    Retry: "Повтори",
+    Topic: "Тема",
+    "WeCom Bot Key": "WeCom бот ключ",
+    "Setup Proxy": "Настройка за прокси",
+    "Proxy Protocol": "Прокси протокол",
+    "Proxy Server": "Прокси сървър",
+    "Proxy server has authentication": "Прокси сървърът е с удостоверяване",
+    User: "Потребител",
+    Installed: "Инсталиран",
+    "Not installed": "Не е инсталиран",
+    Running: "Работи",
+    "Not running": "Не работи",
+    "Remove Token": "Премахни токен",
+    Start: "Старт",
+    Stop: "Стоп",
+    "Uptime Kuma": "Uptime Kuma",
+    "Add New Status Page": "Добави нова статус страница",
+    Slug: "Слъг",
+    "Accept characters:": "Приеми символи:",
+    startOrEndWithOnly: "Започва или завършва само с {0}",
+    "No consecutive dashes": "Без последователни тирета",
+    Next: "Следващ",
+    "The slug is already taken. Please choose another slug.": "Този слъг вече се използва. Моля изберете друг.",
+    "No Proxy": "Без прокси",
+    "HTTP Basic Auth": "HTTP основно удостоверяване",
+    "New Status Page": "Нова статус страница",
+    "Page Not Found": "Страницата не е открита",
+    "Reverse Proxy": "Ревърс прокси",
+    Backup: "Архивиране",
+    About: "Относно",
+    wayToGetCloudflaredURL: "(Свалете \"cloudflared\" от {0})",
+    cloudflareWebsite: "Cloudflare уебсайт",
+    "Message:": "Съобщение:",
+    "Don't know how to get the token? Please read the guide:": "Не знаете как да вземете токен? Моля, прочетете ръководството:",
+    "The current connection may be lost if you are currently connecting via Cloudflare Tunnel. Are you sure want to stop it? Type your current password to confirm it.": "Текущата връзка може да прекъсне ако в момента сте свързани чрез \"Cloudflare Tunnel\". Сигурни ли сте, че желаете да го спрете? Въведете Вашата текуща парола за да потвърдите.",
+    "Other Software": "Друг софтуер",
+    "For example: nginx, Apache and Traefik.": "Например: Nginx, Apache и Traefik.",
+    "Please read": "Моля, прочетете",
+    "Subject:": "Тема:",
+    "Valid To:": "Валиден до:",
+    "Days Remaining:": "Оставащи дни:",
+    "Issuer:": "Издател:",
+    "Fingerprint:": "Пръстов отпечатък:",
+    "No status pages": "Няма статус страници",
+    topic: "Тема",
+    topicExplanation: "MQTT тема за мониториране",
+    successMessage: "Съобщение при успех",
+    successMessageExplanation: "MQTT съобщение, което ще бъде считано за успех",
+    Customize: "Персонализирай",
+    "Custom Footer": "Персонализиран долен колонтитул",
+    "Custom CSS": "Потребителски CSS",
+    "Domain Name Expiry Notification": "Известяване при изтичащ домейн",
+    Proxy: "Прокси",
+    "Date Created": "Дата на създаване",
+    onebotHttpAddress: "OneBot HTTP адрес",
+    onebotMessageType: "OneBot тип съобщение",
+    onebotGroupMessage: "Група",
+    onebotPrivateMessage: "Лично",
+    onebotUserOrGroupId: "Група/Потребител ID",
+    onebotSafetyTips: "С цел безопасност трябва да зададете токен код за достъп",
+    "PushDeer Key": "PushDeer ключ",
+    "Footer Text": "Текст долен колонтитул",
+    "Show Powered By": "Покажи \"Създадено чрез\"",
+    "Domain Names": "Домейни",
+    signedInDisp: "Вписан като {0}",
+    signedInDispDisabled: "Удостоверяването е изключено.",
 };
--- a/src/languages/de-DE.js
+++ b/src/languages/de-DE.js
@@ -337,7 +337,7 @@ export default {
    "Hide Tags": "Tags ausblenden",
    Description: "Beschreibung",
    "No monitors available.": "Keine Monitore verfügbar.",
-    "Add one": "Füge eins hinzu",
+    "Add one": "Hinzufügen",
    "No Monitors": "Keine Monitore",
    "Untitled Group": "Gruppe ohne Titel",
    Services: "Dienste",
@@ -442,4 +442,7 @@ export default {
    "Issuer:": "Aussteller:",
    "Fingerprint:": "Fingerabdruck:",
    "No status pages": "Keine Status-Seiten",
+    Customize: "Anpassen",
+    "Custom Footer": "Eigener Footer",
+    "Custom CSS": "Eigenes CSS",
 };
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -310,6 +310,10 @@ export default {
    "One record": "One record",
    steamApiKeyDescription: "For monitoring a Steam Game Server you need a Steam Web-API key. You can register your API key here: ",
    "Current User": "Current User",
+    topic: "Topic",
+    topicExplanation: "MQTT topic to monitor",
+    successMessage: "Success Message",
+    successMessageExplanation: "MQTT message that will be considered as success",
    recent: "Recent",
    Done: "Done",
    Info: "Info",
@@ -355,6 +359,9 @@ export default {
    serwersmsPhoneNumber: "Phone number",
    serwersmsSenderName: "SMS Sender Name (registered via customer portal)",
    stackfield: "Stackfield",
+    Customize: "Customize",
+    "Custom Footer": "Custom Footer",
+    "Custom CSS": "Custom CSS",
    smtpDkimSettings: "DKIM Settings",
    smtpDkimDesc: "Please refer to the Nodemailer DKIM {0} for usage.",
    documentation: "documentation",
@@ -418,7 +425,7 @@ export default {
    "Add New Status Page": "Add New Status Page",
    Slug: "Slug",
    "Accept characters:": "Accept characters:",
-    "startOrEndWithOnly": "Start or end with {0} only",
+    startOrEndWithOnly: "Start or end with {0} only",
    "No consecutive dashes": "No consecutive dashes",
    Next: "Next",
    "The slug is already taken. Please choose another slug.": "The slug is already taken. Please choose another slug.",
@@ -444,6 +451,18 @@ export default {
    "Fingerprint:": "Fingerprint:",
    "No status pages": "No status pages",
    "Domain Name Expiry Notification": "Domain Name Expiry Notification",
-    "Proxy": "Proxy",
+    Proxy: "Proxy",
    "Date Created": "Date Created",
+    onebotHttpAddress: "OneBot HTTP Address",
+    onebotMessageType: "OneBot Message Type",
+    onebotGroupMessage: "Group",
+    onebotPrivateMessage: "Private",
+    onebotUserOrGroupId: "Group/User ID",
+    onebotSafetyTips: "For safety, must set access token",
+    "PushDeer Key": "PushDeer Key",
+    "Footer Text": "Footer Text",
+    "Show Powered By": "Show Powered By",
+    "Domain Names": "Domain Names",
+    signedInDisp: "Signed in as {0}",
+    signedInDispDisabled: "Auth Disabled.",
 };
--- a/src/languages/nl-NL.js
+++ b/src/languages/nl-NL.js
@@ -171,7 +171,7 @@ export default {
    "Avg. Response": "Gemiddelde Response",
    "Entry Page": "Entry Page",
    statusPageNothing: "Niets hier, voeg een groep of monitor toe.",
-    "No Services": "No Services",
+    "No Services": "Geen diensten",
    "All Systems Operational": "Alle systemen operationeel",
    "Partially Degraded Service": "Gedeeltelijk verminderde prestaties",
    "Degraded Service": "Verminderde prestaties",
@@ -205,4 +205,262 @@ export default {
    PushUrl: "Push URL",
    HeadersInvalidFormat: "The request headers is geen geldige JSON: ",
    BodyInvalidFormat: "De request body is geen geldige JSON: ",
+    "Primary Base URL": "Hoofd Basis URL",
+    "Push URL": "Push URL",
+    needPushEvery: "Je moet deze URL elke {0} seconden aanroepen.",
+    pushOptionalParams: "Optionele parameters: {0}",
+    defaultNotificationName: "Mijn {notification} Alert ({number})",
+    here: "hier",
+    Required: "Verplicht",
+    "Bot Token": "Bot Token",
+    wayToGetTelegramToken: "Je kunt een token krijgen van {0}.",
+    "Chat ID": "Chat ID",
+    supportTelegramChatID: "Ondersteuning Directe Chat / Groep / Kanaal Chat ID",
+    wayToGetTelegramChatID: "Je kunt je CHAT ID krijgen door een bericht te sturen naar de bot en naar deze URL te gaan om het chat_id te bekijken:",
+    "YOUR BOT TOKEN HERE": "DE BOT TOKEN HIER",
+    chatIDNotFound: "Chat ID is niet gevonden; stuur eerst een bericht naar de bot",
+    "Post URL": "Post URL",
+    "Content Type": "Content Type",
+    webhookJsonDesc: "{0} is goed voor een moderne HTTP server zoals Express.js",
+    webhookFormDataDesc: "{multipart} is goed voor PHP. De JSON moet worden ontleed met {decodeFunction}",
+    secureOptionNone: "Geen / STARTTLS (25, 587)",
+    secureOptionTLS: "TLS (465)",
+    "Ignore TLS Error": "Negeer TLS Error",
+    "From Email": "Van Email",
+    emailCustomSubject: "Aangepast Onderwerp",
+    "To Email": "Naar Email",
+    smtpCC: "CC",
+    smtpBCC: "BCC",
+    "Discord Webhook URL": "Discord Webhook URL",
+    wayToGetDiscordURL: "Je kunt dit krijgen door te gaan naar Server Instellingen -> Integraties -> Creëer Webhook",
+    "Bot Display Name": "Bot Weergave Naam",
+    "Prefix Custom Message": "Prefix Aangepast Bericht",
+    "Hello @everyone is...": "Hallo {'@'}iedereen is...",
+    "Webhook URL": "Webhook URL",
+    wayToGetTeamsURL: "Je kunt hier leren hoe je een webhook URL kunt maken {0}.",
+    Number: "Nummer",
+    Recipients: "Ontvangers",
+    needSignalAPI: "Je moet een signal client met REST API hebben.",
+    wayToCheckSignalURL: "Je kunt op deze URL zien hoe je een kunt instellen:",
+    signalImportant: "BELANGRIJK: Je kunt groepen en nummers niet mengen in ontvangers!",
+    "Application Token": "Applicatie Token",
+    "Server URL": "Server URL",
+    Priority: "Prioriteit",
+    "Icon Emoji": "Icoon Emoji",
+    "Channel Name": "Kanaal Naam",
+    "Uptime Kuma URL": "Uptime Kuma URL",
+    aboutWebhooks: "Meer info over Webhooks op: {0}",
+    aboutChannelName: "Voer de kanaal naam in op {0} Kannaal Naam veld als je het Webhook kanaal wilt omzeilen. Bv: #other-channel",
+    aboutKumaURL: "Als je de Uptime Kuma URL veld leeg laat, wordt standaard het GitHub project pagina weergegeven.",
+    emojiCheatSheet: "Emoji cheat sheet: {0}",
+    PushByTechulus: "Push door Techulus",
+    clicksendsms: "ClickSend SMS",
+    GoogleChat: "Google Chat (Google Workspace alleen)",
+    "User Key": "Gebruikers sleutel",
+    Device: "Apparaat",
+    "Message Title": "Bericht Titel",
+    "Notification Sound": "Notificatie Geluid",
+    "More info on:": "Meer info op: {0}",
+    pushoverDesc1: "Nood prioriteit (2) heeft standaard een 30 seconden timeout tussen pogingen en verloopt na 1 uur.",
+    pushoverDesc2: "Vul het appraat veld in als je notificaties naar andere apparaten wilt versturen.",
+    "SMS Type": "SMS Type",
+    octopushTypePremium: "Premium (Snel - aangeraden voor te alarmeren)",
+    octopushTypeLowCost: "Low Cost (Langzaam - wordt soms geblokkeerd door operator)",
+    checkPrice: "Controleer {0} prijzen:",
+    apiCredentials: "API referenties",
+    octopushLegacyHint: "Wil je de legacy versie van Octopush (2011-2020) gebruiken of de nieuwe versie?",
+    "Check octopush prices": "Controleer Octopush prijzen {0}.",
+    octopushPhoneNumber: "Telefoon nummer (Int. formaat, eg : +33612345678) ",
+    octopushSMSSender: "SMS zender naam : 3-11 alfanumerieke karakters en spatie (a-zA-Z0-9)",
+    "LunaSea Device ID": "LunaSea Apparaat ID",
+    "Apprise URL": "Apprise URL",
+    "Example:": "Voorbeeld: {0}",
+    "Read more:": "Lees meer: {0}",
+    "Status:": "Status: {0}",
+    "Read more": "Lees meer",
+    appriseInstalled: "Apprise is geïnstalleerd.",
+    appriseNotInstalled: "Apprise is niet geïnstalleerd. {0}",
+    "Access Token": "Access Token",
+    "Channel access token": "Kanaal access token",
+    "Line Developers Console": "Line Developers Console",
+    lineDevConsoleTo: "Line Developers Console - {0}",
+    "Basic Settings": "Basis Instellingen",
+    "User ID": "Gebruiker ID",
+    "Messaging API": "Berichten API",
+    wayToGetLineChannelToken: "Begin met {0} te openen, creëer een provider en kanaal (Messaging API), dan kun je de kanaal access token en gebruikers ID van de hierboven genoemde menu items krijgen.",
+    "Icon URL": "Icoon URL",
+    aboutIconURL: "Je kunt een link om de standaard profiel afbeelding te overschrijving in \"Icoon URL\" meegeven. Dit wordt niet gebruikt als Icon Emoji is ingesteld.",
+    aboutMattermostChannelName: "Je kunt het standaard kanaal dat de Webhook plaatst overschijven door de kanaal naam in te vullen in het \"Channel Name\" veld. Dit moet worden ingeschakeld in de Mattermost Webhook instellingen. Bv. #ander-kanaal",
+    matrix: "Matrix",
+    promosmsTypeEco: "SMS ECO - Goedkoop maar langzaam en vaak overbelast. Gelimiteerd tot Poolse ontvangers.",
+    promosmsTypeFlash: "SMS FLASH - Berichten worden automatisch weergegeven op het apparaat van de ontvanger. Gelimiteerd tot Poolse ontvangers.",
+    promosmsTypeFull: "SMS FULL - Premium tier van SMS, je kunt de ontvanger naam gebruiken (Je moet eerst de naam registreren). Betrouwbaar voor alarmeringen.",
+    promosmsTypeSpeed: "SMS SPEED - Hoogste prioriteit in systeem. Is veel sneller en betrouwbaarder maar kost meer (ongeveer twee keer zoveel als volle SMS prijs).",
+    promosmsPhoneNumber: "Telefoon nummer (voor Poolse ontvangers. Je kunt gebieds codes overslaan)",
+    promosmsSMSSender: "SMS Ontvanger naam : Voor geregistreerde naam of een van de standaarden: InfoSMS, SMS Info, MaxSMS, INFO, SMS",
+    "Feishu WebHookUrl": "Feishu WebHookURL",
+    matrixHomeserverURL: "Homeserver URL (met http(s):// en optioneel poort)",
+    "Internal Room Id": "Interne Room ID",
+    matrixDesc1: "Je kunt de interne room ID vinden door in de geavanceerde sectie van de room instellingen in je Matrix client te kijken. Het zou moeten uitzien als !QMdRCpUIfLwsfjxye6:home.server.",
+    matrixDesc2: "Het wordt ten zeerste aanbevolen om een nieuwe gebruiker aan te maken en niet de access token van je account te gebruiken, aangezien dit volledige toegang geeft tot je account en alle kamers waar je lid van bent. Maak in plaats daarvan een nieuwe gebruiker aan en nodig deze alleen uit voor de ruimte waarin je de melding wilt ontvangen. Je kunt de access token krijgen door het volgende uit te voeren {0}",
+    "Monitor History": "Monitor Geschiedenis",
+    clearDataOlderThan: "Bewaar monitor geschiedenis voor {0} dagen.",
+    PasswordsDoNotMatch: "Wachtwoorden komen niet overeen",
+    records: "records",
+    "One record": "Een record",
+    steamApiKeyDescription: "Om een Steam Game Server te monitoren heb je een Steam Web-API key nodig. Je kunt hier je API key registreren: ",
+    "Current User": "Huidge Gebruiker",
+    topic: "Onderwerp",
+    topicExplanation: "MQTT onderwerp om te monitoren",
+    successMessage: "Succesbericht",
+    successMessageExplanation: "MQTT bericht dat als succes wordt beschouwd.",
+    recent: "Recent",
+    Done: "Klaar",
+    Info: "Info",
+    Security: "Beveiliging",
+    "Steam API Key": "Steam API Sleutel",
+    "Shrink Database": "Verklein Database",
+    "Pick a RR-Type...": "Kies een RR-Type...",
+    "Pick Accepted Status Codes...": "Kies geaccepteerde Status Codes...",
+    Default: "Standaard",
+    "HTTP Options": "HTTP Opties",
+    "Create Incident": "Creëer Incident",
+    Title: "Titel",
+    Content: "Content",
+    Style: "Stijl",
+    info: "info",
+    warning: "waarschuwing",
+    danger: "gevaar",
+    primary: "primair",
+    light: "licht",
+    dark: "donker",
+    Post: "Post",
+    "Please input title and content": "Voer alstublieft titel en content in",
+    Created: "Gemaakt",
+    "Last Updated": "Laatst Bijgewerkt",
+    Unpin: "Losmaken",
+    "Switch to Light Theme": "Wissel naar Licht Thema",
+    "Switch to Dark Theme": "Wissel naar Donker Thema",
+    "Show Tags": "Toon Labels",
+    "Hide Tags": "Verberg Labels",
+    Description: "Beschrijving",
+    "No monitors available.": "Geen monitors beschikbaar.",
+    "Add one": "Voeg een toe",
+    "No Monitors": "Geen Monitors",
+    "Untitled Group": "Naamloze Groep",
+    Services: "Diensten",
+    Discard: "Weggooien",
+    Cancel: "Annuleren",
+    "Powered by": "Mogelijk gemaakt door",
+    shrinkDatabaseDescription: "Trigger database VACUUM voor SQLite. Als de database na 1.10.0 gemaakt is, dan is AUTO_VACUUM al aangezet en deze actie niet nodig.",
+    serwersms: "SerwerSMS.pl",
+    serwersmsAPIUser: "API Gebruikersnaam (incl. webapi_ prefix)",
+    serwersmsAPIPassword: "API Wachtwoord",
+    serwersmsPhoneNumber: "Telefoon nummer",
+    serwersmsSenderName: "SMS Zender Naam (geregistreerd via klant portaal)",
+    stackfield: "Stackfield",
+    Customize: "Aanpassen",
+    "Custom Footer": "Aangepaste Footer",
+    "Custom CSS": "Aangepaste CSS",
+    smtpDkimSettings: "DKIM Instellingen",
+    smtpDkimDesc: "Refereer alsjeblieft naar Nodemailer DKIM {0} voor gebruik.",
+    documentation: "documentatie",
+    smtpDkimDomain: "Domein Naam",
+    smtpDkimKeySelector: "Sleutel Kiezer",
+    smtpDkimPrivateKey: "Prive Sleutel",
+    smtpDkimHashAlgo: "Hash Algoritme (Optioneel)",
+    smtpDkimheaderFieldNames: "Header sleutels om te ondertekenen (Optioneel)",
+    smtpDkimskipFields: "Header sleutels niet om te ondertekenen (Optioneel)",
+    gorush: "Gorush",
+    alerta: "Alerta",
+    alertaApiEndpoint: "API Eindpunt",
+    alertaEnvironment: "Omgeving",
+    alertaApiKey: "API Sleutel",
+    alertaAlertState: "Alert Staat",
+    alertaRecoverState: "Herstel Staat",
+    deleteStatusPageMsg: "Weet je zeker je deze status pagina wilt verwijderen?",
+    Proxies: "Proxies",
+    default: "Standaard",
+    enabled: "Ingeschakeld",
+    setAsDefault: "Stel in als standaard",
+    deleteProxyMsg: "Weet je zeker dat je deze proxy wilt verwijderen voor alle monitors?",
+    proxyDescription: "Proxies moeten worden toegewezen aan een monitor om te functioneren.",
+    enableProxyDescription: "Deze proxy heeft geen effect op monitor verzoeken totdat het is geactiveerd. Je kunt tijdelijk de proxy uitschakelen voor alle monitors voor activatie status.",
+    setAsDefaultProxyDescription: "Deze proxy wordt standaard aangezet voor alle nieuwe monitors. Je kunt nog steeds de proxy apart uitschakelen voor elke monitor.",
+    "Certificate Chain": "Certificaat Chain",
+    Valid: "Geldig",
+    Invalid: "Ongeldig",
+    AccessKeyId: "AccessKey ID",
+    SecretAccessKey: "AccessKey Secret",
+    PhoneNumbers: "TelefoonNummers",
+    TemplateCode: "TemplateCode",
+    SignName: "SignName",
+    "Sms template must contain parameters: ": "Sms sjabloon moet de volgende parameters bevatten: ",
+    "Bark Endpoint": "Bark Endpoint",
+    WebHookUrl: "WebHookUrl",
+    SecretKey: "SecretKey",
+    "For safety, must use secret key": "Voor de veiligheid moet je de secret key gebruiken",
+    "Device Token": "Apparaat Token",
+    Platform: "Platform",
+    iOS: "iOS",
+    Android: "Android",
+    Huawei: "Huawei",
+    High: "Hoog",
+    Retry: "Opnieuw",
+    Topic: "Onderwerp",
+    "WeCom Bot Key": "WeCom Bot Sleutel",
+    "Setup Proxy": "Proxy instellen",
+    "Proxy Protocol": "Proxy Protocol",
+    "Proxy Server": "Proxy Server",
+    "Proxy server has authentication": "Proxy server heeft authenticatie",
+    User: "Gebruiker",
+    Installed: "Geïnstalleerd",
+    "Not installed": "Niet geïnstalleerd",
+    Running: "Actief",
+    "Not running": "Niet actief",
+    "Remove Token": "Verwijder Token",
+    Start: "Start",
+    Stop: "Stop",
+    "Uptime Kuma": "Uptime Kuma",
+    "Add New Status Page": "Voeg nieuwe status pagina toe",
+    Slug: "Slug",
+    "Accept characters:": "Geaccepteerde tekens:",
+    startOrEndWithOnly: "Start of eindig alleen met {0}",
+    "No consecutive dashes": "Geen opeenvolgende streepjes",
+    Next: "Volgende",
+    "The slug is already taken. Please choose another slug.": "De slug is al in gebruik. Kies een andere slug.",
+    "No Proxy": "Geen Proxy",
+    "HTTP Basic Auth": "HTTP Basic Auth",
+    "New Status Page": "Nieuwe Status Pagina",
+    "Page Not Found": "Pagina Niet gevonden",
+    "Reverse Proxy": "Reverse Proxy",
+    Backup: "Backup",
+    About: "Over",
+    wayToGetCloudflaredURL: "(Download cloudflared van {0})",
+    cloudflareWebsite: "Cloudflare Website",
+    "Message:": "Bericht:",
+    "Don't know how to get the token? Please read the guide:": "Lees de uitleg als je niet weet hoe je een token krijgt:",
+    "The current connection may be lost if you are currently connecting via Cloudflare Tunnel. Are you sure want to stop it? Type your current password to confirm it.": "De huidge verbinding kan worden verbroken als je momenteel bent verbonden met Cloudflare Tunnel. Weet je zeker dat je het wilt stoppen? Typ je huidige wachtwoord om het te bevestigen.",
+    "Other Software": "Andere Software",
+    "For example: nginx, Apache and Traefik.": "Bijvoorbeeld: nginx, Apache and Traefik.",
+    "Please read": "Lees alstublieft",
+    "Subject:": "Onderwerp:",
+    "Valid To:": "Geldig Tot:",
+    "Days Remaining:": "Dagen Resterend:",
+    "Issuer:": "Uitgever:",
+    "Fingerprint:": "Vingerafruk:",
+    "No status pages": "Geen status pagina's",
+    "Domain Name Expiry Notification": "Domein Naam Verloop Notificatie",
+    Proxy: "Proxy",
+    "Date Created": "Datum Aangemaakt",
+    onebotHttpAddress: "OneBot HTTP Adres",
+    onebotMessageType: "OneBot Bericht Type",
+    onebotGroupMessage: "Groep",
+    onebotPrivateMessage: "Privé",
+    onebotUserOrGroupId: "Groep/Gebruiker ID",
+    onebotSafetyTips: "Voor de veiligheid moet een toegangssleutel worden ingesteld",
+    "PushDeer Key": "PushDeer Key",
+    "Footer Text": "Footer Tekst",
+    "Show Powered By": "Laat 'Mogeljik gemaakt door' zien",
+    "Domain Names": "Domein Namen",
 };
--- a/src/languages/ru-RU.js
+++ b/src/languages/ru-RU.js
@@ -374,8 +374,8 @@ export default {
    serwersmsSenderName: "SMS Имя Отправителя (регистрированный через пользовательский портал)",
    stackfield: "Stackfield",
    smtpDkimSettings: "DKIM Настройки",
-    smtpDkimDesc: "Please refer to the Nodemailer DKIM {0} for usage.",
-    documentation: "документация",
+    smtpDkimDesc: "Пожалуйста ознакомьтесь с {0} Nodemailer DKIM для использования.",
+    documentation: "документацией",
    smtpDkimDomain: "Имя Домена",
    smtpDkimKeySelector: "Ключ",
    smtpDkimPrivateKey: "Приватный ключ",
@@ -389,4 +389,12 @@ export default {
    alertaApiKey: "Ключ API",
    alertaAlertState: "Состояние алерта",
    alertaRecoverState: "Состояние восстановления",
+    Proxies: "Прокси",
+    default: "По умолчанию",
+    enabled: "Включено",
+    setAsDefault: "Установлено по умолчанию",
+    deleteProxyMsg: "Вы действительно хотите удалить этот прокси для всех мониторов?",
+    proxyDescription: "Прокси должны быть привязаны к монитору, чтобы работать.",
+    enableProxyDescription: "Этот прокси не будет влиять на запросы монитора, пока не будет активирован. Вы можете контролировать временное отключение прокси для всех мониторов через статус активации.",
+    setAsDefaultProxyDescription: "Этот прокси будет по умолчанию включен для новых мониторов. Вы всё ещё можете отдельно отключать прокси в каждом мониторе.",
 };
--- a/src/languages/zh-CN.js
+++ b/src/languages/zh-CN.js
@@ -434,7 +434,7 @@ export default {
    "Add New Status Page": "添加新的状态页",
    Slug: "路径",
    "Accept characters:": "可接受的字符：",
-    "startOrEndWithOnly": "开头和结尾必须为 {0}",
+    startOrEndWithOnly: "开头和结尾必须为 {0}",
    "No consecutive dashes": "不能有连续的破折号",
    Next: "下一步",
    "The slug is already taken. Please choose another slug.": "该路径已被使用。请选择其他路径。",
@@ -450,6 +450,23 @@ export default {
    "Fingerprint:": "指纹：",
    "No status pages": "无状态页",
    "Domain Name Expiry Notification": "域名到期时通知",
-    "Proxy": "代理",
+    Proxy: "代理",
    "Date Created": "创建于",
+    onebotHttpAddress: "OneBot HTTP 地址",
+    onebotMessageType: "OneBot 消息类型",
+    onebotGroupMessage: "群聊",
+    onebotPrivateMessage: "私聊",
+    onebotUserOrGroupId: "群组/用户ID",
+    onebotSafetyTips: "出于安全原因，请务必设置 AccessToken",
+    topic: "Topic",
+    topicExplanation: "MQTT 传递给监控的 Topic",
+    successMessage: "成功时消息",
+    successMessageExplanation: "MQTT 成功时所传递的消息",
+    Customize: "自定义",
+    "Custom Footer": "自定义底部",
+    "Custom CSS": "自定义 CSS",
+    "PushDeer Key": "PushDeer Key",
+    "Footer Text": "底部自定义文本",
+    "Show Powered By": "显示 Powered By",
+    "Domain Names": "域名",
 };
--- a/src/languages/zh-TW.js
+++ b/src/languages/zh-TW.js
@@ -33,7 +33,7 @@ export default {
    Appearance: "外觀",
    Theme: "主題",
    General: "一般",
-    "Primary Base URL": "主要基底 URL",
+    "Primary Base URL": "主要基底網址",
    Version: "版本",
    "Check Update On GitHub": "在 GitHub 檢查更新",
    List: "清單",
@@ -307,9 +307,12 @@ export default {
    PasswordsDoNotMatch: "密碼不相符。",
    records: "記錄",
    "One record": "一項記錄",
-    "Showing {from} to {to} of {count} records": "正在顯示 {count} 項記錄中的 {from} 至 {to} 項",
    steamApiKeyDescription: "若要監測 Steam 遊戲伺服器，您將需要 Steam Web-API 金鑰。您可以在此註冊您的 API 金鑰：",
    "Current User": "目前使用者",
+    topic: "Topic",
+    topicExplanation: "要監測的 MQTT Topic",
+    successMessage: "成功訊息",
+    successMessageExplanation: "視為成功的 MQTT 訊息",
    recent: "最近",
    Done: "完成",
    Info: "資訊",
@@ -355,6 +358,9 @@ export default {
    serwersmsPhoneNumber: "電話號碼",
    serwersmsSenderName: "SMS 寄件人名稱 (由客戶入口網站註冊)",
    stackfield: "Stackfield",
+    Customize: "自訂",
+    "Custom Footer": "自訂頁尾",
+    "Custom CSS": "自訂 CSS",
    smtpDkimSettings: "DKIM 設定",
    smtpDkimDesc: "請參考 Nodemailer DKIM {0} 使用方式。",
    documentation: "文件",
@@ -366,7 +372,7 @@ export default {
    smtpDkimskipFields: "不簽署的郵件標頭 (選填)",
    gorush: "Gorush",
    alerta: "Alerta",
-    alertaApiEndpoint: "API Endpoint",
+    alertaApiEndpoint: "API 端點",
    alertaEnvironment: "環境",
    alertaApiKey: "API 金鑰",
    alertaAlertState: "警示狀態",
@@ -380,4 +386,80 @@ export default {
    proxyDescription: "必須將代理伺服器指派給監測器才能運作。",
    enableProxyDescription: "此代理伺服器在啟用前不會在監測器上生效，您可以藉由控制啟用狀態來暫時對所有的監測器停用代理伺服器。",
    setAsDefaultProxyDescription: "預設情況下，新監測器將啟用此代理伺服器。您仍可分別停用各監測器的代理伺服器。",
+    "Certificate Chain": "憑證鏈結",
+    Valid: "有效",
+    Invalid: "無效",
+    AccessKeyId: "AccessKey ID",
+    SecretAccessKey: "AccessKey 密碼",
+    PhoneNumbers: "PhoneNumbers",
+    TemplateCode: "TemplateCode",
+    SignName: "SignName",
+    "Sms template must contain parameters: ": "Sms 範本必須包含參數：",
+    "Bark Endpoint": "Bark 端點",
+    WebHookUrl: "WebHookUrl",
+    SecretKey: "SecretKey",
+    "For safety, must use secret key": "為了安全起見，必須使用秘密金鑰",
+    "Device Token": "裝置權杖",
+    Platform: "平台",
+    iOS: "iOS",
+    Android: "Android",
+    Huawei: "華為",
+    High: "高",
+    Retry: "重試",
+    Topic: "Topic",
+    "WeCom Bot Key": "WeCom 機器人金鑰",
+    "Setup Proxy": "設置 Proxy",
+    "Proxy Protocol": "Proxy 通訊協定",
+    "Proxy Server": "Proxy 伺服器",
+    "Proxy server has authentication": "Proxy 伺服器啟用了驗證功能",
+    User: "使用者",
+    Installed: "已安裝",
+    "Not installed": "未安裝",
+    Running: "執行中",
+    "Not running": "未執行",
+    "Remove Token": "移除權杖",
+    Start: "開始",
+    Stop: "停止",
+    "Uptime Kuma": "Uptime Kuma",
+    "Add New Status Page": "新增狀態頁",
+    Slug: "Slug",
+    "Accept characters:": "可用字元：",
+    startOrEndWithOnly: "僅能使用 {0} 開頭或結尾",
+    "No consecutive dashes": "不得連續使用破折號",
+    Next: "下一步",
+    "The slug is already taken. Please choose another slug.": "此 slug 已被使用。請選擇其他 slug。",
+    "No Proxy": "無 Proxy",
+    "HTTP Basic Auth": "HTTP 基本驗證",
+    "New Status Page": "新狀態頁",
+    "Page Not Found": "找不到頁面",
+    "Reverse Proxy": "反向代理",
+    Backup: "備份",
+    About: "關於",
+    wayToGetCloudflaredURL: "(從 {0} 下載 cloudflared)",
+    cloudflareWebsite: "Cloudflare 網站",
+    "Message:": "訊息：",
+    "Don't know how to get the token? Please read the guide:": "不知道如何取得權杖嗎？請閱讀指南：",
+    "The current connection may be lost if you are currently connecting via Cloudflare Tunnel. Are you sure want to stop it? Type your current password to confirm it.": "如果您目前正透過 Cloudflare Tunnel 連線，可能會導致連線中斷。您確定要停止嗎？請輸入密碼以確認。",
+    "Other Software": "其他軟體",
+    "For example: nginx, Apache and Traefik.": "例如 nginx、Apache 和 Traefik。",
+    "Please read": "請閱覽",
+    "Subject:": "簽發給：",
+    "Valid To:": "有效期限：",
+    "Days Remaining:": "剩餘天數：",
+    "Issuer:": "簽發者：",
+    "Fingerprint:": "指紋：",
+    "No status pages": "無狀態頁",
+    "Domain Name Expiry Notification": "網域名稱到期通知",
+    Proxy: "Proxy",
+    "Date Created": "建立日期",
+    onebotHttpAddress: "OneBot HTTP 位址",
+    onebotMessageType: "OneBot 訊息類型",
+    onebotGroupMessage: "群組",
+    onebotPrivateMessage: "私人",
+    onebotUserOrGroupId: "群組/使用者 ID",
+    onebotSafetyTips: "為了安全起見，必須設置存取權杖",
+    "PushDeer Key": "PushDeer 金鑰",
+    "Footer Text": "頁尾文字",
+    "Show Powered By": "顯示技術支援文字",
+    "Domain Names": "網域名稱",
 };
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -32,9 +32,32 @@
                    </router-link>
                </li>
                <li v-if="$root.loggedIn" class="nav-item">
-                    <router-link to="/settings" class="nav-link" :class="{ active: $route.path.includes('settings') }">
-                        <font-awesome-icon icon="cog" /> {{ $t("Settings") }}
-                    </router-link>
+                    <div class="dropdown dropdown-profile-pic">
+                        <div type="button" class="nav-link" data-bs-toggle="dropdown">
+                            <div class="profile-pic">{{ $root.usernameFirstChar }}</div>
+                            <font-awesome-icon icon="angle-down" />
+                        </div>
+                        <ul class="dropdown-menu">
+                            <li>
+                                <i18n-t v-if="$root.username != null" tag="span" keypath="signedInDisp" class="dropdown-item-text">
+                                    <strong>{{ $root.username }}</strong>
+                                </i18n-t>
+                                <span v-if="$root.username == null" class="dropdown-item-text">{{ $t("signedInDispDisabled") }}</span>
+                            </li>
+                            <li><hr class="dropdown-divider"></li>
+                            <li>
+                                <router-link to="/settings" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">
+                                    <font-awesome-icon icon="cog" /> {{ $t("Settings") }}
+                                </router-link>
+                            </li>
+                            <li v-if="$root.loggedIn && $root.socket.token !== 'autoLogin'">
+                                <button class="dropdown-item" @click="$root.logout">
+                                    <font-awesome-icon icon="sign-out-alt" />
+                                    {{ $t("Logout") }}
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
                </li>
            </ul>
        </header>
@@ -192,6 +215,81 @@ main {
    z-index: 99999;
 }

+// Profile Pic Button with Dropdown
+.dropdown-profile-pic {
+    user-select: none;
+
+    .nav-link {
+        cursor: pointer;
+        display: flex;
+        gap: 6px;
+        align-items: center;
+        background-color: rgba(200, 200, 200, 0.2);
+        padding: 0.5rem 0.8rem;
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+    }
+
+    .dropdown-menu {
+        transition: all 0.2s;
+        padding-left: 0;
+        padding-bottom: 0;
+        margin-top: 8px !important;
+        border-radius: 16px;
+        overflow: hidden;
+
+        .dropdown-divider {
+            margin: 0;
+            border-top: 1px solid rgba(0, 0, 0, 0.4);
+            background-color: transparent;
+        }
+
+        .dropdown-item-text {
+            font-size: 14px;
+            padding-bottom: 0.7rem;
+        }
+
+        .dropdown-item {
+            padding: 0.7rem 1rem;
+        }
+
+        .dark & {
+            background-color: $dark-bg;
+            color: $dark-font-color;
+            border-color: $dark-border-color;
+
+            .dropdown-item {
+                color: $dark-font-color;
+
+                &.active {
+                    color: $dark-font-color2;
+                    background-color: $highlight !important;
+                }
+
+                &:hover {
+                    background-color: $dark-bg2;
+                }
+            }
+        }
+    }
+
+    .profile-pic {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        background-color: $primary;
+        width: 24px;
+        height: 24px;
+        margin-right: 5px;
+        border-radius: 50rem;
+        font-weight: bold;
+        font-size: 10px;
+    }
+}
+
 .dark {
    header {
        background-color: $dark-header-bg;
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -1,6 +1,6 @@
 import { io } from "socket.io-client";
 import { useToast } from "vue-toastification";
-import jwt_decode from "jwt-decode";
+import jwtDecode from "jwt-decode";
 import Favico from "favico.js";
 const toast = useToast();

@@ -28,6 +28,7 @@ export default {
                connectCount: 0,
                initedSocketIO: false,
            },
+            username: null,
            remember: (localStorage.remember !== "0"),
            allowLoginDialog: false,        // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed.
            loggedIn: false,
@@ -89,7 +90,7 @@ export default {
            }

            socket = io(wsHost, {
-                transports: ["websocket"],
+                transports: [ "websocket" ],
            });

            socket.on("info", (info) => {
@@ -103,12 +104,13 @@ export default {
            socket.on("autoLogin", (monitorID, data) => {
                this.loggedIn = true;
                this.storage().token = "autoLogin";
+                this.socket.token = "autoLogin";
                this.allowLoginDialog = false;
            });

            socket.on("monitorList", (data) => {
                // Add Helper function
-                Object.entries(data).forEach(([monitorID, monitor]) => {
+                Object.entries(data).forEach(([ monitorID, monitor ]) => {
                    monitor.getUrl = () => {
                        try {
                            return new URL(monitor.url);
@@ -233,7 +235,6 @@ export default {
                    if (token !== "autoLogin") {
                        this.loginByToken(token);
                    } else {
-
                        // Timeout if it is not actually auto login
                        setTimeout(() => {
                            if (! this.loggedIn) {
@@ -241,7 +242,6 @@ export default {
                                this.$root.storage().removeItem("token");
                            }
                        }, 5000);
-
                    }
                } else {
                    this.allowLoginDialog = true;
@@ -266,7 +266,7 @@ export default {
            const jwtToken = this.$root.storage().token;

            if (jwtToken && jwtToken !== "autoLogin") {
-                return jwt_decode(jwtToken);
+                return jwtDecode(jwtToken);
            }
            return undefined;
        },
@@ -305,6 +305,7 @@ export default {
                    this.storage().token = res.token;
                    this.socket.token = res.token;
                    this.loggedIn = true;
+                    this.username = this.getJWTPayload()?.username;

                    // Trigger Chrome Save Password
                    history.pushState({}, "");
@@ -322,6 +323,7 @@ export default {
                    this.logout();
                } else {
                    this.loggedIn = true;
+                    this.username = this.getJWTPayload()?.username;
                }
            });
        },
@@ -331,6 +333,7 @@ export default {
            this.storage().removeItem("token");
            this.socket.token = null;
            this.loggedIn = false;
+            this.username = null;
            this.clearData();
        },

@@ -398,6 +401,14 @@ export default {

    computed: {

+        usernameFirstChar() {
+            if (typeof this.username == "string" && this.username.length >= 1) {
+                return this.username.charAt(0).toUpperCase();
+            } else {
+                return "🐻";
+            }
+        },
+
        lastHeartbeatList() {
            let result = {};

--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -32,6 +32,9 @@
                                    <option value="steam">
                                        Steam Game Server
                                    </option>
+                                    <option value="mqtt">
+                                        MQTT
+                                    </option>
                                </select>
                            </div>

@@ -67,15 +70,15 @@
                            </div>

                            <!-- Hostname -->
-                            <!-- TCP Port / Ping / DNS / Steam only -->
-                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam'" class="my-3">
+                            <!-- TCP Port / Ping / DNS / Steam / MQTT only -->
+                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam' || monitor.type === 'mqtt'" class="my-3">
                                <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
                                <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" :pattern="`${ipRegexPattern}|${hostnameRegexPattern}`" required>
                            </div>

                            <!-- Port -->
-                            <!-- For TCP Port / Steam Type -->
-                            <div v-if="monitor.type === 'port' || monitor.type === 'steam'" class="my-3">
+                            <!-- For TCP Port / Steam / MQTT Type -->
+                            <div v-if="monitor.type === 'port' || monitor.type === 'steam' || monitor.type === 'mqtt'" class="my-3">
                                <label for="port" class="form-label">{{ $t("Port") }}</label>
                                <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
                            </div>
@@ -124,6 +127,36 @@
                                </div>
                            </template>

+                            <!-- MQTT -->
+                            <!-- For MQTT Type -->
+                            <template v-if="monitor.type === 'mqtt'">
+                                <div class="my-3">
+                                    <label for="mqttUsername" class="form-label">MQTT {{ $t("Username") }}</label>
+                                    <input id="mqttUsername" v-model="monitor.mqttUsername" type="text" class="form-control">
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="mqttPassword" class="form-label">MQTT {{ $t("Password") }}</label>
+                                    <input id="mqttPassword" v-model="monitor.mqttPassword" type="password" class="form-control">
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="mqttTopic" class="form-label">MQTT {{ $t("Topic") }}</label>
+                                    <input id="mqttTopic" v-model="monitor.mqttTopic" type="text" class="form-control" required>
+                                    <div class="form-text">
+                                        {{ $t("topicExplanation") }}
+                                    </div>
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="mqttSuccessMessage" class="form-label">MQTT {{ $t("successMessage") }}</label>
+                                    <input id="mqttSuccessMessage" v-model="monitor.mqttSuccessMessage" type="text" class="form-control">
+                                    <div class="form-text">
+                                        {{ $t("successMessageExplanation") }}
+                                    </div>
+                                </div>
+                            </template>
+
                            <!-- Interval -->
                            <div class="my-3">
                                <label for="interval" class="form-label">{{ $t("Heartbeat Interval") }} ({{ $t("checkEverySecond", [ monitor.interval ]) }})</label>
@@ -148,7 +181,7 @@

                            <h2 v-if="monitor.type !== 'push'" class="mt-5 mb-2">{{ $t("Advanced") }}</h2>

-                            <div class="my-3 form-check">
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check">
                                <input id="expiry-notification" v-model="monitor.expiryNotification" class="form-check-input" type="checkbox">
                                <label class="form-check-label" for="expiry-notification">
                                    {{ $t("Domain Name Expiry Notification") }}
@@ -402,17 +435,17 @@ export default {
        },

        bodyPlaceholder() {
-            return this.$t("Example:", [`
+            return this.$t("Example:", [ `
 {
    "key": "value"
-}`]);
+}` ]);
        },

        headersPlaceholder() {
-            return this.$t("Example:", [`
+            return this.$t("Example:", [ `
 {
    "HeaderName": "HeaderValue"
-}`]);
+}` ]);
        }

    },
@@ -506,10 +539,14 @@ export default {
                    upsideDown: false,
                    expiryNotification: false,
                    maxredirects: 10,
-                    accepted_statuscodes: ["200-299"],
+                    accepted_statuscodes: [ "200-299" ],
                    dns_resolve_type: "A",
                    dns_resolve_server: "1.1.1.1",
                    proxyId: null,
+                    mqttUsername: "",
+                    mqttPassword: "",
+                    mqttTopic: "",
+                    mqttSuccessMessage: "",
                };

                if (this.$root.proxyList && !this.monitor.proxyId) {
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -16,6 +16,14 @@
                            {{ item.title }}
                        </div>
                    </router-link>
+
+                    <!-- Logout Button -->
+                    <a v-if="$root.isMobile && $root.loggedIn && $root.socket.token !== 'autoLogin'" class="logout" @click.prevent="$root.logout">
+                        <div class="menu-item">
+                            <font-awesome-icon icon="sign-out-alt" />
+                            {{ $t("Logout") }}
+                        </div>
+                    </a>
                </div>
                <div class="settings-content col-lg-9 col-md-7">
                    <div v-if="currentPage" class="settings-content-header">
@@ -233,4 +241,8 @@ footer {
        }
    }
 }
+
+.logout {
+    color: $danger !important;
+}
 </style>
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -16,11 +16,18 @@
                    <input id="title" v-model="config.title" type="text" class="form-control">
                </div>

+                <!-- Description -->
                <div class="my-3">
                    <label for="description" class="form-label">{{ $t("Description") }}</label>
                    <textarea id="description" v-model="config.description" class="form-control"></textarea>
                </div>

+                <!-- Footer Text -->
+                <div class="my-3">
+                    <label for="footer-text" class="form-label">{{ $t("Footer Text") }}</label>
+                    <textarea id="footer-text" v-model="config.footerText" class="form-control"></textarea>
+                </div>
+
                <div class="my-3 form-check form-switch">
                    <input id="switch-theme" v-model="config.theme" class="form-check-input" type="checkbox" true-value="dark" false-value="light">
                    <label class="form-check-label" for="switch-theme">{{ $t("Switch to Dark Theme") }}</label>
@@ -31,6 +38,12 @@
                    <label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label>
                </div>

+                <!-- Show Powered By -->
+                <div class="my-3 form-check form-switch">
+                    <input id="show-powered-by" v-model="config.showPoweredBy" class="form-check-input" type="checkbox">
+                    <label class="form-check-label" for="show-powered-by">{{ $t("Show Powered By") }}</label>
+                </div>
+
                <div v-if="false" class="my-3">
                    <label for="password" class="form-label">{{ $t("Password") }} <sup>Coming Soon</sup></label>
                    <input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
@@ -39,7 +52,7 @@
                <!-- Domain Name List -->
                <div class="my-3">
                    <label class="form-label">
-                        Domain Names
+                        {{ $t("Domain Names") }}
                        <font-awesome-icon icon="plus-circle" class="btn-add-domain action text-primary" @click="addDomainField" />
                    </label>

@@ -51,6 +64,12 @@
                    </ul>
                </div>

+                <!-- Custom CSS -->
+                <div class="my-3">
+                    <div class="mb-1">{{ $t("Custom CSS") }}</div>
+                    <prism-editor v-model="config.customCSS" class="css-editor" :highlight="highlighter" line-numbers></prism-editor>
+                </div>
+
                <div class="danger-zone">
                    <button class="btn btn-danger me-2" @click="deleteDialog">
                        <font-awesome-icon icon="trash" />
@@ -239,13 +258,24 @@
            </div>

            <footer class="mt-5 mb-4">
-                {{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
+                <div class="custom-footer-text text-start">
+                    <strong v-if="enableEditMode">{{ $t("Custom Footer") }}:</strong>
+                </div>
+                <Editable v-model="config.footerText" tag="div" :contenteditable="enableEditMode" :noNL="false" class="alert-heading p-2" />
+
+                <p v-if="config.showPoweredBy">
+                    {{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
+                </p>
            </footer>
        </div>

        <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteStatusPage">
            {{ $t("deleteStatusPageMsg") }}
        </Confirm>
+
+        <component is="style" v-if="config.customCSS" type="text/css">
+            {{ config.customCSS }}
+        </component>
    </div>
 </template>

@@ -259,11 +289,20 @@ import dayjs from "dayjs";
 import Favico from "favico.js";
 import { getResBaseURL } from "../util-frontend";
 import Confirm from "../components/Confirm.vue";
+// import Prism Editor
+import { PrismEditor } from "vue-prism-editor";
+import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
+
+// import highlighting library (you can use any library you want just return html string)
+import { highlight, languages } from "prismjs/components/prism-core";
+import "prismjs/components/prism-css";
+import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles

 const toast = useToast();

 const leavePageMsg = "Do you really want to leave? you have unsaved changes!";

+// eslint-disable-next-line no-unused-vars
 let feedInterval;

 const favicon = new Favico({
@@ -276,6 +315,7 @@ export default {
        PublicGroupList,
        ImageCropUpload,
        Confirm,
+        PrismEditor,
    },

    // Leave Page for vue route change
@@ -418,6 +458,13 @@ export default {
                this.$root.getSocket().emit("getStatusPage", this.slug, (res) => {
                    if (res.ok) {
                        this.config = res.config;
+
+                        if (!this.config.customCSS) {
+                            this.config.customCSS = "body {\n" +
+                                "  \n" +
+                                "}\n";
+                        }
+
                    } else {
                        toast.error(res.msg);
                    }
@@ -520,6 +567,10 @@ export default {
    },
    methods: {

+        highlighter(code) {
+            return highlight(code, languages.css);
+        },
+
        updateHeartbeatList() {
            // If editMode, it will use the data from websocket.
            if (! this.editMode) {
@@ -656,7 +707,7 @@ export default {
        },

        postIncident() {
-            if (this.incident.title == "" || this.incident.content == "") {
+            if (this.incident.title === "" || this.incident.content === "") {
                toast.error(this.$t("Please input title and content"));
                return;
            }
@@ -893,4 +944,18 @@ footer {
    }
 }

+/* required class */
+.css-editor {
+    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
+
+    border-radius: 1rem;
+    padding: 10px 5px;
+    border: 1px solid #ced4da;
+
+    .dark & {
+        background: $dark-bg;
+        border: 1px solid $dark-border-color;
+    }
+}
+
 </style>
--- a/src/util.js
+++ b/src/util.js
@@ -54,7 +54,39 @@ function debug(msg) {
 }
 exports.debug = debug;
 class Logger {
+    constructor() {
+        /**
+         * UPTIME_KUMA_HIDE_LOG=debug_monitor,info_monitor
+         *
+         * Example:
+         *  [
+         *     "debug_monitor",          // Hide all logs that level is debug and the module is monitor
+         *     "info_monitor",
+         *  ]
+         */
+        this.hideLog = {
+            info: [],
+            warn: [],
+            error: [],
+            debug: [],
+        };
+        if (typeof process !== "undefined" && process.env.UPTIME_KUMA_HIDE_LOG) {
+            let list = process.env.UPTIME_KUMA_HIDE_LOG.split(",").map(v => v.toLowerCase());
+            for (let pair of list) {
+                // split first "_" only
+                let values = pair.split(/_(.*)/s);
+                if (values.length >= 2) {
+                    this.hideLog[values[0]].push(values[1]);
+                }
+            }
+            this.debug("server", "UPTIME_KUMA_HIDE_LOG is set");
+            this.debug("server", this.hideLog);
+        }
+    }
    log(module, msg, level) {
+        if (this.hideLog[level] && this.hideLog[level].includes(module)) {
+            return;
+        }
        module = module.toUpperCase();
        level = level.toUpperCase();
        const now = new Date().toISOString();
--- a/src/util.ts
+++ b/src/util.ts
@@ -59,7 +59,46 @@ export function debug(msg: any) {
 }

 class Logger {
+
+    /**
+     * UPTIME_KUMA_HIDE_LOG=debug_monitor,info_monitor
+     *
+     * Example:
+     *  [
+     *     "debug_monitor",          // Hide all logs that level is debug and the module is monitor
+     *     "info_monitor",
+     *  ]
+     */
+    hideLog : any = {
+        info: [],
+        warn: [],
+        error: [],
+        debug: [],
+    };
+
+    constructor() {
+        if (typeof process !== "undefined" && process.env.UPTIME_KUMA_HIDE_LOG) {
+            let list = process.env.UPTIME_KUMA_HIDE_LOG.split(",").map(v => v.toLowerCase());
+
+            for (let pair of list) {
+                // split first "_" only
+                let values = pair.split(/_(.*)/s);
+
+                if (values.length >= 2) {
+                    this.hideLog[values[0]].push(values[1]);
+                }
+            }
+
+            this.debug("server", "UPTIME_KUMA_HIDE_LOG is set");
+            this.debug("server", this.hideLog);
+        }
+    }
+
    log(module: string, msg: any, level: string) {
+        if (this.hideLog[level] && this.hideLog[level].includes(module)) {
+            return;
+        }
+
        module = module.toUpperCase();
        level = level.toUpperCase();