Lots of fixes and misc changes.

.gitignore

@@ -1,3 +1,4 @@
 streamchat.code-workspace
 assets/
 todo.txt
+isonline.js

chat.css

@@ -25,6 +25,10 @@ label {
     
 }
 
+button {
+    padding: 1%;
+}
+
 #loggeduser {
     font-size: 30px;
 }
@@ -44,6 +48,7 @@ label {
     width: 100%;
     height: 90%;
     overflow-y: scroll;
+    overflow-x: hidden;
     text-align: left;
     color: white;
 }

chat.html

@@ -30,22 +30,13 @@
 
         <div id="loggeduser"></div>
 
-        <script type="text/javascript">
-            window.onload = function() {
-              let a = document.getElementById("logoutlink");
-              a.onclick = function() {
-                logout()
-                return false;
-              }
-            }
-        </script>
+        <script src="chat.js"></script>
+        <script src="logout.js"></script>
 
-        <a id="logoutlink" href="stream.html">(logout)</a> 
+        <button type="button" onclick="logout()">Logout</button> 
 
         <div id="errormessage"></div>
         
-        <script src="chat.js"></script>
-        <script src="logout.js"></script>
 
     </body>
 

chat.js

@@ -1,5 +1,4 @@
 // VARIABLES
-let date = '2021-07-22'
 let messageCount = 0;
 let username = localStorage.getItem('username');
 const form = document.querySelector('form');
@@ -20,7 +19,7 @@ form.addEventListener("submit", async function (event) {
 //SEND MESSAGE FETCH FUNCTION
 
 async function sendMessage() {
-    sendMessageInfo = { "name": username, "body": formMessage, "date": date }
+    sendMessageInfo = { "name": username, "body": formMessage }
     fetch('/api/message/send', {
         method: 'POST',
         headers: {

index.css

@@ -33,7 +33,7 @@ a {
 
 #chatbox {
     flex: 1;
-    height: 50rem;
+    height: 53rem;
     margin-left: 0.3em;
     margin-right: -50%;
     border: none;

login.js

@@ -4,6 +4,7 @@
 let uname = document.querySelector('#uname').value;
 let pin = document.querySelector('#pin').value;
 const form = document.querySelector('form');
+let username = localStorage.getItem('username');
 
 // SUBMIT FORM FUNCTION. AND FETCH USERNAME AND PIN FROM API. 
 
@@ -14,24 +15,47 @@ form.addEventListener("submit", async function (event) {
   uname = formData.get('uname');
   pin = formData.get('pin');
 
-  const response = await fetch(`/api/users/${uname}/${pin}`);
-  const loginInfo = await response.json();
+  try {
+    const loginInfo = await loginFetch();
 
-  if (loginInfo.status === "ok") {
-    login()
-  } else {
-    incorrectLogin()
+    console.log(loginInfo)
+
+    if (loginInfo.status === 200) {
+      login()
+    } else {
+      incorrectLogin()
+    }
+  } catch(e) {
+    console.log(e);
+    document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later. ' + e.toString();
   }
 })
 
 
+// LOGIN FETCH
+
+async function loginFetch() {
+  let sendLoginInfo = { "name": uname, "pin": pin }
+  return await fetch('/api/login/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(sendLoginInfo),
+  });
+}
+
+
 // FUNCTIONS FOR WHETHER THE LOGIN WAS A SUCCESS OR FAILURE
 
 function login() {
-  console.log('You have logged in!')
-  document.querySelector("#username").innerHTML = `Logged in as ${uname}`
+  window.location.replace("/index.html")
   document.querySelector("#errormessage").innerHTML = ''
-  localStorage.setItem("username", `${uname}`);
+  localStorage.setItem('username', `${uname}`);
+
+  if (username != '') {
+    document.querySelector("#username").innerHTML = `Logged in as ${username}`
+  }
 }
 
 function incorrectLogin() {

logout.js

@@ -1,6 +1,9 @@
 //VARIBLES
 
-let username = localStorage.getItem('username');
+// //IF NOT LOGGED IN DON'T SHOW LOG IN BUTTON
+//  if (username === '') {
+//     document.getElementById("logoutlink").style.display = "none";
+//  }
 
 //LOGOUT FETCH FUNCTION
 
@@ -11,10 +14,9 @@ async function logout() {
       headers: {
         'Content-Type': 'application/json',
     },
-      body: JSON.stringify(sendRegisterInfo),
+      body: JSON.stringify(sendLogoutInfo),
     });
     document.querySelector("#errormessage").innerHTML = 'Logged out.'
     localStorage.removeItem('username')
-
-  }
+}
   

register.js

@@ -6,7 +6,7 @@ let pin = document.querySelector('#pin').value;
 let selected = document.querySelector('#selected').value;
 let custom = document.querySelector('#custom').value;
 let pronouns = ''
-let responseText;
+let responseJson;
 const form = document.querySelector('form');
 
 //SUBMIT FUNCTION &CHECKING IF USERNAME IS TAKEN
@@ -20,43 +20,40 @@ form.addEventListener("submit", async function (event) {
   selected = formData.get('selected');
   custom = formData.get('custom')
 
-  if (custom !== '') {
-    pronouns = custom
+  if (custom === '' && selected === 'none') {
+    newPronouns = ''
+  } else if (custom !== '') {
+    newPronouns = custom
   } else {
-    pronouns = selected
+    newPronouns = selected
   }
 
-  try {
-    const isNotTaken = await getUname();
+  const response = await fetch(`api/users/${uname}/`);
+  const isTaken = await response.json();
 
-    if (isNotTaken.status === "fail") {
-      register()
-    } else {
-      document.querySelector("#errormessage").innerHTML = `${uname} is already taken.`
-    }
-  } catch {
-    document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later.'
+  //YES THIS IS CONFUSING I KNOW.
+  if (isTaken.status === "fail") {
+    register()
+  } else {
+    document.querySelector('#errormessage').innerHTML = `${uname} is already taken.`
   }
 })
 
 //FETCH FUNCTIONS. GETTING USERNAME FROM API & REGISTERING USER ASSIGNED NAME AND PIN. 
 
-async function getUname() {
-  let response = await fetch(`/api/users/${uname}`);
-  responseJson = await response.json();
-  return responseJson;
-}
-
 async function register() {
   let sendRegisterInfo = { "name": uname, "pin": pin, "pronouns": pronouns }
   fetch('/api/register/', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
-  },
+    },
     body: JSON.stringify(sendRegisterInfo),
   });
   document.querySelector("#errormessage").innerHTML = 'Registered!'
   window.location.replace("/login.html")
 }
 
+// function errorMessage() {
+//   document.querySelector("#errormessage").innerHTML = 'An error has occurrred. Please try again later.'
+// }

style.css

@@ -25,6 +25,10 @@ form {
     padding-top: 1%;
 }
 
+#logoutlink {
+    display: block;
+}
+
 label {
     font-family: "Lucida Console", "Courier New", monospace;
 }