feat: add license

Frontend for new SSH page

Closes #7

See merge request compsoc1/skynet/ldap/frontend!12

.forgejo/workflows/build.yaml

@@ -0,0 +1,28 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  build:
+    # build it using teh base nixos system, helps with caching
+    runs-on: nix
+    steps:
+      # get the repo first
+      - uses: https://code.forgejo.org/actions/checkout@v4
+      - name: "Build it locally"
+        run: nix build --verbose
+
+  # deploy it upstream
+  deploy:
+    # runs on teh default docker dontainer
+    runs-on: docker
+    needs: [ build ]
+    steps:
+      - name: "Deploy to Skynet"
+        uses: https://forgejo.skynet.ie/Skynet/actions-deploy-to-skynet@v2
+        with:
+          input: 'skynet_ldap_frontend'
+          token: ${{ secrets.API_TOKEN_FORGEJO }}

.gitlab-ci.yml

@@ -1,17 +0,0 @@
-# from https://docs.gitlab.com/ee/ci/pipelines/multi_project_pipelines.html
-
-# only a deploy stage
-stages:
-  - deploy
-
-
-nixos:
-  stage: deploy
-  variables:
-    PACKAGE_NAME: "skynet_ldap_frontend"
-    UPDATE_FLAKE: "yes"
-  trigger: compsoc1/skynet/nixos
-  only:
-    refs:
-      - main
-      

LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024 Skynet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

src/index.html

@@ -15,7 +15,7 @@
       <main class="page-body">
         <section>
           <h2>
-            <a href="./signup.html">Sign-up</a>
+            <a href="signup.html">Sign-up</a>
           </h2>
           <p>
             Please use this if you have yet to activate an account on Skynet before.
@@ -23,7 +23,7 @@
         </section>
         <section>
           <h2>
-            <a href="./password.html">Change Password</a>
+            <a href="password.html">Change Password</a>
           </h2>
           <p>
             Please use this service to change your Skynet password
@@ -31,10 +31,10 @@
         </section>
         <section>
           <h2>
-            <a href="./modify.html">Account modification</a>
+            <a href="modify.html">Account modification</a>
           </h2>
           <p>
-            Please use this service to modify your user data (email, login ssh key, etc.)
+            Please use this service to modify your user data (email, login, etc.)
           </p>
         </section>
         <section>
@@ -53,6 +53,14 @@
             Please use this service to reset your password.
           </p>
         </section>
+        <section>
+          <h2>
+            <a href="modify_ssh.html">SSH</a>
+          </h2>
+          <p>
+            Please use this service to add or remove SSH keys from your Skynet account.
+          </p>
+        </section>
       </main>
       <footer class="page-footer">
         UL Computer Society 2023-<span id="year">2023</span>

src/js/lib.js

@@ -0,0 +1,23 @@
+export async function request(url, body, form_status, method) {
+    try {
+        const req = await fetch(url, {
+            method: method,
+            body: JSON.stringify(body),
+            mode: "cors"
+        });
+        if (req.status !== 200) {
+            form_status.innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
+        }
+        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>";
+            return true;
+        }
+    } catch (e) {
+        form_status.innerHTML = `<span style='background-color: red; color: white'>${e}</span>`;
+    }
+    return false;
+}

src/modify.html

@@ -3,13 +3,13 @@
   <head>
     <meta charset="UTF-8"/>
     <title>Modify Account</title>
-    <link href="./images/favicon/favicon-16x16.png" rel="icon" type="image/png"/>
-    <link href="./stylesheets/index.css" rel="stylesheet" type="text/css"/>
+    <link href="images/favicon/favicon-16x16.png" rel="icon" type="image/png"/>
+    <link href="stylesheets/index.css" rel="stylesheet" type="text/css"/>
   </head>
   <body>
     <div class="wrapper">
       <header class="page-header">
-        <img alt="Sharky, our mascot" height="81.56" src="./images/sharky.svg" width="145"/>
+        <img alt="Sharky, our mascot" height="81.56" src="images/sharky.svg" width="145"/>
         <h1>Skynet Self Service</h1>
       </header>
       <main class="page-body">
@@ -17,7 +17,7 @@
         <p>
           Modify details of your Skynet account.
         </p>
-        <form id="reset">
+        <form id="form">
           <table id="table">
             <tr>
               <td><label for="user">Username</label></td>
