Frontend: fixed updateInfo? Misc changes and fixed bugs.
parent
26d3a9b3d0
commit
05ecacc50b
|
@ -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%;
|
||||||
|
}
|
|
@ -0,0 +1,37 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Chat Room</title>
|
||||||
|
<meta name="author" content="Luna">
|
||||||
|
<meta name="description" content="Maya's Stream Chat">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="chat.css">
|
||||||
|
<link rel="icon" href="">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>Welcome to the chat!</h1>
|
||||||
|
|
||||||
|
<div id="chatbox">
|
||||||
|
|
||||||
|
<div id="innerchatbox">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form autocomplete="off">
|
||||||
|
<label for="message">Input Message Here:</label>
|
||||||
|
<input type="text" id="message" name="message" required>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="loggeduser"></div>
|
||||||
|
|
||||||
|
<script src="chat.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
|
@ -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}`
|
||||||
|
}
|
|
@ -16,7 +16,7 @@
|
||||||
<h1>Login:</h1>
|
<h1>Login:</h1>
|
||||||
|
|
||||||
<div id="box">
|
<div id="box">
|
||||||
<form>
|
<form autocomplete="off">
|
||||||
<label for="uname">Username:</label><br>
|
<label for="uname">Username:</label><br>
|
||||||
<input type="text" id="uname" name="uname" required><br>
|
<input type="text" id="uname" name="uname" required><br>
|
||||||
|
|
||||||
|
|
|
@ -29,7 +29,7 @@ form.addEventListener("submit", async function (event) {
|
||||||
|
|
||||||
function login() {
|
function login() {
|
||||||
console.log('You have logged in!')
|
console.log('You have logged in!')
|
||||||
document.querySelector("#username").innerHTML = `${uname}`
|
document.querySelector("#username").innerHTML = `Logged in as ${uname}`
|
||||||
document.querySelector("#errormessage").innerHTML = ''
|
document.querySelector("#errormessage").innerHTML = ''
|
||||||
localStorage.setItem("username", `${uname}`);
|
localStorage.setItem("username", `${uname}`);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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")
|
|
||||||
}
|
|
|
@ -15,7 +15,7 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="box">
|
<div id="box">
|
||||||
<form>
|
<form autocomplete="off">
|
||||||
<label for="uname">Username:</label><br>
|
<label for="uname">Username:</label><br>
|
||||||
<input type="text" id="uname" name="uname" required><br>
|
<input type="text" id="uname" name="uname" required><br>
|
||||||
|
|
||||||
|
|
|
@ -27,9 +27,9 @@ form.addEventListener("submit", async function (event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const isTaken = await getUname();
|
const isNotTaken = await getUname();
|
||||||
|
|
||||||
if (isTaken.status === "fail") {
|
if (isNotTaken.status === "fail") {
|
||||||
register()
|
register()
|
||||||
} else {
|
} else {
|
||||||
document.querySelector("#errormessage").innerHTML = `${uname} is already taken.`
|
document.querySelector("#errormessage").innerHTML = `${uname} is already taken.`
|
||||||
|
@ -48,11 +48,13 @@ async function getUname() {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function register() {
|
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',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
},
|
'Content-Type': 'application/json',
|
||||||
body: ""
|
},
|
||||||
|
body: JSON.stringify(sendRegisterInfo),
|
||||||
});
|
});
|
||||||
document.querySelector("#errormessage").innerHTML = 'Registered!'
|
document.querySelector("#errormessage").innerHTML = 'Registered!'
|
||||||
window.location.replace("/login.html")
|
window.location.replace("/login.html")
|
||||||
|
|
|
@ -5,7 +5,7 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin-top: 10%;
|
margin-top: 3%;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
|
@ -17,7 +17,7 @@ form {
|
||||||
padding: 5%;
|
padding: 5%;
|
||||||
box-shadow: 10px 10px 10px black;
|
box-shadow: 10px 10px 10px black;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
display:inline-flex;
|
display: inline-flex;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -50,4 +50,4 @@ input[type=number]::-webkit-outer-spin-button {
|
||||||
|
|
||||||
input[type=number] {
|
input[type=number] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Login Change</title>
|
<title>Update Info</title>
|
||||||
<meta name="author" content="Luna">
|
<meta name="author" content="Luna">
|
||||||
<meta name="description" content="Chat Login Change">
|
<meta name="description" content="Chat Login Change">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
@ -13,28 +13,47 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>Change username and/or pin:</h1>
|
<h1>Change username/pin/pronouns.</h1>
|
||||||
<p>(leave field blank if not changing)</p>
|
<p>(leave field blank if not changing)</p>
|
||||||
|
|
||||||
<div id="box">
|
<div id="box">
|
||||||
<form>
|
<form autocomplete="off">
|
||||||
<label for="uname">Current Username:</label><br>
|
<label for="uname">Current Username:</label><br>
|
||||||
<input type="text" id="uname" name="uname" required><br>
|
<input type="text" id="uname" name="uname" required><br>
|
||||||
|
|
||||||
<label for="pin">Current Pin:</label><br>
|
<label for="pin">Current Pin:</label><br>
|
||||||
<input type="number" id="pin" name="pin" required><br><br>
|
<input type="number" id="pin" name="pin" required><br><br>
|
||||||
|
|
||||||
|
<p>What are you changing?</p>
|
||||||
|
|
||||||
<label for="newuname">New Username:</label><br>
|
<label for="newuname">New Username:</label><br>
|
||||||
<input type="text" id="newuname" name="newuname"><br>
|
<input type="text" id="newuname" name="newuname"><br>
|
||||||
|
|
||||||
<label for="newpin">New Pin:</label><br>
|
<label for="newpin">New Pin:</label><br>
|
||||||
<input type="number" id="newpin" name="newpin"><br><br>
|
<input type="number" id="newpin" name="newpin"><br><br>
|
||||||
|
|
||||||
|
<label for="selected">New pronouns:</label><br>
|
||||||
|
<select id="selected" name="selected">
|
||||||
|
<option value="none"></option>
|
||||||
|
<option value="she.her">she/her</option>
|
||||||
|
<option value="he.him">he/him</option>
|
||||||
|
<option value="they.them">they/them</option>
|
||||||
|
<option value="it.its">it/its</option>
|
||||||
|
<option value="fae.faer">fae/faer</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<p>Or.</p>
|
||||||
|
|
||||||
|
<label for="custom">Custom Pronouns:</label><br>
|
||||||
|
<input type="text" id="custom" name="custom">
|
||||||
|
|
||||||
|
<p>Format: pronoun/pronoun</p><br>
|
||||||
|
|
||||||
<input type="submit" value="Change">
|
<input type="submit" value="Change">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="loginchange.js"></script>
|
<script src="updateinfo.js"></script>
|
||||||
|
|
||||||
<div id="errormessage"></div>
|
<div id="errormessage"></div>
|
||||||
</body>
|
</body>
|
|
@ -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.'
|
||||||
|
}
|
Loading…
Reference in New Issue