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

Misc Changes and Fixes

Browse source
This commit is contained in:
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
stream.css
assets/
todo.txt
todo.txt
logout.js

4
chat.css
View file

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

3
chat.html
View file

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

11
chat.js
View file

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

2
login.html
View file

@ -16,7 +16,7 @@
<h1>Login:</h1>
<div id="box">
<form>
<form autocomplete="off">
<label for="uname">Username:</label><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() {
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}`);
}

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>
<div id="box">
<form>
<form autocomplete="off">
<label for="uname">Username:</label><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 {
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")

6
style.css
View file

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