@@ -28,15 +28,13 @@
               <td><input id="pass" name="pass" type="password"/> <br/></td>
             </tr>
             <tr>
-              <td><label for="field">Field</label></td>
+              <td><label for="dropdown">Field</label></td>
               <td>
-                <select id="field" onchange="selectField()">
+                <select id="dropdown">
                   <option selected="selected" value="">Please select an option</option>
                   <option value="mail">Email</option>
-                  <option value="sshPublicKey">SSH key</option>
                   <option value="cn">First name & Surname</option>
                   <option value="sn">Surname</option>
-                  <option value="skDiscord">Discord username</option>
                 </select>
               </td>
             </tr>
@@ -45,57 +43,12 @@
               <td><input id="value" name="value" type="text"/> <br/></td>
             </tr>
             <tr>
-              <td colspan="2"><input type="Submit" value="Submit"/></td>
+              <td colspan="2"><input type="Submit" value="Submit" id="button"/></td>
             </tr>
           </table>
         </form>
         <p id="formStatus"></p>
-        <script>
-          const formEl = document.getElementById("reset");
-          formEl.addEventListener('submit', (listener) => formHandler(listener));
-
-          function formHandler(listener) {
-            listener.preventDefault();
-            const formData = new FormData(formEl);
-            const field = document.getElementById('field').value;
-            if (field !== "") {
-              const user = formData.get("user");
-              const pass = formData.get("pass");
-              const value = formData.get("value");
-              const object = {user: user, pass: pass, field: field, value: value}
-              fetch('https://api.account.skynet.ie/ldap/update', {
-                method: 'POST',
-                body: JSON.stringify(object),
-                mode: "cors"
-              }).then(res => {
-                if (res.status === 200) {
-                  let temp = res.json();
-                  if (temp.result === 'error') {
-                    document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`;
-                  } else {
-                    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>");
-            } else {
-              document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Please select a field to modify</span>";
-            }
-          }
-
-          function selectField() {
-            const field = document.getElementById('field').value;
-            const value = document.getElementById('value');
-            if (field === 'mail') {
-              value.type = 'email';
-            } else {
-              value.type = 'text';
-            }
-          }
-        </script>
+        <script type="module" src="modify.js"></script>
       </main>
       <footer class="page-footer">
         UL Computer Society 2023-<span id="year">2023</span>

src/modify.js

@@ -0,0 +1,39 @@
+import {request} from "./js/lib.js";
+
+const form = document.getElementById("form");
+form.addEventListener('submit',  formHandler);
+
+const form_status = document.getElementById("formStatus");
+
+const button = document.getElementById("button");
+button.addEventListener('submit', formHandler);
+
+const dropdown = document.getElementById("dropdown");
+dropdown.addEventListener('onchange', selectField);
+
+async function formHandler(listener) {
+    listener.preventDefault();
+    const formData = new FormData(form);
+    const dropdown_value = dropdown.value;
+
+    if (dropdown_value === "") {
+        form_status.innerHTML = "<span style='background-color: red; color: white'>Please select a field to modify</span>";
+        return;
+    }
+
+    const user = formData.get("user");
+    const pass = formData.get("pass");
+    const value = formData.get("value");
+    const body = {auth: {user: user, pass: pass}, field: dropdown_value, value: value};
+
+    let url = 'https://api.account.skynet.ie/ldap/update';
+    await request(url, body, form_status, 'POST');
+}
+
+function selectField() {
+    if (dropdown.value === 'mail') {
+        document.getElementById('value').type = 'email';
+    } else {
+        document.getElementById('value').type = 'text';
+    }
+}

src/modify_ssh.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en-ie">
+<head>
+    <meta charset="UTF-8"/>
+    <title>SSH</title>
+    <link href="images/favicon/favicon-16x16.png" rel="icon" type="image/png"/>
+    <link href="stylesheets/index.css" rel="stylesheet" type="text/css"/>
+    <script type="module" src="modify_ssh.js"></script>
+</head>
+<style>
+    .center {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .center, .center th, .center td {
+        border: 1px solid white;
+    }
+
+    .center {
+        border-spacing: 0;
+    }
+
+    .center th, .center td {
+        margin: 3px;
+    }
+
+    #key_table {
+        display: none;
+    }
+
+    textarea {
+        width: 650px;
+        height: 57px;
+
+    }
+
+</style>
+<body>
+<div class="wrapper">
+    <header class="page-header">
+        <img alt="Sharky, our mascot" height="81.56" src="images/sharky.svg" width="145"/>
+        <h1>Skynet Self Service</h1>
+    </header>
+    <main class="page-body">
+        <h2>SSH</h2>
+        <p>
+            Add / Remove SSH Keys from your account.
+        </p>
+        <form id="ssh_form">
+            <table id="table">
+                <tr>
+                    <td><label for="user">Username</label></td>
+                    <td><input id="user" name="user" type="text"/> <br/></td>
+                </tr>
+                <tr>
+                    <td><label for="pass">Password</label></td>
+                    <td><input id="pass" name="pass" type="password"/> <br/></td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <button type="submit" id="get_keys"> Show current keys</button>
+                    </td>
+                </tr>
+            </table>
+        </form>
+        <p id="formStatus"></p>
+
+        <div> SSH Keys</div>
+        <form id="add_key_form">
+            <label for="key_input"></label>
+            <textarea name="key_input" rows="4" cols="30" id="key_input"
+                      placeholder="ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAINS2UR/o+nK8lNHHTj5I84ZAAp6P+ZhXqhedMfx0KHE4 My skynet key!"></textarea>
+            <button type="button" id="add_key_button"> Add key</button>
+        </form>
+        <br>
+
+        <table id="key_table" class="center">
+            <tr>
+                <th>Name</th>
+                <th>Key</th>
+                <th>Remove</th>
+            </tr>
+        </table>
+
+    </main>
+    <footer class="page-footer">
+        UL Computer Society 2023-<span id="year">2023</span>
+        <script>
+            document.getElementById('year').textContent = new Date().getFullYear().toString()
+        </script>
+    </footer>
+</div>
+</body>
+</html>

src/modify_ssh.js

@@ -0,0 +1,139 @@
+function update_table(keys) {
+    let table = document.getElementById("key_table")
+    //removing old table
+    while (table.rows.length > 0) {
+        table.deleteRow(0);
+    }
+    keys.forEach(key => {
+        add_to_table(key);
+    })
+}
+
+async function get_keys() {
+    let username = document.getElementById("user").value;
+    let password = document.getElementById("pass").value;
+    let request = {auth: {user: username, pass: password}};
+    try {
+        const response = await fetch('https://api.account.skynet.ie/ldap/ssh', {
+            method: 'POST',
+            body: JSON.stringify(request),
+            mode: 'cors',
+        });
+        if (response.status !== 200) {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
+            return;
+        }
+        const data = await response.json();
+        if (data.result !== "success") {
+            document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${data.error}</span>`;
+            return;
+        }
+        document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success: Got keys</span>";
+        let keys = data.success;
+        document.getElementById('key_table').style.display = "table";
+        update_table(keys)
+    } catch (err) {
+        document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${err}</span>`;
+        console.log(err);
+    }
+}
+
+
+async function add_key() {
+    let username = document.getElementById("user").value;
+    let password = document.getElementById("pass").value;
+    let key = document.getElementById("key_input").value;
+    let request = {auth: {user: username, pass: password}, key: key};
+
+    try {
+        const response = await fetch('https://api.account.skynet.ie/ldap/ssh/add', {
+            method: 'POST',
+            body: JSON.stringify(request),
+            mode: 'cors',
+        });
+        if (response.status !== 200) {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
+            return;
+        }
+        const data = await response.json();
+        if (data.result !== "success") {
+            document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${data.error}</span>`;
+            return;
+        }
+        document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success: Added key </span>";
+        let keys = data.success;
+        update_table(keys);
+    } catch (err) {
+        document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${err}</span>`;
+        console.log(err);
+    }
+}
+
+async function delete_key(row_idx, key) {
+    let username = document.getElementById("user").value;
+    let password = document.getElementById("pass").value;
+
+    let request = {auth: {user: username, pass: password}, key: key};
+
+    try {
+        const response = await fetch('https://api.account.skynet.ie/ldap/ssh', {
+            method: 'DELETE',
+            body: JSON.stringify(request),
+            mode: 'cors',
+        });
+        if (response.status !== 200) {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
+            return;
+        }
+        const data = await response.json();
+        if (data.result !== "success") {
+            document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${data.error}</span>`;
+            return;
+        }
+        document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success: Deleted key </span>";
+        let keys = data.success;
+        update_table(keys);
+
+    } catch (err) {
+        document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${err}</span>`;
+        console.log(err);
+    }
+}
+
+function add_to_table(key) {
+    let table = document.getElementById("key_table");
+    let row = table.insertRow();
+    row.setAttribute("ssh_key", key);
+    let cell_name = row.insertCell(0);
+    let cell_key = row.insertCell(1);
+
+    //This is just for displaying the key, probably can be simplified
+    //Splitting by spaces, first two make the key + type, rest is a comment/name of the key
+    let key_split = key.split(' ');
+    cell_key.textContent = `${key_split[0]} ${key_split[1]}`;
+    //Names for SSH keys can have multiple spaces
+    let comment = "";
+    for (let i = 2; i < key_split.length; i++) {
+        comment += " " + key_split[i];
+    }
+    if (key_split.length === 2) {
+        comment = "No comment";
+    }
+    cell_name.textContent = comment;
+    let cell_delete = row.insertCell(2);
+    let delete_button = document.createElement("button");
+    delete_button.innerHTML = "Delete";
+
+    cell_delete.appendChild(delete_button);
+    cell_delete.addEventListener("click", function () {
+        delete_key(row.rowIndex, row.getAttribute("ssh_key"));
+    });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById("ssh_form").addEventListener("submit", function (event) {
+        event.preventDefault();
+        get_keys();
+    });
+    document.getElementById("add_key_button").addEventListener("click", add_key);
+});

src/password.html

@@ -3,13 +3,13 @@
   <head>
     <meta charset="UTF-8"/>
     <title>Password reset</title>
-    <link href="./images/favicon/favicon-16x16.png" rel="icon" type="image/png"/>
-    <link href="./stylesheets/index.css" rel="stylesheet" type="text/css"/>
+    <link href="images/favicon/favicon-16x16.png" rel="icon" type="image/png"/>
+    <link href="stylesheets/index.css" rel="stylesheet" type="text/css"/>
   </head>
   <body>
     <div class="wrapper">
       <header class="page-header">
-        <img alt="Sharky, our mascot" height="81.56" src="./images/sharky.svg" width="145"/>
+        <img alt="Sharky, our mascot" height="81.56" src="images/sharky.svg" width="145"/>
         <h1>Skynet Self Service</h1>
       </header>
       <main class="page-body">
@@ -17,7 +17,7 @@
         <p>
           Change your Skynet password.
         </p>
-        <form id="reset">
+        <form id="form">
           <table id="table">
             <tr>
               <td><label for="user">Username</label></td>
@@ -36,41 +36,12 @@
               <td><input id="newPW2" name="newPWConfirm" type="password"/> <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>
-        <script>
-          const formEl = document.getElementById("reset");
-          formEl.addEventListener('submit', (listener) => formHandler(listener));
-
-          function formHandler(listener) {
-            listener.preventDefault();
-            const formData = new FormData(formEl);
-            const user = formData.get("user");
-            const pass = formData.get("pass");
-            const newPW = formData.get("newPW");
-            if (newPW === formData.get("newPWConfirm")) {
-              const object = {user: user, pass: pass, field: "userPassword", value: newPW}
-              fetch('https://api.account.skynet.ie/ldap/update', {
-                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>");
-            } else {
-              document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: new passwords don't match</span>";
-            }
-          }
-        </script>
+        <script type="module" src="password.js"></script>
       </main>
       <footer class="page-footer">
         UL Computer Society 2023-<span id="year">2023</span>

src/password.js

@@ -0,0 +1,28 @@
+import {request} from "./js/lib.js";
+
+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();
+    const formData = new FormData(form);
+    const user = formData.get("user");
+    const pass = formData.get("pass");
+    const newPW = formData.get("newPW");
+    if (newPW !== formData.get("newPWConfirm")) {
+
+        document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: new passwords don't match</span>";
+
+        return;
+    }
+
+    const body = {auth: {user: user, pass: pass}, field: "userPassword", value: newPW}
+
+    let url = 'https://api.account.skynet.ie/ldap/update';
+    await request(url, body, form_status, 'POST');
+}

src/recovery/password.html

@@ -15,9 +15,11 @@
       <main class="page-body">
         <h2>Forgot Password</h2>
         <p>
-          Request a password reset sent to your linked email. <br> Enter either email address or skynet username. </br>
+          Request a password reset sent to your linked email.
+          <br>
+          Enter either email address or skynet username.
         </p>
-        <form id="recovery">
+        <form id="form">
           <table id="table">
             <tr>
               <td><label for="username">Username</label></td>
@@ -31,58 +33,12 @@
               <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>
-        <script>
-          const formEl = document.getElementById('recovery');
-          formEl.addEventListener('submit', formHandler);
-
-          async function formHandler(listener) {
-            listener.preventDefault();
-
-            // reset teh form status
-            document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Please wait.</span>";
-
-            const formData = new FormData(formEl);
-            const username = formData.get('username').trim();
-            const email = formData.get('email').trim();
-
-            if (username.length === 0 && email.length === 0) {
-              document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Please enter username or email</span>";
-              return;
-            }
-
-            let to_send = {
-              email: email
-            };
-
-            // assuming username is not empty it is the preferred method
-            if (username.length > 0) {
-              to_send = {user: username};
-            }
-
-            let url = "https://api.account.skynet.ie/ldap/recover/password";
-
-            try {
-              let req = await fetch(url, {
-                method: 'POST',
-                body: JSON.stringify(to_send),
-                mode: "cors"
-              });
-
-              if (req.status === 200) {
-                document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success Please check emails</span>";
-              } else {
-                document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>";
-              }
-            } catch (e) {
-              document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${e}</span>`;
-            }
-          }
-        </script>
+        <script type="module" src="password.js"></script>
       </main>
       <footer class="page-footer">
         UL Computer Society 2023-<span id="year">2023</span>

src/recovery/password.js

@@ -0,0 +1,50 @@
+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 teh form status
+    form_status.innerHTML = "<span style='background-color: green; color: white'>Please wait.</span>";
+
+    const formData = new FormData(form);
+    const username = formData.get('username').trim();
+    const email = formData.get('email').trim();
+
+    if (username.length === 0 && email.length === 0) {
+        form_status.innerHTML = "<span style='background-color: red; color: white'>Please enter username or email</span>";
+        return;
+    }
+
+    let to_send = {
+        email: email
+    };
+
+    // assuming username is not empty it is the preferred method
+    if (username.length > 0) {
+        to_send = {user: username};
+    }
+
+    let url = "https://api.account.skynet.ie/ldap/recover/password";
+
+    try {
+        let req = await fetch(url, {
+            method: 'POST',
+            body: JSON.stringify(to_send),
+            mode: "cors"
+        });
+
+        if (req.status === 200) {
+            form_status.innerHTML = "<span style='background-color: green; color: white'>Success Please check emails</span>";
+        } else {
+            form_status.innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>";
+        }
+    } catch (e) {
+        form_status.innerHTML = `<span style='background-color: red; color: white'>Error: ${e}</span>`;
+    }
+}

