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

src/pages/AddStatusPage.vue

@@ -0,0 +1,81 @@
+<template>
+    <transition name="slide-fade" appear>
+        <div>
+            <h1 class="mb-3">
+                {{ $t("Add New Status Page") }}
+            </h1>
+
+            <form @submit.prevent="submit">
+                <div class="shadow-box">
+                    <div class="mb-3">
+                        <label for="name" class="form-label">{{ $t("Name") }}</label>
+                        <input id="name" v-model="title" type="text" class="form-control" required>
+                    </div>
+
+                    <div class="mb-4">
+                        <label for="slug" class="form-label">{{ $t("Slug") }}</label>
+                        <div class="input-group">
+                            <span id="basic-addon3" class="input-group-text">/status/</span>
+                            <input id="slug" v-model="slug" type="text" class="form-control" required>
+                        </div>
+                        <div class="form-text">
+                            <ul>
+                                <li>{{ $t("Accept characters:") }} <mark>a-z</mark> <mark>0-9</mark> <mark>-</mark></li>
+                                <i18n-t tag="li" keypath="startOrEndWithOnly">
+                                    <mark>a-z</mark> <mark>0-9</mark>
+                                </i18n-t>
+                                <li>{{ $t("No consecutive dashes") }} <mark>--</mark></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="mt-2 mb-1">
+                        <button id="monitor-submit-btn" class="btn btn-primary w-100" type="submit" :disabled="processing">{{ $t("Next") }}</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </transition>
+</template>
+
+<script>
+export default {
+    components: {
+
+    },
+    data() {
+        return {
+            title: "",
+            slug: "",
+            processing: false,
+        };
+    },
+    methods: {
+        async submit() {
+            this.processing = true;
+
+            this.$root.getSocket().emit("addStatusPage", this.title, this.slug, (res) => {
+                this.processing = false;
+
+                if (res.ok) {
+                    location.href = "/status/" + this.slug + "?edit";
+                } else {
+
+                    if (res.msg.includes("UNIQUE constraint")) {
+                        this.$root.toastError(this.$t("The slug is already taken. Please choose another slug."));
+                    } else {
+                        this.$root.toastRes(res);
+                    }
+
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.shadow-box {
+    padding: 20px;
+}
+</style>

src/pages/Dashboard.vue

@@ -25,9 +25,9 @@ export default {
         MonitorList,
     },
     data() {
-        return {}
+        return {};
     },
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/pages/DashboardHome.vue

@@ -9,19 +9,19 @@
                 <div class="row">
                     <div class="col">
                         <h3>{{ $t("Up") }}</h3>
-                        <span class="num">{{ stats.up }}</span>
+                        <span class="num">{{ $root.stats.up }}</span>
                     </div>
                     <div class="col">
                         <h3>{{ $t("Down") }}</h3>
-                        <span class="num text-danger">{{ stats.down }}</span>
+                        <span class="num text-danger">{{ $root.stats.down }}</span>
                     </div>
                     <div class="col">
                         <h3>{{ $t("Unknown") }}</h3>
-                        <span class="num text-secondary">{{ stats.unknown }}</span>
+                        <span class="num text-secondary">{{ $root.stats.unknown }}</span>
                     </div>
                     <div class="col">
                         <h3>{{ $t("pauseDashboardHome") }}</h3>
-                        <span class="num text-secondary">{{ stats.pause }}</span>
+                        <span class="num text-secondary">{{ $root.stats.pause }}</span>
                     </div>
                 </div>
             </div>
@@ -89,37 +89,6 @@ export default {
         };
     },
     computed: {
-        stats() {
-            let result = {
-                up: 0,
-                down: 0,
-                unknown: 0,
-                pause: 0,
-            };
-
-            for (let monitorID in this.$root.monitorList) {
-                let beat = this.$root.lastHeartbeatList[monitorID];
-                let monitor = this.$root.monitorList[monitorID];
-
-                if (monitor && ! monitor.active) {
-                    result.pause++;
-                } else if (beat) {
-                    if (beat.status === 1) {
-                        result.up++;
-                    } else if (beat.status === 0) {
-                        result.down++;
-                    } else if (beat.status === 2) {
-                        result.up++;
-                    } else {
-                        result.unknown++;
-                    }
-                } else {
-                    result.unknown++;
-                }
-            }
-
-            return result;
-        },
 
         importantHeartBeatList() {
             let result = [];
@@ -149,6 +118,7 @@ export default {
                 return 0;
             });
 
+            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
             this.heartBeatList = result;
 
             return result;

src/pages/EditMonitor.vue

@@ -87,7 +87,7 @@
                                     <label for="dns_resolve_server" class="form-label">{{ $t("Resolver Server") }}</label>
                                     <input id="dns_resolve_server" v-model="monitor.dns_resolve_server" type="text" class="form-control" :pattern="ipRegex" required>
                                     <div class="form-text">
-                                        {{ $t("resoverserverDescription") }}
+                                        {{ $t("resolverserverDescription") }}
                                     </div>
                                 </div>
 
@@ -148,6 +148,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">
@@ -231,6 +240,34 @@
                                 {{ $t("Setup Notification") }}
                             </button>
 
+                            <!-- Proxies -->
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword'">
+                                <h2 class="mt-5 mb-2">{{ $t("Proxy") }}</h2>
+                                <p v-if="$root.proxyList.length === 0">
+                                    {{ $t("Not available, please setup.") }}
+                                </p>
+
+                                <div v-if="$root.proxyList.length > 0" class="form-check 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 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>
+                            </div>
+
                             <!-- HTTP Options -->
                             <template v-if="monitor.type === 'http' || monitor.type === 'keyword' ">
                                 <h2 class="mt-5 mb-2">{{ $t("HTTP Options") }}</h2>
@@ -294,12 +331,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";
 
@@ -311,6 +350,7 @@ const toast = useToast();
 
 export default {
     components: {
+        ProxyDialog,
         CopyableInput,
         NotificationDialog,
         TagsManager,
@@ -377,6 +417,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();
@@ -453,12 +504,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;
@@ -550,6 +611,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/Entry.vue

@@ -1,19 +1,45 @@
 <template>
-    <div></div>
+    <div>
+        <StatusPage v-if="statusPageSlug" :override-slug="statusPageSlug" />
+    </div>
 </template>
 
 <script>
 import axios from "axios";
+import StatusPage from "./StatusPage.vue";
 
 export default {
+    components: {
+        StatusPage,
+    },
+    data() {
+        return {
+            statusPageSlug: null,
+        };
+    },
     async mounted() {
-        let entryPage = (await axios.get("/api/entry-page")).data;
 
-        if (entryPage === "statusPage") {
-            this.$router.push("/status");
+        // There are only 2 cases that could come in here.
+        // 1. Matched status Page domain name
+        // 2. Vue Frontend Dev
+        let res = (await axios.get("/api/entry-page")).data;
+
+        if (res.type === "statusPageMatchedDomain") {
+            this.statusPageSlug = res.statusPageSlug;
+            this.$root.forceStatusPageTheme = true;
+
+        } else if (res.type === "entryPage") {          // Dev only. For production, the logic is in the server side
+            const entryPage = res.entryPage;
+
+            if (entryPage === "statusPage") {
+                this.$router.push("/status");
+            } else {
+                this.$router.push("/dashboard");
+            }
         } else {
             this.$router.push("/dashboard");
         }
+
     },
 
 };

src/pages/List.vue

@@ -11,6 +11,6 @@ export default {
     components: {
         MonitorList,
     },
-}
+};
 </script>
 

src/pages/ManageStatusPage.vue

@@ -0,0 +1,117 @@
+<template>
+    <transition name="slide-fade" appear>
+        <div>
+            <h1 class="mb-3">
+                {{ $t("Status Pages") }}
+            </h1>
+
+            <div>
+                <router-link to="/add-status-page" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("New Status Page") }}</router-link>
+            </div>
+
+            <div class="shadow-box">
+                <template v-if="$root.statusPageListLoaded">
+                    <span v-if="Object.keys($root.statusPageList).length === 0" class="d-flex align-items-center justify-content-center my-3">
+                        {{ $t("No status pages") }}
+                    </span>
+
+                    <!-- use <a> instead of <router-link>, because the heartbeat won't load. -->
+                    <a v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :href="'/status/' + statusPage.slug" class="item">
+                        <img :src="icon(statusPage.icon)" alt class="logo me-2" />
+                        <div class="info">
+                            <div class="title">{{ statusPage.title }}</div>
+                            <div class="slug">/status/{{ statusPage.slug }}</div>
+                        </div>
+                    </a>
+                </template>
+                <div v-else class="d-flex align-items-center justify-content-center my-3 spinner">
+                    <font-awesome-icon icon="spinner" size="2x" spin />
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+
+import { getResBaseURL } from "../util-frontend";
+
+export default {
+    components: {
+
+    },
+    data() {
+        return {
+        };
+    },
+    computed: {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+        icon(icon) {
+            if (icon === "/icon.svg") {
+                return icon;
+            } else {
+                return getResBaseURL() + icon;
+            }
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+    @import "../assets/vars.scss";
+
+    .item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        text-decoration: none;
+        border-radius: 10px;
+        transition: all ease-in-out 0.15s;
+        padding: 10px;
+
+        &:hover {
+            background-color: $highlight-white;
+        }
+
+        &.active {
+            background-color: #cdf8f4;
+        }
+
+        $logo-width: 70px;
+
+        .logo {
+            width: $logo-width;
+
+            // Better when the image is loading
+            min-height: 1px;
+        }
+
+        .info {
+            .title {
+                font-weight: bold;
+                font-size: 20px;
+            }
+
+            .slug {
+                font-size: 14px;
+            }
+        }
+    }
+
+    .dark {
+        .item {
+            &:hover {
+                background-color: $dark-bg2;
+            }
+
+            &.active {
+                background-color: $dark-bg2;
+            }
+        }
+    }
+</style>

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

@@ -6,7 +6,7 @@
 
         <div class="shadow-box">
             <div class="row">
-                <div class="settings-menu">
+                <div v-if="showSubMenu" class="settings-menu col-lg-3 col-md-5">
                     <router-link
                         v-for="(item, key) in subMenus"
                         :key="key"
@@ -17,8 +17,8 @@
                         </div>
                     </router-link>
                 </div>
-                <div class="settings-content">
-                    <div class="settings-content-header">
+                <div class="settings-content col-lg-9 col-md-7">
+                    <div v-if="currentPage" class="settings-content-header">
                         {{ subMenus[currentPage].title }}
                     </div>
                     <div class="mx-3">
@@ -41,7 +41,6 @@ export default {
     data() {
         return {
             show: true,
-
             settings: {},
             settingsLoaded: false,
         };
@@ -52,11 +51,19 @@ export default {
             let pathSplit = useRoute().path.split("/");
             let pathEnd = pathSplit[pathSplit.length - 1];
             if (!pathEnd || pathEnd === "settings") {
-                return "general";
+                return null;
             }
             return pathEnd;
         },
 
+        showSubMenu() {
+            if (this.$root.isMobile) {
+                return !this.currentPage;
+            } else {
+                return true;
+            }
+        },
+
         subMenus() {
             return {
                 general: {
@@ -68,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"),
                 },
@@ -84,15 +97,34 @@ export default {
         },
     },
 
+    watch: {
+        "$root.isMobile"() {
+            this.loadGeneralPage();
+        }
+    },
+
     mounted() {
         this.loadSettings();
+        this.loadGeneralPage();
     },
 
     methods: {
+
+        // For desktop only, mobile do nothing
+        loadGeneralPage() {
+            if (!this.currentPage && !this.$root.isMobile) {
+                this.$router.push("/settings/general");
+            }
+        },
+
         loadSettings() {
             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;
                 }
@@ -109,13 +141,21 @@ 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();
+                }
             });
         },
-    },
+    }
 };
 </script>
 
@@ -136,9 +176,6 @@ footer {
 }
 
 .settings-menu {
-    flex: 0 0 auto;
-    width: 300px;
-
     a {
         text-decoration: none !important;
     }
@@ -148,6 +185,8 @@ footer {
         margin: 0.5em;
         padding: 0.7em 1em;
         cursor: pointer;
+        border-left-width: 0;
+        transition: all ease-in-out 0.1s;
     }
 
     .menu-item:hover {
@@ -171,9 +210,6 @@ footer {
 }
 
 .settings-content {
-    flex: 0 0 auto;
-    width: calc(100% - 300px);
-
     .settings-content-header {
         width: calc(100% + 20px);
         border-bottom: 1px solid #dee2e6;
@@ -187,6 +223,14 @@ footer {
             background: $dark-header-bg;
             border-bottom: 0;
         }
+
+        .mobile & {
+            padding: 15px 0 0 0;
+
+            .dark & {
+                background-color: transparent;
+            }
+        }
     }
 }
 </style>

src/pages/StatusPage.vue

@@ -1,215 +1,251 @@
 <template>
     <div v-if="loadedTheme" class="container mt-3">
-        <!-- Logo & Title -->
-        <h1 class="mb-4">
-            <!-- Logo -->
-            <span class="logo-wrapper" @click="showImageCropUploadMethod">
-                <img :src="logoURL" alt class="logo me-2" :class="logoClass" />
-                <font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
-            </span>
+        <!-- Sidebar for edit mode -->
+        <div v-if="enableEditMode" class="sidebar">
+            <div class="sidebar-body">
+                <div class="my-3">
+                    <label for="slug" class="form-label">{{ $t("Slug") }}</label>
+                    <div class="input-group">
+                        <span id="basic-addon3" class="input-group-text">/status/</span>
+                        <input id="slug" v-model="config.slug" type="text" class="form-control">
+                    </div>
+                </div>
 
-            <!-- Uploader -->
-            <!--    url="/api/status-page/upload-logo" -->
-            <ImageCropUpload v-model="showImageCropUpload"
-                             field="img"
-                             :width="128"
-                             :height="128"
-                             :langType="$i18n.locale"
-                             img-format="png"
-                             :noCircle="true"
-                             :noSquare="false"
-                             @crop-success="cropSuccess"
-            />
+                <div class="my-3">
+                    <label for="title" class="form-label">{{ $t("Title") }}</label>
+                    <input id="title" v-model="config.title" type="text" class="form-control">
+                </div>
 
-            <!-- Title -->
-            <Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
-        </h1>
+                <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>
 
-        <!-- Admin functions -->
-        <div v-if="hasToken" class="mb-4">
-            <div v-if="!enableEditMode">
-                <button class="btn btn-info me-2" @click="edit">
-                    <font-awesome-icon icon="edit" />
-                    {{ $t("Edit Status Page") }}
-                </button>
+                <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>
+                </div>
 
-                <a href="/dashboard" class="btn btn-info">
-                    <font-awesome-icon icon="tachometer-alt" />
-                    {{ $t("Go to Dashboard") }}
-                </a>
+                <div class="my-3 form-check form-switch">
+                    <input id="showTags" v-model="config.showTags" class="form-check-input" type="checkbox">
+                    <label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</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">
+                </div>
+
+                <!-- Domain Name List -->
+                <div class="my-3">
+                    <label class="form-label">
+                        Domain Names
+                        <font-awesome-icon icon="plus-circle" class="btn-add-domain action text-primary" @click="addDomainField" />
+                    </label>
+
+                    <ul class="list-group domain-name-list">
+                        <li v-for="(domain, index) in config.domainNameList" :key="index" class="list-group-item">
+                            <input v-model="config.domainNameList[index]" type="text" class="no-bg domain-input" placeholder="example.com" />
+                            <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" @click="removeDomain(index)" />
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="danger-zone">
+                    <button class="btn btn-danger me-2" @click="deleteDialog">
+                        <font-awesome-icon icon="trash" />
+                        {{ $t("Delete") }}
+                    </button>
+                </div>
             </div>
 
-            <div v-else>
+            <!-- Sidebar Footer -->
+            <div class="sidebar-footer">
                 <button class="btn btn-success me-2" @click="save">
                     <font-awesome-icon icon="save" />
                     {{ $t("Save") }}
                 </button>
 
                 <button class="btn btn-danger me-2" @click="discard">
-                    <font-awesome-icon icon="save" />
+                    <font-awesome-icon icon="undo" />
                     {{ $t("Discard") }}
                 </button>
-
-                <button class="btn btn-primary btn-add-group me-2" @click="createIncident">
-                    <font-awesome-icon icon="bullhorn" />
-                    {{ $t("Create Incident") }}
-                </button>
-
-                <!--
-                <button v-if="isPublished" class="btn btn-light me-2" @click="">
-                    <font-awesome-icon icon="save" />
-                    {{ $t("Unpublish") }}
-                </button>
-
-                <button v-if="!isPublished" class="btn btn-info me-2" @click="">
-                    <font-awesome-icon icon="save" />
-                    {{ $t("Publish") }}
-                </button>-->
-
-                <!-- Set Default Language -->
-                <!-- Set theme -->
-                <button v-if="theme == 'dark'" class="btn btn-light me-2" @click="changeTheme('light')">
-                    <font-awesome-icon icon="save" />
-                    {{ $t("Switch to Light Theme") }}
-                </button>
-
-                <button v-if="theme == 'light'" class="btn btn-dark me-2" @click="changeTheme('dark')">
-                    <font-awesome-icon icon="save" />
-                    {{ $t("Switch to Dark Theme") }}
-                </button>
-
-                <button class="btn btn-secondary me-2" @click="changeTagsVisibilty(!tagsVisible)">
-                    <template v-if="tagsVisible">
-                        <font-awesome-icon icon="eye-slash" />
-                        {{ $t("Hide Tags") }}
-                    </template>
-                    <template v-else>
-                        <font-awesome-icon icon="eye" />
-                        {{ $t("Show Tags") }}
-                    </template>
-                </button>
             </div>
         </div>
 
-        <!-- Incident -->
-        <div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
-            <strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
-            <Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" />
-
-            <strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
-            <Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />
-
-            <!-- Incident Date -->
-            <div class="date mt-3">
-                {{ $t("Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
-                <span v-if="incident.lastUpdatedDate">
-                    {{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
+        <!-- Main Status Page -->
+        <div :class="{ edit: enableEditMode}" class="main">
+            <!-- Logo & Title -->
+            <h1 class="mb-4 title-flex">
+                <!-- Logo -->
+                <span class="logo-wrapper" @click="showImageCropUploadMethod">
+                    <img :src="logoURL" alt class="logo me-2" :class="logoClass" @load="statusPageLogoLoaded" />
+                    <font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
                 </span>
-            </div>
 
-            <div v-if="editMode" class="mt-3">
-                <button v-if="editIncidentMode" class="btn btn-light me-2" @click="postIncident">
-                    <font-awesome-icon icon="bullhorn" />
-                    {{ $t("Post") }}
-                </button>
+                <!-- Uploader -->
+                <!--    url="/api/status-page/upload-logo" -->
+                <ImageCropUpload v-model="showImageCropUpload"
+                                 field="img"
+                                 :width="128"
+                                 :height="128"
+                                 :langType="$i18n.locale"
+                                 img-format="png"
+                                 :noCircle="true"
+                                 :noSquare="false"
+                                 @crop-success="cropSuccess"
+                />
 
-                <button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="editIncident">
-                    <font-awesome-icon icon="edit" />
-                    {{ $t("Edit") }}
-                </button>
+                <!-- Title -->
+                <Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
+            </h1>
 
-                <button v-if="editIncidentMode" class="btn btn-light me-2" @click="cancelIncident">
-                    <font-awesome-icon icon="times" />
-                    {{ $t("Cancel") }}
-                </button>
-
-                <div v-if="editIncidentMode" class="dropdown d-inline-block me-2">
-                    <button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                        {{ $t("Style") }}: {{ $t(incident.style) }}
+            <!-- Admin functions -->
+            <div v-if="hasToken" class="mb-4">
+                <div v-if="!enableEditMode">
+                    <button class="btn btn-info me-2" @click="edit">
+                        <font-awesome-icon icon="edit" />
+                        {{ $t("Edit Status Page") }}
                     </button>
-                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-                        <li><a class="dropdown-item" href="#" @click="incident.style = 'info'">{{ $t("info") }}</a></li>
-                        <li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">{{ $t("warning") }}</a></li>
-                        <li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">{{ $t("danger") }}</a></li>
-                        <li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">{{ $t("primary") }}</a></li>
-                        <li><a class="dropdown-item" href="#" @click="incident.style = 'light'">{{ $t("light") }}</a></li>
-                        <li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">{{ $t("dark") }}</a></li>
-                    </ul>
-                </div>
 
-                <button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="unpinIncident">
-                    <font-awesome-icon icon="unlink" />
-                    {{ $t("Unpin") }}
-                </button>
-            </div>
-        </div>
-
-        <!-- Overall Status -->
-        <div class="shadow-box list  p-4 overall-status mb-4">
-            <div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData">
-                <font-awesome-icon icon="question-circle" class="ok" />
-                {{ $t("No Services") }}
-            </div>
-
-            <template v-else>
-                <div v-if="allUp">
-                    <font-awesome-icon icon="check-circle" class="ok" />
-                    {{ $t("All Systems Operational") }}
-                </div>
-
-                <div v-else-if="partialDown">
-                    <font-awesome-icon icon="exclamation-circle" class="warning" />
-                    {{ $t("Partially Degraded Service") }}
-                </div>
-
-                <div v-else-if="allDown">
-                    <font-awesome-icon icon="times-circle" class="danger" />
-                    {{ $t("Degraded Service") }}
+                    <a href="/manage-status-page" class="btn btn-info">
+                        <font-awesome-icon icon="tachometer-alt" />
+                        {{ $t("Go to Dashboard") }}
+                    </a>
                 </div>
 
                 <div v-else>
-                    <font-awesome-icon icon="question-circle" style="color: #efefef;" />
-                </div>
-            </template>
-        </div>
-
-        <!-- Description -->
-        <strong v-if="editMode">{{ $t("Description") }}:</strong>
-        <Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mb-4 description" />
-
-        <div v-if="editMode" class="mb-4">
-            <div>
-                <button class="btn btn-primary btn-add-group me-2" @click="addGroup">
-                    <font-awesome-icon icon="plus" />
-                    {{ $t("Add Group") }}
-                </button>
-            </div>
-
-            <div class="mt-3">
-                <div v-if="allMonitorList.length > 0 && loadedData">
-                    <label>{{ $t("Add a monitor") }}:</label>
-                    <select v-model="selectedMonitor" class="form-control">
-                        <option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
-                    </select>
-                </div>
-                <div v-else class="text-center">
-                    {{ $t("No monitors available.") }}  <router-link to="/add">{{ $t("Add one") }}</router-link>
+                    <button class="btn btn-primary btn-add-group me-2" @click="createIncident">
+                        <font-awesome-icon icon="bullhorn" />
+                        {{ $t("Create Incident") }}
+                    </button>
                 </div>
             </div>
-        </div>
 
-        <div class="mb-4">
-            <div v-if="$root.publicGroupList.length === 0 && loadedData" class="text-center">
-                <!-- 👀 Nothing here, please add a group or a monitor. -->
-                👀 {{ $t("statusPageNothing") }}
+            <!-- Incident -->
+            <div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
+                <strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
+                <Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" />
+
+                <strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
+                <Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />
+
+                <!-- Incident Date -->
+                <div class="date mt-3">
+                    {{ $t("Date Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
+                    <span v-if="incident.lastUpdatedDate">
+                        {{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
+                    </span>
+                </div>
+
+                <div v-if="editMode" class="mt-3">
+                    <button v-if="editIncidentMode" class="btn btn-light me-2" @click="postIncident">
+                        <font-awesome-icon icon="bullhorn" />
+                        {{ $t("Post") }}
+                    </button>
+
+                    <button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="editIncident">
+                        <font-awesome-icon icon="edit" />
+                        {{ $t("Edit") }}
+                    </button>
+
+                    <button v-if="editIncidentMode" class="btn btn-light me-2" @click="cancelIncident">
+                        <font-awesome-icon icon="times" />
+                        {{ $t("Cancel") }}
+                    </button>
+
+                    <div v-if="editIncidentMode" class="dropdown d-inline-block me-2">
+                        <button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            {{ $t("Style") }}: {{ $t(incident.style) }}
+                        </button>
+                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                            <li><a class="dropdown-item" href="#" @click="incident.style = 'info'">{{ $t("info") }}</a></li>
+                            <li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">{{ $t("warning") }}</a></li>
+                            <li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">{{ $t("danger") }}</a></li>
+                            <li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">{{ $t("primary") }}</a></li>
+                            <li><a class="dropdown-item" href="#" @click="incident.style = 'light'">{{ $t("light") }}</a></li>
+                            <li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">{{ $t("dark") }}</a></li>
+                        </ul>
+                    </div>
+
+                    <button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="unpinIncident">
+                        <font-awesome-icon icon="unlink" />
+                        {{ $t("Unpin") }}
+                    </button>
+                </div>
             </div>
 
-            <PublicGroupList :edit-mode="enableEditMode" />
+            <!-- Overall Status -->
+            <div class="shadow-box list  p-4 overall-status mb-4">
+                <div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData">
+                    <font-awesome-icon icon="question-circle" class="ok" />
+                    {{ $t("No Services") }}
+                </div>
+
+                <template v-else>
+                    <div v-if="allUp">
+                        <font-awesome-icon icon="check-circle" class="ok" />
+                        {{ $t("All Systems Operational") }}
+                    </div>
+
+                    <div v-else-if="partialDown">
+                        <font-awesome-icon icon="exclamation-circle" class="warning" />
+                        {{ $t("Partially Degraded Service") }}
+                    </div>
+
+                    <div v-else-if="allDown">
+                        <font-awesome-icon icon="times-circle" class="danger" />
+                        {{ $t("Degraded Service") }}
+                    </div>
+
+                    <div v-else>
+                        <font-awesome-icon icon="question-circle" style="color: #efefef;" />
+                    </div>
+                </template>
+            </div>
+
+            <!-- Description -->
+            <strong v-if="editMode">{{ $t("Description") }}:</strong>
+            <Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mb-4 description" />
+
+            <div v-if="editMode" class="mb-4">
+                <div>
+                    <button class="btn btn-primary btn-add-group me-2" @click="addGroup">
+                        <font-awesome-icon icon="plus" />
+                        {{ $t("Add Group") }}
+                    </button>
+                </div>
+
+                <div class="mt-3">
+                    <div v-if="allMonitorList.length > 0 && loadedData">
+                        <label>{{ $t("Add a monitor") }}:</label>
+                        <select v-model="selectedMonitor" class="form-control">
+                            <option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
+                        </select>
+                    </div>
+                    <div v-else class="text-center">
+                        {{ $t("No monitors available.") }}  <router-link to="/add">{{ $t("Add one") }}</router-link>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mb-4">
+                <div v-if="$root.publicGroupList.length === 0 && loadedData" class="text-center">
+                    <!-- 👀 Nothing here, please add a group or a monitor. -->
+                    👀 {{ $t("statusPageNothing") }}
+                </div>
+
+                <PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" />
+            </div>
+
+            <footer class="mt-5 mb-4">
+                {{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
+            </footer>
         </div>
 
-        <footer class="mt-5 mb-4">
-            {{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
-        </footer>
+        <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteStatusPage">
+            {{ $t("deleteStatusPageMsg") }}
+        </Confirm>
     </div>
 </template>
 
@@ -220,16 +256,26 @@ import ImageCropUpload from "vue-image-crop-upload";
 import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_PARTIAL_DOWN, UP } from "../util.ts";
 import { useToast } from "vue-toastification";
 import dayjs from "dayjs";
+import Favico from "favico.js";
+import { getResBaseURL } from "../util-frontend";
+import Confirm from "../components/Confirm.vue";
+
 const toast = useToast();
 
 const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
 
 let feedInterval;
 
+const favicon = new Favico({
+    animation: "none"
+});
+
 export default {
+
     components: {
         PublicGroupList,
-        ImageCropUpload
+        ImageCropUpload,
+        Confirm,
     },
 
     // Leave Page for vue route change
@@ -245,8 +291,17 @@ export default {
         next();
     },
 
+    props: {
+        overrideSlug: {
+            type: String,
+            required: false,
+            default: null,
+        },
+    },
+
     data() {
         return {
+            slug: null,
             enableEditMode: false,
             enableEditIncidentMode: false,
             hasToken: false,
@@ -259,6 +314,7 @@ export default {
             loadedTheme: false,
             loadedData: false,
             baseURL: "",
+            clickedEditButton: false,
         };
     },
     computed: {
@@ -296,15 +352,7 @@ export default {
         },
 
         isPublished() {
-            return this.config.statusPagePublished;
-        },
-
-        theme() {
-            return this.config.statusPageTheme;
-        },
-
-        tagsVisible() {
-            return this.config.statusPageTags
+            return this.config.published;
         },
 
         logoClass() {
@@ -361,6 +409,22 @@ export default {
     },
     watch: {
 
+        /**
+         * If connected to the socket and logged in, request private data of this statusPage
+         * @param connected
+         */
+        "$root.loggedIn"(loggedIn) {
+            if (loggedIn) {
+                this.$root.getSocket().emit("getStatusPage", this.slug, (res) => {
+                    if (res.ok) {
+                        this.config = res.config;
+                    } else {
+                        toast.error(res.msg);
+                    }
+                });
+            }
+        },
+
         /**
          * Selected a monitor and add to the list.
          */
@@ -378,13 +442,28 @@ export default {
         },
 
         // Set Theme
-        "config.statusPageTheme"() {
-            this.$root.statusPageTheme = this.config.statusPageTheme;
+        "config.theme"() {
+            this.$root.statusPageTheme = this.config.theme;
             this.loadedTheme = true;
         },
 
         "config.title"(title) {
             document.title = title;
+        },
+
+        "$root.monitorList"() {
+            let count = Object.keys(this.$root.monitorList).length;
+
+            // Since publicGroupList is getting from public rest api, monitors' tags may not present if showTags = false
+            if (count > 0) {
+                for (let group of this.$root.publicGroupList) {
+                    for (let monitor of group.monitorList) {
+                        if (monitor.tags === undefined && this.$root.monitorList[monitor.id]) {
+                            monitor.tags = this.$root.monitorList[monitor.id].tags;
+                        }
+                    }
+                }
+            }
         }
 
     },
@@ -403,28 +482,28 @@ export default {
         });
 
         // Special handle for dev
-        const env = process.env.NODE_ENV;
-        if (env === "development" || localStorage.dev === "dev") {
-            this.baseURL = location.protocol + "//" + location.hostname + ":3001";
-        }
+        this.baseURL = getResBaseURL();
     },
     async mounted() {
-        axios.get("/api/status-page/config").then((res) => {
-            this.config = res.data;
+        this.slug = this.overrideSlug || this.$route.params.slug;
 
-            if (this.config.logo) {
-                this.imgDataUrl = this.config.logo;
+        if (!this.slug) {
+            this.slug = "default";
+        }
+
+        axios.get("/api/status-page/" + this.slug).then((res) => {
+            this.config = res.data.config;
+
+            if (!this.config.domainNameList) {
+                this.config.domainNameList = [];
             }
-        });
 
-        axios.get("/api/status-page/incident").then((res) => {
-            if (res.data.ok) {
-                this.incident = res.data.incident;
+            if (this.config.icon) {
+                this.imgDataUrl = this.config.icon;
             }
-        });
 
-        axios.get("/api/status-page/monitor-list").then((res) => {
-            this.$root.publicGroupList = res.data;
+            this.incident = res.data.incident;
+            this.$root.publicGroupList = res.data.publicGroupList;
         });
 
         // 5mins a loop
@@ -432,31 +511,87 @@ export default {
         feedInterval = setInterval(() => {
             this.updateHeartbeatList();
         }, (300 + 10) * 1000);
+
+        // Go to edit page if ?edit present
+        // null means ?edit present, but no value
+        if (this.$route.query.edit || this.$route.query.edit === null) {
+            this.edit();
+        }
     },
     methods: {
 
         updateHeartbeatList() {
             // If editMode, it will use the data from websocket.
             if (! this.editMode) {
-                axios.get("/api/status-page/heartbeat").then((res) => {
-                    this.$root.heartbeatList = res.data.heartbeatList;
-                    this.$root.uptimeList = res.data.uptimeList;
+                axios.get("/api/status-page/heartbeat/" + this.slug).then((res) => {
+                    const { heartbeatList, uptimeList } = res.data;
+
+                    this.$root.heartbeatList = heartbeatList;
+                    this.$root.uptimeList = uptimeList;
+
+                    const heartbeatIds = Object.keys(heartbeatList);
+                    const downMonitors = heartbeatIds.reduce((downMonitorsAmount, currentId) => {
+                        const monitorHeartbeats = heartbeatList[currentId];
+                        const lastHeartbeat = monitorHeartbeats.at(-1);
+
+                        if (lastHeartbeat) {
+                            return lastHeartbeat.status === 0 ? downMonitorsAmount + 1 : downMonitorsAmount;
+                        } else {
+                            return downMonitorsAmount;
+                        }
+                    }, 0);
+
+                    favicon.badge(downMonitors);
+
                     this.loadedData = true;
                 });
             }
         },
 
         edit() {
-            this.$root.initSocketIO(true);
-            this.enableEditMode = true;
+            if (this.hasToken) {
+                this.$root.initSocketIO(true);
+                this.enableEditMode = true;
+                this.clickedEditButton = true;
+            }
         },
 
         save() {
-            this.$root.getSocket().emit("saveStatusPage", this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
+            let startTime = new Date();
+            this.config.slug = this.config.slug.trim().toLowerCase();
+
+            this.$root.getSocket().emit("saveStatusPage", this.slug, this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
                 if (res.ok) {
                     this.enableEditMode = false;
                     this.$root.publicGroupList = res.publicGroupList;
-                    location.reload();
+
+                    // Add some delay, so that the side menu animation would be better
+                    let endTime = new Date();
+                    let time = 100 - (endTime - startTime) / 1000;
+
+                    if (time < 0) {
+                        time = 0;
+                    }
+
+                    setTimeout(() => {
+                        location.href = "/status/" + this.config.slug;
+                    }, time);
+
+                } else {
+                    toast.error(res.msg);
+                }
+            });
+        },
+
+        deleteDialog() {
+            this.$refs.confirmDelete.show();
+        },
+
+        deleteStatusPage() {
+            this.$root.getSocket().emit("deleteStatusPage", this.slug, (res) => {
+                if (res.ok) {
+                    this.enableEditMode = false;
+                    location.href = "/manage-status-page";
                 } else {
                     toast.error(res.msg);
                 }
@@ -480,31 +615,12 @@ export default {
             });
         },
 
+        addDomainField() {
+            this.config.domainNameList.push("");
+        },
+
         discard() {
-            location.reload();
-        },
-
-        changeTheme(name) {
-            this.config.statusPageTheme = name;
-        },
-        changeTagsVisibilty(newState) {
-            this.config.statusPageTags = newState;
-
-            // On load, the status page will not include tags if it's not enabled for security reasons
-            // Which means if we enable tags, it won't show in the UI until saved
-            // So we have this to enhance UX and load in the tags from the authenticated source instantly
-            this.$root.publicGroupList = this.$root.publicGroupList.map((group) => {
-                return {
-                    ...group,
-                    monitorList: group.monitorList.map((monitor) => {
-                        // We only include the tags if visible so we can reuse the logic to hide the tags on disable
-                        return {
-                            ...monitor,
-                            tags: newState ? this.$root.monitorList[monitor.id].tags : []
-                        }
-                    })
-                }
-            });
+            location.href = "/status/" + this.slug;
         },
 
         /**
@@ -520,6 +636,11 @@ export default {
             }
         },
 
+        statusPageLogoLoaded(eventPayload) {
+            // Remark: may not work in dev, due to cros
+            favicon.image(eventPayload.target);
+        },
+
         createIncident() {
             this.enableEditIncidentMode = true;
 
@@ -540,7 +661,7 @@ export default {
                 return;
             }
 
-            this.$root.getSocket().emit("postIncident", this.incident, (res) => {
+            this.$root.getSocket().emit("postIncident", this.slug, this.incident, (res) => {
 
                 if (res.ok) {
                     this.enableEditIncidentMode = false;
@@ -571,7 +692,7 @@ export default {
         },
 
         unpinIncident() {
-            this.$root.getSocket().emit("unpinIncident", () => {
+            this.$root.getSocket().emit("unpinIncident", this.slug, () => {
                 this.incident = null;
             });
         },
@@ -580,6 +701,10 @@ export default {
             return dayjs.utc(date).fromNow();
         },
 
+        removeDomain(index) {
+            this.config.domainNameList.splice(index, 1);
+        },
+
     }
 };
 </script>
@@ -614,6 +739,50 @@ h1 {
     }
 }
 
+.main {
+    transition: all ease-in-out 0.1s;
+
+    &.edit {
+        margin-left: 300px;
+    }
+}
+
+.sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 300px;
+    height: 100vh;
+
+    border-right: 1px solid #ededed;
+
+    .danger-zone {
+        border-top: 1px solid #ededed;
+        padding-top: 15px;
+    }
+
+    .sidebar-body {
+        padding: 0 10px 10px 10px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        height: calc(100% - 70px);
+    }
+
+    .sidebar-footer {
+        border-top: 1px solid #ededed;
+        border-right: 1px solid #ededed;
+        padding: 10px;
+        width: 300px;
+        height: 70px;
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        background-color: white;
+        display: flex;
+        align-items: center;
+    }
+}
+
 footer {
     text-align: center;
     font-size: 14px;
@@ -623,6 +792,12 @@ footer {
     min-width: 50px;
 }
 
+.title-flex {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
 .logo-wrapper {
     display: inline-block;
     position: relative;
@@ -661,7 +836,7 @@ footer {
 
 .incident {
     .content {
-        &[contenteditable=true] {
+        &[contenteditable="true"] {
             min-height: 60px;
         }
     }
@@ -681,4 +856,41 @@ footer {
     }
 }
 
+.dark {
+    .sidebar {
+        background-color: $dark-header-bg;
+        border-right-color: $dark-border-color;
+
+        .danger-zone {
+            border-top-color: $dark-border-color;
+        }
+
+        .sidebar-footer {
+            border-right-color: $dark-border-color;
+            border-top-color: $dark-border-color;
+            background-color: $dark-header-bg;
+        }
+    }
+}
+
+.domain-name-list {
+    li {
+        display: flex;
+        align-items: center;
+        padding: 10px 0 10px 10px;
+
+        .domain-input {
+            flex-grow: 1;
+            background-color: transparent;
+            border: none;
+            color: $dark-font-color;
+            outline: none;
+
+            &::placeholder {
+                color: #1d2634;
+            }
+        }
+    }
+}
+
 </style>