From 8e441dd8f70028b823f465a4d47e18f49b4d2d97 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sat, 14 Oct 2023 19:00:27 +0800
Subject: [PATCH] Follow up #3263 (#3847)

---
 src/components/APIKeyDialog.vue            |  4 +---
 src/components/DockerHostDialog.vue        |  4 +---
 src/components/PingChart.vue               |  5 +----
 src/components/TagEditDialog.vue           |  6 ++----
 src/components/TagsManager.vue             | 10 ++++------
 src/components/TwoFADialog.vue             | 12 +++++-------
 src/components/notifications/Telegram.vue  |  4 +---
 src/components/settings/APIKeys.vue        |  8 +-------
 src/components/settings/Backup.vue         |  9 +--------
 src/components/settings/MonitorHistory.vue |  7 ++-----
 src/components/settings/Tags.vue           |  4 +---
 src/mixins/socket.js                       |  4 ++--
 src/pages/AddStatusPage.vue                |  2 +-
 src/pages/Details.vue                      |  6 ++----
 src/pages/EditMaintenance.vue              | 21 +++++++++------------
 src/pages/EditMonitor.vue                  | 13 +++++--------
 src/pages/MaintenanceDetails.vue           |  8 ++------
 src/pages/ManageMaintenance.vue            |  6 +-----
 src/pages/Setup.vue                        |  5 +----
 src/pages/SetupDatabase.vue                |  2 +-
 src/pages/StatusPage.vue                   |  8 ++++----
 21 files changed, 48 insertions(+), 100 deletions(-)

diff --git a/src/components/APIKeyDialog.vue b/src/components/APIKeyDialog.vue
index ac9cffe36..a103cf097 100644
--- a/src/components/APIKeyDialog.vue
+++ b/src/components/APIKeyDialog.vue
@@ -92,11 +92,9 @@
 
 <script lang="ts">
 import { Modal } from "bootstrap";
-import { useToast } from "vue-toastification";
 import dayjs from "dayjs";
 import Datepicker from "@vuepic/vue-datepicker";
 import CopyableInput from "./CopyableInput.vue";
-const toast = useToast();
 
 export default {
     components: {
@@ -158,7 +156,7 @@ export default {
                     this.keymodal.show();
                     this.clearForm();
                 } else {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 }
             });
         },
diff --git a/src/components/DockerHostDialog.vue b/src/components/DockerHostDialog.vue
index 2744264a6..406156bc6 100644
--- a/src/components/DockerHostDialog.vue
+++ b/src/components/DockerHostDialog.vue
@@ -62,8 +62,6 @@
 <script lang="ts">
 import { Modal } from "bootstrap";
 import Confirm from "./Confirm.vue";