src/recovery/password_reset.html

@@ -17,7 +17,7 @@
         <p>
           Enter a new password for your Skynet account below.
         </p>
-        <form id="reset">
+        <form id="form">
           <table id="table">
             <tr>
               <td><label for="pass1">New Password</label> </td>
@@ -28,59 +28,12 @@
               <td><input id="pass2" name="confirm" type="password"/> <br/> </td>
             </tr>
             <tr>
-              <td colspan="2"><input type="submit"/> </td>
+              <td colspan="2"><input id="button" type="submit"/> </td>
             </tr>
           </table>
         </form>
         <p id="formStatus"></p>
-        <script>
-          const formEl = document.getElementById("reset");
-          formEl.addEventListener('submit', (listener) => formHandler(listener));
-          const url = new URL(window.location.href);
-          const urlParam = new URLSearchParams(url.search);
-          const auth = urlParam.get("auth");
-
-          async 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 pass = formData.get("password");
-            const confirm = formData.get("confirm");
-
-            if (pass !== confirm) {
-              document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Passwords don't match</span>";
-              return;
-            }
-
-            let url = "https://api.account.skynet.ie/ldap/recover/password/auth";
-            let req;
-            try {
-              req = await fetch(url, {
-                method: 'POST',
-                body: JSON.stringify({auth: auth, pass: pass}),
-                mode: "cors"
-              });
-            } catch (e) {
-              document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${e}</span>`;
-              return;
-            }
-
-            if (req.status !== 200) {
-              document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
-              return;
-            }
-
-            let data = req.json();
-            if (data.result === 'error') {
-              document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${data.error}</span>`;
-            } else {
-              document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
-            }
-          }
-        </script>
+        <script type="module" src="password_reset.js"></script>
       </main>
       <footer class="page-footer">
         UL Computer Society 2023-<span id="year">2023</span>

