refactor: changed the way /login and /register redirect/url changing works

frontend/src/App.vue

@@ -134,6 +134,16 @@ export default {
 			handler: () => this.toggleNightMode()
 		});
 
+		keyboardShortcuts.registerShortcut("closeModal", {
+			keyCode: 27,
+			shift: false,
+			ctrl: false,
+			handler: () => {
+				if (Object.keys(this.currentlyActive).length !== 0)
+					this.closeCurrentModal();
+			}
+		});
+
 		this.disconnectedMessage = new Toast({
 			content: "Could not connect to the server.",
 			persistent: true,

frontend/src/components/Modal.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="modal is-active">
-		<div class="modal-background" @click="closeThisModal()" />
+		<div class="modal-background" @click="closeCurrentModal()" />
 		<div
 			:class="{
 				'modal-card': true,
@@ -12,7 +12,7 @@
 				<h2 class="modal-card-title is-marginless">
 					{{ title }}
 				</h2>
-				<span class="delete material-icons" @click="closeThisModal()"
+				<span class="delete material-icons" @click="closeCurrentModal()"
 					>highlight_off</span
 				>
 			</header>
@@ -29,26 +29,14 @@
 <script>
 import { mapActions } from "vuex";
 
-import keyboardShortcuts from "@/keyboardShortcuts";
-
 export default {
 	props: {
 		title: { type: String, default: "Modal" },
 		wide: { type: Boolean, default: false },
 		split: { type: Boolean, default: false }
 	},
-	emits: ["closed"],
 	mounted() {
 		this.type = this.toCamelCase(this.title);
-
-		keyboardShortcuts.registerShortcut("closeModal", {
-			keyCode: 27,
-			shift: false,
-			ctrl: false,
-			handler: () => {
-				this.closeThisModal();
-			}
-		});
 	},
 	methods: {
 		toCamelCase: str =>
@@ -58,10 +46,6 @@ export default {
 				.replace(/[^\w\s]/g, "")
 				.replace(/ (.)/g, $1 => $1.toUpperCase())
 				.replace(/ /g, ""),
-		closeThisModal() {
-			this.$emit("closed");
-			this.closeCurrentModal();
-		},
 		...mapActions("modalVisibility", ["closeCurrentModal"])
 	}
 };

frontend/src/components/modals/Login.vue

@@ -85,10 +85,7 @@
 				</div>
 
 				<p class="content-box-optional-helper">
-					<router-link v-if="$route.path === '/login'" to="/register">
-						Don't have an account?
-					</router-link>
-					<a v-else @click="changeToRegisterModal()">
+					<a @click="changeToRegisterModal()">
 						Don't have an account?
 					</a>
 				</p>
@@ -157,11 +154,7 @@ export default {
 			this.closeLoginModal();
 			this.openModal("register");
 		},
-		async closeLoginModal() {
-			if (this.$route.path === "/login") {
-				// eslint-disable-next-line no-restricted-globals
-				this.$router.push("").then(history.pushState({}, null, "/"));
-			}
+		closeLoginModal() {
 			this.closeModal("login");
 		},
 		githubRedirect() {

frontend/src/components/modals/Register.vue

@@ -124,10 +124,7 @@
 				</div>
 
 				<p class="content-box-optional-helper">
-					<router-link v-if="$route.path === '/register'" to="/login">
-						Already have an account?
-					</router-link>
-					<a v-else @click="changeToLoginModal()">
+					<a @click="changeToLoginModal()">
 						Already have an account?
 					</a>
 				</p>
@@ -273,11 +270,7 @@ export default {
 			this.closeRegisterModal();
 			this.openModal("login");
 		},
-		async closeRegisterModal() {
-			if (this.$route.path === "/register") {
-				// eslint-disable-next-line no-restricted-globals
-				this.$router.push("").then(history.pushState({}, null, "/"));
-			}
+		closeRegisterModal() {
 			this.closeModal("register");
 		},
 		submitModal() {

frontend/src/main.js

@@ -81,17 +81,13 @@ const router = createRouter({
 		},
 		{
 			path: "/login",
-			component: () => import("@/pages/Home.vue"),
-			meta: {
-				guestsOnly: true
-			}
+			name: "login",
+			redirect: "/"
 		},
 		{
 			path: "/register",
-			component: () => import("@/pages/Home.vue"),
-			meta: {
-				guestsOnly: true
-			}
+			name: "register",
+			redirect: "/"
 		},
 		{
 			path: "/404",

frontend/src/pages/Home.vue

@@ -469,7 +469,8 @@ export default {
 			favoriteStations: [],
 			searchQuery: "",
 			sitename: "Musare",
-			orderOfFavoriteStations: []
+			orderOfFavoriteStations: [],
+			handledLoginRegisterRedirect: false
 		};
 	},
 	computed: {
@@ -517,12 +518,6 @@ export default {
 			handler() {
 				this.calculateFavoriteStations();
 			}
-		},
-		$route(to, from) {
-			if (from.path === "/login" || from.path === "/register")
-				this.closeModal(from.path.substr(1));
-			if (to.path === "/login" || to.path === "/register")
-				this.openModal(to.path.substr(1));
 		}
 	},
 	async mounted() {
@@ -530,9 +525,15 @@ export default {
 
 		if (
 			!this.loggedIn &&
-			(this.$route.path === "/login" || this.$route.path === "/register")
-		)
-			this.openModal(this.$route.path.substring(1));
+			this.$route.redirectedFrom &&
+			(this.$route.redirectedFrom.name === "login" ||
+				this.$route.redirectedFrom.name === "register") &&
+			!this.handledLoginRegisterRedirect
+		) {
+			// Makes sure the login/register modal isn't opened whenever the home page gets remounted due to a code change
+			this.handledLoginRegisterRedirect = true;
+			this.openModal(this.$route.redirectedFrom.name);
+		}
 
 		ws.onConnect(this.init);
 
@@ -776,7 +777,7 @@ export default {
 				res => new Toast(res.message)
 			);
 		},
-		...mapActions("modalVisibility", ["openModal", "closeModal"]),
+		...mapActions("modalVisibility", ["openModal"]),
 		...mapActions("station", ["updateIfStationIsFavorited"])
 	}
 };