diff --git a/chat.css b/chat.css index 1eadc2b..ec6f547 100644 --- a/chat.css +++ b/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 { diff --git a/chat.js b/chat.js index 7617806..73e5e3a 100644 --- a/chat.js +++ b/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}` -} \ No newline at end of file +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() \ No newline at end of file diff --git a/login.js b/login.js index eb06f48..6584e8d 100644 --- a/login.js +++ b/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() { diff --git a/logout.js b/logout.js index 6378e5f..127db40 100644 --- a/logout.js +++ b/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() } - \ No newline at end of file diff --git a/register.js b/register.js index a87a8e6..83b2c9b 100644 --- a/register.js +++ b/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(); diff --git a/updateinfo.js b/updateinfo.js index c235472..bbf64c5 100644 --- a/updateinfo.js +++ b/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") }