Move some init code around

client/components/App.vue

@@ -1,6 +1,6 @@
 <template>
 	<div id="viewport" :class="viewportClasses" role="tablist">
-		<Sidebar :overlay="$refs.overlay" />
+		<Sidebar v-if="$store.state.appLoaded" :overlay="$refs.overlay" />
 		<div id="sidebar-overlay" ref="overlay" @click="$store.commit('sidebarOpen', false)" />
 		<article id="windows">
 			<router-view ref="window"></router-view>
@@ -11,6 +11,8 @@
 
 <script>
 const throttle = require("lodash/throttle");
+const constants = require("../js/constants");
+const storage = require("../js/localStorage");
 
 import Sidebar from "./Sidebar.vue";
 import ImageViewer from "./ImageViewer.vue";
@@ -25,12 +27,15 @@ export default {
 		viewportClasses() {
 			return {
 				notified: this.$store.getters.highlightCount > 0,
-				"menu-open": this.$store.state.sidebarOpen,
+				"menu-open": this.$store.state.appLoaded && this.$store.state.sidebarOpen,
 				"menu-dragging": this.$store.state.sidebarDragging,
 				"userlist-open": this.$store.state.userlistOpen,
 			};
 		},
 	},
+	created() {
+		this.prepareOpenStates();
+	},
 	mounted() {
 		// Make a single throttled resize listener available to all components
 		this.debouncedResize = throttle(() => {
@@ -60,6 +65,25 @@ export default {
 
 			return tommorow - today;
 		},
+		prepareOpenStates() {
+			const viewportWidth = window.outerWidth;
+			let isUserlistOpen = storage.get("thelounge.state.userlist");
+
+			if (viewportWidth > constants.mobileViewportPixels) {
+				this.$store.commit(
+					"sidebarOpen",
+					storage.get("thelounge.state.sidebar") !== "false"
+				);
+			}
+
+			// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored
+			// user list state, close it by default
+			if (viewportWidth >= 1024 && isUserlistOpen !== "true" && isUserlistOpen !== "false") {
+				isUserlistOpen = "true";
+			}
+
+			this.$store.commit("userlistOpen", isUserlistOpen === "true");
+		},
 	},
 };
 </script>

client/components/Windows/SignIn.vue

@@ -72,10 +72,10 @@ export default {
 		};
 	},
 	mounted() {
-		this.$root.$on("auth:failed", this.onAuthFailed);
+		socket.on("auth:failed", this.onAuthFailed);
 	},
 	beforeDestroy() {
-		this.$root.$off("auth:failed", this.onAuthFailed);
+		socket.off("auth:failed", this.onAuthFailed);
 	},
 	methods: {
 		onAuthFailed() {

client/js/socket-events/auth.js

@@ -2,7 +2,6 @@
 
 const socket = require("../socket");
 const storage = require("../localStorage");
-const {vueApp} = require("../vue");
 const {router, navigate} = require("../router");
 const store = require("../store").default;
 let lastServerHash = null;
@@ -20,8 +19,6 @@ socket.on("auth:failed", function() {
 	}
 
 	showSignIn();
-
-	vueApp.$emit("auth:failed");
 });
 
 socket.on("auth:start", function(serverHash) {

client/js/socket-events/configuration.js

@@ -27,12 +27,12 @@ socket.once("configuration", function(data) {
 	// 'theme' setting depends on serverConfiguration.themes so
 	// settings cannot be applied before this point
 	store.dispatch("settings/applyAll");
+	socket.emit("setting:get");
 
 	if (data.fileUpload) {
-		upload.initialize(data.fileUploadMaxFileSize);
+		upload.initialize();
 	}
 
-	socket.emit("setting:get");
 	webpush.initialize();
 	router.initialize();
 
@@ -46,83 +46,10 @@ socket.once("configuration", function(data) {
 		document.querySelector('meta[name="theme-color"]').content = currentTheme.themeColor;
 	}
 
-	if ("URLSearchParams" in window) {
+	if (document.body.classList.contains("public")) {
-		handleQueryParams();
+		window.addEventListener(
+			"beforeunload",
+			() => "Are you sure you want to navigate away from this page?"
+		);
 	}
 });
-
-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 = {};
-
-	try {
-		// https://tools.ietf.org/html/draft-butcher-irc-url-04
-		const uri = new URL(stringUri);
-
-		// Replace protocol with a "special protocol" (that's what it's called in WHATWG spec)
-		// So that the uri can be properly parsed
-		if (uri.protocol === "irc:") {
-			uri.protocol = "http:";
-
-			if (!uri.port) {
-				uri.port = 6667;
-			}
-
-			data.tls = false;
-		} else if (uri.protocol === "ircs:") {
-			uri.protocol = "https:";
-
-			if (!uri.port) {
-				uri.port = 6697;
-			}
-
-			data.tls = true;
-		} else {
-			return;
-		}
-
-		data.host = data.name = uri.hostname;
-		data.port = uri.port;
-		data.username = window.decodeURIComponent(uri.username);
-		data.password = window.decodeURIComponent(uri.password);
-
-		let channel = (uri.pathname + uri.hash).substr(1);
-		const index = channel.indexOf(",");
-
-		if (index > -1) {
-			channel = channel.substring(0, index);
-		}
-
-		data.join = channel;
-	} catch (e) {
-		// do nothing on invalid uri
-	}
-
-	return data;
-}

client/js/socket-events/init.js

@@ -3,7 +3,6 @@
 const socket = require("../socket");
 const webpush = require("../webpush");
 const storage = require("../localStorage");
-const constants = require("../constants");
 const {initChannel} = require("../vue");
 const {router, switchToChannel, navigate} = require("../router");
 const store = require("../store").default;
@@ -13,36 +12,23 @@ socket.on("init", function(data) {
 	store.commit("isConnected", true);
 	store.commit("currentUserVisibleError", null);
 
-	if (!store.state.appLoaded) {
-		store.commit("appLoaded");
-
 	if (data.token) {
 		storage.set("token", data.token);
 	}
 
+	if (!store.state.appLoaded) {
+		store.commit("appLoaded");
+
+		// TODO: Try to move webpush key to configuration event
 		webpush.configurePushNotifications(data.pushSubscription, data.applicationServerKey);
 
-		const viewportWidth = window.outerWidth;
-		let isUserlistOpen = storage.get("thelounge.state.userlist");
-
-		if (viewportWidth > constants.mobileViewportPixels) {
-			store.commit("sidebarOpen", storage.get("thelounge.state.sidebar") !== "false");
-		}
-
-		// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored
-		// user list state, close it by default
-		if (viewportWidth >= 1024 && isUserlistOpen !== "true" && isUserlistOpen !== "false") {
-			isUserlistOpen = "true";
-		}
-
-		store.commit("userlistOpen", isUserlistOpen === "true");
-
 		document.body.classList.remove("signed-out");
 
 		if (window.g_TheLoungeRemoveLoading) {
 			window.g_TheLoungeRemoveLoading();
 		}
 
+		// TODO: Review this code and make it better
 		if (!router.currentRoute.name || router.currentRoute.name === "SignIn") {
 			const channel = store.getters.findChannel(data.active);
 
@@ -56,13 +42,10 @@ socket.on("init", function(data) {
 				navigate("Connect");
 			}
 		}
-	}
 
-	if (document.body.classList.contains("public")) {
+		if ("URLSearchParams" in window) {
-		window.addEventListener(
+			handleQueryParams();
-			"beforeunload",
+		}
-			() => "Are you sure you want to navigate away from this page?"
-		);
 	}
 });
 
@@ -169,3 +152,79 @@ function mergeChannelData(oldChannels, newChannels) {
 
 	return newChannels;
 }
+
+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 = {};
+
+	try {
+		// https://tools.ietf.org/html/draft-butcher-irc-url-04
+		const uri = new URL(stringUri);
+
+		// Replace protocol with a "special protocol" (that's what it's called in WHATWG spec)
+		// So that the uri can be properly parsed
+		if (uri.protocol === "irc:") {
+			uri.protocol = "http:";
+
+			if (!uri.port) {
+				uri.port = 6667;
+			}
+
+			data.tls = false;
+		} else if (uri.protocol === "ircs:") {
+			uri.protocol = "https:";
+
+			if (!uri.port) {
+				uri.port = 6697;
+			}
+
+			data.tls = true;
+		} else {
+			return;
+		}
+
+		data.host = data.name = uri.hostname;
+		data.port = uri.port;
+		data.username = window.decodeURIComponent(uri.username);
+		data.password = window.decodeURIComponent(uri.password);
+
+		let channel = (uri.pathname + uri.hash).substr(1);
+		const index = channel.indexOf(",");
+
+		if (index > -1) {
+			channel = channel.substring(0, index);
+		}
+
+		data.join = channel;
+	} catch (e) {
+		// do nothing on invalid uri
+	}
+
+	return data;
+}

client/js/upload.js

@@ -5,8 +5,7 @@ const updateCursor = require("undate").update;
 const store = require("./store").default;
 
 class Uploader {
-	init(maxFileSize) {
+	init() {
-		this.maxFileSize = maxFileSize;
 		this.xhr = null;
 		this.fileQueue = [];
 
@@ -98,9 +97,10 @@ class Uploader {
 		}
 
 		const wasQueueEmpty = this.fileQueue.length === 0;
+		const maxFileSize = store.state.serverConfiguration.fileUploadMaxFileSize;
 
 		for (const file of files) {
-			if (this.maxFileSize > 0 && file.size > this.maxFileSize) {
+			if (maxFileSize > 0 && file.size > maxFileSize) {
 				this.handleResponse({
 					error: `File ${file.name} is over the maximum allowed size`,
 				});