Merge branch 'master' into logging

# Conflicts:
#	server/database.js
#	server/jobs.js
#	server/model/monitor.js
#	server/routers/api-router.js
#	server/server.js
#	server/socket-handlers/status-page-socket-handler.js
#	server/util-server.js

src/components/CertificateInfoRow.vue

@@ -11,23 +11,23 @@
                 <table class="text-start">
                     <tbody>
                         <tr class="my-3">
-                            <td class="px-3">Subject:</td>
+                            <td class="px-3">{{ $t("Subject:") }}</td>
                             <td>{{ formatSubject(cert.subject) }}</td>
                         </tr>
                         <tr class="my-3">
-                            <td class="px-3">Valid To:</td>
+                            <td class="px-3">{{ $t("Valid To:") }}</td>
                             <td><Datetime :value="cert.validTo" /></td>
                         </tr>
                         <tr class="my-3">
-                            <td class="px-3">Days Remaining:</td>
+                            <td class="px-3">{{ $t("Days Remaining:") }}</td>
                             <td>{{ cert.daysRemaining }}</td>
                         </tr>
                         <tr class="my-3">
-                            <td class="px-3">Issuer:</td>
+                            <td class="px-3">{{ $t("Issuer:") }}</td>
                             <td>{{ formatSubject(cert.issuer) }}</td>
                         </tr>
                         <tr class="my-3">
-                            <td class="px-3">Fingerprint:</td>
+                            <td class="px-3">{{ $t("Fingerprint:") }}</td>
                             <td>{{ cert.fingerprint }}</td>
                         </tr>
                     </tbody>

src/components/Login.vue

@@ -16,8 +16,8 @@
 
                 <div v-if="tokenRequired">
                     <div class="form-floating mt-3">
-                        <input id="floatingToken" v-model="token" type="text" maxlength="6" class="form-control" placeholder="123456">
-                        <label for="floatingToken">{{ $t("Token") }}</label>
+                        <input id="otp" v-model="token" type="text" maxlength="6" class="form-control" placeholder="123456">
+                        <label for="otp">{{ $t("Token") }}</label>
                     </div>
                 </div>
 

src/components/MonitorList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="shadow-box mb-3">
+    <div class="shadow-box mb-3" :style="boxStyle">
         <div class="list-header">
             <div class="placeholder"></div>
             <div class="search-wrapper">
@@ -9,7 +9,9 @@
                 <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
                     <font-awesome-icon icon="times" />
                 </a>
-                <input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" />
+                <form>
+                    <input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" autocomplete="off" />
+                </form>
             </div>
         </div>
         <div class="monitor-list" :class="{ scrollbar: scrollbar }">
@@ -34,7 +36,7 @@
                 </div>
 
                 <div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
-                    <div class="col-12">
+                    <div class="col-12 bottom-style">
                         <HeartbeatBar size="small" :monitor-id="item.id" />
                     </div>
                 </div>
