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

First Commit

Browse source
This commit is contained in:
Luna 2021-07-17 15:50:58 -07:00
commit 349b28bb8f
9 changed files with 342 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
workspace.dode-workspace

36
login.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<title>Login</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="style.css">
<link rel="icon" href="">
</head>
<body>
<h1>Login:</h1>
<div id="box">
<form>
<label for="uname">Username:</label><br>
<input type="text" id="uname" name="uname" required><br>
<label for="pin">Pin:</label><br>
<input type="number" id="pin" name="pin" required><br><br>
<input type="submit" value="Login">
</form>
</div>
<script src="login.js"></script>
<div id="incorrect"></div>
<h2>You are logged in as <span id="username"></span></h2>
</body>
</html>

45
login.js Normal file
View file

@ -0,0 +1,45 @@
let uname = document.querySelector('#uname').value; // grabbing the username submitted and putting it in the variable uname
let pin = document.querySelector('#pin').value; // grabbing the pin submitted and putting it in the variable pin
const form = document.querySelector('form'); // grabbing an element on the page
const API_URL = `http://127.0.0.1:8000`
form.addEventListener("submit", async function(event) {
event.preventDefault();
const formData = new FormData(form);
uname = formData.get('uname');
pin = formData.get('pin');
const loginInfo = await loginFetch();
if (loginInfo === "pin matches") {
login()
} else if (loginInfo === "Incorrect pin" || loginInfo === `User ${uname} does not exist.`) {
incorrectLogin()
}
})
async function loginFetch() {
const rawResponse = await fetch(`${API_URL}/api/users/${uname}/${pin}`, {
method: 'GET',
headers: {
'Accept': 'text/plain'
},
});
const content = await rawResponse.text();
return content
}
function login() {
console.log('You have logged in!')
document.querySelector("#username").innerHTML = `${uname}`
document.querySelector("#incorrect").innerHTML = ''
}
function incorrectLogin() {
console.log('Incorrect Login!')
document.querySelector("#incorrect").innerHTML = 'Incorrect Login.'
}

41
loginchange.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>Login Change</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="style.css">
<link rel="icon" href="">
</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="number" 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="incorrect"></div>
</body>
</html>

60
loginchange.js Normal file
View file

@ -0,0 +1,60 @@
let uname = document.querySelector('#uname').value;
let pin = document.querySelector('#pin').value;
let newUname = document.querySelector('#newuname').value;
let newPin = document.querySelector('#newpin').value;
// let selected = document.querySelector('#selected').value;
// let custom = document.querySelector('#custom').value;
// let pronouns = ''
let responseText;
const form = document.querySelector('form');
const API_URL = `http://127.0.0.1:8000`
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 !== '') {
// pronouns = custom
// } else {
// pronouns = selected
// }
if (newUname === '') {
newUname = uname
}
if (newPin === '') {
newPin = pin
}
const userNotFound = await getUname();
if (userNotFound !== `User ${uname}`) {
document.querySelector("#incorrect").innerHTML = `user ${uname} was not found`
} else {
loginChange()
}
})
async function getUname() {
let response = await fetch(`${API_URL}/api/users/${uname}`);
responseText = await response.text();
return responseText;
}
async function loginChange() {
const rawResponse = await fetch(`${API_URL}/api/users/change/${uname}/${pin}/${newUname}/${newPin}`, {
method: 'POST',
headers: {
'Accept': 'text/plain'
},
body: ""
});
//rawResponse.then(window.location.replace("http://127.0.0.1:5500/login.html"))
}

49
register.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<title>Register</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="style.css">
<link rel="icon" href="">
</head>
<h1>Register:</h1>
<body>
<div id="box">
<form>
<label for="uname">Username:</label><br>
<input type="text" id="uname" name="uname" required><br>
<label for="pin">Pin:</label><br>
<input type="number" id="pin" name="pin" required><br>
<label for="selected">Pronouns:</label><br>
<select id="selected" name="selected">
<option value="nothing"></option>
<option value="she">she/her</option>
<option value="he">he/him</option>
<option value="they">they/them</option>
<option value="it">it</option>
<option value="fae">fae/faer</option>
</select><br>
<p>Or.</p>
<label for="custom">Custom Pronouns:</label><br>
<input type="text" id="custom" name="custom"><br><br>
<input type="submit" value="Register">
</form>
</div>
<div id="taken"></div>
<script src="register.js"></script>
</body>
</html>

51
register.js Normal file
View file

@ -0,0 +1,51 @@
let uname = document.querySelector('#uname').value; // grabbing the username submitted and putting it in the variable uname
let pin = document.querySelector('#pin').value; // grabbing the pin submitted and putting it in the variable pin
let selected = document.querySelector('#selected').value;
let custom = document.querySelector('#custom').value;
let pronouns = ''
let responseText;
const form = document.querySelector('form'); // grabbing an element on the page
const API_URL = `http://127.0.0.1:8000`
form.addEventListener("submit", async function(event) {
event.preventDefault();
const formData = new FormData(form);
uname = formData.get('uname');
pin = formData.get('pin');
selected = formData.get('selected');
custom = formData.get('custom')
if (custom !== '') {
pronouns = custom
} else {
pronouns = selected
}
const isTaken = await getUname();
if (isTaken === `User ${uname}`) {
console.log("This username is taken.")
document.querySelector("#taken").innerHTML = `${uname} is already taken.`
} else {
register()
}
})
async function getUname() {
let response = await fetch(`${API_URL}/api/users/${uname}`);
responseText = await response.text();
return responseText;
}
async function register() {
const rawResponse = await fetch(`${API_URL}/api/register/${uname.toString().toLowerCase()}/${pin.toString()}/${pronouns.toString().toLowerCase()}`, {
method: 'POST',
headers: {
'Accept': 'text/plain'
},
body: ""
});
//rawResponse.then(window.location.replace("http://127.0.0.1:5500/login.html"))
}

51
style.css Normal file
View file

@ -0,0 +1,51 @@
html {
background: #F7A8B8;
text-align: center;
font-family: "Lucida Console", "Courier New", monospace;
}
body {
margin-top: 10%;
}
#box {
background-color: white;
padding: 5%;
box-shadow: 10px 10px 10px black;
border-radius: 10px;
display:inline-flex;
}
#taken {
padding-top: 1%;
}
#incorrect {
padding-top: 1%;
}
label {
font-family: "Lucida Console", "Courier New", monospace;
}
input {
background-color: #55CDFC;
border-style: none;
border-bottom-style: solid;
border-bottom-color: black;
border-bottom-width: 1px;
font-family: "Lucida Console", "Courier New", monospace;
}
input:focus {
outline: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input[type=number] {
-moz-appearance: textfield;
}

8
workspace.code-workspace Normal file
View file

@ -0,0 +1,8 @@
{
"folders": [
{
"path": "."
}
],
"settings": {}
}