feat : frontend for adding & deleting keys

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);
+});
+

src/ssh.html

@@ -5,7 +5,21 @@
     <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 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">
@@ -16,8 +30,6 @@
         <h2>SSH</h2>
         <p>
             Add / Remove SSH Keys from your account.
-</p><p>
-          Enter Username and Password to see your current keys.
         </p>
         <form id="reset">
             <table id="table">
@@ -30,54 +42,30 @@
                     <td><input id="pass" name="pass" type="password"/> <br/></td>
                 </tr>
                 <tr>
-              <td colspan="2"><input type="Submit" value="Submit"/></td>
+                    <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) {
+        <div> SSH Keys</div>
-            listener.preventDefault();
+        <form id="add_key_form">
-            const formData = new FormData(formEl);
+            <label for="key_input"></label>
-              const user = formData.get("user");
+            <input type="text" id="key_input" placeholder="Add key">
-              const pass = formData.get("pass");
+            <button type="button" id="add_key_button"> Add key</button>
-                const object = {user: user, pass: pass}
+        </form>
-            console.log("test");
+
-                    // getting ssh key list 
+        <table id="key_table" class="center">
-            fetch('http://127.0.0.1:8087/ldap/ssh', {
+            <tr>
-                method: 'POST',
+                <!-- <th> Name </th> split on spaces for this later? -->
-                body: JSON.stringify(object),
+                <th>Key</th>
-              mode: "cors",
+                <th>Remove</th>
-              }).then(res => {
+            </tr>
-                if (res.status === 200) {
+
-                  let temp = res.json();
+        </table>
-                  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>");
-          }
 
-          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">
         UL Computer Society 2023-<span id="year">2023</span>