feat: Moved the JS out of the username reminder page into its own file

Related to #9

src/recovery/username.html

@@ -18,47 +18,20 @@
           <p>
             Get a reminder email of your Skynet username.
           </p>
-          <form id="reset">
+          <form id="form">
             <table id="table">
               <tr>
                 <td><label for="email">Email Address</label></td>
                 <td><input id="email" name="email" type="text"/> <br/></td>
               </tr>
               <tr>
-                <td colspan="2"><input type="Submit" value="Submit"/></td>
+                <td colspan="2"><input id="button" type="Submit" value="Submit"/></td>
               </tr>
             </table>
           </form>
           <p id="formStatus"></p>
         </div>
-        <script>
+        <script src="username.js"></script>
-          const formEl = document.getElementById("reset");
-          formEl.addEventListener('submit', (listener) => formHandler(listener));
-
-          function formHandler(listener) {
-            listener.preventDefault();
-
-            // reset
-            document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Please wait.</span>";
-
-            const formData = new FormData(formEl);
-            const email = formData.get("email");
-            const object = {email: email};
-            fetch('https://api.account.skynet.ie/ldap/recover/username', {
-              method: 'POST',
-              body: JSON.stringify(object),
-              mode: "cors"
-            }).then(res => {
-              if (res.status === 200) {
-                document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
-              } else if (res.status === 500) {
-                document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
-              } else {
-                document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>";
-              }
-            }).catch(() => document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>");
-          }
-        </script>
       </main>
       <footer class="page-footer">
         UL Computer Society 2023-<span id="year">2023</span>

src/recovery/username.js

@@ -0,0 +1,46 @@
+const form = document.getElementById("form");
+form.addEventListener('submit',  formHandler);
+
+const form_status = document.getElementById("formStatus");
+
+const button = document.getElementById("button");
+button.addEventListener('submit', formHandler);
+
+
+async function formHandler(listener) {
+    listener.preventDefault();
+
+    // reset
+    form_status.innerHTML = "<span style='background-color: green; color: white'>Please wait.</span>";
+
+    const formData = new FormData(form);
+    const email = formData.get("email");
+    const body = {email: email};
+
+
+    let url = 'https://api.account.skynet.ie/ldap/recover/username';
+    let req;
+
+    try {
+        req = await fetch(url, {
+            method: 'POST',
+            body: JSON.stringify(body),
+            mode: "cors"
+        });
+    } catch (e) {
+        form_status.innerHTML = `<span style='background-color: red; color: white'>${e}</span>`;
+        return;
+    }
+
+    if (req.status !== 200) {
+        form_status.innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
+        return;
+    }
+
+    let temp = await req.json();
+    if (temp.result === 'error') {
+        form_status.innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`;
+    } else {
+        form_status.innerHTML = "<span style='background-color: green; color: white'>Success</span>";
+    }
+}