-import { useToast } from "vue-toastification";
-const toast = useToast();
 
 export default {
     components: {
@@ -120,7 +118,7 @@ export default {
                 }
 
                 if (!found) {
-                    toast.error("Docker Host not found!");
+                    this.$root.toastError("Docker Host not found!");
                 }
 
             } else {
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 9502eb84c..c550b4b4f 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -21,11 +21,8 @@ import { BarController, BarElement, Chart, Filler, LinearScale, LineController,
 import "chartjs-adapter-dayjs-4";
 import dayjs from "dayjs";
 import { Line } from "vue-chartjs";
-import { useToast } from "vue-toastification";
 import { DOWN, PENDING, MAINTENANCE, log } from "../util.ts";
 
-const toast = useToast();
-
 Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
 
 export default {
@@ -231,7 +228,7 @@ export default {
 
                 this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
                     if (!res.ok) {
-                        toast.error(res.msg);
+                        this.$root.toastError(res.msg);
                     } else {
                         this.heartbeatList = res.data;
                         this.$root.storage()[`chart-period-${this.monitorId}`] = newPeriod;
diff --git a/src/components/TagEditDialog.vue b/src/components/TagEditDialog.vue
index 85cdd4e55..b77967c77 100644
--- a/src/components/TagEditDialog.vue
+++ b/src/components/TagEditDialog.vue
@@ -123,9 +123,7 @@ import Confirm from "./Confirm.vue";
 import Tag from "./Tag.vue";
 import VueMultiselect from "vue-multiselect";
 import { colorOptions } from "../util-frontend";
-import { useToast } from "vue-toastification";
 import { getMonitorRelativeURL } from "../util.ts";
-const toast = useToast();
 
 export default {
     components: {
@@ -320,7 +318,7 @@ export default {
             for (let addId of this.addingMonitor) {
                 await this.addMonitorTagAsync(this.tag.id, addId, "").then((res) => {
                     if (!res.ok) {
-                        toast.error(res.msg);
+                        this.$root.toastError(res.msg);
                         editResult = false;
                     }
                 });
@@ -330,7 +328,7 @@ export default {
                 this.monitors.find(monitor => monitor.id === removeId)?.tags.forEach(async (monitorTag) => {
                     await this.deleteMonitorTagAsync(this.tag.id, removeId, monitorTag.value).then((res) => {
                         if (!res.ok) {
-                            toast.error(res.msg);
+                            this.$root.toastError(res.msg);
                             editResult = false;
                         }
                     });
diff --git a/src/components/TagsManager.vue b/src/components/TagsManager.vue
index 1da65fb24..37e0ca4ef 100644
--- a/src/components/TagsManager.vue
+++ b/src/components/TagsManager.vue
@@ -129,10 +129,8 @@
 <script>
 import { Modal } from "bootstrap";
 import VueMultiselect from "vue-multiselect";
-import { useToast } from "vue-toastification";
 import { colorOptions } from "../util-frontend";
 import Tag from "../components/Tag.vue";
-const toast = useToast();
 
 /**
  * @typedef Tag
@@ -262,7 +260,7 @@ export default {
                 if (res.ok) {
                     this.existingTags = res.tags;
                 } else {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 }
             });
         },
@@ -399,7 +397,7 @@ export default {
                     let newTagResult;
                     await this.addTagAsync(newTag).then((res) => {
                         if (!res.ok) {
-                            toast.error(res.msg);
+                            this.$root.toastError(res.msg);
                             newTagResult = false;
                         }
                         newTagResult = res.tag;
@@ -424,7 +422,7 @@ export default {
                 // Assign tag to monitor
                 await this.addMonitorTagAsync(tagId, monitorId, newTag.value).then((res) => {
                     if (!res.ok) {
-                        toast.error(res.msg);
+                        this.$root.toastError(res.msg);
                         newMonitorTagResult = false;
                     }
                     newMonitorTagResult = true;
@@ -440,7 +438,7 @@ export default {
                 let deleteMonitorTagResult;
                 await this.deleteMonitorTagAsync(deleteTag.tag_id, deleteTag.monitor_id, deleteTag.value).then((res) => {
                     if (!res.ok) {
-                        toast.error(res.msg);
+                        this.$root.toastError(res.msg);
                         deleteMonitorTagResult = false;
                     }
                     deleteMonitorTagResult = true;
diff --git a/src/components/TwoFADialog.vue b/src/components/TwoFADialog.vue
index 76d568b5a..6a0bf406a 100644
--- a/src/components/TwoFADialog.vue
+++ b/src/components/TwoFADialog.vue
@@ -76,8 +76,6 @@
 import { Modal } from "bootstrap";
 import Confirm from "./Confirm.vue";
 import VueQrcode from "vue-qrcode";
-import { useToast } from "vue-toastification";
-const toast = useToast();
 
 export default {
     components: {
@@ -138,7 +136,7 @@ export default {
                 if (res.ok) {
                     this.uri = res.uri;
                 } else {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 }
             });
         },
@@ -159,7 +157,7 @@ export default {
                     this.currentPassword = "";
                     this.modal.hide();
                 } else {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 }
             });
         },
@@ -180,7 +178,7 @@ export default {
                     this.currentPassword = "";
                     this.modal.hide();
                 } else {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 }
             });
         },
@@ -194,7 +192,7 @@ export default {
                 if (res.ok) {
                     this.tokenValid = res.valid;
                 } else {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 }
             });
         },
@@ -208,7 +206,7 @@ export default {
                 if (res.ok) {
                     this.twoFAStatus = res.status;
                 } else {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 }
             });
         },
diff --git a/src/components/notifications/Telegram.vue b/src/components/notifications/Telegram.vue
index dfde11e4c..40473e93d 100644
--- a/src/components/notifications/Telegram.vue
+++ b/src/components/notifications/Telegram.vue
@@ -58,8 +58,6 @@
 <script>
 import HiddenInput from "../HiddenInput.vue";
 import axios from "axios";
-import { useToast } from "vue-toastification";
-const toast = useToast();
 
 export default {
     components: {
@@ -110,7 +108,7 @@ export default {
                 }
 
             } catch (error) {
-                toast.error(error.message);
+                this.$root.toastError(error.message);
             }
 
         },
diff --git a/src/components/settings/APIKeys.vue b/src/components/settings/APIKeys.vue
index e2942c201..13ee10436 100644
--- a/src/components/settings/APIKeys.vue
+++ b/src/components/settings/APIKeys.vue
@@ -72,8 +72,6 @@
 <script>
 import APIKeyDialog from "../../components/APIKeyDialog.vue";
 import Confirm from "../Confirm.vue";
-import { useToast } from "vue-toastification";
-const toast = useToast();
 
 export default {
     components: {
@@ -109,11 +107,7 @@ export default {
          */
         deleteKey() {
             this.$root.deleteAPIKey(this.selectedKeyID, (res) => {
-                if (res.ok) {
-                    toast.success(res.msg);
-                } else {
-                    toast.error(res.msg);
-                }
+                this.$root.toastRes(res);
             });
         },
 
diff --git a/src/components/settings/Backup.vue b/src/components/settings/Backup.vue
index 6020412c8..1452541f2 100644
--- a/src/components/settings/Backup.vue
+++ b/src/components/settings/Backup.vue
@@ -121,9 +121,6 @@
 <script>
 import Confirm from "../../components/Confirm.vue";
 import dayjs from "dayjs";
-import { useToast } from "vue-toastification";
-
-const toast = useToast();
 
 export default {
     components: {
@@ -200,11 +197,7 @@ export default {
                     (res) => {
                         this.processing = false;
 
-                        if (res.ok) {
-                            toast.success(res.msg);
-                        } else {
-                            toast.error(res.msg);
-                        }
+                        this.$root.toastRes(res);
                     }
                 );
             };
diff --git a/src/components/settings/MonitorHistory.vue b/src/components/settings/MonitorHistory.vue
index a3b1534c4..eaf6fab25 100644
--- a/src/components/settings/MonitorHistory.vue
+++ b/src/components/settings/MonitorHistory.vue
@@ -57,9 +57,6 @@
 <script>
 import Confirm from "../../components/Confirm.vue";
 import { log } from "../../util.ts";
-import { useToast } from "vue-toastification";
-
-const toast = useToast();
 
 export default {
     components: {
@@ -118,7 +115,7 @@ export default {
             this.$root.getSocket().emit("shrinkDatabase", (res) => {
                 if (res.ok) {
                     this.loadDatabaseSize();
-                    toast.success("Done");
+                    this.$root.toastSuccess("Done");
                 } else {
                     log.debug("monitorhistory", res);
                 }
@@ -142,7 +139,7 @@ export default {
                 if (res.ok) {
                     this.$router.go();
                 } else {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 }
             });
         },
diff --git a/src/components/settings/Tags.vue b/src/components/settings/Tags.vue
index b3c97489c..75ac37c35 100644
--- a/src/components/settings/Tags.vue
+++ b/src/components/settings/Tags.vue
@@ -28,11 +28,9 @@
 </template>
 
 <script>
-import { useToast } from "vue-toastification";
 import TagEditDialog from "../../components/TagEditDialog.vue";
 import Tag from "../Tag.vue";
 import Confirm from "../Confirm.vue";
-const toast = useToast();
 
 export default {
     components: {
@@ -86,7 +84,7 @@ export default {
                 if (res.ok) {
                     this.tagsList = res.tags;
                 } else {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 }
             });
         },
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 81913cd16..bbb06658e 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -342,7 +342,7 @@ export default {
          * @returns {void}
          */
         toastSuccess(msg) {
-            toast.success(msg);
+            toast.success(this.$t(msg));
         },
 
         /**
@@ -351,7 +351,7 @@ export default {
          * @returns {void}
          */
         toastError(msg) {
-            toast.error(msg);
+            toast.error(this.$t(msg));
         },
 
         /**
diff --git a/src/pages/AddStatusPage.vue b/src/pages/AddStatusPage.vue
index d1321cea6..4fc3f8d8b 100644
--- a/src/pages/AddStatusPage.vue
+++ b/src/pages/AddStatusPage.vue
@@ -66,7 +66,7 @@ export default {
                 } else {
 
                     if (res.msg.includes("UNIQUE constraint")) {
-                        this.$root.toastError(this.$t("The slug is already taken. Please choose another slug."));
+                        this.$root.toastError("The slug is already taken. Please choose another slug.");
                     } else {
                         this.$root.toastRes(res);
                     }
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 3b9357a9b..20c8aa13a 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -437,7 +437,7 @@ export default {
          */
         testNotification() {
             this.$root.getSocket().emit("testNotification", this.monitor.id);
-            toast.success("Test notification is requested.");
+            this.$root.toastSuccess("Test notification is requested.");
         },
 
         /**
@@ -498,11 +498,9 @@ export default {
          */
         deleteMonitor() {
             this.$root.deleteMonitor(this.monitor.id, (res) => {
+                this.$root.toastRes(res);
                 if (res.ok) {
-                    toast.success(res.msg);
                     this.$router.push("/dashboard");
-                } else {
-                    toast.error(res.msg);
                 }
             });
         },
diff --git a/src/pages/EditMaintenance.vue b/src/pages/EditMaintenance.vue
index 204c1a477..953fe337c 100644
--- a/src/pages/EditMaintenance.vue
+++ b/src/pages/EditMaintenance.vue
@@ -246,14 +246,11 @@
 </template>
 
 <script>
-import { useToast } from "vue-toastification";
 import VueMultiselect from "vue-multiselect";
 import Datepicker from "@vuepic/vue-datepicker";
 import { timezoneList } from "../util-frontend";
 import cronstrue from "cronstrue/i18n";
 
-const toast = useToast();
-
 export default {
     components: {
         VueMultiselect,
@@ -457,7 +454,7 @@ export default {
                                     this.affectedMonitors.push(this.affectedMonitorsOptions.find(item => item.id === monitor.id));
                                 });
                             } else {
-                                toast.error(res.msg);
+                                this.$root.toastError(res.msg);
                             }
                         });
 
@@ -472,11 +469,11 @@ export default {
 
                                 this.showOnAllPages = Object.values(res.statusPages).length === this.selectedStatusPagesOptions.length;
                             } else {
-                                toast.error(res.msg);
+                                this.$root.toastError(res.msg);
                             }
                         });
                     } else {
-                        toast.error(res.msg);
+                        this.$root.toastError(res.msg);
                     }
                 });
             }
@@ -490,7 +487,7 @@ export default {
             this.processing = true;
 
             if (this.affectedMonitors.length === 0) {
-                toast.error(this.$t("atLeastOneMonitor"));
+                this.$root.toastError(this.$t("atLeastOneMonitor"));
                 return this.processing = false;
             }
 
@@ -499,14 +496,14 @@ export default {
                     if (res.ok) {
                         await this.addMonitorMaintenance(res.maintenanceID, async () => {
                             await this.addMaintenanceStatusPage(res.maintenanceID, () => {
-                                toast.success(res.msg);
+                                this.$root.toastRes(res);
                                 this.processing = false;
                                 this.$root.getMaintenanceList();
                                 this.$router.push("/maintenance");
                             });
                         });
                     } else {
-                        toast.error(res.msg);
+                        this.$root.toastRes(res);
                         this.processing = false;
                     }
 
@@ -524,7 +521,7 @@ export default {
                         });
                     } else {
                         this.processing = false;
-                        toast.error(res.msg);
+                        this.$root.toastError(res.msg);
                     }
                 });
             }
@@ -539,7 +536,7 @@ export default {
         async addMonitorMaintenance(maintenanceID, callback) {
             await this.$root.addMonitorMaintenance(maintenanceID, this.affectedMonitors, async (res) => {
                 if (!res.ok) {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 } else {
                     this.$root.getMonitorList();
                 }
@@ -557,7 +554,7 @@ export default {
         async addMaintenanceStatusPage(maintenanceID, callback) {
             await this.$root.addMaintenanceStatusPage(maintenanceID, (this.showOnAllPages) ? this.selectedStatusPagesOptions : this.selectedStatusPages, async (res) => {
                 if (!res.ok) {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 } else {
                     this.$root.getMaintenanceList();
                 }
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index cab85fe95..aef964233 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -848,7 +848,7 @@ import { genSecret, isDev, MAX_INTERVAL_SECOND, MIN_INTERVAL_SECOND } from "../u
 import { hostNameRegexPattern } from "../util-frontend";
 import { sleep } from "../util";
 
-const toast = useToast();
+const toast = useToast;
 
 const pushTokenLength = 32;
 
@@ -1173,7 +1173,7 @@ message HealthCheckResponse {
                     if (res.ok) {
                         this.gameList = res.gameList;
                     } else {
-                        toast.error(res.msg);
+                        this.$root.toastError(res.msg);
                     }
                 });
             }
@@ -1318,7 +1318,7 @@ message HealthCheckResponse {
                             this.monitor.timeout = ~~(this.monitor.interval * 8) / 10;
                         }
                     } else {
-                        toast.error(res.msg);
+                        this.$root.toastError(res.msg);
                     }
                 });
             }
@@ -1412,7 +1412,7 @@ message HealthCheckResponse {
                     createdNewParent = true;
                     this.monitor.parent = res.monitorID;
                 } else {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                     this.processing = false;
                     return;
                 }
@@ -1428,17 +1428,14 @@ message HealthCheckResponse {
                         if (createdNewParent) {
                             this.startParentGroupMonitor();
                         }
-
-                        toast.success(res.msg);
                         this.processing = false;
                         this.$root.getMonitorList();
                         this.$router.push("/dashboard/" + res.monitorID);
-
                     } else {
-                        toast.error(res.msg);
                         this.processing = false;
                     }
 
+                    this.$root.toastRes(res);
                 });
             } else {
                 await this.$refs.tagsManager.submit(this.monitor.id);
diff --git a/src/pages/MaintenanceDetails.vue b/src/pages/MaintenanceDetails.vue
index 28c130b87..edcb3a0d5 100644
--- a/src/pages/MaintenanceDetails.vue
+++ b/src/pages/MaintenanceDetails.vue
@@ -101,12 +101,8 @@ export default {
          */
         deleteMaintenance() {
             this.$root.deleteMaintenance(this.maintenance.id, (res) => {
-                if (res.ok) {
-                    toast.success(res.msg);
-                    this.$router.push("/maintenance");
-                } else {
-                    toast.error(res.msg);
-                }
+                this.$root.toastRes(res);
+                this.$router.push("/maintenance");
             });
         },
     },
diff --git a/src/pages/ManageMaintenance.vue b/src/pages/ManageMaintenance.vue
index 64cbe9bf2..01dc8aad3 100644
--- a/src/pages/ManageMaintenance.vue
+++ b/src/pages/ManageMaintenance.vue
@@ -81,8 +81,6 @@ import { getResBaseURL } from "../util-frontend";
 import { getMaintenanceRelativeURL } from "../util.ts";
 import Confirm from "../components/Confirm.vue";
 import MaintenanceTime from "../components/MaintenanceTime.vue";
-import { useToast } from "vue-toastification";
-const toast = useToast();
 
 export default {
     components: {
@@ -159,11 +157,9 @@ export default {
          */
         deleteMaintenance() {
             this.$root.deleteMaintenance(this.selectedMaintenanceID, (res) => {
+                this.$root.toastRes(res);
                 if (res.ok) {
-                    toast.success(res.msg);
                     this.$router.push("/maintenance");
-                } else {
-                    toast.error(res.msg);
                 }
             });
         },
diff --git a/src/pages/Setup.vue b/src/pages/Setup.vue
index b1a804015..f681b7a82 100644
--- a/src/pages/Setup.vue
+++ b/src/pages/Setup.vue
@@ -46,9 +46,6 @@
 </template>
 
 <script>
-import { useToast } from "vue-toastification";
-const toast = useToast();
-
 export default {
     data() {
         return {
@@ -79,7 +76,7 @@ export default {
             this.processing = true;
 
             if (this.password !== this.repeatPassword) {
-                toast.error(this.$t("PasswordsDoNotMatch"));
+                this.$root.toastError("PasswordsDoNotMatch");
                 this.processing = false;
                 return;
             }
diff --git a/src/pages/SetupDatabase.vue b/src/pages/SetupDatabase.vue
index 6ea8c843c..6bd01a4df 100644
--- a/src/pages/SetupDatabase.vue
+++ b/src/pages/SetupDatabase.vue
@@ -179,7 +179,7 @@ export default {
         },
 
         test() {
-            toast.error("not implemented");
+            this.$root.toastError("not implemented");
         }
     },
 };
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 8533f1d9c..99d945ac8 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -614,7 +614,7 @@ export default {
                         }
 
                     } else {
-                        toast.error(res.msg);
+                        this.$root.toastError(res.msg);
                     }
                 });
             }
@@ -869,7 +869,7 @@ export default {
                     this.enableEditMode = false;
                     location.href = "/manage-status-page";
                 } else {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 }
             });
         },
@@ -959,7 +959,7 @@ export default {
          */
         postIncident() {
             if (this.incident.title === "" || this.incident.content === "") {
-                toast.error(this.$t("Please input title and content"));
+                this.$root.toastError("Please input title and content");
                 return;
             }
 
@@ -969,7 +969,7 @@ export default {
                     this.enableEditIncidentMode = false;
                     this.incident = res.incident;
                 } else {
-                    toast.error(res.msg);
+                    this.$root.toastError(res.msg);
                 }
 
             });