Misc changes.

chat.css

@@ -56,7 +56,7 @@ button {
 }
 
 #loggeduser {
-    padding-top: 1.5%
+    padding-top: 2%
 }
 
 #errormessage {

chat.html

@@ -30,13 +30,12 @@
 
         <div id="loggeduser"></div>
 
-        <script src="chat.js"></script>
-        <script src="logout.js"></script>
-
-        <button type="button" onclick="logout()">Logout</button> 
+        <button type="button" id="logoutbutton" onclick="logout()">Logout</button> 
 
         <div id="errormessage"></div>
         
+        <script src="chat.js"></script>
+        <script src="logout.js"></script>
 
     </body>
 

chat.js

@@ -12,8 +12,16 @@ form.addEventListener("submit", async function (event) {
 
     formMessage = formData.get('message').toString();
 
-    sendMessage()
-
+        //CHECKS TO SEE IF THE PERSON IS LOGGED IN IN ORDER TO SEND A MESSAGE.
+        const response = await fetch(`api/token/${username}/`);
+        const matches = await response.json();
+      
+        //YES THIS IS CONFUSING I KNOW.
+        if (matches.status === "ok") {
+          sendMessage()
+        } else {
+            document.querySelector("#errormessage").innerHTML = 'Username and token mismatch. Try logging in again.'
+        }
 })
 
 //SEND MESSAGE FETCH FUNCTION
@@ -68,7 +76,7 @@ function printText(text) {
 //TODO ADD CHECK TO SEE IF USERNAME AND TOKEN MATCHES
 function loggedIn() {
     username = localStorage.getItem('username');
-    if (username === null || username === '') {
+    if (username === null) {
         document.querySelector("#loggeduser").innerHTML = 'You are not logged in'
     } else {
         document.querySelector("#loggeduser").innerHTML = `You are logged in as ${username}`

logout.js

@@ -1,9 +1,9 @@
 //VARIBLES
-
-// //IF NOT LOGGED IN DON'T SHOW LOG IN BUTTON
-//  if (username === '') {
-//     document.getElementById("logoutlink").style.display = "none";
-//  }
+myStorage = window.localStorage;
+// //IF NOT LOGGED IN DON'T SHOW LOGOUT BUTTON
+while (username === null) {
+  document.getElementById("logoutbutton").style.display = "none";
+}
 
 //LOGOUT FETCH FUNCTION
 
@@ -21,3 +21,29 @@ async function logout() {
   username = null;
   loggedIn()
 }
+
+//CHECKS TO SEE IF USERNAME MATCHES TOKEN 
+let tokenUpdate = window.setInterval(checkToken, 1000);
+
+async function checkToken() {
+  const response = await fetch(`api/token/${username}/`);
+  const matches = await response.json();
+
+  //YES THIS IS CONFUSING I KNOW.
+  if (matches.status === "fail") {
+    loggedOut()
+  }
+
+  // IF NO USERNAME BUT HAS A TOKEN THEN LOGOUT
+
+  if (matches.status === "ok" && myStorage.length === 0) {
+    logout()
+  }
+}
+
+//AND IF THEY DON'T HAVE A TOKEN CLEARS THE LOCAL STORED USERNAME
+
+function loggedOut() {
+  localStorage.removeItem('username')
+  document.querySelector("#loggeduser").innerHTML = 'You are not logged in'
+}