Frontend: Added more logout features. and misc changes and fixes.

frontend/chat.css

@@ -5,39 +5,60 @@ html {
 }
 
 form {
-    width: 100%
+    width: 100%;
+    overflow:hidden;
 }
 
 input {
-    padding: 3%;
+    padding: 2%;
+    width: 100%;
+    background-color: darkgrey;
+    border-style: none;
+    border-bottom-style: solid;
+    border-bottom-color: black;
+    border-bottom-width: 1px;
+    font-family: "Lucida Console", "Courier New", monospace;
 }
 
 label {
-    visibility: hidden;
+    display: block;
+    margin-top: 1%;
+    
 }
 
-#chatbox {
+button {
+    padding: 1%;
+}
+
+#loggeduser {
+    font-size: 30px;
+}
+
+#outerchatbox {
     background-color: white;
     padding: 1rem;
     box-shadow: 10px 10px 10px black;
-    width: 40rem;
+    width: 30rem;
     height: 40rem;
     display: inline-flex;
     flex-direction: column;
 }
 
-#innerchatbox {
+#chatbox {
-    background-color: rgba(60, 60, 60, .75);
+    background-color: rgb(60, 60, 60);
     width: 100%;
     height: 90%;
     overflow-y: scroll;
+    overflow-x: hidden;
     text-align: left;
+    color: white;
+    overflow-wrap: break-word;
 }
 
 #loggeduser {
-    padding-top: 1%
+    padding-top: 2%
 }
 
-#error {
+#errormessage {
     padding-top: 2.5%;
 }

frontend/chat.html

@@ -15,22 +15,27 @@
 
         <h1>Welcome to the chat!</h1>
 
-        <div id="chatbox">
+        <div id="outerchatbox">
 
-            <div id="innerchatbox">
+            <div id="chatbox">
 
             </div>
             
             <form autocomplete="off">
-            <label for="message">Input Message Here:</label>
             <input type="text" id="message" name="message" required>
+            <label for="message">Input Message Above</label>
             </form>
 
         </div>
 
         <div id="loggeduser"></div>
 
+        <button type="button" id="logoutbutton" onclick="logout()">Logout</button> 
+
+        <div id="errormessage"></div>
+        
         <script src="chat.js"></script>
+        <script src="logout.js"></script>
 
     </body>
 

