Misc changes and Fixes.

chat.css

@@ -22,6 +22,7 @@ input {
 
 label {
     display: block;
+    margin-top: 1%;
     
 }
 
@@ -51,6 +52,7 @@ button {
     overflow-x: hidden;
     text-align: left;
     color: white;
+    overflow-wrap: break-word;
 }
 
 #loggeduser {

chat.js

@@ -41,14 +41,14 @@ async function fetchMessages() {
     document.getElementById("innerchatbox").innerHTML = ""
 
     for (const message of recievedMessages) {
-      printText(message.user.bold().toString() + ": " + message.body.toString());
+        printText(message.user.bold().toString() + ": " + message.body.toString());
     }
 
-        
+
     if (recievedMessages.length != messageCount) {
         let scroll = document.getElementById("innerchatbox");
         scroll.scrollTop = scroll.scrollHeight;
-        }
+    }
 
     messageCount = recievedMessages.length;
 }
@@ -66,9 +66,13 @@ function printText(text) {
 
 //LOGGED IN STUFF
 //TODO ADD CHECK TO SEE IF USERNAME AND TOKEN MATCHES
-if (username === null) {
-    document.querySelector("#loggeduser").innerHTML = 'You are not logged in'
-    username = ''
-} else {
-    document.querySelector("#loggeduser").innerHTML = `You are logged in as ${username}`
-}
+function loggedIn() {
+    username = localStorage.getItem('username');
+    if (username === null || username === '') {
+        document.querySelector("#loggeduser").innerHTML = 'You are not logged in'
+    } else {
+        document.querySelector("#loggeduser").innerHTML = `You are logged in as ${username}`
+    }
+}
+
+loggedIn()

login.js

@@ -18,14 +18,12 @@ form.addEventListener("submit", async function (event) {
   try {
     const loginInfo = await loginFetch();
 
-    console.log(loginInfo)
-
-    if (loginInfo.status === 200) {
+    if (loginInfo.status === 'ok') {
       login()
     } else {
       incorrectLogin()
     }
-  } catch(e) {
+  } catch (e) {
     console.log(e);
     document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later. ' + e.toString();
   }
@@ -36,13 +34,14 @@ form.addEventListener("submit", async function (event) {
 
 async function loginFetch() {
   let sendLoginInfo = { "name": uname, "pin": pin }
-  return await fetch('/api/login/', {
+  const res = await fetch('/api/login/', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(sendLoginInfo),
   });
+  return await res.json();
 }
 
 
@@ -52,10 +51,7 @@ function login() {
   window.location.replace("/index.html")
   document.querySelector("#errormessage").innerHTML = ''
   localStorage.setItem('username', `${uname}`);
-
-  if (username != '') {
-    document.querySelector("#username").innerHTML = `Logged in as ${username}`
-  }
+  document.querySelector("#username").innerHTML = `Logged in as ${uname}`
 }
 
 function incorrectLogin() {

logout.js

@@ -8,15 +8,16 @@
 //LOGOUT FETCH FUNCTION
 
 async function logout() {
-    let sendLogoutInfo = { "name": username }
-    fetch('/api/logout/', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
+  let sendLogoutInfo = { "name": username }
+  fetch('/api/logout/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
     },
-      body: JSON.stringify(sendLogoutInfo),
-    });
-    document.querySelector("#errormessage").innerHTML = 'Logged out.'
-    localStorage.removeItem('username')
+    body: JSON.stringify(sendLogoutInfo),
+  });
+  document.querySelector("#errormessage").innerHTML = 'Logged out.'
+  localStorage.removeItem('username')
+  username = null;
+  loggedIn()
 }
-  

register.js

@@ -6,7 +6,6 @@ let pin = document.querySelector('#pin').value;
 let selected = document.querySelector('#selected').value;
 let custom = document.querySelector('#custom').value;
 let pronouns = ''
-let responseJson;
 const form = document.querySelector('form');
 
 //SUBMIT FUNCTION &CHECKING IF USERNAME IS TAKEN
@@ -28,6 +27,8 @@ form.addEventListener("submit", async function (event) {
     newPronouns = selected
   }
 
+  //CHECKS IF A USERNAME IS TAKEN
+
   const response = await fetch(`api/users/${uname}/`);
   const isTaken = await response.json();
 

updateinfo.js

@@ -8,7 +8,6 @@ let newPin = document.querySelector('#newpin').value;
 const form = document.querySelector('form');
 let selected = document.querySelector('#selected').value;
 let custom = document.querySelector('#custom').value;
-let responseText;
 let updateEvent = ''
 let newEvent = ''
 let newPronouns = ''
@@ -27,6 +26,8 @@ form.addEventListener("submit", async function (event) {
   selected = formData.get('selected');
   custom = formData.get('custom')
 
+
+  //SETS NEWPRONOUNS DEPENDING ON WHAT THE USER SELECTED/TYPED
   if (custom === '' && selected === 'none') {
     newPronouns = ''
   } else if (custom !== '') {
@@ -35,20 +36,31 @@ form.addEventListener("submit", async function (event) {
     newPronouns = selected
   }
 
-//CHECKS IF THE USER IS CHANGING MORE THAN ONE TEXT FIELD AT A TIME
-  let onlyChangeOne = document.querySelector("#errormessage").innerHTML = 'You can only change one at a time!'
+  //CHECKS IF A USERNAME IS TAKEN
+  if (newUname !== '') {
+    const response = await fetch(`api/users/${newUname}/`);
+    const isTaken = await response.json();
+
+    if (isTaken.status === "ok") {
+      document.querySelector('#errormessage').innerHTML = `${newUname} is already taken.`
+    } else {
+    }
+  }
+
+  //CHECKS IF THE USER IS CHANGING MORE THAN ONE TEXT FIELD AT A TIME
   if (newUname !== '' && newPin !== '') {
-    onlyChangeOne
+    document.querySelector("#errormessage").innerHTML = 'You can only change one at a time!'
   } else if (newUname !== '' && newPronouns !== '') {
-    onlyChangeOne
+    document.querySelector("#errormessage").innerHTML = 'You can only change one at a time!'
   } else if (newPin !== '' && newPronouns !== '') {
-    onlyChangeOne
+    document.querySelector("#errormessage").innerHTML = 'You can only change one at a time!'
+  } else if (newUname !== '' && newPin !== '' && newPronouns !== '') {
+    document.querySelector("#errormessage").innerHTML = 'You can only change one at a time!'
   } else {
-    checkLoginInfo()
   }
 
 
-// ASSIGNS VARIABLES TO BE SENT TO API
+  // ASSIGNS VARIABLES TO BE SENT TO API
   if (newUname === '' && newPin === '' && newPronouns !== '') {
     newEvent = newPronouns
     updateEvent = 'pronouns'
@@ -61,42 +73,41 @@ form.addEventListener("submit", async function (event) {
   } else if (newPin === '' && newUname === '' && newPronouns === '') {
     document.querySelector("#errormessage").innerHTML = 'Please enter a new name, pin, or pronouns!'
   } else {
-    checkLoginInfo()
   }
 
-  //CHECKS IF USERNAME IS TAKEN
-    const isTaken = await getUname();
+  loginStatus()
 
-    if (isTaken.status === 'ok') {
-      document.querySelector("#errormessage").innerHTML = `username ${newUname} is already taken! `
-    }
 })
 
+//CHECKS IF THE LOGIN IS A SUCCESS
+async function loginStatus() {
+  const loginInfo = await checkLoginInfo();
 
-// FETCH FUNTIONS. FETCHING USERNAME TO SEE IF ITS TAKEN.
-
-async function getUname() {
-  let response = await fetch(`/api/users/${newUname}`);
-  responseJson = await response.json();
-  return responseJson;
-}
-
-
-//FETCH FUNCTION TO UPDATE USER INFO
-
-  //TODO ADD CHECKING THE TOKEN with LOGIN IN IF STATEMENT
-//CHECKING IF THE USER CAN LOGIN WITH GIVEN CURRENT USERNAME AND PIN
-async function checkLoginInfo() {
-  const response = await fetch(`/api/users/${uname}/${pin}`);
-  const loginInfo = await response.json();
-
-  if (loginInfo.status === "ok") {
+  if (loginInfo.status === 'ok') {
     updateInfo()
   } else {
     incorrectLogin()
   }
 }
 
+//TODO ADD CHECKING THE TOKEN WITH LOGIN IN IF STATEMENT
+//CHECKING IF THE USER CAN LOGIN WITH GIVEN CURRENT USERNAME AND PIN
+// LOGIN FETCH
+
+async function checkLoginInfo() {
+  let sendLoginInfo = { "name": uname, "pin": pin }
+  const res = await fetch('/api/login/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(sendLoginInfo),
+  });
+  return await res.json();
+}
+
+//FETCH FUNCTION TO UPDATE USER INFO
+
 async function updateInfo() {
   let sendUpdateInfo = { "name": uname, "pin": pin, "changed_event": updateEvent, "new_event": newEvent }
   fetch('/api/users/change', {
@@ -106,7 +117,7 @@ async function updateInfo() {
     },
     body: JSON.stringify(sendUpdateInfo),
   });
-  //document.querySelector("#errormessage").innerHTML = 'Login Changed!'
+  document.querySelector("#errormessage").innerHTML = 'Login Changed!'
   //window.location.replace("/login.html")
 }