Frontend now makes use of server responses

register.js

@@ -8,7 +8,7 @@ let custom = document.querySelector('#custom').value;
 let pronouns = ''
 const form = document.querySelector('form');
 
-//SUBMIT FUNCTION &CHECKING IF USERNAME IS TAKEN
+//SUBMIT FUNCTION & CHECKING IF USERNAME IS TAKEN
 
 form.addEventListener("submit", async function (event) {
   event.preventDefault();
@@ -20,39 +20,61 @@ form.addEventListener("submit", async function (event) {
   custom = formData.get('custom')
 
   if (custom === '' && selected === 'none') {
-    newPronouns = ''
+    pronouns = ''
   } else if (custom !== '') {
-    newPronouns = custom
+    pronouns = custom
   } else {
-    newPronouns = selected
+    pronouns = selected
   }
 
-  //CHECKS IF A USERNAME IS TAKEN
+
+  //IF THE API SUCCESSFULLY REGISTERS A USER THEN DO THIS
+  try {
+    const regRes = await isUnameTaken();
+
+    if (regRes == null) {
+      return;
+    }
+
+    if (regRes.status === 'ok') {
+      document.querySelector("#errormessage").innerHTML = 'Registered!'
+      window.location.replace("/login.html")
+    } else {
+      document.querySelector("#errormessage").innerHTML = 'Failed to register. Try again later.'
+    }
+  } catch (e) {
+    console.log(e);
+    document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later. ' + e.toString();
+  }
+
+})
+
+//CHECKS IF A USERNAME IS TAKEN
+async function isUnameTaken() {
 
   const response = await fetch(`api/users/${uname}/`);
   const isTaken = await response.json();
 
   //YES THIS IS CONFUSING I KNOW.
   if (isTaken.status === "fail") {
-    register()
+    return await register()
   } else {
     document.querySelector('#errormessage').innerHTML = `${uname} is already taken.`
   }
-})
+}
 
 //FETCH FUNCTIONS. GETTING USERNAME FROM API & REGISTERING USER ASSIGNED NAME AND PIN. 
 
 async function register() {
   let sendRegisterInfo = { "name": uname, "pin": pin, "pronouns": pronouns }
-  fetch('/api/register/', {
+  const response = await fetch('/api/register/', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(sendRegisterInfo),
   });
-  document.querySelector("#errormessage").innerHTML = 'Registered!'
+  return await response.json()
-  window.location.replace("/login.html")
 }
 
 // function errorMessage() {

updateinfo.js

@@ -36,17 +36,7 @@ form.addEventListener("submit", async function (event) {
     newPronouns = selected
   }
 
-  //CHECKS IF A USERNAME IS TAKEN
+  unameCheck()
-  if (newUname !== '') {
-    const response = await fetch(`api/users/${newUname}/`);
-    const isTaken = await response.json();
-
-    if (isTaken.status === "ok") {
-      document.querySelector('#errormessage').innerHTML = `${newUname} is already taken.`
-      return;
-    } else {
-    }
-  }
 
   //CHECKS IF THE USER IS CHANGING MORE THAN ONE TEXT FIELD AT A TIME
   if (newUname !== '' && newPin !== '') {
@@ -80,17 +70,49 @@ form.addEventListener("submit", async function (event) {
     return;
   } else {
   }
-  
+
-  loginStatus()
+
+  //IF THE API SUCCESSFULLY UPDATES INFO FOR A USER THEN DO THIS
+  try {
+    const updateResponse = await loginStatus();
+
+    if (updateResponse == null) {
+      return;
+    }
+
+    if (updateResponse.status === 'ok') {
+      document.querySelector("#errormessage").innerHTML = 'Login Changed!'
+      window.location.replace("/login.html")
+    } else {
+      document.querySelector("#errormessage").innerHTML = 'Failed to update info. Try again later.'
+    }
+  } catch (e) {
+    console.log(e);
+    document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later. ' + e.toString();
+  }
 
 })
 
+  //CHECKS IF A USERNAME IS TAKEN
+  async function unameCheck(){
+  if (newUname !== '') {
+    const response = await fetch(`api/users/${newUname}/`);
+    const isTaken = await response.json();
+
+    if (isTaken.status === "ok") {
+      document.querySelector('#errormessage').innerHTML = `${newUname} is already taken.`
+      return;
+    } else {
+    }
+  }
+}
+
 //CHECKS IF THE LOGIN IS A SUCCESS
 async function loginStatus() {
   const loginInfo = await checkLoginInfo();
 
   if (loginInfo.status === 'ok') {
-    updateInfo()
+    return await updateInfo()
   } else {
     incorrectLogin()
   }
@@ -116,15 +138,14 @@ async function checkLoginInfo() {
 
 async function updateInfo() {
   let sendUpdateInfo = { "name": uname, "pin": pin, "changed_event": updateEvent, "new_event": newEvent }
-  fetch('/api/change', {
+  const response = await fetch('/api/change', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(sendUpdateInfo),
   });
-  document.querySelector("#errormessage").innerHTML = 'Login Changed!'
+  return await response.json()
-  //window.location.replace("/login.html")
 }
 
 function incorrectLogin() {