localstorage and disconnect

index.html

@@ -18,7 +18,6 @@
 ██████╔╝██║  ██║██║██║        ██║   ██║  ██║██╗╚██████╔╝███████║
 ╚═════╝ ╚═╝  ╚═╝╚═╝╚═╝        ╚═╝   ╚═╝  ╚═╝╚═╝ ╚═════╝ ╚══════╝
             </pre>
-            <a>root@baipyr.us:~# </a>
             <a id="current"></a>
             <input type="text" id="input">
         </div>

js/commands.js

@@ -152,7 +152,7 @@ function cmd_echo(input) {
 function cmd_nick(input) {
     if (input === undefined)
         return "No nickname was given!";
-    if (user.connected)
+    if (!!window.localStorage.getItem("connected"))
         sendNickname(input[0]);
     else
         connect(input[0]);
@@ -163,25 +163,23 @@ function cmd_nick(input) {
 function cmd_msg(input) {
     if (input === undefined)
         return "No recipient was given!";
-    if (!user.connected)
+    if (!window.localStorage.getItem("connected"))
         return "You are not connected! Use the 'nick' command to connect using your username.";
-    if (user.name === "")
+    if (window.localStorage.getItem("name") === "")
         return "You do not have a name!";
     // Get recipient username without spaces and pretext
     const username = input[0];
     pretext.current = `Chat (${username})> `;
     // Set chat mode to direct messages and start pulling
     chatMode = `msg ${username}`;
-    user.chatPull = setInterval(getChatMessages, 500);
+    userData.chatPull = setInterval(getChatMessages, 500);
 }
 
 // Exit current level (example: chat -> main)
 function cmd_exit(error) {
     const level = chatMode.split(' ')[0];
-    if (level === "default") {
-        console.log("Test!");
+    if (level === "default")
         return "Already at top-level!";
-    }
 
     // Set mode to default and reset pretext
     chatMode = "default";
@@ -191,7 +189,7 @@ function cmd_exit(error) {
         // case "chat":
         case "msg":
             // Stop chat pulling
-            clearInterval(user.chatPull);
+            clearInterval(userData.chatPull);
             break;
     }
 
@@ -202,7 +200,7 @@ function cmd_exit(error) {
 
 // List all users to be able to chat with
 function cmd_ls() {
-    if (!user.connected)
+    if (!window.localStorage.getItem("connected"))
         return "You are not connected! Use the 'nick' command to connect using your username.";
     requestUsernames();
     return null;
@@ -210,6 +208,15 @@ function cmd_ls() {
 
 // Ping host for two-way-delay
 function cmd_ping() {
+    if (!window.localStorage.getItem("connected"))
+        return "You are not connected! Use the 'nick' command to connect using your username.";
     requestPing();
     return null;
+}
+
+// User wants to log out
+function cmd_logout() {
+    if (!window.localStorage.getItem("connected"))
+        return "You are not even connected yet!";
+    disconnect();
 }

js/main.js

@@ -1,8 +1,3 @@
-let pretext = {
-    original: "root@baipyr.us:~# ",
-    current: "root@baipyr.us:~# "
-};
-
 // Initiating variables
 const length = pretext.current.length+1;
 let cursorPosition = 0;
@@ -14,6 +9,10 @@ const tbDiv = document.getElementById("textbox");
 const textIn = document.getElementById("input");
 const textCur = document.getElementById("current");
 const cursor = document.getElementById("cursor");
+// Set initial pretext
+const pretextElement = document.createElement('a');
+pretextElement.innerHTML = pretext.original;
+tbDiv.insertBefore(pretextElement, tbDiv.children[1]);
 // Initial cursor offset
 cursor.style.transform = `translate(${length-1}ch,${2.222*7-0.4}ch)`;
 
@@ -188,7 +187,7 @@ function createText(str, safe=true) {
 // Rename last-posted pretext to own username
 function renameToSelf() {
     const tbc = tbDiv.children;
-    tbc[tbc.length - 3].innerHTML = `${user.name}#${user.id}: `;
+    tbc[tbc.length - 3].innerHTML = `${window.localStorage.getItem("name")}#${window.localStorage.getItem("id")}: `;
 }
 
 // Update cursor position based on coordinates

js/networking.js

@@ -1,11 +1,25 @@
 // Global networking variables
-const user = { id: "", name: "", history: [], connected: false, chatPull: null };
+let pretext = {
+    original: "root@baipyr.us:~# ",
+    current: "root@baipyr.us:~# "
+};
+
+const userData = { history: [], chatPull: null };
 let chatMode = "default";
 
+if (window.localStorage.getItem("id") === null)
+    window.localStorage.setItem("id", "");
+if (window.localStorage.getItem("name") === null)
+    window.localStorage.setItem("name", "");
+if (window.localStorage.getItem("connected") === null)
+    window.localStorage.setItem("connected", "");
+else if (!!window.localStorage.getItem("connected"))
+    pretext.original = pretext.current = `${window.localStorage.getItem("name")}@baipyr.us:~# `;
+
 
 // Tell server to disconnect
-document.body.onunload = document.body.onbeforeunload = () => {
-    if (user.connected)
+function disconnect() {
+    if (!!window.localStorage.getItem("connected")) {
         fetch('/disconnect', {
             method: 'POST',
             headers: {
@@ -13,15 +27,20 @@ document.body.onunload = document.body.onbeforeunload = () => {
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({
-                name: user.name,
-                id: user.id
+                name: window.localStorage.getItem("name"),
+                id: window.localStorage.getItem("id")
             })
         }).then(res => {});
-};
+        window.localStorage.setItem("id", "");
+        window.localStorage.setItem("name", "");
+        window.localStorage.setItem("connected", "");
+        pretext.original = pretext.current = "root@baipyr.us:~# ";
+    }
+}
 
 // Connect to server
 function connect(name) {
-    user.name = name;
+    window.localStorage.setItem("name", name);
     fetch('/connect', {
         method: 'POST',
         headers: {
@@ -31,7 +50,7 @@ function connect(name) {
         body: JSON.stringify({ name })
     }).then(res => {
         if (res.status === 200) {
-            user.connected = true;
+            window.localStorage.setItem("connected", "1");
             return res.json();
         }
         // No valid status code was sent
@@ -41,8 +60,8 @@ function connect(name) {
             return;
         // Save provided id
         const { id } = res;
-        user.id = id;
-        pretext.original = pretext.current = `${user.name}@baipyr.us:~# `;
+        window.localStorage.setItem("id", id);
+        pretext.original = pretext.current = `${name}@baipyr.us:~# `;
         outputText({output: `Connected as '${name}#${id}'.`});
     });
 }
@@ -50,7 +69,8 @@ function connect(name) {
 
 // Send nickname to server, receive verification
 function sendNickname(name) {
-    user.name = name;
+    const oldName = window.localStorage.getItem("name");
+    window.localStorage.setItem("name", name);
     fetch('/nickname', {
         method: 'POST',
         headers: {
@@ -58,8 +78,8 @@ function sendNickname(name) {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-            oldName: user.name,
-            id: user.id,
+            id: window.localStorage.getItem("id"),
+            oldName,
             name
         })
     }).then(res => {
@@ -71,8 +91,8 @@ function sendNickname(name) {
             return;
         // Receive name and save it
         const { id } = res;
-        user.id = id;
-        pretext.original = pretext.current = `${user.name}@baipyr.us:~# `;
+        window.localStorage.setItem("id", id);
+        pretext.original = pretext.current = `${name}@baipyr.us:~# `;
         // Reply whether name is taken or not
         outputText({output: `Applied name '${name}#${id}'.`});
     });
@@ -87,8 +107,8 @@ function getChatMessages() {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-            name: user.name,
-            id: user.id
+            name: window.localStorage.getItem("name"),
+            id: window.localStorage.getItem("id")
         })
     }).then(res => {
         // Incoming messages
@@ -122,8 +142,8 @@ function directMessage(name, message) {
         },
         body: JSON.stringify({
             recipient: name,
-            name: user.name,
-            id: user.id,
+            name: window.localStorage.getItem("name"),
+            id: window.localStorage.getItem("id"),
             message
         })
     }).then(res => {});