diff --git a/frontend/chat.css b/frontend/chat.css new file mode 100644 index 0000000..5ed8007 --- /dev/null +++ b/frontend/chat.css @@ -0,0 +1,43 @@ +html { + background: #F7A8B8; + text-align: center; + font-family: "Lucida Console", "Courier New", monospace; +} + +form { + width: 100% +} + +input { + padding: 3%; +} + +label { + visibility: hidden; +} + +#chatbox { + background-color: white; + padding: 1rem; + box-shadow: 10px 10px 10px black; + width: 40rem; + height: 40rem; + display: inline-flex; + flex-direction: column; +} + +#innerchatbox { + background-color: rgba(60, 60, 60, .75); + width: 100%; + height: 90%; + overflow-y: scroll; + text-align: left; +} + +#loggeduser { + padding-top: 1% +} + +#error { + padding-top: 2.5%; +} \ No newline at end of file diff --git a/frontend/chat.html b/frontend/chat.html new file mode 100644 index 0000000..62d56fc --- /dev/null +++ b/frontend/chat.html @@ -0,0 +1,37 @@ + + + + + Chat Room + + + + + + + + + + +

Welcome to the chat!

+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/frontend/chat.js b/frontend/chat.js new file mode 100644 index 0000000..f216c0c --- /dev/null +++ b/frontend/chat.js @@ -0,0 +1,75 @@ +// VARIABLES +let date = '2021-07-22' +let messageCount = 0; +let username = localStorage.getItem('username'); +const form = document.querySelector('form'); + +// SEND A MESSAGE + +// GRABS MESSAGE FROM FORM & SENDS +form.addEventListener("submit", async function (event) { + event.preventDefault(); + const formData = new FormData(form); + + formMessage = formData.get('message'); + + sendMessage() + +}) + +//SEND MESSAGE FETCH FUNCTION + +async function sendMessage() { + sendMessageInfo = { "name": username, "body": formMessage, "date": date } + fetch('/api/message/send', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(sendMessageInfo), + }) + form.reset() +} + + +// RECIEVE MESSAGES + +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 = "" + + for (const message of recievedMessages) { + printText(message.user.bold() + ": " + message.body); + } + + + if (recievedMessages.length != messageCount) { + let scroll = document.getElementById("innerchatbox"); + scroll.scrollTop = scroll.scrollHeight; + } + + messageCount = recievedMessages.length; +} + + +// FUNCTION TO PRINT MESSAGES IN THE CHAT BOX + +function printText(text) { + let p = document.createElement("p"); + const div = document.getElementById("innerchatbox"); + div.appendChild(p) + p.innerHTML = 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 diff --git a/frontend/index.html b/frontend/index.html index b002de1..cbf32f7 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -7,20 +7,28 @@ - + - - -Login Page + +
+
+

Test Text

+
+ + + +
diff --git a/frontend/login.html b/frontend/login.html index 6915897..48ad76a 100644 --- a/frontend/login.html +++ b/frontend/login.html @@ -16,7 +16,7 @@

Login:

-
+

diff --git a/frontend/login.js b/frontend/login.js index e8af605..5494aca 100644 --- a/frontend/login.js +++ b/frontend/login.js @@ -29,7 +29,7 @@ form.addEventListener("submit", async function (event) { function login() { console.log('You have logged in!') - document.querySelector("#username").innerHTML = `${uname}` + document.querySelector("#username").innerHTML = `Logged in as ${uname}` document.querySelector("#errormessage").innerHTML = '' localStorage.setItem("username", `${uname}`); } diff --git a/frontend/loginchange.js b/frontend/loginchange.js deleted file mode 100644 index 1fc0941..0000000 --- a/frontend/loginchange.js +++ /dev/null @@ -1,77 +0,0 @@ - -//SETTING VARIABLES. GRABBING ELEMENT VALUES FROM FORM. - -let uname = document.querySelector('#uname').value; -let pin = document.querySelector('#pin').value; -let newUname = document.querySelector('#newuname').value; -let newPin = document.querySelector('#newpin').value; -const form = document.querySelector('form'); -let responseText; - - -//TODO -// let selected = document.querySelector('#selected').value; -// let custom = document.querySelector('#custom').value; -// let pronouns = '' - -//FORM SUMBIT FUNCTION & GET THE USERS USERNAME AND SEE IF IT IS CORRECT. - - -form.addEventListener("submit", async function (event) { - event.preventDefault(); - const formData = new FormData(form); - - uname = formData.get('uname'); - pin = formData.get('pin'); - newUname = formData.get('newuname'); - newPin = formData.get('newpin'); - - //TODO - // selected = formData.get('selected'); - // custom = formData.get('custom') - - // if (custom !== '') { - // pronouns = custom - // } else { - // pronouns = selected - // } - - if (newUname === '') { - newUname = uname - } - if (newPin === '') { - newPin = pin - } - - try { - const userNotFound = await getUname(); - - if (userNotFound.status === 'fail') { - document.querySelector("#errormessage").innerHTML = `user ${uname} was not found` - } else { - loginChange() - } - } catch { - document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later.' - } -}) - - -//FETCH FUNTIONS. FETCHING USERNAME FROM API AND SUBMITTING NEW PIN AND USERNAME TO API. - -async function getUname() { - let response = await fetch(`/api/users/${uname}`); - responseJson = await response.json(); - return responseJson; -} - -async function loginChange() { - const rawResponse = await fetch(`/api/users/change/${uname}/${pin}/${newUname}/${newPin}`, { - method: 'POST', - headers: { - }, - body: "" - }); - document.querySelector("#errormessage").innerHTML = 'Login Changed!' - window.location.replace("/login.html") -} diff --git a/frontend/register.html b/frontend/register.html index 66b3201..fcd4654 100644 --- a/frontend/register.html +++ b/frontend/register.html @@ -15,7 +15,7 @@
- +

diff --git a/frontend/register.js b/frontend/register.js index dea709f..c2604bb 100644 --- a/frontend/register.js +++ b/frontend/register.js @@ -27,9 +27,9 @@ form.addEventListener("submit", async function (event) { } try { - const isTaken = await getUname(); + const isNotTaken = await getUname(); - if (isTaken.status === "fail") { + if (isNotTaken.status === "fail") { register() } else { document.querySelector("#errormessage").innerHTML = `${uname} is already taken.` @@ -48,11 +48,13 @@ async function getUname() { } async function register() { - const rawResponse = await fetch(`/api/register/${uname.toString().toLowerCase()}/${pin.toString()}/${pronouns.toString().toLowerCase().replace("/", ".")}`, { + let sendRegisterInfo = { "name": uname, "pin": pin, "pronouns": pronouns } + fetch('/api/register/', { method: 'POST', headers: { - }, - body: "" + 'Content-Type': 'application/json', + }, + body: JSON.stringify(sendRegisterInfo), }); document.querySelector("#errormessage").innerHTML = 'Registered!' window.location.replace("/login.html") diff --git a/frontend/stream.css b/frontend/stream.css new file mode 100644 index 0000000..9a3cbe1 --- /dev/null +++ b/frontend/stream.css @@ -0,0 +1,34 @@ +html { + background: #F7A8B8; + text-align: center; + font-family: "Lucida Console", "Courier New", monospace; +} + +body { + margin-top: 3%; +} + +#streamchat { + display: flex; + height: 100%; + max-width: 960px; + margin: 0 auto; + +} + +#stream { + background-color: white; + padding: 5%; + box-shadow: 10px 10px 10px black; + border-radius: 5px; + width: 100%; + height: 100%; + margin-right: 4em; +} + +#chatbox { + width: 100%; + height: 100%; + margin-left: 4em; +} + diff --git a/frontend/style.css b/frontend/style.css index 1ea339f..a7f671a 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -5,7 +5,7 @@ html { } body { - margin-top: 10%; + margin-top: 3%; } form { @@ -17,7 +17,7 @@ form { padding: 5%; box-shadow: 10px 10px 10px black; border-radius: 5px; - display:inline-flex; + display: inline-flex; width: 20%; } @@ -50,4 +50,4 @@ input[type=number]::-webkit-outer-spin-button { input[type=number] { -moz-appearance: textfield; -} +} \ No newline at end of file diff --git a/frontend/loginchange.html b/frontend/updateinfo.html similarity index 54% rename from frontend/loginchange.html rename to frontend/updateinfo.html index 3fbf4c1..5cc9e75 100644 --- a/frontend/loginchange.html +++ b/frontend/updateinfo.html @@ -2,7 +2,7 @@ - Login Change + Update Info @@ -13,28 +13,47 @@ -

Change username and/or pin:

+

Change username/pin/pronouns.

(leave field blank if not changing)

- +




+

What are you changing?

+




+
+ + +

Or.

+ +
+ + +

Format: pronoun/pronoun


+
- +
diff --git a/frontend/updateinfo.js b/frontend/updateinfo.js new file mode 100644 index 0000000..c235472 --- /dev/null +++ b/frontend/updateinfo.js @@ -0,0 +1,119 @@ + +//SETTING VARIABLES. GRABBING ELEMENT VALUES FROM FORM. + +let uname = document.querySelector('#uname').value; +let pin = document.querySelector('#pin').value; +let newUname = document.querySelector('#newuname').value; +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 = '' + +//FORM SUMBIT FUNCTION & GET THE USERS USERNAME AND SEE IF IT IS CORRECT. + + +form.addEventListener("submit", async function (event) { + event.preventDefault(); + const formData = new FormData(form); + + uname = formData.get('uname'); + pin = formData.get('pin'); + newUname = formData.get('newuname'); + newPin = formData.get('newpin'); + selected = formData.get('selected'); + custom = formData.get('custom') + + if (custom === '' && selected === 'none') { + newPronouns = '' + } else if (custom !== '') { + newPronouns = custom + } else { + 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!' + if (newUname !== '' && newPin !== '') { + onlyChangeOne + } else if (newUname !== '' && newPronouns !== '') { + onlyChangeOne + } else if (newPin !== '' && newPronouns !== '') { + onlyChangeOne + } else { + checkLoginInfo() + } + + +// ASSIGNS VARIABLES TO BE SENT TO API + if (newUname === '' && newPin === '' && newPronouns !== '') { + newEvent = newPronouns + updateEvent = 'pronouns' + } else if (newUname === '' && newPronouns === '' && newPin !== '') { + newEvent = newPin + updateEvent = 'pin' + } else if (newPin === '' && newPronouns === '' && newUname !== '') { + newEvent = newUname + updateEvent = 'name' + } 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(); + + if (isTaken.status === 'ok') { + document.querySelector("#errormessage").innerHTML = `username ${newUname} is already taken! ` + } +}) + + +// 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") { + updateInfo() + } else { + incorrectLogin() + } +} + +async function updateInfo() { + let sendUpdateInfo = { "name": uname, "pin": pin, "changed_event": updateEvent, "new_event": newEvent } + fetch('/api/users/change', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(sendUpdateInfo), + }); + //document.querySelector("#errormessage").innerHTML = 'Login Changed!' + //window.location.replace("/login.html") +} + +function incorrectLogin() { + document.querySelector("#errormessage").innerHTML = 'Username and pin combination do not match! Or user not found.' +} + +function errorMessage() { + document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later.' +} diff --git a/src/auth.rs b/src/auth.rs index 798af4c..226a5bb 100644 --- a/src/auth.rs +++ b/src/auth.rs @@ -26,8 +26,8 @@ pub fn register(data: Json) -> JsonValue { pronouns: data.pronouns.to_string().to_lowercase(), session_token: "NULL".to_string(), role: UserType::Normal, - }; + }; db_add(&new_user); info!(