Make connection-error a vue state

client/components/Chat.vue

@@ -67,7 +67,9 @@
 				</div>
 			</div>
 		</div>
-		<div id="connection-error" />
+		<div
+			v-if="this.$root.connectionError"
+			id="connection-error">{{ this.$root.connectionError }}</div>
 		<ChatInput
 			:network="network"
 			:channel="channel" />

client/css/style.css

@@ -1981,11 +1981,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	background: #e74c3c;
 	color: #fff;
 	text-align: center;
-	display: none;
-}
-
-#connection-error.shown {
-	display: block;
 	cursor: pointer;
 }
 

client/js/socket-events/auth.js

@@ -12,7 +12,8 @@ socket.on("auth", function(data) {
 	// And we will reload the page to grab the latest version
 	if (utils.serverHash > -1 && data.serverHash > -1 && data.serverHash !== utils.serverHash) {
 		socket.disconnect();
-		$("#connection-error").text("Server restarted, reloading…");
+		vueApp.connected = false;
+		vueApp.connectionError = "Server restarted, reloading…";
 		location.reload(true);
 		return;
 	}
@@ -52,7 +53,8 @@ socket.on("auth", function(data) {
 	if (!data.success) {
 		if (login.length === 0) {
 			socket.disconnect();
-			$("#connection-error").text("Authentication failed, reloading…");
+			vueApp.connected = false;
+			vueApp.connectionError = "Authentication failed, reloading…";
 			location.reload();
 			return;
 		}
@@ -67,7 +69,8 @@ socket.on("auth", function(data) {
 		token = storage.get("token");
 
 		if (token) {
-			$("#loading-page-message, #connection-error").text("Authorizing…");
+			vueApp.connectionError = "Authorizing…";
+			$("#loading-page-message").text(vueApp.connectionError);
 
 			let lastMessage = -1;
 

client/js/socket-events/init.js

@@ -11,7 +11,8 @@ const utils = require("../utils");
 const {vueApp, initChannel} = require("../vue");
 
 socket.on("init", function(data) {
-	$("#loading-page-message, #connection-error").text("Rendering…");
+	vueApp.connectionError = "Rendering…";
+	$("#loading-page-message").text(vueApp.connectionError);
 
 	const previousActive = vueApp.activeChannel && vueApp.activeChannel.channel.id;
 
@@ -55,8 +56,7 @@ socket.on("init", function(data) {
 
 	vueApp.networks = data.networks;
 	vueApp.connected = true;
-
-	$("#connection-error").removeClass("shown");
+	vueApp.connectionError = false;
 
 	if (!vueApp.initialized) {
 		vueApp.initialized = true;

client/js/socket.js

@@ -20,11 +20,13 @@ socket.on("connect_error", handleDisconnect);
 socket.on("error", handleDisconnect);
 
 socket.on("reconnecting", function(attempt) {
-	$("#loading-page-message, #connection-error").text(`Reconnecting… (attempt ${attempt})`);
+	vueApp.connectionError = `Reconnecting… (attempt ${attempt})`;
+	$("#loading-page-message").text(vueApp.connectionError);
 });
 
 socket.on("connecting", function() {
-	$("#loading-page-message, #connection-error").text("Connecting…");
+	vueApp.connectionError = "Connecting…";
+	$("#loading-page-message").text(vueApp.connectionError);
 });
 
 socket.on("connect", function() {
@@ -33,19 +35,21 @@ socket.on("connect", function() {
 	// nothing is sent to the server that might have happened.
 	socket.sendBuffer = [];
 
-	$("#loading-page-message, #connection-error").text("Finalizing connection…");
+	vueApp.connectionError = "Finalizing connection…";
+	$("#loading-page-message").text(vueApp.connectionError);
 });
 
 socket.on("authorized", function() {
-	$("#loading-page-message, #connection-error").text("Loading messages…");
+	vueApp.connectionError = "Loading messages…";
+	$("#loading-page-message").text(vueApp.connectionError);
 });
 
 function handleDisconnect(data) {
 	const message = data.message || data;
 
 	vueApp.connected = false;
-
-	$("#loading-page-message, #connection-error").text(`Waiting to reconnect… (${message})`).addClass("shown");
+	vueApp.connectionError = `Waiting to reconnect… (${message})`;
+	$("#loading-page-message").text(vueApp.connectionError);
 
 	// If the server shuts down, socket.io skips reconnection
 	// and we have to manually call connect to start the process

client/js/vue.js

@@ -23,6 +23,7 @@ const vueApp = new Vue({
 	data: {
 		initialized: false,
 		connected: false,
+		connectionError: false,
 		appName: document.title,
 		activeChannel: null,
 		networks: [],