Merge branch 'master' into status-page-domain

src/pages/EditMonitor.vue

@@ -139,6 +139,15 @@
 
                             <h2 v-if="monitor.type !== 'push'" class="mt-5 mb-2">{{ $t("Advanced") }}</h2>
 
+                            <div 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") }}
+                                </label>
+                                <div class="form-text">
+                                </div>
+                            </div>
+
                             <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check">
                                 <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
                                 <label class="form-check-label" for="ignore-tls">
@@ -222,6 +231,32 @@
                                 {{ $t("Setup Notification") }}
                             </button>
 
+                            <!-- Proxies -->
+                            <h2 class="mt-5 mb-2">{{ $t("Proxies") }}</h2>
+                            <p v-if="$root.proxyList.length === 0">
+                                {{ $t("Not available, please setup.") }}
+                            </p>
+
+                            <div v-if="$root.proxyList.length > 0" class="form-check form-switch my-3">
+                                <input id="proxy-disable" v-model="monitor.proxyId" :value="null" name="proxy" class="form-check-input" type="radio">
+                                <label class="form-check-label" for="proxy-disable">{{ $t("No Proxy") }}</label>
+                            </div>
+
+                            <div v-for="proxy in $root.proxyList" :key="proxy.id" class="form-check form-switch my-3">
+                                <input :id="`proxy-${proxy.id}`" v-model="monitor.proxyId" :value="proxy.id" name="proxy" class="form-check-input" type="radio">
+
+                                <label class="form-check-label" :for="`proxy-${proxy.id}`">
+                                    {{ proxy.host }}:{{ proxy.port }} ({{ proxy.protocol }})
+                                    <a href="#" @click="$refs.proxyDialog.show(proxy.id)">{{ $t("Edit") }}</a>
+                                </label>
+
+                                <span v-if="proxy.default === true" class="badge bg-primary ms-2">{{ $t("default") }}</span>
+                            </div>
+
+                            <button class="btn btn-primary me-2" type="button" @click="$refs.proxyDialog.show()">
+                                {{ $t("Setup Proxy") }}
+                            </button>
+
                             <!-- HTTP Options -->
                             <template v-if="monitor.type === 'http' || monitor.type === 'keyword' ">
                                 <h2 class="mt-5 mb-2">{{ $t("HTTP Options") }}</h2>
@@ -285,12 +320,14 @@
             </form>
 
             <NotificationDialog ref="notificationDialog" @added="addedNotification" />
+            <ProxyDialog ref="proxyDialog" @added="addedProxy" />
         </div>
     </transition>
 </template>
 
 <script>
 import NotificationDialog from "../components/NotificationDialog.vue";
+import ProxyDialog from "../components/ProxyDialog.vue";
 import TagsManager from "../components/TagsManager.vue";
 import CopyableInput from "../components/CopyableInput.vue";
 
