From 719a136d1eaa69daa5a67e7e047634e58af552dd Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Thu, 17 Mar 2022 22:44:47 +0800
Subject: [PATCH] [Status Page] Improved entry page

---
 server/server.js                    |  4 ++--
 src/components/settings/General.vue | 18 +++++++++---------
 src/pages/AddStatusPage.vue         | 27 ++++++++++++++++++++-------
 src/pages/ManageStatusPage.vue      |  4 +++-
 4 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/server/server.js b/server/server.js
index 043d85bb7..34a23c9ea 100644
--- a/server/server.js
+++ b/server/server.js
@@ -201,8 +201,8 @@ exports.entryPage = "dashboard";
 
     // Entry Page
     app.get("/", async (_request, response) => {
-        if (exports.entryPage === "statusPage") {
-            response.redirect("/status");
+        if (exports.entryPage && exports.entryPage.startsWith("statusPage-")) {
+            response.redirect("/status/" + exports.entryPage.replace("statusPage-", ""));
         } else {
             response.redirect("/dashboard");
         }
diff --git a/src/components/settings/General.vue b/src/components/settings/General.vue
index 459bb8d5d..e6896945c 100644
--- a/src/components/settings/General.vue
+++ b/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"
-                        value="statusPage"
+                        name="entryPage"
+                        :value="'statusPage-' + statusPage.slug"
                         required
                     />
-                    <label class="form-check-label" for="entryPageNo">
-                        {{ $t("Status Page") }}
+                    <label class="form-check-label" :for="'status-page-' + statusPage.id">
+                        {{ $t("Status Page") }} - {{ statusPage.title }}
                     </label>
                 </div>
             </div>
diff --git a/src/pages/AddStatusPage.vue b/src/pages/AddStatusPage.vue
index 7754116fc..f14ebfa6c 100644
--- a/src/pages/AddStatusPage.vue
+++ b/src/pages/AddStatusPage.vue
@@ -6,14 +6,21 @@
             </h1>
 
             <div class="shadow-box">
-                <div class="my-3">
-                    <label for="name" class="form-label">{{ $t("Status Page Name") }}</label>
-                    <input id="name" v-model="statusPage.basic_auth_user" type="text" class="form-control">
+                <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>
 
-                <div class="my-3">
-                    <label for="basicauth" class="form-label">{{ $t("Password") }}</label>
-                    <input id="basicauth-pass" v-model="statusPage.basic_auth_pass" type="password" autocomplete="new-password" class="form-control" :placeholder="$t('Password')">
+                <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>
+                </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>
@@ -29,9 +36,15 @@ export default {
         return {
             statusPage: {
 
-            }
+            },
+            processing: false,
         };
     }
 };
 </script>
 
+<style lang="scss" scoped>
+.shadow-box {
+    padding: 20px;
+}
+</style>
diff --git a/src/pages/ManageStatusPage.vue b/src/pages/ManageStatusPage.vue
index 0eafb3e35..c6a8b7f50 100644
--- a/src/pages/ManageStatusPage.vue
+++ b/src/pages/ManageStatusPage.vue
@@ -11,7 +11,9 @@
 
             <div class="shadow-box">
                 <template v-if="$root.statusPageListLoaded">
-                    <span v-if="$root.statusPageList.length === 0">No status pages</span>
+                    <span v-if="$root.statusPageList.length === 0" class="d-flex align-items-center justify-content-center my-3 spinner">
+                        No status pages
+                    </span>
 
                     <router-link v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :to="'/status/' + statusPage.slug" class="item">
                         <img :src="icon(statusPage.icon)" alt class="logo me-2" />