feat: automatically attempt socket.io reconnection on ajaxify

Also, updated messaging and toaster to accurately reflect offline-mode state

public/language/en-GB/error.json

@@ -208,7 +208,7 @@
 	"already-blocked": "This user is already blocked",
 	"already-unblocked": "This user is already unblocked",
 	"no-connection": "There seems to be a problem with your internet connection",
-	"socket-reconnect-failed": "Reconnect failed, please try again later",
+	"socket-reconnect-failed": "Unable to reach the server at this time. Click here to try again, or try again later",
 
 	"plugin-not-whitelisted": "Unable to install plugin – only plugins whitelisted by the NodeBB Package Manager can be installed via the ACP"
 }

public/src/ajaxify.js

@@ -14,7 +14,10 @@ ajaxify = window.ajaxify || {};
 	ajaxify.currentPage = null;
 
 	ajaxify.go = function (url, callback, quiet) {
+		// Automatically reconnect to socket and re-ajaxify on success
 		if (!socket.connected) {
+			app.reconnect();
+
 			if (ajaxify.reconnectAction) {
 				$(window).off('action:reconnected', ajaxify.reconnectAction);
 			}
@@ -410,6 +413,7 @@ ajaxify = window.ajaxify || {};
 	require(['translator', 'benchpress'], function (translator, Benchpress) {
 		translator.translate('[[error:no-connection]]');
 		translator.translate('[[error:socket-reconnect-failed]]');
+		translator.translate(`[[global:reconnecting-message, ${config.siteTitle}]]`);
 		Benchpress.registerLoader(ajaxify.loadTemplate);
 		Benchpress.setGlobal('config', config);
 	});

public/src/sockets.js

@@ -39,16 +39,37 @@ socket = window.socket;
 		addHandlers();
 	}
 
+	window.app.reconnect = () => {
+		if (socket.connected) {
+			return;
+		}
+
+		var reconnectEl = $('#reconnect');
+		$('#reconnect-alert')
+			.removeClass('alert-danger pointer')
+			.addClass('alert-warning')
+			.find('p')
+			.translateText(`[[global:reconnecting-message, ${config.siteTitle}]]`);
+
+		reconnectEl.html('<i class="fa fa-spinner fa-spin"></i>');
+		socket.connect();
+	};
+
 	function addHandlers() {
 		socket.on('connect', onConnect);
 
 		socket.on('disconnect', onDisconnect);
 
 		socket.io.on('reconnect_failed', function () {
-			$('#reconnect-alert').removeClass('alert-warning')
-				.addClass('alert-danger')
+			var reconnectEl = $('#reconnect');
+			reconnectEl.html('<i class="fa fa-plug text-danger"></i>');
+
+			$('#reconnect-alert')
+				.removeClass('alert-warning')
+				.addClass('alert-danger pointer')
 				.find('p')
-				.translateText('[[error:socket-reconnect-failed]]');
+				.translateText('[[error:socket-reconnect-failed]]')
+				.one('click', app.reconnect);
 		});
 
 		socket.on('checkSession', function (uid) {
@@ -105,7 +126,7 @@ socket = window.socket;
 			var reconnectAlert = $('#reconnect-alert');
 
 			reconnectEl.tooltip('destroy');
-			reconnectEl.html('<i class="fa fa-check"></i>');
+			reconnectEl.html('<i class="fa fa-check text-success"></i>');
 			reconnectAlert.fadeOut(500);
 			reconnecting = false;