Fix up connect uri parsing, use direct router references

Co-Authored-By: Tim Miller-Williams <timmw@users.noreply.github.com>

client/components/Windows/Connect.vue

@@ -36,7 +36,7 @@ export default {
 			const parsedParams = {};
 
 			for (let key of Object.keys(params)) {
-				if (params[key] === null) {
+				if (!params[key]) {
 					continue;
 				}
 
@@ -59,7 +59,7 @@ export default {
 
 				// When the network is locked, URL overrides should not affect disabled fields
 				if (
-					this.$store.state.lockNetwork &&
+					this.$store.state.serverConfiguration.lockNetwork &&
 					["host", "port", "tls", "rejectUnauthorized"].includes(key)
 				) {
 					continue;

client/js/router.js

@@ -91,7 +91,7 @@ function initialize() {
 	router.addRoutes([
 		{
 			name: "Connect",
-			path: "/connect*",
+			path: "/connect",
 			component: Connect,
 			props: (route) => ({queryParams: route.query}),
 		},

client/js/socket-events/auth.js

@@ -3,7 +3,7 @@
 const socket = require("../socket");
 const storage = require("../localStorage");
 const {vueApp} = require("../vue");
-const {navigate} = require("../router");
+const {router, navigate} = require("../router");
 const store = require("../store").default;
 let lastServerHash = null;
 
@@ -64,7 +64,13 @@ socket.on("auth:start", function(serverHash) {
 		const openChannel =
 			(store.state.activeChannel && store.state.activeChannel.channel.id) || null;
 
-		socket.emit("auth:perform", {user, token, lastMessage, openChannel});
+		socket.emit("auth:perform", {
+			user,
+			token,
+			lastMessage,
+			openChannel,
+			hasConfig: store.state.serverConfiguration !== null,
+		});
 	} else {
 		showSignIn();
 	}
@@ -76,7 +82,7 @@ function showSignIn() {
 		window.g_TheLoungeRemoveLoading();
 	}
 
-	if (vueApp.$route.name !== "SignIn") {
+	if (router.currentRoute.name !== "SignIn") {
 		navigate("SignIn");
 	}
 }

client/js/socket-events/configuration.js

@@ -5,7 +5,7 @@ const socket = require("../socket");
 const webpush = require("../webpush");
 const upload = require("../upload");
 const store = require("../store").default;
-const {vueApp} = require("../vue");
+const router = require("../router");
 
 window.addEventListener("beforeinstallprompt", (installPromptEvent) => {
 	$("#webapp-install-button")
@@ -35,6 +35,7 @@ socket.once("configuration", function(data) {
 
 	socket.emit("setting:get");
 	webpush.initialize();
+	router.initialize();
 
 	// If localStorage contains a theme that does not exist on this server, switch
 	// back to its default theme.
@@ -47,32 +48,37 @@ socket.once("configuration", function(data) {
 	}
 
 	if ("URLSearchParams" in window) {
-		const params = new URLSearchParams(document.location.search);
+		handleQueryParams();
-
-		const cleanParams = () => {
-			// Remove query parameters from url without reloading the page
-			const cleanUri =
-				window.location.origin + window.location.pathname + window.location.hash;
-			window.history.replaceState({}, document.title, cleanUri);
-		};
-
-		if (params.has("uri")) {
-			// Set default connection settings from IRC protocol links
-			const uri =
-				params.get("uri") +
-				(location.hash.includes("#/") ? location.hash.split("#/")[0] : location.hash);
-			const queryParams = parseIrcUri(uri, data);
-			cleanParams();
-			vueApp.$router.push({path: "/connect", query: queryParams});
-		} else if (document.body.classList.contains("public") && document.location.search) {
-			// Set default connection settings from url params
-			const queryParams = document.location.search;
-			cleanParams();
-			vueApp.$router.push("/connect" + queryParams);
-		}
 	}
 });
 
+function handleQueryParams() {
+	const params = new URLSearchParams(document.location.search);
+
+	const cleanParams = () => {
+		// Remove query parameters from url without reloading the page
+		const cleanUri = window.location.origin + window.location.pathname + window.location.hash;
+		window.history.replaceState({}, document.title, cleanUri);
+	};
+
+	if (params.has("uri")) {
+		// Set default connection settings from IRC protocol links
+		const uri =
+			params.get("uri") +
+			(location.hash.startsWith("#/") ? `#${location.hash.substring(2)}` : location.hash);
+		const queryParams = parseIrcUri(uri);
+
+		cleanParams();
+		router.router.push({name: "Connect", query: queryParams});
+	} else if (document.body.classList.contains("public") && document.location.search) {
+		// Set default connection settings from url params
+		const queryParams = Object.fromEntries(params.entries());
+
+		cleanParams();
+		router.router.push({name: "Connect", query: queryParams});
+	}
+}
+
 function parseIrcUri(stringUri) {
 	const data = {};
 
@@ -104,8 +110,8 @@ function parseIrcUri(stringUri) {
 
 		data.host = data.name = uri.hostname;
 		data.port = uri.port;
-		data.username = window.decodeURIComponent(uri.username) || data.username;
+		data.username = window.decodeURIComponent(uri.username);
-		data.password = window.decodeURIComponent(uri.password) || data.password;
+		data.password = window.decodeURIComponent(uri.password);
 
 		let channel = (uri.pathname + uri.hash).substr(1);
 		const index = channel.indexOf(",");

client/js/socket-events/init.js

@@ -4,9 +4,8 @@ const socket = require("../socket");
 const webpush = require("../webpush");
 const storage = require("../localStorage");
 const constants = require("../constants");
-const {vueApp, initChannel} = require("../vue");
+const {initChannel} = require("../vue");
-const {switchToChannel, navigate} = require("../router");
+const {router, switchToChannel, navigate} = require("../router");
-const router = require("../router");
 const store = require("../store").default;
 
 socket.on("init", function(data) {
@@ -15,8 +14,6 @@ socket.on("init", function(data) {
 	store.commit("currentUserVisibleError", null);
 
 	if (!store.state.appLoaded) {
-		router.initialize();
-
 		store.commit("appLoaded");
 
 		if (data.token) {
@@ -46,7 +43,7 @@ socket.on("init", function(data) {
 			window.g_TheLoungeRemoveLoading();
 		}
 
-		if (!vueApp.$route.name || vueApp.$route.name === "SignIn") {
+		if (!router.currentRoute.name || router.currentRoute.name === "SignIn") {
 			const channel = store.getters.findChannel(data.active);
 
 			if (channel) {
@@ -86,7 +83,7 @@ function mergeNetworkData(newNetworks) {
 		}
 
 		// Merge received network object into existing network object on the client
-		// so the object reference stays the same (e.g. for vueApp.currentChannel)
+		// so the object reference stays the same (e.g. for currentChannel state)
 		for (const key in network) {
 			if (!Object.prototype.hasOwnProperty.call(network, key)) {
 				continue;

client/js/store.js

@@ -28,7 +28,7 @@ const store = new Vuex.Store({
 		isFileUploadEnabled: false,
 		networks: [],
 		pushNotificationState: "unsupported",
-		serverConfiguration: {},
+		serverConfiguration: null,
 		sessions: [],
 		sidebarOpen: false,
 		sidebarDragging: false,

src/server.js

@@ -736,7 +736,11 @@ function performAuthentication(data) {
 	};
 
 	const initClient = () => {
-		socket.emit("configuration", getClientConfiguration());
+		// Configuration does not change during runtime of TL,
+		// and the client listens to this event only once
+		if (!data.hasConfig) {
+			socket.emit("configuration", getClientConfiguration());
+		}
 
 		client.config.browser = {
 			ip: getClientIp(socket),