From 1ecd2e45d058ada5c4bffedfcaa34216b09e157e Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Fri, 25 Mar 2022 18:59:06 +0800
Subject: [PATCH 1/6] [Status Page] Plan to support domain names for status
 pages

---
 src/pages/Entry.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/Entry.vue b/src/pages/Entry.vue
index 6148ec56d..90f039162 100644
--- a/src/pages/Entry.vue
+++ b/src/pages/Entry.vue
@@ -1,5 +1,9 @@
 <template>
-    <div></div>
+    <div>
+        <!--
+            TODO: If the domain name matched, directly render the <StatusPage> component.
+        -->
+    </div>
 </template>
 
 <script>

From fee88b32e33099c4cdbb78cfcba4413a4b2b2a4a Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Wed, 6 Apr 2022 20:48:13 +0800
Subject: [PATCH 2/6] Set PRAGMA synchronous = FULL

---
 server/database.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/server/database.js b/server/database.js
index 156c295bc..3ec406509 100644
--- a/server/database.js
+++ b/server/database.js
@@ -55,7 +55,6 @@ class Database {
         "patch-monitor-basic-auth.sql": true,
         "patch-status-page.sql": true,
         "patch-proxy.sql": true,
-        "patch-monitor-expiry-notification.sql": true,
     }
 
     /**
@@ -126,6 +125,11 @@ class Database {
         await R.exec("PRAGMA cache_size = -12000");
         await R.exec("PRAGMA auto_vacuum = FULL");
 
+        // This ensures that an operating system crash or power failure will not corrupt the database.
+        // FULL synchronous is very safe, but it is also slower.
+        // Read more: https://sqlite.org/pragma.html#pragma_synchronous
+        await R.exec("PRAGMA synchronous = FULL");
+
         console.log("SQLite config:");
         console.log(await R.getAll("PRAGMA journal_mode"));
         console.log(await R.getAll("PRAGMA cache_size"));

From c4e74c99430a19a4f1e36f7af9e6bd908548573c Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Wed, 6 Apr 2022 22:43:22 +0800
Subject: [PATCH 3/6] Render <StatusPage> if domain matched

---
 server/model/status_page.js  | 27 +++++++++++++++++++++++++++
 server/routers/api-router.js | 14 ++++++++++++--
 server/server.js             | 10 ++++++++--
 src/icon.js                  |  2 ++
 src/pages/Entry.vue          | 33 +++++++++++++++++++++++++++------
 src/pages/StatusPage.vue     | 21 +++++++++++++++------
 6 files changed, 91 insertions(+), 16 deletions(-)

diff --git a/server/model/status_page.js b/server/model/status_page.js
index 6f763f586..7f03fe6d7 100644
--- a/server/model/status_page.js
+++ b/server/model/status_page.js
@@ -3,6 +3,20 @@ const { R } = require("redbean-node");
 
 class StatusPage extends BeanModel {
 
+    static domainMappingList = { };
+
+    /**
+     * Return object like this: { "test-uptime.kuma.pet": "default" }
+     * @returns {Promise<void>}
+     */
+    static async loadDomainMappingList() {
+        this.domainMappingList = await R.getAssoc(`
+            SELECT domain, slug
+            FROM status_page, status_page_cname
+            WHERE status_page.id = status_page_cname.status_page_id
+        `);
+    }
+
     static async sendStatusPageList(io, socket) {
         let result = {};
 
@@ -16,6 +30,18 @@ class StatusPage extends BeanModel {
         return list;
     }
 
+    getDomainList() {
+        let domainList = [];
+        for (let domain in StatusPage.domainMappingList) {
+            let s = StatusPage.domainMappingList[domain];
+
+            if (this.slug === s) {
+                domainList.push(domain);
+            }
+        }
+        return domainList;
+    }
+
     async toJSON() {
         return {
             id: this.id,
@@ -26,6 +52,7 @@ class StatusPage extends BeanModel {
             theme: this.theme,
             published: !!this.published,
             showTags: !!this.show_tags,
+            domainList: this.getDomainList(),
         };
     }
 
diff --git a/server/routers/api-router.js b/server/routers/api-router.js
index ad8870847..6f463b6b0 100644
--- a/server/routers/api-router.js
+++ b/server/routers/api-router.js
@@ -12,9 +12,19 @@ let router = express.Router();
 let cache = apicache.middleware;
 let io = server.io;
 
-router.get("/api/entry-page", async (_, response) => {
+router.get("/api/entry-page", async (request, response) => {
     allowDevAllOrigin(response);
-    response.json(server.entryPage);
+
+    let result = { };
+
+    if (request.hostname in StatusPage.domainMappingList) {
+        result.type = "statusPageMatchedDomain";
+        result.statusPageSlug = StatusPage.domainMappingList[request.hostname];
+    } else {
+        result.type = "entryPage";
+        result.entryPage = server.entryPage;
+    }
+    response.json(result);
 });
 
 router.get("/api/push/:pushToken", async (request, response) => {
diff --git a/server/server.js b/server/server.js
index dc97d742d..3bd724d2c 100644
--- a/server/server.js
+++ b/server/server.js
@@ -197,6 +197,7 @@ exports.entryPage = "dashboard";
     await initDatabase(testMode);
 
     exports.entryPage = await setting("entryPage");
+    await StatusPage.loadDomainMappingList();
 
     console.log("Adding route");
 
@@ -205,8 +206,13 @@ exports.entryPage = "dashboard";
     // ***************************
 
     // Entry Page
-    app.get("/", async (_request, response) => {
-        if (exports.entryPage && exports.entryPage.startsWith("statusPage-")) {
+    app.get("/", async (request, response) => {
+        debug(`Request Domain: ${request.hostname}`);
+
+        if (request.hostname in StatusPage.domainMappingList) {
+            debug("This is a status page domain");
+            response.send(indexHTML);
+        } else if (exports.entryPage && exports.entryPage.startsWith("statusPage-")) {
             response.redirect("/status/" + exports.entryPage.replace("statusPage-", ""));
         } else {
             response.redirect("/dashboard");
diff --git a/src/icon.js b/src/icon.js
index bbd816ea0..c03db7555 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -37,6 +37,7 @@ import {
     faPen,
     faExternalLinkSquareAlt,
     faSpinner,
+    faUndo,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -73,6 +74,7 @@ library.add(
     faPen,
     faExternalLinkSquareAlt,
     faSpinner,
+    faUndo,
 );
 
 export { FontAwesomeIcon };
diff --git a/src/pages/Entry.vue b/src/pages/Entry.vue
index 90f039162..fd24a3520 100644
--- a/src/pages/Entry.vue
+++ b/src/pages/Entry.vue
@@ -1,23 +1,44 @@
 <template>
     <div>
-        <!--
-            TODO: If the domain name matched, directly render the <StatusPage> component.
-        -->
+        <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;
+
+        } else if (res.type === "entryPage") {          // Dev only
+            const entryPage = res.entryPage;
+
+            if (entryPage === "statusPage") {
+                this.$router.push("/status");
+            } else {
+                this.$router.push("/dashboard");
+            }
         } else {
             this.$router.push("/dashboard");
         }
+
     },
 
 };
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 22bbb5891..fc8805e7f 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -35,9 +35,9 @@
                 <input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
             </div>
 
-            <div v-if="false" class="my-3">
-                <label for="cname" class="form-label">Domain Names <sup>Coming Soon</sup></label>
-                <textarea id="cname" v-model="config.domanNames" rows="3" disabled class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
+            <div class="my-3">
+                <label for="cname" class="form-label">Domain Names</label>
+                <textarea id="cname" v-model="config.domanNames" rows="3" class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
             </div>
 
             <div class="danger-zone">
@@ -55,7 +55,7 @@
                 </button>
 
                 <button class="btn btn-danger me-2" @click="discard">
-                    <font-awesome-icon icon="save" />
+                    <font-awesome-icon icon="undo" />
                     {{ $t("Discard") }}
                 </button>
             </div>
@@ -259,6 +259,7 @@ const favicon = new Favico({
 });
 
 export default {
+
     components: {
         PublicGroupList,
         ImageCropUpload,
@@ -278,6 +279,14 @@ export default {
         next();
     },
 
+    props: {
+        overrideSlug: {
+            type: String,
+            required: false,
+            default: null,
+        },
+    },
+
     data() {
         return {
             slug: null,
@@ -294,7 +303,7 @@ export default {
             loadedData: false,
             baseURL: "",
             clickedEditButton: false,
-            domainNamesPlaceholder: "domain1.com\ndomain2.com\n..."
+            domainNamesPlaceholder: "example1.com\nexample2.com\n..."
         };
     },
     computed: {
@@ -449,7 +458,7 @@ export default {
         this.baseURL = getResBaseURL();
     },
     async mounted() {
-        this.slug = this.$route.params.slug;
+        this.slug = this.overrideSlug || this.$route.params.slug;
 
         if (!this.slug) {
             this.slug = "default";

From c399984b7f32e04ce46a120c1b19086610a11383 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sat, 9 Apr 2022 17:03:10 +0800
Subject: [PATCH 4/6] Improve status page sidebar

---
 src/languages/zh-HK.js   |  3 +-
 src/pages/StatusPage.vue | 98 ++++++++++++++++++++++------------------
 2 files changed, 55 insertions(+), 46 deletions(-)

diff --git a/src/languages/zh-HK.js b/src/languages/zh-HK.js
index 561e5de94..0c282f372 100644
--- a/src/languages/zh-HK.js
+++ b/src/languages/zh-HK.js
@@ -339,7 +339,7 @@ export default {
     "Switch to Dark Theme": "切換至深色佈景主題",
     "Show Tags": "顯示標籤",
     "Hide Tags": "隱藏標籤",
-    Description: "說明",
+    Description: "描述",
     "No monitors available.": "沒有可用的監測器。",
     "Add one": "新增一個",
     "No Monitors": "無監測器",
@@ -347,7 +347,6 @@ export default {
     Services: "服務",
     Discard: "捨棄",
     Cancel: "取消",
-    "Powered by": "技術支援",
     shrinkDatabaseDescription: "觸發 SQLite 的資料庫清理 (VACUUM)。如果您的資料庫是在 1.10.0 版本後建立，AUTO_VACUUM 已自動啟用，則無需此操作。",
     serwersms: "SerwerSMS.pl",
     serwersmsAPIUser: "API 使用者名稱 (包括 webapi_ 前綴)",
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index fc8805e7f..468584a71 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -2,49 +2,51 @@
     <div v-if="loadedTheme" class="container mt-3">
         <!-- Sidebar for edit mode -->
         <div v-if="enableEditMode" class="sidebar">
-            <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 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>
-            </div>
 
-            <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>
+                <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>
 
-            <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>
+                <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>
 
-            <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>
+                <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>
 
-            <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 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>
+                <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>
 
-            <div class="my-3">
-                <label for="cname" class="form-label">Domain Names</label>
-                <textarea id="cname" v-model="config.domanNames" rows="3" class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
-            </div>
+                <div class="my-3">
+                    <label for="cname" class="form-label">Domain Names</label>
+                    <textarea id="cname" v-model="config.domanNames" rows="3" class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
+                </div>
 
-            <div class="danger-zone">
-                <button class="btn btn-danger me-2" @click="deleteDialog">
-                    <font-awesome-icon icon="trash" />
-                    {{ $t("Delete") }}
-                </button>
+                <div class="danger-zone">
+                    <button class="btn btn-danger me-2" @click="deleteDialog">
+                        <font-awesome-icon icon="trash" />
+                        {{ $t("Delete") }}
+                    </button>
+                </div>
             </div>
 
             <!-- Sidebar Footer -->
@@ -120,7 +122,7 @@
 
                 <!-- Incident Date -->
                 <div class="date mt-3">
-                    {{ $t("Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
+                    {{ $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>
@@ -714,9 +716,7 @@ h1 {
     top: 0;
     width: 300px;
     height: 100vh;
-    padding: 15px 15px 68px 15px;
-    overflow-x: hidden;
-    overflow-y: auto;
+
     border-right: 1px solid #ededed;
 
     .danger-zone {
@@ -724,13 +724,22 @@ h1 {
         padding-top: 15px;
     }
 
+    .sidebar-body {
+        padding: 15px 15px 68px 15px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        height: calc(100% - 70px);
+    }
+
     .sidebar-footer {
-        width: 100%;
-        bottom: 0;
-        left: 0;
-        padding: 15px;
-        position: absolute;
         border-top: 1px solid #ededed;
+        padding: 15px;
+        width: 300px;
+        height: 70px;
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        background-color: white;
     }
 }
 
@@ -818,6 +827,7 @@ footer {
 
         .sidebar-footer {
             border-top-color: $dark-border-color;
+            background-color: $dark-header-bg;
         }
     }
 }

From 0b9b5102ec94ab1bc6d6cba5ce90be52937abaa7 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sat, 9 Apr 2022 17:23:22 +0800
Subject: [PATCH 5/6] Minor

---
 src/pages/StatusPage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 468584a71..74e258bc4 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -725,7 +725,7 @@ h1 {
     }
 
     .sidebar-body {
-        padding: 15px 15px 68px 15px;
+        padding: 0 10px 10px 10px;
         overflow-x: hidden;
         overflow-y: auto;
         height: calc(100% - 70px);
@@ -733,7 +733,7 @@ h1 {
 
     .sidebar-footer {
         border-top: 1px solid #ededed;
-        padding: 15px;
+        padding: 10px;
         width: 300px;
         height: 70px;
         position: fixed;

From c9fa183712cd611eb455dfa4afca15dfe19c7f23 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sun, 10 Apr 2022 00:25:27 +0800
Subject: [PATCH 6/6] Manage domain names

---
 server/model/status_page.js                   | 45 ++++++++++++-
 .../status-page-socket-handler.js             | 35 ++++++++--
 src/assets/app.scss                           | 16 +++++
 src/icon.js                                   |  2 +
 src/pages/Entry.vue                           |  4 +-
 src/pages/StatusPage.vue                      | 67 ++++++++++++++++++-
 6 files changed, 157 insertions(+), 12 deletions(-)

diff --git a/server/model/status_page.js b/server/model/status_page.js
index 7f03fe6d7..1383d3b00 100644
--- a/server/model/status_page.js
+++ b/server/model/status_page.js
@@ -10,7 +10,7 @@ class StatusPage extends BeanModel {
      * @returns {Promise<void>}
      */
     static async loadDomainMappingList() {
-        this.domainMappingList = await R.getAssoc(`
+        StatusPage.domainMappingList = await R.getAssoc(`
             SELECT domain, slug
             FROM status_page, status_page_cname
             WHERE status_page.id = status_page_cname.status_page_id
@@ -30,7 +30,46 @@ class StatusPage extends BeanModel {
         return list;
     }
 
-    getDomainList() {
+    async updateDomainNameList(domainNameList) {
+
+        if (!Array.isArray(domainNameList)) {
+            throw new Error("Invalid array");
+        }
+
+        let trx = await R.begin();
+
+        await trx.exec("DELETE FROM status_page_cname WHERE status_page_id = ?", [
+            this.id,
+        ]);
+
+        try {
+            for (let domain of domainNameList) {
+                if (typeof domain !== "string") {
+                    throw new Error("Invalid domain");
+                }
+
+                if (domain.trim() === "") {
+                    continue;
+                }
+
+                // If the domain name is used in another status page, delete it
+                await trx.exec("DELETE FROM status_page_cname WHERE domain = ?", [
+                    domain,
+                ]);
+
+                let mapping = trx.dispense("status_page_cname");
+                mapping.status_page_id = this.id;
+                mapping.domain = domain;
+                await trx.store(mapping);
+            }
+            await trx.commit();
+        } catch (error) {
+            await trx.rollback();
+            throw error;
+        }
+    }
+
+    getDomainNameList() {
         let domainList = [];
         for (let domain in StatusPage.domainMappingList) {
             let s = StatusPage.domainMappingList[domain];
@@ -52,7 +91,7 @@ class StatusPage extends BeanModel {
             theme: this.theme,
             published: !!this.published,
             showTags: !!this.show_tags,
-            domainList: this.getDomainList(),
+            domainNameList: this.getDomainNameList(),
         };
     }
 
diff --git a/server/socket-handlers/status-page-socket-handler.js b/server/socket-handlers/status-page-socket-handler.js
index 55a70d711..c844136ea 100644
--- a/server/socket-handlers/status-page-socket-handler.js
+++ b/server/socket-handlers/status-page-socket-handler.js
@@ -85,15 +85,35 @@ module.exports.statusPageSocketHandler = (socket) => {
         }
     });
 
+    socket.on("getStatusPage", async (slug, callback) => {
+        try {
+            checkLogin(socket);
+
+            let statusPage = await R.findOne("status_page", " slug = ? ", [
+                slug
+            ]);
+
+            if (!statusPage) {
+                throw new Error("No slug?");
+            }
+
+            callback({
+                ok: true,
+                config: await statusPage.toJSON(),
+            });
+        } catch (error) {
+            callback({
+                ok: false,
+                msg: error.message,
+            });
+        }
+    });
+
     // Save Status Page
     // imgDataUrl Only Accept PNG!
     socket.on("saveStatusPage", async (slug, config, imgDataUrl, publicGroupList, callback) => {
-
         try {
-            checkSlug(config.slug);
-
             checkLogin(socket);
-            apicache.clear();
 
             // Save Config
             let statusPage = await R.findOne("status_page", " slug = ? ", [
@@ -104,6 +124,8 @@ module.exports.statusPageSocketHandler = (socket) => {
                 throw new Error("No slug?");
             }
 
+            checkSlug(config.slug);
+
             const header = "data:image/png;base64,";
 
             // Check logo format
@@ -137,6 +159,9 @@ module.exports.statusPageSocketHandler = (socket) => {
 
             await R.store(statusPage);
 
+            await statusPage.updateDomainNameList(config.domainNameList);
+            await StatusPage.loadDomainMappingList();
+
             // Save Public Group List
             const groupIDList = [];
             let groupOrder = 1;
@@ -193,6 +218,8 @@ module.exports.statusPageSocketHandler = (socket) => {
                 await setSetting("entryPage", server.entryPage, "general");
             }
 
+            apicache.clear();
+
             callback({
                 ok: true,
                 publicGroupList,
diff --git a/src/assets/app.scss b/src/assets/app.scss
index 9e37cc99b..0b27c6a6e 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -22,6 +22,18 @@ textarea.form-control {
     width: 10px;
 }
 
+.list-group {
+    border-radius: 0.75rem;
+
+    .dark & {
+        .list-group-item {
+            background-color: $dark-bg;
+            color: $dark-font-color;
+            border-color: $dark-border-color;
+        }
+    }
+}
+
 ::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 20px;
@@ -412,6 +424,10 @@ textarea.form-control {
     background-color: rgba(239, 239, 239, 0.7);
     border-radius: 8px;
 
+    &.no-bg {
+        background-color: transparent !important;
+    }
+
     &:focus {
         outline: 0 solid #eee;
         background-color: rgba(245, 245, 245, 0.9);
diff --git a/src/icon.js b/src/icon.js
index c03db7555..7201b94fb 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -38,6 +38,7 @@ import {
     faExternalLinkSquareAlt,
     faSpinner,
     faUndo,
+    faPlusCircle,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -75,6 +76,7 @@ library.add(
     faExternalLinkSquareAlt,
     faSpinner,
     faUndo,
+    faPlusCircle,
 );
 
 export { FontAwesomeIcon };
diff --git a/src/pages/Entry.vue b/src/pages/Entry.vue
index fd24a3520..40aeb0b2b 100644
--- a/src/pages/Entry.vue
+++ b/src/pages/Entry.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <StatusPage v-if="statusPageSlug" override-slug="statusPageSlug" />
+        <StatusPage v-if="statusPageSlug" :override-slug="statusPageSlug" />
     </div>
 </template>
 
@@ -27,7 +27,7 @@ export default {
         if (res.type === "statusPageMatchedDomain") {
             this.statusPageSlug = res.statusPageSlug;
 
-        } else if (res.type === "entryPage") {          // Dev only
+        } else if (res.type === "entryPage") {          // Dev only. For production, the logic is in the server side
             const entryPage = res.entryPage;
 
             if (entryPage === "statusPage") {
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 74e258bc4..2c0c19678 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -36,9 +36,19 @@
                     <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 for="cname" class="form-label">Domain Names</label>
-                    <textarea id="cname" v-model="config.domanNames" rows="3" class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
+                    <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">
@@ -305,7 +315,6 @@ export default {
             loadedData: false,
             baseURL: "",
             clickedEditButton: false,
-            domainNamesPlaceholder: "example1.com\nexample2.com\n..."
         };
     },
     computed: {
@@ -400,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.
          */
@@ -469,6 +494,10 @@ export default {
         axios.get("/api/status-page/" + this.slug).then((res) => {
             this.config = res.data.config;
 
+            if (!this.config.domainNameList) {
+                this.config.domainNameList = [];
+            }
+
             if (this.config.icon) {
                 this.imgDataUrl = this.config.icon;
             }
@@ -586,6 +615,10 @@ export default {
             });
         },
 
+        addDomainField() {
+            this.config.domainNameList.push("");
+        },
+
         discard() {
             location.href = "/status/" + this.slug;
         },
@@ -668,6 +701,10 @@ export default {
             return dayjs.utc(date).fromNow();
         },
 
+        removeDomain(index) {
+            this.config.domainNameList.splice(index, 1);
+        },
+
     }
 };
 </script>
@@ -733,6 +770,7 @@ h1 {
 
     .sidebar-footer {
         border-top: 1px solid #ededed;
+        border-right: 1px solid #ededed;
         padding: 10px;
         width: 300px;
         height: 70px;
@@ -740,6 +778,8 @@ h1 {
         left: 0;
         bottom: 0;
         background-color: white;
+        display: flex;
+        align-items: center;
     }
 }
 
@@ -826,10 +866,31 @@ footer {
         }
 
         .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>