Render <StatusPage> if domain matched

src/icon.js

@@ -37,6 +37,7 @@ import {
     faPen,
     faExternalLinkSquareAlt,
     faSpinner,
+    faUndo,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -73,6 +74,7 @@ library.add(
     faPen,
     faExternalLinkSquareAlt,
     faSpinner,
+    faUndo,
 );
 
 export { FontAwesomeIcon };

src/pages/Entry.vue

@@ -1,23 +1,44 @@
 <template>
     <div>
-        <!--
-            TODO: If the domain name matched, directly render the <StatusPage> component.
-        -->
+        <StatusPage v-if="statusPageSlug" override-slug="statusPageSlug" />
     </div>
 </template>
 
 <script>
 import axios from "axios";
+import StatusPage from "./StatusPage.vue";
 
 export default {
+    components: {
+        StatusPage,
+    },
+    data() {
+        return {
+            statusPageSlug: null,
+        };
+    },
     async mounted() {
-        let entryPage = (await axios.get("/api/entry-page")).data;
 
-        if (entryPage === "statusPage") {
-            this.$router.push("/status");
+        // There are only 2 cases that could come in here.
+        // 1. Matched status Page domain name
+        // 2. Vue Frontend Dev
+        let res = (await axios.get("/api/entry-page")).data;
+
+        if (res.type === "statusPageMatchedDomain") {
+            this.statusPageSlug = res.statusPageSlug;
+
+        } else if (res.type === "entryPage") {          // Dev only
+            const entryPage = res.entryPage;
+
+            if (entryPage === "statusPage") {
+                this.$router.push("/status");
+            } else {
+                this.$router.push("/dashboard");
+            }
         } else {
             this.$router.push("/dashboard");
         }
+
     },
 
 };

src/pages/StatusPage.vue

@@ -35,9 +35,9 @@
                 <input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
             </div>
 
-            <div v-if="false" class="my-3">
-                <label for="cname" class="form-label">Domain Names <sup>Coming Soon</sup></label>
-                <textarea id="cname" v-model="config.domanNames" rows="3" disabled class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
+            <div class="my-3">
+                <label for="cname" class="form-label">Domain Names</label>
+                <textarea id="cname" v-model="config.domanNames" rows="3" class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
             </div>
 
             <div class="danger-zone">
@@ -55,7 +55,7 @@
                 </button>
 
                 <button class="btn btn-danger me-2" @click="discard">
-                    <font-awesome-icon icon="save" />
+                    <font-awesome-icon icon="undo" />
                     {{ $t("Discard") }}
                 </button>
             </div>
@@ -259,6 +259,7 @@ const favicon = new Favico({
 });
 
 export default {
+
     components: {
         PublicGroupList,
         ImageCropUpload,
@@ -278,6 +279,14 @@ export default {
         next();
     },
 
+    props: {
+        overrideSlug: {
+            type: String,
+            required: false,
+            default: null,
+        },
+    },
+
     data() {
         return {
             slug: null,
@@ -294,7 +303,7 @@ export default {
             loadedData: false,
             baseURL: "",
             clickedEditButton: false,
-            domainNamesPlaceholder: "domain1.com\ndomain2.com\n..."
+            domainNamesPlaceholder: "example1.com\nexample2.com\n..."
         };
     },
     computed: {
@@ -449,7 +458,7 @@ export default {
         this.baseURL = getResBaseURL();
     },
     async mounted() {
-        this.slug = this.$route.params.slug;
+        this.slug = this.overrideSlug || this.$route.params.slug;
 
         if (!this.slug) {
             this.slug = "default";