src/recovery/password_reset.js

@@ -0,0 +1,37 @@
+import {request} from "../js/lib.js";
+
+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 pass = formData.get("password");
+    const confirm = formData.get("confirm");
+
+    if (pass !== confirm) {
+        form_status.innerHTML = "<span style='background-color: red; color: white'>Failure: Passwords don't match</span>";
+        return;
+    }
+
+    const urlParam = new URLSearchParams(new URL(window.location.href).search);
+    const auth = urlParam.get("auth");
+
+    if(!auth){
+        return;
+    }
+
+    let url = "https://api.account.skynet.ie/ldap/recover/password/auth";
+    let body = {auth: auth, pass: pass};
+
+    await request(url, body, form_status, 'POST');
+}

src/recovery/ssh-request.html

@@ -15,7 +15,9 @@
       <main class="page-body">
         <h1>SSH key recovery</h1>
         <p>
-            Recover a legacy skynet account using your username and set a new email address to link to the account. Use this only if you do not remember the account password and the linked account email is lost or incorrect.<br> Enter skynet username & email you have used with UL Wolves. </br>
+          Recover a legacy skynet account using your username and set a new email address to link to the account. Use this only if you do not remember the account password and the linked account email is lost or incorrect.
+          <br>
+          Enter skynet username & email you have used with UL Wolves.
         </p>
 
         <form id="form">
