erin
/
lila-chat
1
0
Fork 0
Code Issues 10 Pull Requests Projects 2 Releases Wiki Activity

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

pull/13/head
Luna 2021-07-24 11:42:18 -07:00
parent e73108f830
commit 1b8694ef8d
9 changed files with 222 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/chat.css
View File

@ -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 {
background-color: rgba(60, 60, 60, .75);
#chatbox {
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%;
}

11
frontend/chat.html
View File

@ -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>

48
frontend/chat.js
View File

@ -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');
sendMessage()
formMessage = formData.get('message').toString();
//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) {
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) {
document.querySelector("#loggeduser").innerHTML = 'You are not logged in'
} else {
document.querySelector("#loggeduser").innerHTML = `You are logged in as ${username}`
}
}
loggedIn()
//REVIECE USERS PRONOUNS

26
frontend/index.html
View File

@ -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>

38
frontend/login.js
View File

@ -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}`);
const loginInfo = await response.json();
try {
const loginInfo = await loginFetch();
if (loginInfo.status === "ok") {
login()
} else {
incorrectLogin()
if (loginInfo.status === 'ok') {
login()
} else {
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!')
document.querySelector("#username").innerHTML = `Logged in as ${uname}`
window.location.replace("/index.html")
document.querySelector("#errormessage").innerHTML = ''
localStorage.setItem("username", `${uname}`);
localStorage.setItem('username', `${uname}`);
document.querySelector("#username").innerHTML = `Logged in as ${uname}`
}
function incorrectLogin() {

33
frontend/logout.js
View File

@ -1,9 +1,5 @@
//VARIBLES
// //IF NOT LOGGED IN DON'T SHOW LOG IN BUTTON
// if (username === '') {
// document.getElementById("logoutlink").style.display = "none";
// }
myStorage = window.localStorage;
//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'
}

38
frontend/register.js
View File

@ -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 !== '') {
pronouns = custom
if (custom === '' && selected === 'none') {
newPronouns = ''
} else if (custom !== '') {
newPronouns = custom
} else {
pronouns = selected
newPronouns = selected
}
try {
const isNotTaken = await getUname();
//CHECKS IF A USERNAME IS TAKEN
if (isNotTaken.status === "fail") {
register()
} else {
document.querySelector("#errormessage").innerHTML = `${uname} is already taken.`
}
} catch {
document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later.'
const response = await fetch(`api/users/${uname}/`);
const isTaken = await response.json();
//YES THIS IS CONFUSING I KNOW.
if (isTaken.status === "fail") {
register()
} 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.'
// }

4
frontend/style.css
View File

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

93
frontend/updateinfo.js
View File

@ -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
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.`
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.
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', {
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")
}