refactor: Login and Register modal routing continued..

frontend/src/components/Modal.vue

@@ -48,8 +48,8 @@ export default {
 				.replace(/ (.)/g, $1 => $1.toUpperCase())
 				.replace(/ /g, ""),
 		closeThisModal() {
-			this.closeCurrentModal();
 			this.$emit("closed");
+			this.closeCurrentModal();
 		},
 		...mapActions("modalVisibility", ["closeCurrentModal"])
 	}

frontend/src/components/modals/Login.vue

@@ -85,7 +85,10 @@
 				</div>
 
 				<p class="content-box-optional-helper">
-					<a @click="changeToRegisterModal()">
+					<router-link v-if="$route.path === '/login'" to="/register">
+						Don't have an account?
+					</router-link>
+					<a v-else @click="changeToRegisterModal()">
 						Don't have an account?
 					</a>
 				</p>
@@ -115,18 +118,6 @@ export default {
 		};
 	},
 	async mounted() {
-		console.log(this.$route.path);
-		if (this.$route.path.toLowerCase() === "/register") {
-			// this.$router.push({path: "/login"});
-			// await this.$router.push("login");
-			this.$router
-				.push("login")
-				// eslint-disable-next-line no-restricted-globals
-				.then(history.pushState({}, null, "/login"));
-			// eslint-disable-next-line no-restricted-globals
-			// history.pushState({}, null, "/login");
-		}
-
 		this.apiDomain = await lofig.get("backend.apiDomain");
 	},
 	methods: {
@@ -162,26 +153,14 @@ export default {
 				this.password.visible = false;
 			}
 		},
-		async changeToRegisterModal() {
-			// this.$router.push({path: "/register"});
-			// await this.$router.push("register");
-			this.$router
-				.push("register")
-				// eslint-disable-next-line no-restricted-globals
-				.then(history.pushState({}, null, "/register"));
-			// eslint-disable-next-line no-restricted-globals
-			// history.pushState({}, null, "/register");
+		changeToRegisterModal() {
 			this.closeLoginModal();
 			this.openModal("register");
 		},
 		async closeLoginModal() {
-			if (this.$route.path.toLowerCase() === "/login") {
-				// this.$router.push({path: "/"});
-				// await this.$router.push("/");
-				// eslint-disable-next-line no-restricted-globals
-				this.$router.push("/").then(history.pushState({}, null, "/"));
+			if (this.$route.path === "/login") {
 				// eslint-disable-next-line no-restricted-globals
-				// history.pushState({}, null, "/");
+				this.$router.push("").then(history.pushState({}, null, "/"));
 			}
 			this.closeModal("login");
 		},

frontend/src/components/modals/Register.vue

@@ -124,7 +124,10 @@
 				</div>
 
 				<p class="content-box-optional-helper">
-					<a @click="changeToLoginModal()">
+					<router-link v-if="$route.path === '/register'" to="/login">
+						Already have an account?
+					</router-link>
+					<a v-else @click="changeToLoginModal()">
 						Already have an account?
 					</a>
 				</p>
@@ -227,18 +230,6 @@ export default {
 		}
 	},
 	async mounted() {
-		console.log(this.$route.path);
-		if (this.$route.path.toLowerCase() === "/login") {
-			// this.$router.push({path: "/register"});
-			// await this.$router.push("register");
-			this.$router
-				.push("register")
-				// eslint-disable-next-line no-restricted-globals
-				.then(history.pushState({}, null, "/register"));
-			// eslint-disable-next-line no-restricted-globals
-			// history.pushState({}, null, "/register");
-		}
-
 		this.apiDomain = await lofig.get("backend.apiDomain");
 
 		lofig.get("recaptcha").then(obj => {
@@ -283,13 +274,9 @@ export default {
 			this.openModal("login");
 		},
 		async closeRegisterModal() {
-			if (this.$route.path.toLowerCase() === "/register") {
-				// this.$router.push({path: "/"});
-				// await this.$router.push("/");
-				// eslint-disable-next-line no-restricted-globals
-				this.$router.push("/").then(history.pushState({}, null, "/"));
+			if (this.$route.path === "/register") {
 				// eslint-disable-next-line no-restricted-globals
-				// history.pushState({}, null, "/");
+				this.$router.push("").then(history.pushState({}, null, "/"));
 			}
 			this.closeModal("register");
 		},

frontend/src/main.js

@@ -77,9 +77,22 @@ const router = createRouter({
 	routes: [
 		{
 			path: "/",
-			alias: ["/login", "/register"],
 			component: () => import("@/pages/Home.vue")
 		},
+		{
+			path: "/login",
+			component: () => import("@/pages/Home.vue"),
+			meta: {
+				guestsOnly: true
+			}
+		},
+		{
+			path: "/register",
+			component: () => import("@/pages/Home.vue"),
+			meta: {
+				guestsOnly: true
+			}
+		},
 		{
 			path: "/404",
 			alias: ["/:pathMatch(.*)*"],

frontend/src/pages/Home.vue

@@ -517,6 +517,12 @@ 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() {
@@ -524,10 +530,9 @@ export default {
 
 		if (
 			!this.loggedIn &&
-			(this.$route.path.toLowerCase() === "/login" ||
-				this.$route.path.toLowerCase() === "/register")
+			(this.$route.path === "/login" || this.$route.path === "/register")
 		)
-			this.openModal(this.$route.path.toLowerCase().substring(1));
+			this.openModal(this.$route.path.substring(1));
 
 		ws.onConnect(this.init);
 
@@ -771,7 +776,7 @@ export default {
 				res => new Toast(res.message)
 			);
 		},
-		...mapActions("modalVisibility", ["openModal"]),
+		...mapActions("modalVisibility", ["openModal", "closeModal"]),
 		...mapActions("station", ["updateIfStationIsFavorited"])
 	}
 };