@@ -302,6 +339,7 @@ const toast = useToast();
 
 export default {
     components: {
+        ProxyDialog,
         CopyableInput,
         NotificationDialog,
         TagsManager,
@@ -368,6 +406,17 @@ export default {
 
     },
     watch: {
+        "$root.proxyList"() {
+            if (this.isAdd) {
+                if (this.$root.proxyList && !this.monitor.proxyId) {
+                    const proxy = this.$root.proxyList.find(proxy => proxy.default);
+
+                    if (proxy) {
+                        this.monitor.proxyId = proxy.id;
+                    }
+                }
+            }
+        },
 
         "$route.fullPath"() {
             this.init();
@@ -435,12 +484,22 @@ export default {
                     notificationIDList: {},
                     ignoreTls: false,
                     upsideDown: false,
+                    expiryNotification: false,
                     maxredirects: 10,
                     accepted_statuscodes: ["200-299"],
                     dns_resolve_type: "A",
                     dns_resolve_server: "1.1.1.1",
+                    proxyId: null,
                 };
 
+                if (this.$root.proxyList && !this.monitor.proxyId) {
+                    const proxy = this.$root.proxyList.find(proxy => proxy.default);
+
+                    if (proxy) {
+                        this.monitor.proxyId = proxy.id;
+                    }
+                }
+
                 for (let i = 0; i < this.$root.notificationList.length; i++) {
                     if (this.$root.notificationList[i].isDefault == true) {
                         this.monitor.notificationIDList[this.$root.notificationList[i].id] = true;
@@ -532,6 +591,12 @@ export default {
         addedNotification(id) {
             this.monitor.notificationIDList[id] = true;
         },
+
+        // Added a Proxy Event
+        // Enable it if the proxy is added in EditMonitor.vue
+        addedProxy(id) {
+            this.monitor.proxyId = id;
+        },
     },
 };
 </script>

src/pages/NotFound.vue

@@ -0,0 +1,99 @@
+<template>
+    <div>
+        <!-- Desktop header -->
+        <header v-if="! $root.isMobile" class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom">
+            <router-link to="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+                <object class="bi me-2 ms-4" width="40" height="40" data="/icon.svg" />
+                <span class="fs-4 title">Uptime Kuma</span>
+            </router-link>
+        </header>
+
+        <!-- Mobile header -->
+        <header v-else class="d-flex flex-wrap justify-content-center pt-2 pb-2 mb-3">
+            <router-link to="/dashboard" class="d-flex align-items-center text-dark text-decoration-none">
+                <object class="bi" width="40" height="40" data="/icon.svg" />
+                <span class="fs-4 title ms-2">Uptime Kuma</span>
+            </router-link>
+        </header>
+
+        <div class="content">
+            <div>
+                <strong>🐻 {{ $t("Page Not Found") }}</strong>
+            </div>
+
+            <div class="guide">
+                Most likely causes:
+                <ul>
+                    <li>The resource is no longer available.</li>
+                    <li>There might be a typing error in the address.</li>
+                </ul>
+
+                What you can try:<br />
+                <ul>
+                    <li>Retype the address.</li>
+                    <li><a href="#" class="go-back" @click="goBack()">Go back to the previous page.</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    async mounted() {
+
+    },
+    methods: {
+        goBack() {
+            history.back();
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+@import "../assets/vars.scss";
+
+.go-back {
+    text-decoration: none;
+    color: $primary !important;
+}
+
+.content {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 50px;
+    padding-top: 30px;
+
+    strong {
+        font-size: 24px;
+    }
+}
+
+.guide {
+    max-width: 800px;
+    font-size: 14px;
+}
+
+.title {
+    font-weight: bold;
+}
+
+.dark {
+    header {
+        background-color: $dark-header-bg;
+        border-bottom-color: $dark-header-bg !important;
+
+        span {
+            color: #f0f6fc;
+        }
+    }
+
+    .bottom-nav {
+        background-color: $dark-bg;
+    }
+}
+</style>

src/pages/Settings.vue

@@ -75,12 +75,18 @@ export default {
                 notifications: {
                     title: this.$t("Notifications"),
                 },
+                "reverse-proxy": {
+                    title: this.$t("Reverse Proxy"),
+                },
                 "monitor-history": {
                     title: this.$t("Monitor History"),
                 },
                 security: {
                     title: this.$t("Security"),
                 },
+                proxies: {
+                    title: this.$t("Proxies"),
+                },
                 backup: {
                     title: this.$t("Backup"),
                 },
@@ -115,6 +121,10 @@ export default {
             this.$root.getSocket().emit("getSettings", (res) => {
                 this.settings = res.data;
 
+                if (this.settings.checkUpdate === undefined) {
+                    this.settings.checkUpdate = true;
+                }
+
                 if (this.settings.searchEngineIndex === undefined) {
                     this.settings.searchEngineIndex = false;
                 }
@@ -131,10 +141,18 @@ export default {
             });
         },
 
-        saveSettings() {
-            this.$root.getSocket().emit("setSettings", this.settings, (res) => {
+        /**
+         * Save Settings
+         * @param currentPassword (Optional) Only need for disableAuth to true
+         */
+        saveSettings(callback, currentPassword) {
+            this.$root.getSocket().emit("setSettings", this.settings, currentPassword, (res) => {
                 this.$root.toastRes(res);
                 this.loadSettings();
+
+                if (callback) {
+                    callback();
+                }
             });
         },
     }

src/pages/StatusPage.vue

@@ -67,7 +67,7 @@
             <h1 class="mb-4 title-flex">
                 <!-- Logo -->
                 <span class="logo-wrapper" @click="showImageCropUploadMethod">
-                    <img :src="logoURL" alt class="logo me-2" :class="logoClass" />
+                    <img :src="logoURL" alt class="logo me-2" :class="logoClass" @load="statusPageLogoLoaded" />
                     <font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
                 </span>
 
@@ -592,6 +592,11 @@ export default {
             }
         },
 
+        statusPageLogoLoaded(eventPayload) {
+            // Remark: may not work in dev, due to cros
+            favicon.image(eventPayload.target);
+        },
+
         createIncident() {
             this.enableEditIncidentMode = true;