@@ -29,51 +31,12 @@
               <td><input id="mail" name="mail" type="email"/> <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>
-        <script>
-          const formEl = document.getElementById("form");
-          formEl.addEventListener('submit', formHandler);
-
-          function formHandler(listener) {
-            listener.preventDefault();
-            const formData = new FormData(formEl);
-            const object = {user: formData.get('user'), email: formData.get('mail')};
-            fetch('https://api.account.skynet.ie/ldap/recover/ssh/request', {
-              method: 'POST',
-              body: JSON.stringify(object),
-              mode: "cors"
-            })
-            .then(status)
-            .then(json)
-            .catch(() => {
-              document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>";
-            });
-          }
-
-          function status(res) {
-            if (res.status === 200) {
-              return res.json();
-            } 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>";
-            }
-          }
-
-          function json(temp) {
-            if (temp) {
-              if (temp.result === 'error') {
-                document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`;
-              } else {
-                document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
-              }
-            }
-          }
-        </script>
+        <script type="module" src="ssh-request.js"></script>
       </main>
       <footer class="page-footer">
         UL Computer Society 2023-<span id="year">2023</span>

src/recovery/ssh-request.js

@@ -0,0 +1,19 @@
+import {request} from "../js/lib.js";
+
+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();
+    const formData = new FormData(form);
+    const body = {user: formData.get('user'), email: formData.get('mail')};
+
+    let url = 'https://api.account.skynet.ie/ldap/recover/ssh/request';
+    await request(url, body, form_status, 'POST');
+}

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>
-          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>
+        <script type="module" src="username.js"></script>
       </main>
       <footer class="page-footer">
         UL Computer Society 2023-<span id="year">2023</span>

src/recovery/username.js

@@ -0,0 +1,25 @@
+import {request} from "../js/lib.js";
+
+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';
+    await request(url, body, form_status, 'POST');
+}

src/register.html

@@ -3,13 +3,13 @@
   <head>
     <meta charset="UTF-8"/>
     <title>Skynet Register</title>
-    <link href="./images/favicon/favicon-16x16.png" rel="icon" type="image/png"/>
-    <link href="./stylesheets/index.css" rel="stylesheet" type="text/css"/>
+    <link href="images/favicon/favicon-16x16.png" rel="icon" type="image/png"/>
+    <link href="stylesheets/index.css" rel="stylesheet" type="text/css"/>
   </head>
   <body>
     <div class="wrapper">
       <header class="page-header">
-        <img alt="Sharky, our mascot" height="81.56" src="./images/sharky.svg" width="145"/>
+        <img alt="Sharky, our mascot" height="81.56" src="images/sharky.svg" width="145"/>
         <h1>Skynet Self Service</h1>
       </header>
       <main class="page-body">
@@ -23,7 +23,7 @@
           <br>
           It must be lowercase, start with a letter and contain only 0-9 a-z and _-
         </p>
-        <form id="register">
+        <form id="form">
           <table id="table">
             <tr>
               <td><label for="user">Username</label></td>
@@ -38,53 +38,12 @@
               <td><input id="confirm" name="confirm" type="password"/></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>
-        <script>
-          const formEl = document.getElementById("register");
-          formEl.addEventListener('submit', (listener) => formHandler(listener));
-
-          function formHandler(listener) {
-            listener.preventDefault();
-            const formData = new FormData(formEl);
-            const pass = formData.get("pass");
-            if (pass === formData.get("confirm")) {
-              const url = new URL(window.location.href);
-              const urlParam = new URLSearchParams(url.search);
-              const auth = urlParam.get("auth");
-              const user = formData.get("user");
-              const object = {auth: auth, user: user, pass: pass};
-              fetch('https://api.account.skynet.ie/ldap/new/account', {
-                method: 'POST',
-                body: JSON.stringify(object),
-                mode: "cors"
-              }).then(res => {
-                if (res.status === 200) {
-                  return res.json();
-                } 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>";
-                }
-              })
-              .then((temp) => {
-                if (temp) {
-                  if (temp.result === 'error') {
-                    document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`;
-                  } else {
-                    document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
-                  }
-                }
-              })
-              .catch(() => document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>");
-            } else {
-              document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Passwords don't match</span>`;
-            }
-          }
-        </script>
+        <script type="module" src="register.js"></script>
       </main>
       <footer class="page-footer">
         UL Computer Society 2023-<span id="year">2023</span>

