Handle websocket disconnection on UI

Cargo.toml

@@ -43,3 +43,6 @@ yaml-rust = "0.4" #only in debug mode
 html-minifier = "3.0"
 yaml-rust = "0.4"
 linked-hash-map = "0.5"
+
+[profile.dev.package.scrypt]
+opt-level = 3

src/frontend/index.css

@@ -255,7 +255,8 @@ button:hover::after {
 #left_panel ul li.is_verified p::after {
     content: url("/static/imgs/icons/verified/ACCENT_COLOR");
 }
-#left_panel ul li .not_seen_marker {
+#left_panel ul li.not_seen::after {
+    content: "";
     width: 12px;
     height: 12px;
     background-color: var(--accent);
@@ -355,7 +356,6 @@ button:hover::after {
 }
 #file_transfer {
     border-top: 2px solid var(--accent);
-    display: none;
     position: relative;
 }
 #file_transfer.active {
@@ -407,7 +407,7 @@ button:hover::after {
     margin-bottom: 0;
 }
 #msg_log {
-    overflow-y: scroll;
+    overflow-y: auto;
     white-space: pre-wrap;
 }
 #msg_log p {
@@ -453,6 +453,19 @@ button:hover::after {
     width: 2em;
     margin-left: 15px;
 }
-#message_box, #chat_header, #msg_log {
+#message_box, #chat_header, #msg_log, #file_transfer {
     display: none;
 }
+#disconnected {
+    display: none;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+#disconnected.disconnected {
+    display: flex;
+}
+#disconnected img {
+    width: 70px;
+    height: 70px;
+}

src/frontend/index.html

@@ -61,6 +61,10 @@
                         <input type="file" id="attach_file" multiple>
                     </label>
                 </div>
+                <div id="disconnected">
+                    <img src="/static/imgs/icons/warning/ff0000">
+                    <h1>Websocket connection closed</h1>
+                </div>
             </div>
         </main>
         <script>

src/frontend/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 let identityName = undefined;
-let socket = null;
+let socket = new WebSocket("ws://"+location.hostname+":"+websocketPort+"/ws");;
 let notificationAllowed = false;
 let localIps = [];
 let currentSessionId = -1;
@@ -14,7 +14,7 @@ let avatarTimestamps = new Map([
 
 function onClickSession(event) {
     let sessionId = event.currentTarget.getAttribute("data-sessionId");
-    if (sessionId != null) {
+    if (sessionId != null && socket.readyState === WebSocket.OPEN) {
         currentSessionId = sessionId;
         let session = sessionsData.get(sessionId);
         if (!session.seen) {
@@ -437,7 +437,6 @@ function getCookie(cname) {
     return "";
 }
 
-socket = new WebSocket("ws://"+location.hostname+":"+websocketPort+"/ws");
 socket.onopen = function() {
     console.log("Connected");
     socket.send(getCookie("aira_auth")); //authenticating websocket connection
@@ -519,6 +518,12 @@ socket.onmessage = function(msg) {
 };
 socket.onclose = function() {
     console.log("Disconnected");
+    currentSessionId = -1;
+    displayHistory();
+    displayHeader();
+    displayChatBottom();
+    displaySessions();
+    document.getElementById("disconnected").classList.add("disconnected");
 };
 
 function onNewSession(sessionId, outgoing, fingerprint, ip, name) {
@@ -1002,9 +1007,7 @@ function generateSession(sessionId, session) {
         li.classList.add("is_verified");
     }
     if (!session.seen) {
-        let marker = document.createElement("div");
-        marker.classList.add("not_seen_marker");
-        li.appendChild(marker);
+        li.classList.add("not_seen");
     }
     if (sessionId == currentSessionId) {
         li.classList.add("current");
@@ -1130,32 +1133,34 @@ function displayChatBottom(speed = undefined) {
     }
 }
 function displayHistory(scrollToBottom = true) {
-    msg_log.style.display = "block";
     msg_log.innerHTML = "";
     let session = sessionsData.get(currentSessionId);
-    let previousOutgoing = undefined;
-    msgHistory.get(currentSessionId).forEach(entry => {
-        let name = undefined;
-        let sessionId = undefined;
-        if (previousOutgoing != entry[0]) {
-            previousOutgoing = entry[0];
-            if (entry[0]) { //outgoing msg
-                name = identityName;
-            } else {
-                name = session.name;
-                sessionId = currentSessionId;
+    if (typeof session === "undefined") {
+        msg_log.style.display = "none";
+    } else {
+        msg_log.style.display = "block";
+        let previousOutgoing = undefined;
+        msgHistory.get(currentSessionId).forEach(entry => {
+            let name = undefined;
+            let sessionId = undefined;
+            if (previousOutgoing != entry[0]) {
+                previousOutgoing = entry[0];
+                if (entry[0]) { //outgoing msg
+                    name = identityName;
+                } else {
+                    name = session.name;
+                    sessionId = currentSessionId;
+                }
             }
+            if (entry[1]) { //is file
+                msg_log.appendChild(generateFile(name, sessionId, entry[0], entry[2]));
+            } else {
+                msg_log.appendChild(generateMessage(name, sessionId, entry[2]));
+            }
+        });
+        if (scrollToBottom) {
+            msg_log.scrollTop = msg_log.scrollHeight;
         }
-        if (entry[1]) { //is file
-            msg_log.appendChild(generateFile(name, sessionId, entry[0], entry[2]));
-        } else {
-            msg_log.appendChild(generateMessage(name, sessionId, entry[2]));
-        }
-    });
-    if (scrollToBottom) {
-        msg_log.scrollTop = msg_log.scrollHeight;
-    }
-    if (typeof session !== "undefined") {
         if (msg_log.scrollHeight <= msg_log.clientHeight && session.isContact) {
             socket.send("load_msgs "+currentSessionId);
         }