[Status Page] Add a new status page

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

@@ -185,7 +185,7 @@ module.exports.statusPageSocketHandler = (socket) => {
             });
 
         } catch (error) {
-            console.log(error);
+            console.error(error);
 
             callback({
                 ok: false,
@@ -194,4 +194,52 @@ 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,
+            });
+        }
+    });
+
 };

src/mixins/socket.js

@@ -255,6 +255,14 @@ export default {
             }
         },
 
+        toastSuccess(msg) {
+            toast.success(msg);
+        },
+
+        toastError(msg) {
+            toast.error(msg);
+        },
+
         login(username, password, token, callback) {
             socket.emit("login", {
                 username,

src/pages/AddStatusPage.vue

@@ -5,24 +5,33 @@
                 {{ $t("Add New Status Page") }}
             </h1>
 
-            <div class="shadow-box">
-                <div class="mb-3">
-                    <label for="name" class="form-label">{{ $t("Name") }}</label>
-                    <input id="name" v-model="statusPage.title" type="text" class="form-control">
-                </div>
+            <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="statusPage.slug" type="text" class="form-control">
+                    <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>
-
-                <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>
@@ -34,11 +43,31 @@ export default {
     },
     data() {
         return {
-            statusPage: {
-
-            },
+            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) {
+                    this.$router.push("/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>