src/register.js

@@ -0,0 +1,35 @@
+import {request} from "./js/lib.js";
+
+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();
+    const formData = new FormData(form);
+    const pass = formData.get("pass");
+
+    if (pass !== formData.get("confirm")) {
+        form_status.innerHTML = `<span style='background-color: red; color: white'>Passwords don't match</span>`;
+        return;
+    }
+
+
+    const urlParam = new URLSearchParams(new URL(window.location.href).search);
+    const auth = urlParam.get("auth");
+
+    // if there is no auth value then return here
+    if(!auth){
+        return;
+    }
+
+    const user = formData.get("user");
+    const body = {auth: auth, user: user, pass: pass};
+
+    let url = 'https://api.account.skynet.ie/ldap/new/account';
+    await request(url, body, form_status, 'POST');
+}

src/signup.html

@@ -30,48 +30,23 @@
   <body>
     <div class="wrapper">
       <header class="page-header">
-        <img alt="Sharky, our mascot" height="81.56" src="./images/sharky.svg" width="145"/>
+        <img alt="Sharky, our mascot" height="81.56" src="images/sharky.svg" width="145"/>
         <h1>Skynet Self Service</h1>
       </header>
       <main class="page-body">
         <h2>Welcome to Skynet</h2>
         <p>
-          If you previously had an account please <a href="./modify.html">set your email</a> to be the same as UL Wolves.
+          If you previously had an account please <a href="modify.html">set your email</a> to be the same as UL Wolves.
           <br/>
           If you are a new user, please fill in the form below with the email that you use on ul wolves.
         </p>