frontend/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');
@@ -11,16 +10,24 @@ form.addEventListener("submit", async function (event) {
     event.preventDefault();
     const formData = new FormData(form);
 
-    formMessage = formData.get('message');
+    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
 
 async function sendMessage() {
-    sendMessageInfo = { "name": username, "body": formMessage, "date": date }
+    sendMessageInfo = { "name": username, "body": formMessage }
     fetch('/api/message/send', {
         method: 'POST',
         headers: {
@@ -39,17 +46,17 @@ let messageUpdate = window.setInterval(fetchMessages, 500);
 async function fetchMessages() {
     const response = await fetch('/api/message/messages.json');
     const recievedMessages = await response.json();
-    document.getElementById("innerchatbox").innerHTML = ""
+    document.getElementById("chatbox").innerHTML = ""
 
     for (const message of recievedMessages) {
-      printText(message.user.bold() + ": " + message.body);
+        printText(message.user.bold().toString() + ": " + message.body.toString());
     }
 
-        
+
     if (recievedMessages.length != messageCount) {
-        let scroll = document.getElementById("innerchatbox");
+        let scroll = document.getElementById("chatbox");
         scroll.scrollTop = scroll.scrollHeight;
-        }
+    }
 
     messageCount = recievedMessages.length;
 }
@@ -59,7 +66,7 @@ async function fetchMessages() {
 
 function printText(text) {
     let p = document.createElement("p");
-    const div = document.getElementById("innerchatbox");
+    const div = document.getElementById("chatbox");
     div.appendChild(p)
     p.innerHTML = text
 }
@@ -67,9 +74,16 @@ function printText(text) {
 
 //LOGGED IN STUFF
 //TODO ADD CHECK TO SEE IF USERNAME AND TOKEN MATCHES
-if (username === null) {
+function loggedIn() {
-    document.querySelector("#loggeduser").innerHTML = 'You are not logged in'
+    username = localStorage.getItem('username');
-    username = ''
+    if (username === null) {
-} else {
+        document.querySelector("#loggeduser").innerHTML = 'You are not logged in'
-    document.querySelector("#loggeduser").innerHTML = `You are logged in as ${username}`
+    } else {
-}
+        document.querySelector("#loggeduser").innerHTML = `You are logged in as ${username}`
+    }
+}
+
+loggedIn()
+
+
+//REVIECE USERS PRONOUNS

frontend/index.html

@@ -7,28 +7,40 @@
         <meta name="description" content="Maya's Stream">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta charset="UTF-8">
-        <link rel="stylesheet" href="stream.css">
+        <link rel="stylesheet" href="index.css">
         <link rel="icon" href="/favicon.svg">
     </head>
 
     <body>
 <nav>
 
-<a href="register.html">Register Page</a>
+    <ul class="navigation-list">
+        <li><a href="index.html"><div class="buttons">Stream</div></a></li>
+        <li><a href="chat.html"><div class="buttons">Just Chat</div></a></li>
+        <li><a href="register.html"><div class="buttons">Register</div></a></li>
+        <li><a href="login.html"><div class="buttons">Login</div></a></li>
+        <li><a href="updateinfo.html"><div class="buttons">Update Info</div></a></li>
+    </ul>
 
-<a href="login.html">Login Page</a>
-
-<a href="updateinfo.html">Update Info Page</a>
 
 </nav>
+
+    <main>
+
+        <section>
+
         <div id="streamchat">
             <div id="stream">
-                <h1>Test Text</h1>
+                <h1>This is where the stream will go.</h1>
             </div>
 
-            <iframe id="chatbox" src="chat.html" title="chat box"></iframe> 
+            <iframe id="chatbox" src="chat.html" title="chat box" scrolling="no"></iframe> 
             
         </div>
+
+        </section>
+
+    </main>
     </body>
 
 </html>

frontend/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,43 @@ form.addEventListener("submit", async function (event) {
   uname = formData.get('uname');
   pin = formData.get('pin');
 
-  const response = await fetch(`/api/users/${uname}/${pin}`);
+  try {
-  const loginInfo = await response.json();
+    const loginInfo = await loginFetch();
 
-  if (loginInfo.status === "ok") {
+    if (loginInfo.status === 'ok') {
-    login()
+      login()
-  } else {
+    } else {
-    incorrectLogin()
+      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 }
+  const res = await fetch('/api/login/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(sendLoginInfo),
+  });
+  return await res.json();
+}
+
+
 // FUNCTIONS FOR WHETHER THE LOGIN WAS A SUCCESS OR FAILURE
 
 function login() {
-  console.log('You have logged in!')
+  window.location.replace("/index.html")
-  document.querySelector("#username").innerHTML = `Logged in as ${uname}`
   document.querySelector("#errormessage").innerHTML = ''
-  localStorage.setItem("username", `${uname}`);
+  localStorage.setItem('username', `${uname}`);
+  document.querySelector("#username").innerHTML = `Logged in as ${uname}`
 }
 
 function incorrectLogin() {

frontend/logout.js

@@ -1,9 +1,5 @@
 //VARIBLES
-
+myStorage = window.localStorage;
-// //IF NOT LOGGED IN DON'T SHOW LOG IN BUTTON
-//  if (username === '') {
-//     document.getElementById("logoutlink").style.display = "none";
-//  }
 
 //LOGOUT FETCH FUNCTION
 
@@ -17,7 +13,34 @@ async function logout() {
     body: JSON.stringify(sendLogoutInfo),
   });
   document.querySelector("#errormessage").innerHTML = 'Logged out.'
+  document.getElementById("logoutbutton").style.display = "none";
   localStorage.removeItem('username')
   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'
+}

frontend/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 responseText;
 const form = document.querySelector('form');
 
 //SUBMIT FUNCTION &CHECKING IF USERNAME IS TAKEN
@@ -20,43 +19,42 @@ form.addEventListener("submit", async function (event) {
   selected = formData.get('selected');
   custom = formData.get('custom')
 
-  if (custom !== '') {
+  if (custom === '' && selected === 'none') {
-    pronouns = custom
+    newPronouns = ''
+  } else if (custom !== '') {
+    newPronouns = custom
   } else {
-    pronouns = selected
+    newPronouns = selected
   }
 
-  try {
+  //CHECKS IF A USERNAME IS TAKEN
-    const isNotTaken = await getUname();
 
-    if (isNotTaken.status === "fail") {
+  const response = await fetch(`api/users/${uname}/`);
-      register()
+  const isTaken = await response.json();
-    } else {
+
-      document.querySelector("#errormessage").innerHTML = `${uname} is already taken.`
+  //YES THIS IS CONFUSING I KNOW.
-    }
+  if (isTaken.status === "fail") {
-  } catch {
+    register()
-    document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later.'
+  } 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.'
+// }

frontend/style.css

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

frontend/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,78 +36,94 @@ form.addEventListener("submit", async function (event) {
     newPronouns = selected
   }
 
-//CHECKS IF THE USER IS CHANGING MORE THAN ONE TEXT FIELD AT A TIME
+  //CHECKS IF A USERNAME IS TAKEN
-  let onlyChangeOne = document.querySelector("#errormessage").innerHTML = 'You can only change one at a time!'
+  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.`
+      return;
+    } 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!'
+    return;
   } else if (newUname !== '' && newPronouns !== '') {
-    onlyChangeOne
+    document.querySelector("#errormessage").innerHTML = 'You can only change one at a time!'
+    return;
   } else if (newPin !== '' && newPronouns !== '') {
-    onlyChangeOne
+    document.querySelector("#errormessage").innerHTML = 'You can only change one at a time!'
+    return;
+  } else if (newUname !== '' && newPin !== '' && newPronouns !== '') {
+    document.querySelector("#errormessage").innerHTML = 'You can only change one at a time!'
+    return;
   } else {
-    checkLoginInfo()
   }
 
 
-// ASSIGNS VARIABLES TO BE SENT TO API
+  // ASSIGNS VARIABLES TO BE SENT TO API
   if (newUname === '' && newPin === '' && newPronouns !== '') {
     newEvent = newPronouns
-    updateEvent = 'pronouns'
+    updateEvent = 'Pronouns'
   } else if (newUname === '' && newPronouns === '' && newPin !== '') {
     newEvent = newPin
-    updateEvent = 'pin'
+    updateEvent = 'Pin'
   } else if (newPin === '' && newPronouns === '' && newUname !== '') {
     newEvent = newUname
-    updateEvent = 'name'
+    updateEvent = 'Name'
   } else if (newPin === '' && newUname === '' && newPronouns === '') {
     document.querySelector("#errormessage").innerHTML = 'Please enter a new name, pin, or pronouns!'
+    return;
   } else {
-    checkLoginInfo()
   }
+  
+  loginStatus()
 
-  //CHECKS IF USERNAME IS TAKEN
-    const isTaken = await getUname();
-
-    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.
+  if (loginInfo.status === 'ok') {
-
-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") {
     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', {
+  fetch('/api/change', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(sendUpdateInfo),
   });
-  //document.querySelector("#errormessage").innerHTML = 'Login Changed!'
+  document.querySelector("#errormessage").innerHTML = 'Login Changed!'
   //window.location.replace("/login.html")
 }