refactor: Moved toasts created from route query handling to router.beforeEach

backend/logic/app.js

@@ -502,7 +502,7 @@ class _AppModule extends CoreClass {
 
 						this.log("INFO", "VERIFY_EMAIL", `Successfully verified email.`);
 
-						return res.redirect(`${config.get("domain")}?msg=Thank you for verifying your email`);
+						return res.redirect(`${config.get("domain")}?toast=Thank you for verifying your email`);
 					}
 				);
 			});

frontend/src/App.vue

@@ -22,7 +22,6 @@ const FallingSnow = defineAsyncComponent(
 	() => import("@/components/FallingSnow.vue")
 );
 
-const route = useRoute();
 const router = useRouter();
 
 const { socket } = useWebsocketsStore();
@@ -247,24 +246,6 @@ onMounted(async () => {
 	apiDomain.value = await lofig.get("backend.apiDomain");
 
 	router.isReady().then(() => {
-		if (route.query.err) {
-			let { err } = route.query;
-			err = JSON.stringify(err)
-				.replace(/</g, "&lt;")
-				.replace(/>/g, "&gt;");
-			router.push({ query: {} });
-			new Toast({ content: err, timeout: 20000 });
-		}
-
-		if (route.query.msg) {
-			let { msg } = route.query;
-			msg = JSON.stringify(msg)
-				.replace(/</g, "&lt;")
-				.replace(/>/g, "&gt;");
-			router.push({ query: {} });
-			new Toast({ content: msg, timeout: 20000 });
-		}
-
 		lofig.get("siteSettings.githubAuthentication").then(enabled => {
 			if (enabled && localStorage.getItem("github_redirect")) {
 				router.push(localStorage.getItem("github_redirect"));

frontend/src/main.ts

@@ -5,6 +5,7 @@ import VueTippy, { Tippy } from "vue-tippy";
 import { createRouter, createWebHistory } from "vue-router";
 import { createPinia } from "pinia";
 import "lofig";
+import Toast from "toasters";
 
 import { useUserAuthStore } from "@/stores/userAuth";
 import { useUserPreferencesStore } from "@/stores/userPreferences";
@@ -263,6 +264,17 @@ router.beforeEach((to, from, next) => {
 		ws.destroyListeners();
 	}
 
+	if (to.query.toast) {
+		const toast =
+			typeof to.query.toast === "string"
+				? { content: to.query.toast, timeout: 20000 }
+				: to.query.toast;
+		new Toast(toast);
+		const { query } = to;
+		delete query.toast;
+		next({ ...to, query });
+	}
+
 	if (
 		to.meta.loginRequired ||
 		to.meta.permissionRequired ||
@@ -387,8 +399,12 @@ lofig.folder = defaultConfigURL;
 				meta.permissionRequired &&
 				!userAuthStore.hasPermission(meta.permissionRequired)
 			)
-				window.location.href =
-					"/?msg=You no longer have access to the page you were viewing.";
+				router.push({
+					path: "/",
+					query: {
+						toast: "You no longer have access to the page you were viewing."
+					}
+				});
 		});
 	});
 

frontend/src/pages/Station/index.vue

@@ -1217,8 +1217,12 @@ onMounted(async () => {
 	});
 
 	socket.on("event:station.deleted", () => {
-		window.location.href = "/?msg=The station you were in was deleted.";
-		return true;
+		router.push({
+			path: "/",
+			query: {
+				toast: "The station you were in was deleted."
+			}
+		});
 	});
 
 	socket.on("event:ratings.liked", res => {
@@ -1295,8 +1299,12 @@ onMounted(async () => {
 		const { name, theme, privacy } = res.data.station;
 
 		if (!hasPermission("stations.view") && privacy === "private") {
-			window.location.href =
-				"/?msg=The station you were in was made private.";
+			router.push({
+				path: "/",
+				query: {
+					toast: "The station you were in was made private."
+				}
+			});
 		} else {
 			if (station.value.name !== name) {
 				await router.push(
@@ -1350,8 +1358,12 @@ onMounted(async () => {
 					!hasPermission("stations.view") &&
 					station.value.privacy === "private"
 				)
-					window.location.href =
-						"/?msg=You no longer have access to the station you were in.";
+					router.push({
+						path: "/",
+						query: {
+							toast: "You no longer have access to the station you were in."
+						}
+					});
 			});
 		addDj(res.data.user);
 	});
@@ -1363,8 +1375,12 @@ onMounted(async () => {
 					!hasPermission("stations.view") &&
 					station.value.privacy === "private"
 				)
-					window.location.href =
-						"/?msg=You no longer have access to the station you were in.";
+					router.push({
+						path: "/",
+						query: {
+							toast: "You no longer have access to the station you were in."
+						}
+					});
 			});
 		removeDj(res.data.user);
 	});
@@ -1375,8 +1391,12 @@ onMounted(async () => {
 				!hasPermission("stations.view") &&
 				station.value.privacy === "private"
 			)
-				window.location.href =
-					"/?msg=You no longer have access to the station you were in.";
+				router.push({
+					path: "/",
+					query: {
+						toast: "You no longer have access to the station you were in."
+					}
+				});
 		});
 	});