@@ -63,9 +65,16 @@ export default {
     data() {
         return {
             searchText: "",
+            windowTop: 0,
         };
     },
     computed: {
+        boxStyle() {
+            return {
+                height: `calc(100vh - 160px + ${this.windowTop}px)`,
+            };
+        },
+
         sortedMonitorList() {
             let result = Object.values(this.$root.monitorList);
 
@@ -108,7 +117,20 @@ export default {
             return result;
         },
     },
+    mounted() {
+        window.addEventListener("scroll", this.onScroll);
+    },
+    beforeUnmount() {
+        window.removeEventListener("scroll", this.onScroll);
+    },
     methods: {
+        onScroll() {
+            if (window.top.scrollY <= 133) {
+                this.windowTop = window.top.scrollY;
+            } else {
+                this.windowTop = 133;
+            }
+        },
         monitorURL(id) {
             return getMonitorRelativeURL(id);
         },
@@ -122,6 +144,12 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars.scss";
 
+.shadow-box {
+    height: calc(100vh - 150px);
+    position: sticky;
+    top: 10px;
+}
+
 .small-padding {
     padding-left: 5px !important;
     padding-right: 5px !important;
@@ -142,6 +170,12 @@ export default {
     }
 }
 
+.dark {
+    .footer {
+      //  background-color: $dark-bg;
+    }
+}
+
 @media (max-width: 770px) {
     .list-header {
         margin: -20px;
@@ -169,9 +203,16 @@ export default {
 }
 
 .tags {
-    padding-left: 62px;
+    margin-top: 4px;
+    padding-left: 67px;
     display: flex;
     flex-wrap: wrap;
     gap: 0;
 }
+
+.bottom-style {
+    padding-left: 67px;
+    margin-top: 5px;
+}
+
 </style>

src/components/NotificationDialog.vue

@@ -85,7 +85,9 @@ export default {
             model: null,
             processing: false,
             id: null,
-            notificationTypes: Object.keys(NotificationFormList),
+            notificationTypes: Object.keys(NotificationFormList).sort((a, b) => {
+                return a.toLowerCase().localeCompare(b.toLowerCase());
+            }),
             notification: {
                 name: "",
                 /** @type { null | keyof NotificationFormList } */
@@ -143,12 +145,9 @@ export default {
                 this.id = null;
                 this.notification = {
                     name: "",
-                    type: null,
+                    type: "telegram",
                     isDefault: false,
                 };
-
-                // Set Default value here
-                this.notification.type = this.notificationTypes[0];
             }
 
             this.modal.show();

src/components/ProxyDialog.vue

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

src/components/PublicGroupList.vue

@@ -41,7 +41,7 @@
                                             <Uptime :monitor="monitor.element" type="24" :pill="true" />
                                             {{ monitor.element.name }}
                                         </div>
-                                        <div class="tags">
+                                        <div v-if="showTags" class="tags">
                                             <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
                                         </div>
                                     </div>
@@ -76,6 +76,9 @@ export default {
             type: Boolean,
             required: true,
         },
+        showTags: {
+            type: Boolean,
+        }
     },
     data() {
         return {

src/components/ToggleSection.vue

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

src/components/TwoFADialog.vue

@@ -19,6 +19,19 @@
                             </div>
                             <p v-if="showURI && twoFAStatus == false" class="text-break mt-2">{{ uri }}</p>
 
+                            <div v-if="!(uri && twoFAStatus == false)" class="mb-3">
+                                <label for="current-password" class="form-label">
+                                    {{ $t("Current Password") }}
+                                </label>
+                                <input
+                                    id="current-password"
+                                    v-model="currentPassword"
+                                    type="password"
+                                    class="form-control"
+                                    required
+                                />
+                            </div>
+
                             <button v-if="uri == null && twoFAStatus == false" class="btn btn-primary" type="button" @click="prepare2FA()">
                                 {{ $t("Enable 2FA") }}
                             </button>
@@ -59,11 +72,11 @@
 </template>
 
 <script lang="ts">
-import { Modal } from "bootstrap"
+import { Modal } from "bootstrap";
 import Confirm from "./Confirm.vue";
-import VueQrcode from "vue-qrcode"
-import { useToast } from "vue-toastification"
-const toast = useToast()
+import VueQrcode from "vue-qrcode";
+import { useToast } from "vue-toastification";
+const toast = useToast();
 
 export default {
     components: {
@@ -73,35 +86,36 @@ export default {
     props: {},
     data() {
         return {
+            currentPassword: "",
             processing: false,
             uri: null,
             tokenValid: false,
             twoFAStatus: null,
             token: null,
             showURI: false,
-        }
+        };
     },
     mounted() {
-        this.modal = new Modal(this.$refs.modal)
+        this.modal = new Modal(this.$refs.modal);
         this.getStatus();
     },
     methods: {
         show() {
-            this.modal.show()
+            this.modal.show();
         },
 
         confirmEnableTwoFA() {
-            this.$refs.confirmEnableTwoFA.show()
+            this.$refs.confirmEnableTwoFA.show();
         },
 
         confirmDisableTwoFA() {
-            this.$refs.confirmDisableTwoFA.show()
+            this.$refs.confirmDisableTwoFA.show();
         },
 
         prepare2FA() {
             this.processing = true;
 
-            this.$root.getSocket().emit("prepare2FA", (res) => {
+            this.$root.getSocket().emit("prepare2FA", this.currentPassword, (res) => {
                 this.processing = false;
 
                 if (res.ok) {
@@ -109,49 +123,51 @@ export default {
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
         save2FA() {
             this.processing = true;
 
-            this.$root.getSocket().emit("save2FA", (res) => {
+            this.$root.getSocket().emit("save2FA", this.currentPassword, (res) => {
                 this.processing = false;
 
                 if (res.ok) {
-                    this.$root.toastRes(res)
+                    this.$root.toastRes(res);
                     this.getStatus();
+                    this.currentPassword = "";
                     this.modal.hide();
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
         disable2FA() {
             this.processing = true;
 
-            this.$root.getSocket().emit("disable2FA", (res) => {
+            this.$root.getSocket().emit("disable2FA", this.currentPassword, (res) => {
                 this.processing = false;
 
                 if (res.ok) {
-                    this.$root.toastRes(res)
+                    this.$root.toastRes(res);
                     this.getStatus();
+                    this.currentPassword = "";
                     this.modal.hide();
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
         verifyToken() {
-            this.$root.getSocket().emit("verifyToken", this.token, (res) => {
+            this.$root.getSocket().emit("verifyToken", this.token, this.currentPassword, (res) => {
                 if (res.ok) {
                     this.tokenValid = res.valid;
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
         getStatus() {
@@ -161,10 +177,10 @@ export default {
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
     },
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/components/notifications/Alerta.vue

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

src/components/notifications/AliyunSms.vue

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

src/components/notifications/DingDing.vue

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

src/components/notifications/GoogleChat.vue

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

src/components/notifications/Gorush.vue

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

src/components/notifications/SMTP.vue

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

src/components/notifications/TechulusPush.vue

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

src/components/notifications/Telegram.vue

@@ -63,9 +63,9 @@ export default {
                     let update = res.data.result[res.data.result.length - 1];
 
                     if (update.channel_post) {
-                        this.notification.telegramChatID = update.channel_post.chat.id;
+                        this.$parent.notification.telegramChatID = update.channel_post.chat.id;
                     } else if (update.message) {
-                        this.notification.telegramChatID = update.message.chat.id;
+                        this.$parent.notification.telegramChatID = update.message.chat.id;
                     } else {
                         throw new Error(this.$t("chatIDNotFound"));
                     }

src/components/notifications/WeCom.vue

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

src/components/notifications/index.js

@@ -1,4 +1,4 @@
-import STMP from "./SMTP.vue"
+import STMP from "./SMTP.vue";
 import Telegram from "./Telegram.vue";
 import Discord from "./Discord.vue";
 import Webhook from "./Webhook.vue";
@@ -9,6 +9,7 @@ import RocketChat from "./RocketChat.vue";
 import Teams from "./Teams.vue";
 import Pushover from "./Pushover.vue";
 import Pushy from "./Pushy.vue";
+import TechulusPush from "./TechulusPush.vue";
 import Octopush from "./Octopush.vue";
 import PromoSMS from "./PromoSMS.vue";
 import ClickSendSMS from "./ClickSendSMS.vue";
@@ -24,6 +25,10 @@ import DingDing from "./DingDing.vue";
 import Bark from "./Bark.vue";
 import SerwerSMS from "./SerwerSMS.vue";
 import Stackfield from './Stackfield.vue';
+import WeCom from "./WeCom.vue";
+import GoogleChat from "./GoogleChat.vue";
+import Gorush from "./Gorush.vue";
+import Alerta from "./Alerta.vue";
 
 /**
  * Manage all notification form.
@@ -42,6 +47,7 @@ const NotificationFormList = {
     "rocket.chat": RocketChat,
     "pushover": Pushover,
     "pushy": Pushy,
+    "PushByTechulus": TechulusPush,
     "octopush": Octopush,
     "promosms": PromoSMS,
     "clicksendsms": ClickSendSMS,
@@ -57,6 +63,10 @@ const NotificationFormList = {
     "Bark": Bark,
     "serwersms": SerwerSMS,
     "stackfield": Stackfield,
-}
+    "WeCom": WeCom,
+    "GoogleChat": GoogleChat,
+    "gorush": Gorush,
+    "alerta": Alerta,
+};
 
-export default NotificationFormList
+export default NotificationFormList;

src/components/settings/About.vue

@@ -4,14 +4,39 @@
             <object class="my-4" width="200" height="200" data="/icon.svg" />
             <div class="fs-4 fw-bold">Uptime Kuma</div>
             <div>{{ $t("Version") }}: {{ $root.info.version }}</div>
-            <div class="my-1 update-link"><a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a></div>
+
+            <div class="my-3 update-link"><a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a></div>
+
+            <div class="mt-1">
+                <div class="form-check">
+                    <label><input v-model="settings.checkUpdate" type="checkbox" @change="saveSettings()" /> Show update if available</label>
+                </div>
+
+                <div class="form-check">
+                    <label><input v-model="settings.checkBeta" type="checkbox" :disabled="!settings.checkUpdate" @change="saveSettings()" /> Also check beta release</label>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
 export default {
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    },
 
+    watch: {
+
+    }
 };
 </script>
 

src/components/settings/General.vue

@@ -62,31 +62,31 @@
 
                 <div class="form-check">
                     <input
-                        id="entryPageYes"
+                        id="entryPageDashboard"
                         v-model="settings.entryPage"
                         class="form-check-input"
                         type="radio"
-                        name="statusPage"
+                        name="entryPage"
                         value="dashboard"
                         required
                     />
-                    <label class="form-check-label" for="entryPageYes">
+                    <label class="form-check-label" for="entryPageDashboard">
                         {{ $t("Dashboard") }}
                     </label>
                 </div>
 
-                <div class="form-check">
+                <div v-for="statusPage in $root.statusPageList" :key="statusPage.id" class="form-check">
                     <input
-                        id="entryPageNo"
+                        :id="'status-page-' + statusPage.id"
                         v-model="settings.entryPage"
                         class="form-check-input"
                         type="radio"
-                        name="statusPage"
-                        value="statusPage"
+                        name="entryPage"
+                        :value="'statusPage-' + statusPage.slug"
                         required
                     />
-                    <label class="form-check-label" for="entryPageNo">
-                        {{ $t("Status Page") }}
+                    <label class="form-check-label" :for="'status-page-' + statusPage.id">
+                        {{ $t("Status Page") }} - {{ statusPage.title }}
                     </label>
                 </div>
             </div>

src/components/settings/Proxies.vue

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

src/components/settings/ReverseProxy.vue

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

src/components/settings/Security.vue

@@ -126,6 +126,12 @@
                 <p>Bitte mit Vorsicht nutzen.</p>
             </template>
 
+            <template v-else-if="$i18n.locale === 'sl-SI' ">
+                <p>Ali ste prepričani, da želite onemogočiti <strong>avtentikacijo</strong>?</p>
+                <p>Namenjen je <strong>nekomu, ki ima pred programom Uptime Kuma vklopljeno zunanje preverjanje pristnosti</strong>, na primer Cloudflare Access.</p>
+                <p>Uporabljajte previdno.</p>
+            </template>
+
             <template v-else-if="$i18n.locale === 'sr' ">
                 <p>Да ли сте сигурни да желите да <strong>искључите аутентификацију</strong>?</p>
                 <p>То је за <strong>оне који имају додату аутентификацију</strong> испред Uptime Kuma као на пример Cloudflare Access.</p>
@@ -169,9 +175,9 @@
             </template>
 
             <template v-else-if="$i18n.locale === 'it-IT' ">
-                <p>Si è certi di voler <strong>disabilitare l'autenticazione</strong>?</p>
-                <p>È per <strong>chi ha l'autenticazione gestita da terze parti</strong> messa davanti ad Uptime Kuma, ad esempio Cloudflare Access.</p>
-                <p>Utilizzare con attenzione.</p>
+                <p><strong>Disabilitare l'autenticazione?</strong></p>
+                <p><strong>Questa opzione è per chi un sistema di autenticazione gestito da terze parti</strong> messo davanti ad Uptime Kuma, ad esempio Cloudflare Access.</p>
+                <p>Utilizzare con attenzione!</p>
             </template>
 
             <template v-else-if="$i18n.locale === 'id-ID' ">
@@ -186,6 +192,12 @@
                 <p>Пожалуйста, используйте с осторожностью.</p>
             </template>
 
+            <template v-else-if="$i18n.locale === 'uk-UA' ">
+                <p>Ви впевнені, що бажаєте <strong>вимкнути авторизацію</strong>?</p>
+                <p>Це підходить для <strong>тих, у кого встановлена інша авторизація</strong> пееред відкриттям Uptime Kuma, наприклад Cloudflare Access.</p>
+                <p>Будь ласка, використовуйте з обережністю.</p>
+            </template>
+
             <template v-else-if="$i18n.locale === 'fa' ">
                 <p>آیا مطمئن هستید که میخواهید <strong>احراز هویت را غیر فعال کنید</strong>?</p>
                 <p>این ویژگی برای کسانی است که <strong> لایه امنیتی شخص ثالث دیگر بر روی این آدرس فعال کرده‌اند</strong>، مانند Cloudflare Access.</p>
@@ -210,12 +222,37 @@
                 <p>Vennligst vær forsiktig.</p>
             </template>
 
+            <template v-else-if="$i18n.locale === 'cs-CZ' ">
+                <p>Opravdu chcete <strong>deaktivovat autentifikaci</strong>?</p>
+                <p>Tato možnost je určena pro případy, kdy <strong>máte autentifikaci zajištěnou třetí stranou</strong> ještě před přístupem do Uptime Kuma, například prostřednictvím Cloudflare Access.</p>
+                <p>Používejte ji prosím s rozmyslem.</p>
+            </template>
+
+            <template v-else-if="$i18n.locale === 'vi-VN' ">
+                <p>Bạn có muốn <strong>TẮT XÁC THỰC</strong> không?</p>
+                <p>Điều này rất nguy hiểm<strong>BẤT KỲ AI</strong> cũng có thể truy cập và cướp quyền điều khiển.</p>
+                <p>Vui lòng <strong>cẩn thận</strong>.</p>
+            </template>
+
             <!-- English (en) -->
             <template v-else>
-                <p>Are you sure want to <strong>disable auth</strong>?</p>
-                <p>It is for <strong>someone who have 3rd-party auth</strong> in front of Uptime Kuma such as Cloudflare Access.</p>
-                <p>Please use it carefully.</p>
+                <p>Are you sure want to <strong>disable authentication</strong>?</p>
+                <p>It is designed for scenarios <strong>where you intend to implement third-party authentication</strong> in front of Uptime Kuma such as Cloudflare Access, Authelia or other authentication mechanisms.</p>
+                <p>Please use this option carefully!</p>
             </template>
+
+            <div class="mb-3">
+                <label for="current-password2" class="form-label">
+                    {{ $t("Current Password") }}
+                </label>
+                <input
+                    id="current-password2"
+                    v-model="password.currentPassword"
+                    type="password"
+                    class="form-control"
+                    required
+                />
+            </div>
         </Confirm>
     </div>
 </template>
@@ -292,7 +329,12 @@ export default {
 
         disableAuth() {
             this.settings.disableAuth = true;
-            this.saveSettings();
+
+            // Need current password to disable auth
+            // Set it to empty if done
+            this.saveSettings(() => {
+                this.password.currentPassword = "";
+            }, this.password.currentPassword);
         },
 
         enableAuth() {