lunastella
/
lilachat-frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Misc Changes and Fixes

main
Luna 2021-07-22 23:51:26 -07:00
parent e4496eecec
commit 72ea802d4d
11 changed files with 31 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -2,4 +2,5 @@ streamchat.code-workspace
index.html index.html
stream.css stream.css
assets/ assets/
todo.txt todo.txt
logout.js

4
chat.css
View File

@ -12,6 +12,10 @@ input {
padding: 3%; padding: 3%;
} }
label {
visibility: hidden;
}
#chatbox { #chatbox {
background-color: white; background-color: white;
padding: 1rem; padding: 1rem;

3
chat.html
View File

@ -21,7 +21,8 @@
</div> </div>
<form> <form autocomplete="off">
<label for="message">Input Message Here:</label>
<input type="text" id="message" name="message" required> <input type="text" id="message" name="message" required>
</form> </form>

11
chat.js
View File

@ -3,7 +3,6 @@ let date = '2021-07-22'
let messageCount = 0; let messageCount = 0;
let username = localStorage.getItem('username'); let username = localStorage.getItem('username');
const form = document.querySelector('form'); const form = document.querySelector('form');
document.querySelector("#loggeduser").innerHTML = `You are logged in as ${username}`
// SEND A MESSAGE // SEND A MESSAGE
@ -64,3 +63,13 @@ function printText(text) {
div.appendChild(p) div.appendChild(p)
p.innerHTML = text 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}`
}

2
login.html
View File

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

2
login.js
View File

@ -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}`);
} }

41
loginchange.html
View File

@ -1,41 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Login Change</title>
<meta name="author" content="Luna">
<meta name="description" content="Chat Login Change">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="/favicon.svg">
</head>
<body>
<h1>Change username and/or pin:</h1>
<p>(leave field blank if not changing)</p>
<div id="box">
<form>
<label for="uname">Current Username:</label><br>
<input type="text" id="uname" name="uname" required><br>
<label for="pin">Current Pin:</label><br>
<input type="number" id="pin" name="pin" required><br><br>
<label for="newuname">New Username:</label><br>
<input type="text" id="newuname" name="newuname"><br>
<label for="newpin">New Pin:</label><br>
<input type="number" id="newpin" name="newpin"><br><br>
<input type="submit" value="Change">
</form>
</div>
<script src="loginchange.js"></script>
<div id="errormessage"></div>
</body>
</html>

77
loginchange.js
View File

@ -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")
}

2
register.html
View File

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

12
register.js
View File

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

6
style.css
View File

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