Add frontend code
Luna
parent
0833deb93f
commit
16179f0191
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Maya's Stream</title>
|
||||
<meta name="author" content="Luna">
|
||||
<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="style.css">
|
||||
<link rel="icon" href="">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<a href="login.html">Login Page</a>
|
||||
|
||||
<a href="register.html">Register Page</a>
|
||||
|
||||
<a href="loginchange.html">LoginChange Page</a>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Login</title>
|
||||
<meta name="author" content="Luna">
|
||||
<meta name="description" content="Chat Login">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
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
|
||||
|
||||
form.addEventListener("submit", async function(event) {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(form);
|
||||
|
||||
uname = formData.get('uname');
|
||||
pin = formData.get('pin');
|
||||
|
||||
try {
|
||||
const loginInfo = await loginFetch();
|
||||
|
||||
if (loginInfo === "pin matches") {
|
||||
login()
|
||||
} else if (loginInfo === "Incorrect pin" || loginInfo === `User ${uname} does not exist.`) {
|
||||
incorrectLogin()
|
||||
}
|
||||
} catch {
|
||||
document.querySelector("#incorrect").innerHTML = 'An Error has Occurred. Try again later.'
|
||||
}
|
||||
})
|
||||
|
||||
async function loginFetch() {
|
||||
const rawResponse = await fetch(`/api/users/${uname}/${pin}`, {
|
||||
// credentials: "include",
|
||||
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.'
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!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="">
|
||||
</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>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
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');
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
try {
|
||||
const userNotFound = await getUname();
|
||||
|
||||
if (userNotFound !== `User ${uname}`) {
|
||||
document.querySelector("#incorrect").innerHTML = `user ${uname} was not found`
|
||||
} else {
|
||||
loginChange()
|
||||
}
|
||||
} catch {
|
||||
document.querySelector("#incorrect").innerHTML = 'An Error has Occurred. Try again later.'
|
||||
}
|
||||
})
|
||||
|
||||
async function getUname() {
|
||||
let response = await fetch(`/api/users/${uname}`);
|
||||
responseText = await response.text();
|
||||
return responseText;
|
||||
}
|
||||
|
||||
async function loginChange() {
|
||||
const rawResponse = await fetch(`/api/users/change/${uname}/${pin}/${newUname}/${newPin}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'text/plain'
|
||||
},
|
||||
body: ""
|
||||
});
|
||||
document.querySelector("#incorrect").innerHTML = 'Login Changed!'
|
||||
window.location.replace("http://127.0.0.1:5500/login.html")
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Register</title>
|
||||
<meta name="author" content="Luna">
|
||||
<meta name="description" content="Chat Register">
|
||||
<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><br>
|
||||
|
||||
<label for="selected">Pronouns:</label><br>
|
||||
<select id="selected" name="selected">
|
||||
<option value="nothing"></option>
|
||||
<option value="she.her">she/her</option>
|
||||
<option value="he.him">he/him</option>
|
||||
<option value="they.them">they/them</option>
|
||||
<option value="it.its">it</option>
|
||||
<option value="fae.faer">fae/faer</option>
|
||||
</select>
|
||||
|
||||
<p>Or.</p>
|
||||
|
||||
<label for="custom">Custom Pronouns:</label><br>
|
||||
<input type="text" id="custom" name="custom">
|
||||
|
||||
<p>Format: pronoun/otherpronoun</p><br>
|
||||
|
||||
<input type="submit" value="Register">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="taken"></div>
|
||||
|
||||
<script src="register.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
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
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
try {
|
||||
const isTaken = await getUname();
|
||||
|
||||
if (isTaken === `User ${uname}`) {
|
||||
console.log("This username is taken.")
|
||||
document.querySelector("#taken").innerHTML = `${uname} is already taken.`
|
||||
} else {
|
||||
register()
|
||||
}
|
||||
} catch {
|
||||
document.querySelector("#taken").innerHTML = 'An Error has Occurred. Try again later.'
|
||||
}
|
||||
})
|
||||
|
||||
async function getUname() {
|
||||
let response = await fetch(`$/api/users/${uname}`);
|
||||
responseText = await response.text();
|
||||
return responseText;
|
||||
}
|
||||
|
||||
async function register() {
|
||||
const rawResponse = await fetch(`/api/register/${uname.toString().toLowerCase()}/${pin.toString()}/${pronouns.toString().toLowerCase().replace("/", ".")}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'text/plain'
|
||||
},
|
||||
body: ""
|
||||
});
|
||||
document.querySelector("#taken").innerHTML = 'Registered!'
|
||||
window.location.replace("http://127.0.0.1:5500/login.html")
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
html {
|
||||
background: #F7A8B8;
|
||||
text-align: center;
|
||||
font-family: "Lucida Console", "Courier New", monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
#box {
|
||||
background-color: white;
|
||||
padding: 5%;
|
||||
box-shadow: 10px 10px 10px black;
|
||||
border-radius: 5px;
|
||||
display:inline-flex;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
#taken {
|
||||
padding-top: 1%;
|
||||
}
|
||||
|
||||
#incorrect {
|
||||
padding-top: 1%;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: "Lucida Console", "Courier New", monospace;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 3%;
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue