From 115f0257e5a914abc48bceb9c490e218c3a49525 Mon Sep 17 00:00:00 2001
From: daragh <daraghdownes12@gmail.com>
Date: Sat, 30 Dec 2023 01:47:41 +0000
Subject: [PATCH] feat : frontend for adding & deleting keys

---
 src/scripts/ssh.js | 127 ++++++++++++++++++++++++++++++++++++++++++++
 src/ssh.html       | 128 ++++++++++++++++++++-------------------------
 2 files changed, 185 insertions(+), 70 deletions(-)
 create mode 100644 src/scripts/ssh.js

diff --git a/src/scripts/ssh.js b/src/scripts/ssh.js
new file mode 100644
index 0000000..b791691
--- /dev/null
+++ b/src/scripts/ssh.js
@@ -0,0 +1,127 @@
+let got_keys = false;
+
+function get_keys() {
+    console.log("get_keys running ,  got_keys = ", got_keys);
+    let username = document.getElementById("user").value;
+    let password = document.getElementById("pass").value;
+    let request = {auth: {user: username, pass: password}};
+
+    fetch('http://127.0.0.1:8087/ldap/ssh', {
+        method: 'POST',
+        body: JSON.stringify(request),
+        mode: 'cors',
+    }).then(res => {
+        if (res.status === 200) {
+            return res.json();
+        } else {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
+        }
+    }).then(data => {
+        if (data.result === "success") {
+            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";
+            got_keys = true;
+            keys.forEach(key => {
+                add_to_table(key);
+            })
+        } else {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to get keys</span>";
+        }
+    }).catch(err => {
+        console.log(err);
+    });
+}
+
+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};
+    if (key === "") {
+        document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Key cannot be empty</span>";
+        return;
+    }
+    fetch('http://127.0.0.1:8087/ldap/add', {
+        method: 'POST',
+        body: JSON.stringify(request),
+        mode: 'cors',
+    }).then(res => {
+        if (res.status === 200) {
+            return res.json();
+        } else {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
+        }
+
+    }).then(data => {
+        if (data.result === "success") {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success : Key added</span>";
+            document.getElementById('key_table').style.display = "table";
+            add_to_table(key);
+        } else {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to add</span>";
+        }
+    }).catch(err => {
+        document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Error </span>";
+        console.log(err);
+    });
+}
+
+function delete_key(row_idx) {
+    let table = document.getElementById("key_table");
+    let key = table.rows[row_idx].cells[0].innerHTML;
+    let username = document.getElementById("user").value;
+    let password = document.getElementById("pass").value;
+    let request = {auth: {user: username, pass: password}, key: key};
+
+    fetch('http://127.0.0.1:8087/ldap/delete', {
+        method: 'DELETE',
+        body: JSON.stringify(request),
+        mode: 'cors',
+    }).then(res => {
+        if (res.status === 200) {
+            return res.json();
+        } else {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
+        }
+    }).then(data => {
+        if (data.result === "success") {
+            table.deleteRow(row_idx);
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success : Key deleted</span>";
+        } else {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to delete</span>";
+        }
+    }).catch(err => {
+        document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Error </span>";
+        console.log(err);
+    })
+}
+
+function add_to_table(key) {
+    let table = document.getElementById("key_table");
+    let row = table.insertRow();
+    let cell1 = row.insertCell(0);
+    cell1.innerHTML = key;
+    let cell2 = row.insertCell(1);
+
+    let button = document.createElement("button");
+    button.innerHTML = "Delete";
+    cell2.appendChild(button);
+    //cell2.appendChild(document.createElement("button")).innerHTML = "Delete";
+    button.addEventListener("click", function () {
+        delete_key(row.rowIndex);
+    });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById("get_keys").addEventListener("click", function () {
+        if (got_keys) {
+            console.log("got keys already");
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Got keys already</span>";
+        } else {
+            get_keys();
+        }
+    });
+    document.getElementById("add_key_button").addEventListener("click", add_key);
+});
+
diff --git a/src/ssh.html b/src/ssh.html
index 879ad51..be524f3 100644
--- a/src/ssh.html
+++ b/src/ssh.html
@@ -1,90 +1,78 @@
 <!DOCTYPE html>
 <html lang="en-ie">
-  <head>
+<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"/>
-  </head>
-  <body>
-    <div class="wrapper">
-      <header class="page-header">
+    <script src="scripts/ssh.js"></script>
+</head>
+
+<style>
+    .center {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    #key_table {
+        display: none;
+    }
+
+</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">
+    </header>
+    <main class="page-body">
         <h2>SSH</h2>
         <p>
-          Add / Remove SSH Keys from your account.
-</p><p>
-          Enter Username and Password to see your current keys.
+            Add / Remove SSH Keys from your account.
         </p>
         <form id="reset">
-          <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"><input type="Submit" value="Submit"/></td>
-            </tr>
-          </table>
+            <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="button" id="get_keys"> Show current keys</button>
+                    </td>
+                </tr>
+            </table>
         </form>
         <p id="formStatus"></p>
-        <!-- here we can do a tableStatus for the ssh keys then fill them in once we get 200 ! -->
-        <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 object = {user: user, pass: pass}
-            console.log("test");
-                    // getting ssh key list 
-            fetch('http://127.0.0.1:8087/ldap/ssh', {
-                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>");
-          }
+        <div> SSH Keys</div>
+        <form id="add_key_form">
+            <label for="key_input"></label>
+            <input type="text" id="key_input" placeholder="Add key">
+            <button type="button" id="add_key_button"> Add key</button>
+        </form>
 
-          function selectField() {
-            const field = document.getElementById('field').value;
-            const value = document.getElementById('value');
-            if (field === 'mail') {
-              value.type = 'email';
-            } else {
-              value.type = 'text';
-            }
-          }
-        </script>
-      </main>
-      <footer class="page-footer">
+        <table id="key_table" class="center">
+            <tr>
+                <!-- <th> Name </th> split on spaces for this later? -->
+                <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()
+            document.getElementById('year').textContent = new Date().getFullYear().toString()
         </script>
-      </footer>
-    </div>
-  </body>
+    </footer>
+</div>
+</body>
 </html>