Frontend: fixed formatting, added comments, fixed bugs.

frontend/login.html

@@ -29,8 +29,8 @@
 
         <script src="login.js"></script>
 
-        <div id="incorrect"></div>
+        <div id="errormessage"></div>
 
-        <h2>You are logged in as <span id="username"></span></h2>
+        <span id="username"></span>
     </body>
 </html>

frontend/login.js

@@ -1,8 +1,13 @@
-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) {
+//SETTING VARIABLES. GRABBING CONTENTS FROM FORM.
+
+let uname = document.querySelector('#uname').value;
+let pin = document.querySelector('#pin').value;
+const form = document.querySelector('form');
+
+// SUBMIT FORM FUNCTION. AND FETCH USERNAME AND PIN FROM API. 
+
+form.addEventListener("submit", async function (event) {
   event.preventDefault();
   const formData = new FormData(form);
 
@@ -19,14 +24,17 @@ form.addEventListener("submit", async function(event) {
   }
 })
 
+
+// FUNCTIONS FOR WHETHER THE LOGIN WAS A SUCCESS OR FAILURE
+
 function login() {
   console.log('You have logged in!')
   document.querySelector("#username").innerHTML = `${uname}`
-    document.querySelector("#incorrect").innerHTML = ''
+  document.querySelector("#errormessage").innerHTML = ''
+  localStorage.setItem("username", `${uname}`);
 }
 
 function incorrectLogin() {
   console.log('Incorrect Login!')
-    document.querySelector("#incorrect").innerHTML = 'Incorrect Login.'
+  document.querySelector("#errormessage").innerHTML = 'Incorrect Login.'
 }
- 

frontend/loginchange.html

@@ -36,6 +36,6 @@
 
         <script src="loginchange.js"></script>
 
-        <div id="incorrect"></div>
+        <div id="errormessage"></div>
     </body>
 </html>

frontend/loginchange.js

@@ -1,14 +1,23 @@
+
+//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 = ''
-let responseText;
-const form = document.querySelector('form');
 
-form.addEventListener("submit", async function(event) {
+//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);
 
@@ -16,6 +25,8 @@ form.addEventListener("submit", async function(event) {
   pin = formData.get('pin');
   newUname = formData.get('newuname');
   newPin = formData.get('newpin');
+
+  //TODO
   // selected = formData.get('selected');
   // custom = formData.get('custom')
 
@@ -35,16 +46,19 @@ form.addEventListener("submit", async function(event) {
   try {
     const userNotFound = await getUname();
 
-    if (userNotFound.status == `fail`) {
-      document.querySelector("#incorrect").innerHTML = `user ${uname} was not found`
+    if (userNotFound.status === 'fail') {
+      document.querySelector("#errormessage").innerHTML = `user ${uname} was not found`
     } else {
       loginChange()
     }
   } catch {
-      document.querySelector("#incorrect").innerHTML = 'An Error has Occurred. Try again later.'
+    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();
@@ -52,12 +66,12 @@ async function getUname() {
 }
 
 async function loginChange() {
-const rawResponse = await fetch(`/api/users/change/${uname}/${pin}/${newUname}/${newPin}`, {
+  const rawResponse = await fetch(`/api/users/change/${uname}/${pin}/${newUname}/${newPin}`, {
     method: 'POST',
     headers: {
     },
     body: ""
-});
-document.querySelector("#incorrect").innerHTML = 'Login Changed!'
-window.location.replace("/login.html")
+  });
+  document.querySelector("#errormessage").innerHTML = 'Login Changed!'
+  window.location.replace("/login.html")
 }

frontend/register.html

@@ -28,7 +28,7 @@
                     <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="it.its">it/its</option>
                     <option value="fae.faer">fae/faer</option>
                   </select>
 
@@ -43,7 +43,7 @@
               </form> 
         </div>
 
-        <div id="taken"></div>
+        <div id="errormessage"></div>
 
         <script src="register.js"></script>
 

frontend/register.js

@@ -1,12 +1,17 @@
-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
+
+//DECLARING VARIABLES AND GRABBING VALUES FROM FORM. 
+
+let uname = document.querySelector('#uname').value;
+let pin = document.querySelector('#pin').value;
 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 form = document.querySelector('form');
 
-form.addEventListener("submit", async function(event) {
+//SUBMIT FUNCTION &CHECKING IF USERNAME IS TAKEN
+
+form.addEventListener("submit", async function (event) {
   event.preventDefault();
   const formData = new FormData(form);
 
@@ -24,31 +29,32 @@ form.addEventListener("submit", async function(event) {
   try {
     const isTaken = await getUname();
 
-    if (isTaken === `User ${uname}`) {
-      console.log("This username is taken.")
-      document.querySelector("#taken").innerHTML = `${uname} is already taken.`
-    } else {
+    if (isTaken.status === "fail") {
       register()
+    } else {
+      document.querySelector("#errormessage").innerHTML = `${uname} is already taken.`
     }
   } catch {
-      document.querySelector("#taken").innerHTML = 'An Error has Occurred. Try again later.'
+    document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later.'
   }
 })
 
+//FETCH FUNCTIONS. GETTING USERNAME FROM API & REGISTERING USER ASSIGNED NAME AND PIN. 
+
 async function getUname() {
-  let response = await fetch(`$/api/users/${uname}`);
-  responseText = await response.text();
-  return responseText;
+  let response = await fetch(`/api/users/${uname}`);
+  responseJson = await response.json();
+  return responseJson;
 }
 
 async function register() {
-const rawResponse = await fetch(`/api/register/${uname.toString().toLowerCase()}/${pin.toString()}/${pronouns.toString().toLowerCase().replace("/", ".")}`, {
+  const rawResponse = await fetch(`/api/register/${uname.toString().toLowerCase()}/${pin.toString()}/${pronouns.toString().toLowerCase().replace("/", ".")}`, {
     method: 'POST',
     headers: {
     },
     body: ""
-});
-document.querySelector("#taken").innerHTML = 'Registered!'
-window.location.replace("/login.html")
+  });
+  document.querySelector("#errormessage").innerHTML = 'Registered!'
+  window.location.replace("/login.html")
 }
 

frontend/style.css

@@ -21,11 +21,7 @@ form {
     width: 20%;
 }
 
-#taken {
-    padding-top: 1%;
-}
-
-#incorrect {
+#errormessage {
     padding-top: 1%;
 }