[Status Page] Delete status page

src/languages/en.js

@@ -331,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",
-    Discard: "Discard",
-    Cancel: "Cancel",
+    "Services": "Services",
+    "Discard": "Discard",
+    "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",
@@ -353,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",
@@ -370,4 +370,5 @@ export default {
     alertaApiKey: "API Key",
     alertaAlertState: "Alert State",
     alertaRecoverState: "Recover State",
+    deleteStatusPageMsg: "Are you sure want to delete this status page?",
 };

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 記錄類型",
@@ -199,4 +199,5 @@ export default {
     pushbullet: "Pushbullet",
     line: "Line Messenger",
     mattermost: "Mattermost",
+    deleteStatusPageMsg: "是否確定刪除這個 Status Page？",
 };

src/pages/StatusPage.vue

@@ -40,10 +40,12 @@
                 <textarea id="cname" v-model="config.domanNames" rows="3" disabled class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
             </div>
 
-            <button class="btn btn-danger me-2" @click="discard">
-                <font-awesome-icon icon="trash" />
-                {{ $t("Delete") }}
-            </button>
+            <div class="danger-zone">
+                <button class="btn btn-danger me-2" @click="deleteDialog">
+                    <font-awesome-icon icon="trash" />
+                    {{ $t("Delete") }}
+                </button>
+            </div>
 
             <!-- Sidebar Footer -->
             <div class="sidebar-footer">
@@ -228,6 +230,10 @@
                 {{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
             </footer>
         </div>
+
+        <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteStatusPage">
+            {{ $t("deleteStatusPageMsg") }}
+        </Confirm>
     </div>
 </template>
 
@@ -240,6 +246,7 @@ 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();
 
@@ -254,7 +261,8 @@ const favicon = new Favico({
 export default {
     components: {
         PublicGroupList,
-        ImageCropUpload
+        ImageCropUpload,
+        Confirm,
     },
 
     // Leave Page for vue route change
@@ -533,6 +541,21 @@ export default {
             });
         },
 
+        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);
+                }
+            });
+        },
+
         monitorSelectorLabel(monitor) {
             return `${monitor.name}`;
         },
@@ -573,8 +596,6 @@ export default {
                         })
                     };
                 });
-            } else {
-
             }
 
         },
@@ -705,6 +726,11 @@ h1 {
     overflow-y: auto;
     border-right: 1px solid #ededed;
 
+    .danger-zone {
+        border-top: 1px solid #ededed;
+        padding-top: 15px;
+    }
+
     .sidebar-footer {
         width: 100%;
         bottom: 0;
@@ -793,6 +819,10 @@ footer {
         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;
         }