diff --git a/client/css/style.css b/client/css/style.css index 43442956..abb66fbe 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1317,6 +1317,14 @@ button { align-items: flex-end; } +#connection-error { + display: none; +} + +#connection-error.shown { + display: block; +} + [contenteditable]:focus { outline: none; } diff --git a/client/index.html b/client/index.html index a1a13c40..3092287d 100644 --- a/client/index.html +++ b/client/index.html @@ -57,6 +57,7 @@
+
diff --git a/client/js/lounge.js b/client/js/lounge.js index cdc84013..4c7b3b2f 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -1,10 +1,12 @@ "use strict"; $(function() { - $("#loading-page-message").text("Connecting…"); - var path = window.location.pathname + "socket.io/"; - var socket = io({path: path}); + var socket = io({ + path: path, + autoConnect: false, + reconnection: false + }); var commands = [ "/close", "/connect", @@ -74,14 +76,41 @@ $(function() { } ); - socket.on("error", function(e) { - console.log(e); + [ + "connect_error", + "connect_failed", + "disconnect", + "error", + ].forEach(function(e) { + socket.on(e, function(data) { + $("#loading-page-message").text("Connection failed: " + data); + $("#connection-error").addClass("shown").one("click", function() { + window.onbeforeunload = null; + window.location.reload(); + }); + + // Disables sending a message by pressing Enter. `off` is necessary to + // cancel `inputhistory`, which overrides hitting Enter. `on` is then + // necessary to avoid creating new lines when hitting Enter without Shift. + // This is fairly hacky but this solution is not permanent. + $("#input").off("keydown").on("keydown", function(event) { + if (event.which === 13 && !event.shiftKey) { + event.preventDefault(); + } + }); + // Hides the "Send Message" button + $("#submit").remove(); + + console.error(data); + }); }); - $.each(["connect_error", "disconnect"], function(i, e) { - socket.on(e, function() { - refresh(); - }); + socket.on("connecting", function() { + $("#loading-page-message").text("Connecting…"); + }); + + socket.on("connect", function() { + $("#loading-page-message").text("Finalizing connection…"); }); socket.on("authorized", function() { @@ -1343,11 +1372,6 @@ $(function() { } } - function refresh() { - window.onbeforeunload = null; - location.reload(); - } - function sortable() { sidebar.find(".networks").sortable({ axis: "y", @@ -1491,4 +1515,7 @@ $(function() { } } ); + + // Only start opening socket.io connection after all events have been registered + socket.open(); }); diff --git a/client/themes/crypto.css b/client/themes/crypto.css index b1d86268..07515ae6 100644 --- a/client/themes/crypto.css +++ b/client/themes/crypto.css @@ -58,6 +58,14 @@ a:hover, background: #00ff0e; } +.btn-reconnect { + background: #f00; + color: #fff; + border: 0; + border-radius: 0; + margin: 0; +} + #settings .opt { line-height: 20px; font-size: 12px; diff --git a/client/themes/example.css b/client/themes/example.css index f59944fe..509c2a65 100644 --- a/client/themes/example.css +++ b/client/themes/example.css @@ -46,6 +46,14 @@ body { border-radius: 2px; } +.btn-reconnect { + background: #e74c3c; + color: #fff; + border: 0; + border-radius: 0; + margin: 0; +} + @media (max-width: 768px) { #sidebar { left: -220px; diff --git a/client/themes/morning.css b/client/themes/morning.css index 41adf99a..4fa23bea 100644 --- a/client/themes/morning.css +++ b/client/themes/morning.css @@ -227,3 +227,11 @@ body { #chat .toggle-content .body { color: #99a2b4; } + +.btn-reconnect { + background: #e74c3c; + color: #fff; + border: 0; + border-radius: 0; + margin: 0; +} diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css index 7d838dac..b6a98d65 100644 --- a/client/themes/zenburn.css +++ b/client/themes/zenburn.css @@ -253,3 +253,11 @@ body { #chat .toggle-content .body { color: #d2d39b; } + +.btn-reconnect { + background: #e74c3c; + color: #fff; + border: 0; + border-radius: 0; + margin: 0; +}