diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..dc8e2b2
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+ Maya's Stream
+
+
+
+
+
+
+
+
+
+
+
+Login Page
+
+Register Page
+
+LoginChange Page
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/login.html b/frontend/login.html
new file mode 100644
index 0000000..16b1aeb
--- /dev/null
+++ b/frontend/login.html
@@ -0,0 +1,36 @@
+
+
+
+
+ Login
+
+
+
+
+
+
+
+
+
+
+ Login:
+
+
+
+
+
+
+
+
+
+ You are logged in as
+
+
\ No newline at end of file
diff --git a/frontend/login.js b/frontend/login.js
new file mode 100644
index 0000000..258ed71
--- /dev/null
+++ b/frontend/login.js
@@ -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.'
+}
+
\ No newline at end of file
diff --git a/frontend/loginchange.html b/frontend/loginchange.html
new file mode 100644
index 0000000..4fd815a
--- /dev/null
+++ b/frontend/loginchange.html
@@ -0,0 +1,41 @@
+
+
+
+
+ Login Change
+
+
+
+
+
+
+
+
+
+
+ Change username and/or pin:
+ (leave field blank if not changing)
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/loginchange.js b/frontend/loginchange.js
new file mode 100644
index 0000000..466beb2
--- /dev/null
+++ b/frontend/loginchange.js
@@ -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")
+}
diff --git a/frontend/register.html b/frontend/register.html
new file mode 100644
index 0000000..ff79a17
--- /dev/null
+++ b/frontend/register.html
@@ -0,0 +1,51 @@
+
+
+
+
+ Register
+
+
+
+
+
+
+
+
+ Register:
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/register.js b/frontend/register.js
new file mode 100644
index 0000000..fa9f3d6
--- /dev/null
+++ b/frontend/register.js
@@ -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")
+}
+
diff --git a/frontend/style.css b/frontend/style.css
new file mode 100644
index 0000000..aba18d7
--- /dev/null
+++ b/frontend/style.css
@@ -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;
+}