Merge pull request #863 from louislam/restructure-status-page

Restructure status page core implementation

db/patch-status-page.sql

@@ -0,0 +1,31 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+
+CREATE TABLE [status_page](
+    [id] INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
+    [slug] VARCHAR(255) NOT NULL UNIQUE,
+    [title] VARCHAR(255) NOT NULL,
+    [description] TEXT,
+    [icon] VARCHAR(255) NOT NULL,
+    [theme] VARCHAR(30) NOT NULL,
+    [published] BOOLEAN NOT NULL DEFAULT 1,
+    [search_engine_index] BOOLEAN NOT NULL DEFAULT 1,
+    [show_tags] BOOLEAN NOT NULL DEFAULT 0,
+    [password] VARCHAR,
+    [created_date] DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    [modified_date] DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE UNIQUE INDEX [slug] ON [status_page]([slug]);
+
+
+CREATE TABLE [status_page_cname](
+    [id] INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
+    [status_page_id] INTEGER NOT NULL REFERENCES [status_page]([id]) ON DELETE CASCADE ON UPDATE CASCADE,
+    [domain] VARCHAR NOT NULL UNIQUE
+);
+
+ALTER TABLE incident ADD status_page_id INTEGER;
+ALTER TABLE [group] ADD status_page_id INTEGER;
+
+COMMIT;

docker/alpine-base.dockerfile

@@ -1,5 +1,5 @@
 # DON'T UPDATE TO alpine3.13, 1.14, see #41.
-FROM node:14-alpine3.12
+FROM node:16-alpine3.12
 WORKDIR /app
 
 # Install apprise, iputils for non-root ping, setpriv

docker/debian-base.dockerfile

@@ -1,6 +1,6 @@
 # DON'T UPDATE TO node:14-bullseye-slim, see #372.
 # If the image changed, the second stage image should be changed too
-FROM node:14-buster-slim
+FROM node:16-buster-slim
 WORKDIR /app
 
 # Install Apprise, add sqlite3 cli for debugging in the future, iputils-ping for ping, util-linux for setpriv

server/database.js

@@ -53,6 +53,7 @@ class Database {
         "patch-2fa-invalidate-used-token.sql": true,
         "patch-notification_sent_history.sql": true,
         "patch-monitor-basic-auth.sql": true,
+        "patch-status-page.sql": true,
     }
 
     /**
@@ -170,6 +171,7 @@ class Database {
         }
 
         await this.patch2();
+        await this.migrateNewStatusPage();
     }
 
     /**
@@ -211,6 +213,70 @@ class Database {
         await setSetting("databasePatchedFiles", databasePatchedFiles);
     }
 
+    /**
+     * Migrate status page value in setting to "status_page" table
+     * @returns {Promise<void>}
+     */
+    static async migrateNewStatusPage() {
+        let title = await setting("title");
+
+        if (title) {
+            console.log("Migrating Status Page");
+
+            let statusPageCheck = await R.findOne("status_page", " slug = 'default' ");
+
+            if (statusPageCheck !== null) {
+                console.log("Migrating Status Page - Skip, default slug record is already existing");
+                return;
+            }
+
+            let statusPage = R.dispense("status_page");
+            statusPage.slug = "default";
+            statusPage.title = title;
+            statusPage.description = await setting("description");
+            statusPage.icon = await setting("icon");
+            statusPage.theme = await setting("statusPageTheme");
+            statusPage.published = !!await setting("statusPagePublished");
+            statusPage.search_engine_index = !!await setting("searchEngineIndex");
+            statusPage.show_tags = !!await setting("statusPageTags");
+            statusPage.password = null;
+
+            if (!statusPage.title) {
+                statusPage.title = "My Status Page";
+            }
+
+            if (!statusPage.icon) {
+                statusPage.icon = "";
+            }
+
+            if (!statusPage.theme) {
+                statusPage.theme = "light";
+            }
+
+            let id = await R.store(statusPage);
+
+            await R.exec("UPDATE incident SET status_page_id = ? WHERE status_page_id IS NULL", [
+                id
+            ]);
+
+            await R.exec("UPDATE [group] SET status_page_id = ? WHERE status_page_id IS NULL", [
+                id
+            ]);
+
+            await R.exec("DELETE FROM setting WHERE type = 'statusPage'");
+
+            // Migrate Entry Page if it is status page
+            let entryPage = await setting("entryPage");
+
+            if (entryPage === "statusPage") {
+                await setSetting("entryPage", "statusPage-default", "general");
+            }
+
+            console.log("Migrating Status Page - Done");
+        }
+
+    }
+
     /**
      * Used it patch2() only
      * @param sqlFilename

server/model/group.js

@@ -3,12 +3,12 @@ const { R } = require("redbean-node");
 
 class Group extends BeanModel {
 
-    async toPublicJSON() {
+    async toPublicJSON(showTags = false) {
         let monitorBeanList = await this.getMonitorList();
         let monitorList = [];
 
         for (let bean of monitorBeanList) {
-            monitorList.push(await bean.toPublicJSON());
+            monitorList.push(await bean.toPublicJSON(showTags));
         }
 
         return {

server/model/monitor.js

@@ -24,18 +24,22 @@ const apicache = require("../modules/apicache");
 class Monitor extends BeanModel {
 
     /**
-     * Return a object that ready to parse to JSON for public
+     * Return an object that ready to parse to JSON for public
      * Only show necessary data to public
      */
-    async toPublicJSON() {
+    async toPublicJSON(showTags = false) {
-        return {
+        let obj = {
             id: this.id,
             name: this.name,
         };
+        if (showTags) {
+            obj.tags = await this.getTags();
+        }
+        return obj;
     }
 
     /**
-     * Return a object that ready to parse to JSON
+     * Return an object that ready to parse to JSON
      */
     async toJSON() {
 
@@ -49,7 +53,7 @@ class Monitor extends BeanModel {
             notificationIDList[bean.notification_id] = true;
         }
 
-        const tags = await R.getAll("SELECT mt.*, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [this.id]);
+        const tags = await this.getTags();
 
         return {
             id: this.id,
@@ -82,6 +86,10 @@ class Monitor extends BeanModel {
         };
     }
 
+    async getTags() {
+        return await R.getAll("SELECT mt.*, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [this.id]);
+    }
+
     /**
      * Encode user and password to Base64 encoding
      * for HTTP "basic" auth, as per RFC-7617

server/model/status_page.js

@@ -0,0 +1,60 @@
+const { BeanModel } = require("redbean-node/dist/bean-model");
+const { R } = require("redbean-node");
+
+class StatusPage extends BeanModel {
+
+    static async sendStatusPageList(io, socket) {
+        let result = {};
+
+        let list = await R.findAll("status_page", " ORDER BY title ");
+
+        for (let item of list) {
+            result[item.id] = await item.toJSON();
+        }
+
+        io.to(socket.userID).emit("statusPageList", result);
+        return list;
+    }
+
+    async toJSON() {
+        return {
+            id: this.id,
+            slug: this.slug,
+            title: this.title,
+            description: this.description,
+            icon: this.getIcon(),
+            theme: this.theme,
+            published: !!this.published,
+            showTags: !!this.show_tags,
+        };
+    }
+
+    async toPublicJSON() {
+        return {
+            slug: this.slug,
+            title: this.title,
+            description: this.description,
+            icon: this.getIcon(),
+            theme: this.theme,
+            published: !!this.published,
+            showTags: !!this.show_tags,
+        };
+    }
+
+    static async slugToID(slug) {
+        return await R.getCell("SELECT id FROM status_page WHERE slug = ? ", [
+            slug
+        ]);
+    }
+
+    getIcon() {
+        if (!this.icon) {
+            return "/icon.svg";
+        } else {
+            return this.icon;
+        }
+    }
+
+}
+
+module.exports = StatusPage;

server/routers/api-router.js

@@ -6,6 +6,7 @@ const apicache = require("../modules/apicache");
 const Monitor = require("../model/monitor");
 const dayjs = require("dayjs");
 const { UP, flipStatus, debug } = require("../../src/util");
+const StatusPage = require("../model/status_page");
 let router = express.Router();
 
 let cache = apicache.middleware;
@@ -82,110 +83,80 @@ router.get("/api/push/:pushToken", async (request, response) => {
     }
 });
 
-// Status Page Config
+// Status page config, incident, monitor list
-router.get("/api/status-page/config", async (_request, response) => {
+router.get("/api/status-page/:slug", cache("5 minutes"), async (request, response) => {
     allowDevAllOrigin(response);
+    let slug = request.params.slug;
 
-    let config = await getSettings("statusPage");
+    // Get Status Page
+    let statusPage = await R.findOne("status_page", " slug = ? ", [
+        slug
+    ]);
 
-    if (! config.statusPageTheme) {
+    if (!statusPage) {
-        config.statusPageTheme = "light";
+        response.statusCode = 404;
+        response.json({
+            msg: "Not Found"
+        });
+        return;
     }
 
-    if (! config.statusPagePublished) {
-        config.statusPagePublished = true;
-    }
-
-    if (! config.statusPageTags) {
-        config.statusPageTags = false;
-    }
-
-    if (! config.title) {
-        config.title = "Uptime Kuma";
-    }
-
-    response.json(config);
-});
-
-// Status Page - Get the current Incident
-// Can fetch only if published
-router.get("/api/status-page/incident", async (_, response) => {
-    allowDevAllOrigin(response);
-
     try {
-        await checkPublished();
+        // Incident
-
+        let incident = await R.findOne("incident", " pin = 1 AND active = 1 AND status_page_id = ? ", [
-        let incident = await R.findOne("incident", " pin = 1 AND active = 1");
+            statusPage.id,
+        ]);
 
         if (incident) {
             incident = incident.toPublicJSON();
         }
 
+        // Public Group List
+        const publicGroupList = [];
+        const showTags = !!statusPage.show_tags;
+        debug("Show Tags???" + showTags);
+        const list = await R.find("group", " public = 1 AND status_page_id = ? ORDER BY weight ", [
+            statusPage.id
+        ]);
+
+        for (let groupBean of list) {
+            let monitorGroup = await groupBean.toPublicJSON(showTags);
+            publicGroupList.push(monitorGroup);
+        }
+
+        // Response
         response.json({
-            ok: true,
+            config: await statusPage.toPublicJSON(),
             incident,
+            publicGroupList
         });
 
     } catch (error) {
         send403(response, error.message);
     }
-});
 
-// Status Page - Monitor List
-// Can fetch only if published
-router.get("/api/status-page/monitor-list", cache("5 minutes"), async (_request, response) => {
-    allowDevAllOrigin(response);
-
-    try {
-        await checkPublished();
-        const publicGroupList = [];
-        const tagsVisible = (await getSettings("statusPage")).statusPageTags;
-        const list = await R.find("group", " public = 1 ORDER BY weight ");
-        for (let groupBean of list) {
-            let monitorGroup = await groupBean.toPublicJSON();
-            if (tagsVisible) {
-                monitorGroup.monitorList = await Promise.all(monitorGroup.monitorList.map(async (monitor) => {
-                    // Includes tags as an array in response, allows for tags to be displayed on public status page
-                    const tags = await R.getAll(
-                            `SELECT monitor_tag.monitor_id, monitor_tag.value, tag.name, tag.color
-                            FROM monitor_tag
-                            JOIN tag
-                            ON monitor_tag.tag_id = tag.id
-                            WHERE monitor_tag.monitor_id = ?`, [monitor.id]
-                    );
-                    return {
-                        ...monitor,
-                        tags: tags
-                    };
-                }));
-            }
-
-            publicGroupList.push(monitorGroup);
-        }
-
-        response.json(publicGroupList);
-
-    } catch (error) {
-        send403(response, error.message);
-    }
 });
 
 // Status Page Polling Data
 // Can fetch only if published
-router.get("/api/status-page/heartbeat", cache("5 minutes"), async (_request, response) => {
+router.get("/api/status-page/heartbeat/:slug", cache("1 minutes"), async (request, response) => {
     allowDevAllOrigin(response);
 
     try {
-        await checkPublished();
-
         let heartbeatList = {};
         let uptimeList = {};
 
+        let slug = request.params.slug;
+        let statusPageID = await StatusPage.slugToID(slug);
+
         let monitorIDList = await R.getCol(`
             SELECT monitor_group.monitor_id FROM monitor_group, \`group\`
             WHERE monitor_group.group_id = \`group\`.id
             AND public = 1
-        `);
+            AND \`group\`.status_page_id = ?
+        `, [
+            statusPageID
+        ]);
 
         for (let monitorID of monitorIDList) {
             let list = await R.getAll(`
@@ -214,22 +185,12 @@ router.get("/api/status-page/heartbeat", cache("5 minutes"), async (_request, re
     }
 });
 
-async function checkPublished() {
-    if (! await isPublished()) {
-        throw new Error("The status page is not published");
-    }
-}
-
 /**
  * Default is published
  * @returns {Promise<boolean>}
  */
 async function isPublished() {
-    const value = await setting("statusPagePublished");
+    return true;
-    if (value === null) {
-        return true;
-    }
-    return value;
 }
 
 function send403(res, msg = "") {

server/server.js

@@ -132,6 +132,7 @@ const { sendNotificationList, sendHeartbeatList, sendImportantHeartbeatList, sen
 const { statusPageSocketHandler } = require("./socket-handlers/status-page-socket-handler");
 const databaseSocketHandler = require("./socket-handlers/database-socket-handler");
 const TwoFA = require("./2fa");
+const StatusPage = require("./model/status_page");
 
 app.use(express.json());
 
@@ -200,8 +201,8 @@ exports.entryPage = "dashboard";
 
     // Entry Page
     app.get("/", async (_request, response) => {
-        if (exports.entryPage === "statusPage") {
+        if (exports.entryPage && exports.entryPage.startsWith("statusPage-")) {
-            response.redirect("/status");
+            response.redirect("/status/" + exports.entryPage.replace("statusPage-", ""));
         } else {
             response.redirect("/dashboard");
         }
@@ -1414,6 +1415,8 @@ async function afterLogin(socket, user) {
     for (let monitorID in monitorList) {
         await Monitor.sendStats(io, monitorID, user.id);
     }
+
+    await StatusPage.sendStatusPageList(io, socket);
 }
 
 async function getMonitorJSONList(userID) {

server/socket-handlers/status-page-socket-handler.js

@@ -1,25 +1,36 @@
 const { R } = require("redbean-node");
-const { checkLogin, setSettings } = require("../util-server");
+const { checkLogin, setSettings, setSetting } = require("../util-server");
 const dayjs = require("dayjs");
 const { debug } = require("../../src/util");
 const ImageDataURI = require("../image-data-uri");
 const Database = require("../database");
 const apicache = require("../modules/apicache");
+const StatusPage = require("../model/status_page");
+const server = require("../server");
 
 module.exports.statusPageSocketHandler = (socket) => {
 
     // Post or edit incident
-    socket.on("postIncident", async (incident, callback) => {
+    socket.on("postIncident", async (slug, incident, callback) => {
         try {
             checkLogin(socket);
 
-            await R.exec("UPDATE incident SET pin = 0 ");
+            let statusPageID = await StatusPage.slugToID(slug);
+
+            if (!statusPageID) {
+                throw new Error("slug is not found");
+            }
+
+            await R.exec("UPDATE incident SET pin = 0 WHERE status_page_id = ? ", [
+                statusPageID
+            ]);
 
             let incidentBean;
 
             if (incident.id) {
-                incidentBean = await R.findOne("incident", " id = ?", [
+                incidentBean = await R.findOne("incident", " id = ? AND status_page_id = ? ", [
-                    incident.id
+                    incident.id,
+                    statusPageID
                 ]);
             }
 
@@ -31,6 +42,7 @@ module.exports.statusPageSocketHandler = (socket) => {
             incidentBean.content = incident.content;
             incidentBean.style = incident.style;
             incidentBean.pin = true;
+            incidentBean.status_page_id = statusPageID;
 
             if (incident.id) {
                 incidentBean.lastUpdatedDate = R.isoDateTime(dayjs.utc());
@@ -52,11 +64,15 @@ module.exports.statusPageSocketHandler = (socket) => {
         }
     });
 
-    socket.on("unpinIncident", async (callback) => {
+    socket.on("unpinIncident", async (slug, callback) => {
         try {
             checkLogin(socket);
 
-            await R.exec("UPDATE incident SET pin = 0 WHERE pin = 1");
+            let statusPageID = await StatusPage.slugToID(slug);
+
+            await R.exec("UPDATE incident SET pin = 0 WHERE pin = 1 AND status_page_id = ? ", [
+                statusPageID
+            ]);
 
             callback({
                 ok: true,
@@ -71,13 +87,21 @@ module.exports.statusPageSocketHandler = (socket) => {
 
     // Save Status Page
     // imgDataUrl Only Accept PNG!
-    socket.on("saveStatusPage", async (config, imgDataUrl, publicGroupList, callback) => {
+    socket.on("saveStatusPage", async (slug, config, imgDataUrl, publicGroupList, callback) => {
 
         try {
             checkLogin(socket);
-
             apicache.clear();
 
+            // Save Config
+            let statusPage = await R.findOne("status_page", " slug = ? ", [
+                slug
+            ]);
+
+            if (!statusPage) {
+                throw new Error("No slug?");
+            }
+
             const header = "data:image/png;base64,";
 
             // Check logo format
@@ -88,16 +112,28 @@ module.exports.statusPageSocketHandler = (socket) => {
                     throw new Error("Only allowed PNG logo.");
                 }
 
+                const filename = `logo${statusPage.id}.png`;
+
                 // Convert to file
-                await ImageDataURI.outputFile(imgDataUrl, Database.uploadDir + "logo.png");
+                await ImageDataURI.outputFile(imgDataUrl, Database.uploadDir + filename);
-                config.logo = "/upload/logo.png?t=" + Date.now();
+                config.logo = `/upload/${filename}?t=` + Date.now();
 
             } else {
                 config.icon = imgDataUrl;
             }
 
-            // Save Config
+            statusPage.slug = config.slug;
-            await setSettings("statusPage", config);
+            statusPage.title = config.title;
+            statusPage.description = config.description;
+            statusPage.icon = config.logo;
+            statusPage.theme = config.theme;
+            //statusPage.published = ;
+            //statusPage.search_engine_index = ;
+            statusPage.show_tags = config.showTags;
+            //statusPage.password = null;
+            statusPage.modified_date = R.isoDateTime();
+
+            await R.store(statusPage);
 
             // Save Public Group List
             const groupIDList = [];
@@ -106,13 +142,15 @@ module.exports.statusPageSocketHandler = (socket) => {
             for (let group of publicGroupList) {
                 let groupBean;
                 if (group.id) {
-                    groupBean = await R.findOne("group", " id = ? AND public = 1 ", [
+                    groupBean = await R.findOne("group", " id = ? AND public = 1 AND status_page_id = ? ", [
-                        group.id
+                        group.id,
+                        statusPage.id
                     ]);
                 } else {
                     groupBean = R.dispense("group");
                 }
 
+                groupBean.status_page_id = statusPage.id;
                 groupBean.name = group.name;
                 groupBean.public = true;
                 groupBean.weight = groupOrder++;
@@ -124,7 +162,6 @@ module.exports.statusPageSocketHandler = (socket) => {
                 ]);
 
                 let monitorOrder = 1;
-                console.log(group.monitorList);
 
                 for (let monitor of group.monitorList) {
                     let relationBean = R.dispense("monitor_group");
@@ -143,13 +180,19 @@ module.exports.statusPageSocketHandler = (socket) => {
             const slots = groupIDList.map(() => "?").join(",");
             await R.exec(`DELETE FROM \`group\` WHERE id NOT IN (${slots})`, groupIDList);
 
+            // Also change entry page to new slug if it is the default one, and slug is changed.
+            if (server.entryPage === "statusPage-" + slug && statusPage.slug !== slug) {
+                server.entryPage = "statusPage-" + statusPage.slug;
+                await setSetting("entryPage", server.entryPage, "general");
+            }
+
             callback({
                 ok: true,
                 publicGroupList,
             });
 
         } catch (error) {
-            console.log(error);
+            console.error(error);
 
             callback({
                 ok: false,
@@ -158,4 +201,99 @@ module.exports.statusPageSocketHandler = (socket) => {
         }
     });
 
+    // Add a new status page
+    socket.on("addStatusPage", async (title, slug, callback) => {
+        try {
+            checkLogin(socket);
+
+            title = title?.trim();
+            slug = slug?.trim();
+
+            // Check empty
+            if (!title || !slug) {
+                throw new Error("Please input all fields");
+            }
+
+            // Make sure slug is string
+            if (typeof slug !== "string") {
+                throw new Error("Slug -Accept string only");
+            }
+
+            // lower case only
+            slug = slug.toLowerCase();
+
+            // Check slug a-z, 0-9, - only
+            // Regex from: https://stackoverflow.com/questions/22454258/js-regex-string-validation-for-slug
+            if (!slug.match(/^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/)) {
+                throw new Error("Invalid Slug");
+            }
+
+            let statusPage = R.dispense("status_page");
+            statusPage.slug = slug;
+            statusPage.title = title;
+            statusPage.theme = "light";
+            statusPage.icon = "";
+            await R.store(statusPage);
+
+            callback({
+                ok: true,
+                msg: "OK!"
+            });
+
+        } catch (error) {
+            console.error(error);
+            callback({
+                ok: false,
+                msg: error.message,
+            });
+        }
+    });
+
+    // Delete a status page
+    socket.on("deleteStatusPage", async (slug, callback) => {
+        try {
+            checkLogin(socket);
+
+            let statusPageID = await StatusPage.slugToID(slug);
+
+            if (statusPageID) {
+
+                // Reset entry page if it is the default one.
+                if (server.entryPage === "statusPage-" + slug) {
+                    server.entryPage = "dashboard";
+                    await setSetting("entryPage", server.entryPage, "general");
+                }
+
+                // No need to delete records from `status_page_cname`, because it has cascade foreign key.
+                // But for incident & group, it is hard to add cascade foreign key during migration, so they have to be deleted manually.
+
+                // Delete incident
+                await R.exec("DELETE FROM incident WHERE status_page_id = ? ", [
+                    statusPageID
+                ]);
+
+                // Delete group
+                await R.exec("DELETE FROM `group` WHERE status_page_id = ? ", [
+                    statusPageID
+                ]);
+
+                // Delete status_page
+                await R.exec("DELETE FROM status_page WHERE id = ? ", [
+                    statusPageID
+                ]);
+
+            } else {
+                throw new Error("Status Page is not found");
+            }
+
+            callback({
+                ok: true,
+            });
+        } catch (error) {
+            callback({
+                ok: false,
+                msg: error.message,
+            });
+        }
+    });
 };

src/assets/app.scss

@@ -92,6 +92,10 @@ textarea.form-control {
     }
 }
 
+.btn-dark {
+    background-color: #161B22;
+}
+
 @media (max-width: 550px) {
     .table-shadow-box {
         padding: 10px !important;
@@ -144,6 +148,10 @@ textarea.form-control {
     background-color: #090c10;
     color: $dark-font-color;
 
+    mark, .mark {
+        background-color: #b6ad86;
+    }
+
     &::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {
         background: $dark-border-color;
     }
@@ -159,15 +167,21 @@ textarea.form-control {
         border-color: $dark-border-color;
     }
 
+    .input-group-text {
+        background-color: #282f39;
+        border-color: $dark-border-color;
+        color: $dark-font-color;
+    }
+
     .form-check-input:checked {
         border-color: $primary; // Re-apply bootstrap border
     }
-    
+
     .form-switch .form-check-input {
         background-color: #232f3b;
     }
 
-    a,
+    a:not(.btn),
     .table,
     .nav-link {
         color: $dark-font-color;
@@ -438,6 +452,10 @@ textarea.form-control {
     border-radius: 10px !important;
 }
 
+.spinner {
+    color: $primary;
+}
+
 // Localization
 
 @import "localization.scss";

src/components/PublicGroupList.vue

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

src/components/settings/General.vue

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

src/icon.js

@@ -34,6 +34,9 @@ import {
     faAward,
     faLink,
     faChevronDown,
+    faPen,
+    faExternalLinkSquareAlt,
+    faSpinner,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -67,6 +70,9 @@ library.add(
     faAward,
     faLink,
     faChevronDown,
+    faPen,
+    faExternalLinkSquareAlt,
+    faSpinner,
 );
 
 export { FontAwesomeIcon };

src/languages/bg-BG.js

@@ -197,6 +197,7 @@ export default {
     line: "Line Messenger",
     mattermost: "Mattermost",
     "Status Page": "Статус страница",
+    "Status Pages": "Статус страница",
     "Primary Base URL": "Основен базов URL адрес",
     "Push URL": "Генериран Push URL адрес",
     needPushEvery: "Необходимо е да извършвате заявка към този URL адрес на всеки {0} секунди",

src/languages/cs-CZ.js

@@ -183,6 +183,7 @@ export default {
     "Edit Status Page": "Upravit stavovou stránku",
     "Go to Dashboard": "Přejít na nástěnku",
     "Status Page": "Stavová stránka",
+    "Status Pages": "Stavová stránka",
     defaultNotificationName: "Moje {notification} upozornění ({číslo})",
     here: "sem",
     Required: "Vyžadováno",

src/languages/da-DK.js

@@ -180,6 +180,7 @@ export default {
     "Edit Status Page": "Rediger Statusside",
     "Go to Dashboard": "Gå til Betjeningspanel",
     "Status Page": "Statusside",
+    "Status Pages": "Statusside",
     telegram: "Telegram",
     webhook: "Webhook",
     smtp: "Email (SMTP)",

src/languages/de-DE.js

@@ -179,6 +179,7 @@ export default {
     "Edit Status Page": "Bearbeite Status-Seite",
     "Go to Dashboard": "Gehe zum Dashboard",
     "Status Page": "Status-Seite",
+    "Status Pages": "Status-Seite",
     telegram: "Telegram",
     webhook: "Webhook",
     smtp: "E-Mail (SMTP)",

src/languages/en.js

@@ -183,6 +183,7 @@ export default {
     "Edit Status Page": "Edit Status Page",
     "Go to Dashboard": "Go to Dashboard",
     "Status Page": "Status Page",
+    "Status Pages": "Status Pages",
     defaultNotificationName: "My {notification} Alert ({number})",
     here: "here",
     Required: "Required",
@@ -330,21 +331,21 @@ export default {
     dark: "dark",
     Post: "Post",
     "Please input title and content": "Please input title and content",
-    Created: "Created",
+    "Created": "Created",
     "Last Updated": "Last Updated",
-    Unpin: "Unpin",
+    "Unpin": "Unpin",
     "Switch to Light Theme": "Switch to Light Theme",
     "Switch to Dark Theme": "Switch to Dark Theme",
     "Show Tags": "Show Tags",
     "Hide Tags": "Hide Tags",
-    Description: "Description",
+    "Description": "Description",
     "No monitors available.": "No monitors available.",
     "Add one": "Add one",
     "No Monitors": "No Monitors",
     "Untitled Group": "Untitled Group",
-    Services: "Services",
+    "Services": "Services",
-    Discard: "Discard",
+    "Discard": "Discard",
-    Cancel: "Cancel",
+    "Cancel": "Cancel",
     "Powered by": "Powered by",
     shrinkDatabaseDescription: "Trigger database VACUUM for SQLite. If your database is created after 1.10.0, AUTO_VACUUM is already enabled and this action is not needed.",
     serwersms: "SerwerSMS.pl",
@@ -352,7 +353,7 @@ export default {
     serwersmsAPIPassword: "API Password",
     serwersmsPhoneNumber: "Phone number",
     serwersmsSenderName: "SMS Sender Name (registered via customer portal)",
-    "stackfield": "Stackfield",
+    stackfield: "Stackfield",
     smtpDkimSettings: "DKIM Settings",
     smtpDkimDesc: "Please refer to the Nodemailer DKIM {0} for usage.",
     documentation: "documentation",
@@ -363,10 +364,11 @@ export default {
     smtpDkimheaderFieldNames: "Header Keys to sign (Optional)",
     smtpDkimskipFields: "Header Keys not to sign (Optional)",
     gorush: "Gorush",
-    alerta: 'Alerta',
+    alerta: "Alerta",
-    alertaApiEndpoint: 'API Endpoint',
+    alertaApiEndpoint: "API Endpoint",
-    alertaEnvironment: 'Environment',
+    alertaEnvironment: "Environment",
-    alertaApiKey: 'API Key',
+    alertaApiKey: "API Key",
-    alertaAlertState: 'Alert State',
+    alertaAlertState: "Alert State",
-    alertaRecoverState: 'Recover State',
+    alertaRecoverState: "Recover State",
+    deleteStatusPageMsg: "Are you sure want to delete this status page?",
 };

src/languages/es-ES.js

@@ -180,6 +180,7 @@ export default {
     "Edit Status Page": "Editar página de estado",
     "Go to Dashboard": "Ir al panel de control",
     "Status Page": "Página de estado",
+    "Status Pages": "Página de estado",
     telegram: "Telegram",
     webhook: "Webhook",
     smtp: "Email (SMTP)",

src/languages/et-EE.js

@@ -17,6 +17,7 @@ export default {
     pauseMonitorMsg: "Kas soovid peatada seire?",
     Settings: "Seaded",
     "Status Page": "Ülevaade",
+    "Status Pages": "Ülevaade",
     Dashboard: "Töölaud",
     "New Update": "Uuem tarkvara versioon on saadaval.",
     Language: "Keel",

src/languages/fa.js

@@ -178,6 +178,7 @@ export default {
     "Add a monitor": "اضافه کردن مانیتور",
     "Edit Status Page": "ویرایش صفحه وضعیت",
     "Status Page": "صفحه وضعیت",
+    "Status Pages": "صفحه وضعیت",
     "Go to Dashboard": "رفتن به پیشخوان",
     "Uptime Kuma": "آپتایم کوما",
     records: "مورد",

src/languages/fr-FR.js

@@ -179,6 +179,7 @@ export default {
     "Edit Status Page": "Modifier la page de statut",
     "Go to Dashboard": "Accéder au tableau de bord",
     "Status Page": "Status Page",
+    "Status Pages": "Status Pages",
     defaultNotificationName: "Ma notification {notification} numéro ({number})",
     here: "ici",
     Required: "Requis",
@@ -304,9 +305,9 @@ export default {
     steamApiKeyDescription: "Pour surveiller un serveur Steam, vous avez besoin  d'une clé Steam Web-API. Vous pouvez enregistrer votre clé ici : ",
     "Current User": "Utilisateur actuel",
     recent: "Récent",
-    alertaApiEndpoint: 'API Endpoint',
+    alertaApiEndpoint: "API Endpoint",
-    alertaEnvironment: 'Environement',
+    alertaEnvironment: "Environement",
     alertaApiKey: "Clé de l'API",
     alertaAlertState: "État de l'Alerte",
-    alertaRecoverState: 'État de récupération',
+    alertaRecoverState: "État de récupération",
 };

src/languages/hr-HR.js

@@ -183,6 +183,7 @@ export default {
     "Edit Status Page": "Uredi Statusnu stranicu",
     "Go to Dashboard": "Na Kontrolnu ploču",
     "Status Page": "Statusna stranica",
+    "Status Pages": "Statusna stranica",
     defaultNotificationName: "Moja {number}. {notification} obavijest",
     here: "ovdje",
     Required: "Potrebno",

src/languages/hu.js

@@ -197,6 +197,7 @@ export default {
     line: "Line Messenger",
     mattermost: "Mattermost",
     "Status Page": "Státusz oldal",
+    "Status Pages": "Státusz oldal",
     "Primary Base URL": "Elsődleges URL",
     "Push URL": "Meghívandó URL",
     needPushEvery: "Ezt az URL-t kell meghívni minden {0} másodpercben.",

src/languages/id-ID.js

@@ -179,6 +179,7 @@ export default {
     "Edit Status Page": "Edit Halaman Status",
     "Go to Dashboard": "Pergi ke Dasbor",
     "Status Page": "Halaman Status",
+    "Status Pages": "Halaman Status",
     defaultNotificationName: "{notification} saya Peringatan ({number})",
     here: "di sini",
     Required: "Dibutuhkan",

src/languages/it-IT.js

@@ -183,6 +183,7 @@ export default {
     "Edit Status Page": "Modifica pagina di stato",
     "Go to Dashboard": "Vai alla dashboard",
     "Status Page": "Pagina di stato",
+    "Status Pages": "Pagina di stato",
     defaultNotificationName: "Notifica {notification} ({number})",
     here: "qui",
     Required: "Obbligatorio",

src/languages/ja.js

@@ -180,6 +180,7 @@ export default {
     "Edit Status Page": "ステータスページ編集",
     "Go to Dashboard": "ダッシュボード",
     "Status Page": "ステータスページ",
+    "Status Pages": "ステータスページ",
     telegram: "Telegram",
     webhook: "Webhook",
     smtp: "Email (SMTP)",

src/languages/ko-KR.js

@@ -179,6 +179,7 @@ export default {
     "Edit Status Page": "상태 페이지 수정",
     "Go to Dashboard": "대시보드로 가기",
     "Status Page": "상태 페이지",
+    "Status Pages": "상태 페이지",
     defaultNotificationName: "내 {notification} 알림 ({number})",
     here: "여기",
     Required: "필수",

src/languages/nb-NO.js

@@ -179,6 +179,7 @@ export default {
     "Edit Status Page": "Rediger statusside",
     "Go to Dashboard": "Gå til Dashboard",
     "Status Page": "Statusside",
+    "Status Pages": "Statusside",
     defaultNotificationName: "Min {notification} varsling ({number})",
     here: "her",
     Required: "Obligatorisk",

src/languages/nl-NL.js

@@ -180,6 +180,7 @@ export default {
     "Edit Status Page": "Wijzig status pagina",
     "Go to Dashboard": "Ga naar Dashboard",
     "Status Page": "Status Pagina",
+    "Status Pages": "Status Pagina",
     telegram: "Telegram",
     webhook: "Webhook",
     smtp: "Email (SMTP)",

src/languages/pl.js

@@ -179,6 +179,7 @@ export default {
     "Edit Status Page": "Edytuj stronę statusu",
     "Go to Dashboard": "Idź do panelu",
     "Status Page": "Strona statusu",
+    "Status Pages": "Strona statusu",
     defaultNotificationName: "Moje powiadomienie {notification} ({number})",
     here: "tutaj",
     Required: "Wymagane",

src/languages/pt-BR.js

@@ -169,6 +169,7 @@ export default {
     "Avg. Ping": "Ping Médio.",
     "Avg. Response": "Resposta Média. ",
     "Status Page": "Página de Status",
+    "Status Pages": "Página de Status",
     "Entry Page": "Página de entrada",
     statusPageNothing: "Nada aqui, por favor, adicione um grupo ou monitor.",
     "No Services": "Nenhum Serviço",

src/languages/ru-RU.js

@@ -181,6 +181,7 @@ export default {
     "Edit Status Page": "Редактировать",
     "Go to Dashboard": "Панель управления",
     "Status Page": "Мониторинг",
+    "Status Pages": "Página de Status",
     Discard: "Отмена",
     "Create Incident": "Создать инцидент",
     "Switch to Dark Theme": "Тёмная тема",

src/languages/sl-SI.js

@@ -182,7 +182,8 @@ export default {
     "Add a monitor": "Dodaj monitor",
     "Edit Status Page": "Uredi statusno stran",
     "Go to Dashboard": "Pojdi na nadzorno ploščo",
-    "Status Page": "Status",
+    "Status Page": "Página de Status",
+    "Status Pages": "Página de Status",
     defaultNotificationName: "Moje {notification} Obvestilo ({number})",
     here: "tukaj",
     Required: "Obvezno",

src/languages/sr-latn.js

@@ -180,6 +180,7 @@ export default {
     "Edit Status Page": "Edit Status Page",
     "Go to Dashboard": "Go to Dashboard",
     "Status Page": "Status Page",
+    "Status Pages": "Status Pages",
     telegram: "Telegram",
     webhook: "Webhook",
     smtp: "Email (SMTP)",

src/languages/sr.js

@@ -180,6 +180,7 @@ export default {
     "Edit Status Page": "Edit Status Page",
     "Go to Dashboard": "Go to Dashboard",
     "Status Page": "Status Page",
+    "Status Pages": "Status Pages",
     telegram: "Telegram",
     webhook: "Webhook",
     smtp: "Email (SMTP)",

src/languages/sv-SE.js

@@ -108,94 +108,4 @@ export default {
     "Repeat Password": "Upprepa Lösenord",
     respTime: "Svarstid (ms)",
     notAvailableShort: "Ej Tillg.",
-    Create: "Create",
-    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
-    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
-    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
-    "Clear Data": "Clear Data",
-    Events: "Events",
-    Heartbeats: "Heartbeats",
-    "Auto Get": "Auto Get",
-    enableDefaultNotificationDescription: "For every new monitor this notification will be enabled by default. You can still disable the notification separately for each monitor.",
-    "Default enabled": "Default enabled",
-    "Also apply to existing monitors": "Also apply to existing monitors",
-    Export: "Export",
-    Import: "Import",
-    backupDescription: "You can backup all monitors and all notifications into a JSON file.",
-    backupDescription2: "PS: History and event data is not included.",
-    backupDescription3: "Sensitive data such as notification tokens is included in the export file, please keep it carefully.",
-    alertNoFile: "Please select a file to import.",
-    alertWrongFileType: "Please select a JSON file.",
-    twoFAVerifyLabel: "Please type in your token to verify that 2FA is working",
-    tokenValidSettingsMsg: "Token is valid! You can now save the 2FA settings.",
-    confirmEnableTwoFAMsg: "Are you sure you want to enable 2FA?",
-    confirmDisableTwoFAMsg: "Are you sure you want to disable 2FA?",
-    "Apply on all existing monitors": "Apply on all existing monitors",
-    "Verify Token": "Verify Token",
-    "Setup 2FA": "Setup 2FA",
-    "Enable 2FA": "Enable 2FA",
-    "Disable 2FA": "Disable 2FA",
-    "2FA Settings": "2FA Settings",
-    "Two Factor Authentication": "Two Factor Authentication",
-    Active: "Active",
-    Inactive: "Inactive",
-    Token: "Token",
-    "Show URI": "Show URI",
-    "Clear all statistics": "Clear all Statistics",
-    retryCheckEverySecond: "Retry every {0} seconds.",
-    importHandleDescription: "Choose 'Skip existing' if you want to skip every monitor or notification with the same name. 'Overwrite' will delete every existing monitor and notification.",
-    confirmImportMsg: "Are you sure to import the backup? Please make sure you've selected the right import option.",
-    "Heartbeat Retry Interval": "Heartbeat Retry Interval",
-    "Import Backup": "Import Backup",
-    "Export Backup": "Export Backup",
-    "Skip existing": "Skip existing",
-    Overwrite: "Overwrite",
-    Options: "Options",
-    "Keep both": "Keep both",
-    Tags: "Tags",
-    "Add New below or Select...": "Add New below or Select...",
-    "Tag with this name already exist.": "Tag with this name already exist.",
-    "Tag with this value already exist.": "Tag with this value already exist.",
-    color: "color",
-    "value (optional)": "value (optional)",
-    Gray: "Gray",
-    Red: "Red",
-    Orange: "Orange",
-    Green: "Green",
-    Blue: "Blue",
-    Indigo: "Indigo",
-    Purple: "Purple",
-    Pink: "Pink",
-    "Search...": "Search...",
-    "Avg. Ping": "Avg. Ping",
-    "Avg. Response": "Avg. Response",
-    "Entry Page": "Entry Page",
-    statusPageNothing: "Nothing here, please add a group or a monitor.",
-    "No Services": "No Services",
-    "All Systems Operational": "All Systems Operational",
-    "Partially Degraded Service": "Partially Degraded Service",
-    "Degraded Service": "Degraded Service",
-    "Add Group": "Add Group",
-    "Add a monitor": "Add a monitor",
-    "Edit Status Page": "Edit Status Page",
-    "Go to Dashboard": "Go to Dashboard",
-    "Status Page": "Status Page",
-    telegram: "Telegram",
-    webhook: "Webhook",
-    smtp: "Email (SMTP)",
-    discord: "Discord",
-    teams: "Microsoft Teams",
-    signal: "Signal",
-    gotify: "Gotify",
-    slack: "Slack",
-    "rocket.chat": "Rocket.chat",
-    pushover: "Pushover",
-    pushy: "Pushy",
-    octopush: "Octopush",
-    promosms: "PromoSMS",
-    lunasea: "LunaSea",
-    apprise: "Apprise (Support 50+ Notification services)",
-    pushbullet: "Pushbullet",
-    line: "Line Messenger",
-    mattermost: "Mattermost",
 };

src/languages/tr-TR.js

@@ -149,52 +149,4 @@ export default {
     "Two Factor Authentication": "İki Faktörlü Kimlik Doğrulama (2FA)",
     Active: "Aktif",
     Inactive: "İnaktif",
-    Token: "Token",
-    "Show URI": "Show URI",
-    Tags: "Tags",
-    "Add New below or Select...": "Add New below or Select...",
-    "Tag with this name already exist.": "Tag with this name already exist.",
-    "Tag with this value already exist.": "Tag with this value already exist.",
-    color: "color",
-    "value (optional)": "value (optional)",
-    Gray: "Gray",
-    Red: "Red",
-    Orange: "Orange",
-    Green: "Green",
-    Blue: "Blue",
-    Indigo: "Indigo",
-    Purple: "Purple",
-    Pink: "Pink",
-    "Search...": "Search...",
-    "Avg. Ping": "Avg. Ping",
-    "Avg. Response": "Avg. Response",
-    "Entry Page": "Entry Page",
-    statusPageNothing: "Nothing here, please add a group or a monitor.",
-    "No Services": "No Services",
-    "All Systems Operational": "All Systems Operational",
-    "Partially Degraded Service": "Partially Degraded Service",
-    "Degraded Service": "Degraded Service",
-    "Add Group": "Add Group",
-    "Add a monitor": "Add a monitor",
-    "Edit Status Page": "Edit Status Page",
-    "Go to Dashboard": "Go to Dashboard",
-    "Status Page": "Status Page",
-    telegram: "Telegram",
-    webhook: "Webhook",
-    smtp: "Email (SMTP)",
-    discord: "Discord",
-    teams: "Microsoft Teams",
-    signal: "Signal",
-    gotify: "Gotify",
-    slack: "Slack",
-    "rocket.chat": "Rocket.chat",
-    pushover: "Pushover",
-    pushy: "Pushy",
-    octopush: "Octopush",
-    promosms: "PromoSMS",
-    lunasea: "LunaSea",
-    apprise: "Apprise (Support 50+ Notification services)",
-    pushbullet: "Pushbullet",
-    line: "Line Messenger",
-    mattermost: "Mattermost",
 };

src/languages/vi-VN.js

@@ -183,6 +183,7 @@ export default {
     "Edit Status Page": "Sửa trang trạng thái",
     "Go to Dashboard": "Đi tới Dashboard",
     "Status Page": "Trang trạng thái",
+    "Status Pages": "Trang trạng thái",
     defaultNotificationName: "My {notification} Alerts ({number})",
     here: "tại đây",
     Required: "Bắt buộc",

src/languages/zh-CN.js

@@ -185,6 +185,7 @@ export default {
     "Edit Status Page": "编辑状态页面",
     "Go to Dashboard": "前往仪表盘",
     "Status Page": "状态页面",
+    "Status Pages": "状态页面",
     defaultNotificationName: "{notification} 通知（{number}）",
     here: "这里",
     Required: "必填",

src/languages/zh-HK.js

@@ -96,7 +96,7 @@ export default {
     Test: "測試",
     keywordDescription: "搜索 HTML 或 JSON 裡是否有出現關鍵字（注意英文大細階）",
     "Certificate Info": "憑證詳細資料",
-    deleteMonitorMsg: "是否確定刪除這個監測器",
+    deleteMonitorMsg: "是否確定刪除這個監測器？",
     deleteNotificationMsg: "是否確定刪除這個通知設定？如監測器啟用了這個通知，將會收不到通知。",
     "Resolver Server": "DNS 伺服器",
     "Resource Record Type": "DNS 記錄類型",
@@ -180,6 +180,7 @@ export default {
     "Edit Status Page": "編輯 Status Page",
     "Go to Dashboard": "前往主控台",
     "Status Page": "Status Page",
+    "Status Pages": "Status Pages",
     telegram: "Telegram",
     webhook: "Webhook",
     smtp: "電郵 (SMTP)",
@@ -198,4 +199,5 @@ export default {
     pushbullet: "Pushbullet",
     line: "Line Messenger",
     mattermost: "Mattermost",
+    deleteStatusPageMsg: "是否確定刪除這個 Status Page？",
 };

src/languages/zh-TW.js

@@ -183,6 +183,7 @@ export default {
     "Edit Status Page": "編輯狀態頁",
     "Go to Dashboard": "前往儀表板",
     "Status Page": "狀態頁",
+    "Status Pages": "狀態頁",
     defaultNotificationName: "我的 {notification} 通知 ({number})",
     here: "此處",
     Required: "必填",

src/layouts/Layout.vue

@@ -18,10 +18,10 @@
             </a>
 
             <ul class="nav nav-pills">
-                <li class="nav-item me-2">
+                <li v-if="$root.loggedIn" class="nav-item me-2">
-                    <a href="/status" class="nav-link status-page">
+                    <router-link to="/manage-status-page" class="nav-link">
-                        <font-awesome-icon icon="stream" /> {{ $t("Status Page") }}
+                        <font-awesome-icon icon="stream" /> {{ $t("Status Pages") }}
-                    </a>
+                    </router-link>
                 </li>
                 <li v-if="$root.loggedIn" class="nav-item me-2">
                     <router-link to="/dashboard" class="nav-link">

src/mixins/socket.js

@@ -7,9 +7,9 @@ const toast = useToast();
 let socket;
 
 const noSocketIOPages = [
-    "/status-page",
+    /^\/status-page$/,  //  /status-page
-    "/status",
+    /^\/status/,    // /status**
-    "/"
+    /^\/$/      //  /
 ];
 
 const favicon = new Favico({
@@ -38,6 +38,8 @@ export default {
             uptimeList: { },
             tlsInfoList: {},
             notificationList: [],
+            statusPageListLoaded: false,
+            statusPageList: [],
             connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
         };
     },
@@ -56,8 +58,12 @@ export default {
             }
 
             // No need to connect to the socket.io for status page
-            if (! bypass && noSocketIOPages.includes(location.pathname)) {
+            if (! bypass && location.pathname) {
-                return;
+                for (let page of noSocketIOPages) {
+                    if (location.pathname.match(page)) {
+                        return;
+                    }
+                }
             }
 
             this.socket.initedSocketIO = true;
@@ -108,6 +114,11 @@ export default {
                 this.notificationList = data;
             });
 
+            socket.on("statusPageList", (data) => {
+                this.statusPageListLoaded = true;
+                this.statusPageList = data;
+            });
+
             socket.on("heartbeat", (data) => {
                 if (! (data.monitorID in this.heartbeatList)) {
                     this.heartbeatList[data.monitorID] = [];
@@ -244,6 +255,14 @@ export default {
             }
         },
 
+        toastSuccess(msg) {
+            toast.success(msg);
+        },
+
+        toastError(msg) {
+            toast.error(msg);
+        },
+
         login(username, password, token, callback) {
             socket.emit("login", {
                 username,
@@ -437,7 +456,6 @@ export default {
         "stats.down"(to, from) {
             if (to !== from) {
                 favicon.badge(to);
-                console.log(to);
             }
         },
 
@@ -454,9 +472,15 @@ export default {
 
         // Reconnect the socket io, if status-page to dashboard
         "$route.fullPath"(newValue, oldValue) {
-            if (noSocketIOPages.includes(newValue)) {
+
-                return;
+            if (newValue) {
+                for (let page of noSocketIOPages) {
+                    if (newValue.match(page)) {
+                        return;
+                    }
+                }
             }
+
             this.initSocketIO();
         },
 

src/mixins/theme.js

@@ -33,7 +33,7 @@ export default {
                 return "light";
             }
 
-            if (this.path === "/status-page" || this.path === "/status") {
+            if (this.path.startsWith("/status-page") || this.path.startsWith("/status")) {
                 return this.statusPageTheme;
             } else {
                 if (this.userTheme === "auto") {

src/pages/AddStatusPage.vue

@@ -0,0 +1,79 @@
+<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>
+                                <li>{{ $t("Start or end with") }} <mark>a-z</mark> <mark>0-9</mark> only</li>
+                                <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/ManageStatusPage.vue

@@ -0,0 +1,118 @@
+<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="$root.statusPageList.length === 0" class="d-flex align-items-center justify-content-center my-3 spinner">
+                        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/Settings.vue

@@ -167,6 +167,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 {

src/pages/StatusPage.vue

@@ -1,45 +1,54 @@
 <template>
     <div v-if="loadedTheme" class="container mt-3">
-        <!-- Logo & Title -->
+        <!-- Sidebar for edit mode -->
-        <h1 class="mb-4">
+        <div v-if="enableEditMode" class="sidebar">
-            <!-- Logo -->
+            <div class="my-3">
-            <span class="logo-wrapper" @click="showImageCropUploadMethod">
+                <label for="slug" class="form-label">{{ $t("Slug") }}</label>
-                <img :src="logoURL" alt class="logo me-2" :class="logoClass" />
+                <div class="input-group">
-                <font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
+                    <span id="basic-addon3" class="input-group-text">/status/</span>
-            </span>
+                    <input id="slug" v-model="config.slug" type="text" class="form-control">
-
+                </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"
-            />
-
-            <!-- Title -->
-            <Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
-        </h1>
-
-        <!-- 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>
-
-                <a href="/dashboard" class="btn btn-info">
-                    <font-awesome-icon icon="tachometer-alt" />
-                    {{ $t("Go to Dashboard") }}
-                </a>
             </div>
 
-            <div v-else>
+            <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 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 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="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>
+
+            <div class="danger-zone">
+                <button class="btn btn-danger me-2" @click="deleteDialog">
+                    <font-awesome-icon icon="trash" />
+                    {{ $t("Delete") }}
+                </button>
+            </div>
+
+            <!-- Sidebar Footer -->
+            <div class="sidebar-footer">
                 <button class="btn btn-success me-2" @click="save">
                     <font-awesome-icon icon="save" />
                     {{ $t("Save") }}
@@ -49,167 +58,182 @@
                     <font-awesome-icon icon="save" />
                     {{ $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 -->
+        <!-- Main Status Page -->
-        <div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
+        <div :class="{ edit: enableEditMode}" class="main">
-            <strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
+            <!-- Logo & Title -->
-            <Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" />
+            <h1 class="mb-4 title-flex">
-
+                <!-- Logo -->
-            <strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
+                <span class="logo-wrapper" @click="showImageCropUploadMethod">
-            <Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />
+                    <img :src="logoURL" alt class="logo me-2" :class="logoClass" />
-
+                    <font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
-            <!-- 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) }})
                 </span>
-            </div>
 
-            <div v-if="editMode" class="mt-3">
+                <!-- Uploader -->
-                <button v-if="editIncidentMode" class="btn btn-light me-2" @click="postIncident">
+                <!--    url="/api/status-page/upload-logo" -->
-                    <font-awesome-icon icon="bullhorn" />
+                <ImageCropUpload v-model="showImageCropUpload"
-                    {{ $t("Post") }}
+                                 field="img"
-                </button>
+                                 :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">
+                <!-- Title -->
-                    <font-awesome-icon icon="edit" />
+                <Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
-                    {{ $t("Edit") }}
+            </h1>
-                </button>
 
-                <button v-if="editIncidentMode" class="btn btn-light me-2" @click="cancelIncident">
+            <!-- Admin functions -->
-                    <font-awesome-icon icon="times" />
+            <div v-if="hasToken" class="mb-4">
-                    {{ $t("Cancel") }}
+                <div v-if="!enableEditMode">
-                </button>
+                    <button class="btn btn-info me-2" @click="edit">
-
+                        <font-awesome-icon icon="edit" />
-                <div v-if="editIncidentMode" class="dropdown d-inline-block me-2">
+                        {{ $t("Edit Status Page") }}
-                    <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">
+                    <a href="/manage-status-page" class="btn btn-info">
-                    <font-awesome-icon icon="unlink" />
+                        <font-awesome-icon icon="tachometer-alt" />
-                    {{ $t("Unpin") }}
+                        {{ $t("Go to Dashboard") }}
-                </button>
+                    </a>
-            </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") }}
                 </div>
 
                 <div v-else>
-                    <font-awesome-icon icon="question-circle" style="color: #efefef;" />
+                    <button class="btn btn-primary btn-add-group me-2" @click="createIncident">
-                </div>
+                        <font-awesome-icon icon="bullhorn" />
-            </template>
+                        {{ $t("Create Incident") }}
-        </div>
+                    </button>
-
-        <!-- 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">
+            <!-- Incident -->
-            <div v-if="$root.publicGroupList.length === 0 && loadedData" class="text-center">
+            <div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
-                <!-- 👀 Nothing here, please add a group or a monitor. -->
+                <strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
-                👀 {{ $t("statusPageNothing") }}
+                <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) }})
+                    </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">
+        <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteStatusPage">
-            {{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
+            {{ $t("deleteStatusPageMsg") }}
-        </footer>
+        </Confirm>
     </div>
 </template>
 
@@ -221,6 +245,8 @@ import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_PARTIAL_DOWN, UP
 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();
 
@@ -235,7 +261,8 @@ const favicon = new Favico({
 export default {
     components: {
         PublicGroupList,
-        ImageCropUpload
+        ImageCropUpload,
+        Confirm,
     },
 
     // Leave Page for vue route change
@@ -253,6 +280,7 @@ export default {
 
     data() {
         return {
+            slug: null,
             enableEditMode: false,
             enableEditIncidentMode: false,
             hasToken: false,
@@ -265,6 +293,8 @@ export default {
             loadedTheme: false,
             loadedData: false,
             baseURL: "",
+            clickedEditButton: false,
+            domainNamesPlaceholder: "domain1.com\ndomain2.com\n..."
         };
     },
     computed: {
@@ -302,15 +332,7 @@ export default {
         },
 
         isPublished() {
-            return this.config.statusPagePublished;
+            return this.config.published;
-        },
-
-        theme() {
-            return this.config.statusPageTheme;
-        },
-
-        tagsVisible() {
-            return this.config.statusPageTags;
         },
 
         logoClass() {
@@ -384,13 +406,28 @@ export default {
         },
 
         // Set Theme
-        "config.statusPageTheme"() {
+        "config.theme"() {
-            this.$root.statusPageTheme = this.config.statusPageTheme;
+            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;
+                        }
+                    }
+                }
+            }
         }
 
     },
@@ -409,28 +446,24 @@ export default {
         });
 
         // Special handle for dev
-        const env = process.env.NODE_ENV;
+        this.baseURL = getResBaseURL();
-        if (env === "development" || localStorage.dev === "dev") {
-            this.baseURL = location.protocol + "//" + location.hostname + ":3001";
-        }
     },
     async mounted() {
-        axios.get("/api/status-page/config").then((res) => {
+        this.slug = this.$route.params.slug;
-            this.config = res.data;
 
-            if (this.config.logo) {
+        if (!this.slug) {
-                this.imgDataUrl = this.config.logo;
+            this.slug = "default";
+        }
+
+        axios.get("/api/status-page/" + this.slug).then((res) => {
+            this.config = res.data.config;
+
+            if (this.config.icon) {
+                this.imgDataUrl = this.config.icon;
             }
-        });
 
-        axios.get("/api/status-page/incident").then((res) => {
+            this.incident = res.data.incident;
-            if (res.data.ok) {
+            this.$root.publicGroupList = res.data.publicGroupList;
-                this.incident = res.data.incident;
-            }
-        });
-
-        axios.get("/api/status-page/monitor-list").then((res) => {
-            this.$root.publicGroupList = res.data;
         });
 
         // 5mins a loop
@@ -438,13 +471,19 @@ 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) => {
+                axios.get("/api/status-page/heartbeat/" + this.slug).then((res) => {
                     const { heartbeatList, uptimeList } = res.data;
 
                     this.$root.heartbeatList = heartbeatList;
@@ -470,16 +509,48 @@ export default {
         },
 
         edit() {
-            this.$root.initSocketIO(true);
+            if (this.hasToken) {
-            this.enableEditMode = true;
+                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.$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);
                 }
@@ -504,30 +575,7 @@ export default {
         },
 
         discard() {
-            location.reload();
+            location.href = "/status/" + this.slug;
-        },
-
-        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 : []
-                        };
-                    })
-                };
-            });
         },
 
         /**
@@ -563,7 +611,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;
@@ -594,7 +642,7 @@ export default {
         },
 
         unpinIncident() {
-            this.$root.getSocket().emit("unpinIncident", () => {
+            this.$root.getSocket().emit("unpinIncident", this.slug, () => {
                 this.incident = null;
             });
         },
@@ -637,6 +685,40 @@ h1 {
     }
 }
 
+.main {
+    transition: all ease-in-out 0.1s;
+
+    &.edit {
+        margin-left: 300px;
+    }
+}
+
+.sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 300px;
+    height: 100vh;
+    padding: 15px 15px 68px 15px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-right: 1px solid #ededed;
+
+    .danger-zone {
+        border-top: 1px solid #ededed;
+        padding-top: 15px;
+    }
+
+    .sidebar-footer {
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        padding: 15px;
+        position: absolute;
+        border-top: 1px solid #ededed;
+    }
+}
+
 footer {
     text-align: center;
     font-size: 14px;
@@ -646,6 +728,12 @@ footer {
     min-width: 50px;
 }
 
+.title-flex {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
 .logo-wrapper {
     display: inline-block;
     position: relative;
@@ -704,4 +792,19 @@ 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-top-color: $dark-border-color;
+        }
+    }
+}
+
 </style>

src/router.js

@@ -18,6 +18,8 @@ import MonitorHistory from "./components/settings/MonitorHistory.vue";
 import Security from "./components/settings/Security.vue";
 import Backup from "./components/settings/Backup.vue";
 import About from "./components/settings/About.vue";
+import ManageStatusPage from "./pages/ManageStatusPage.vue";
+import AddStatusPage from "./pages/AddStatusPage.vue";
 
 const routes = [
     {
@@ -98,6 +100,14 @@ const routes = [
                             },
                         ]
                     },
+                    {
+                        path: "/manage-status-page",
+                        component: ManageStatusPage,
+                    },
+                    {
+                        path: "/add-status-page",
+                        component: AddStatusPage,
+                    },
                 ],
             },
         ],
@@ -114,6 +124,10 @@ const routes = [
         path: "/status",
         component: StatusPage,
     },
+    {
+        path: "/status/:slug",
+        component: StatusPage,
+    },
 ];
 
 export const router = createRouter({

src/util-frontend.js

@@ -51,7 +51,19 @@ export function timezoneList() {
 }
 
 export function setPageLocale() {
-    const html = document.documentElement
+    const html = document.documentElement;
-    html.setAttribute('lang', currentLocale() )
+    html.setAttribute("lang", currentLocale() );
-    html.setAttribute('dir', localeDirection() )
+    html.setAttribute("dir", localeDirection() );
+}
+
+/**
+ * Mainly used for dev, because the backend and the frontend are in different ports.
+ */
+export function getResBaseURL() {
+    const env = process.env.NODE_ENV;
+    if (env === "development" || localStorage.dev === "dev") {
+        return location.protocol + "//" + location.hostname + ":3001";
+    } else {
+        return "";
+    }
 }