-        <form id="register">
+        <form id="form">
           <label for="mail">Email address</label>
           <input id="mail" name="email" type="email"/> <br/>
-          <input type="submit" value="Submit"/>
+          <input id="button" type="submit" value="Submit"/>
         </form>
         <p id="formStatus"></p>
-        <script>
-          const formEl = document.getElementById('register');
-          formEl.addEventListener('submit', (listener) => formHandler(listener));
-
-          function formHandler(listener) {
-            listener.preventDefault();
-            //HTML below taken from the W3 schools tutorial ()
-            document.getElementById('formStatus').innerHTML = "<div class='loader'></div>"
-            const formData = new FormData(formEl);
-            const email = formData.get("email");
-            const object = {email: email};
-            fetch('https://api.account.skynet.ie/ldap/new/email', {
-              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>
+        <script type="module" src="signup.js"></script>
       </main>
       <footer class="page-footer">
         UL Computer Society 2023-<span id="year">2023</span>

src/signup.js

@@ -0,0 +1,24 @@
+import {request} from "./js/lib.js";
+
+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();
+    //HTML below taken from the W3 schools tutorial ()
+    form_status.innerHTML = "<div class='loader'></div>"
+
+    const formData = new FormData(form);
+    const email = formData.get("email");
+    const body = {email: email};
+
+
+    let url = 'https://api.account.skynet.ie/ldap/new/email';
+    await request(url, body, form_status, 'POST');
+
+}