Misc Changes and Fixes
Luna
parent
e4496eecec
commit
72ea802d4d
|
|
@ -2,4 +2,5 @@ streamchat.code-workspace
|
|||
index.html
|
||||
stream.css
|
||||
assets/
|
||||
todo.txt
|
||||
todo.txt
|
||||
logout.js
|
||||
4
chat.css
4
chat.css
|
|
@ -12,6 +12,10 @@ input {
|
|||
padding: 3%;
|
||||
}
|
||||
|
||||
label {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#chatbox {
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
|
|
|
|||
|
|
@ -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
11
chat.js
|
|
@ -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}`
|
||||
}
|
||||
|
|
@ -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
2
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}`);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<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
12
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")
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue