Table now refreshes after deleting / adding key

Can get keys multiple times, ssh key is now an attribute of the row, so
no weird logic when deleting the key.
Tested with mockoon seems to be working.

src/modify_ssh.html

@@ -5,7 +5,7 @@
     <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="modify_ssh.js"></script>
+    <script type="module" src="modify_ssh.js"></script>
 </head>
 <style>
     .center {

src/modify_ssh.js

@@ -1,13 +1,19 @@
-import {request} from "./js/lib";
+function update_table(keys){
-
+    let table = document.getElementById("key_table")
-let got_keys = false;
+    //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', {
+        const response = await fetch('http://localhost:8087/ldap/ssh', {
             method: 'POST',
             body: JSON.stringify(request),
             mode: 'cors',
@@ -24,10 +30,7 @@ async function get_keys() {
         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;
+        update_table(keys)
-        keys.forEach(key => {
-            add_to_table(key);
-        });
     } catch (err) {
         document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${err}</span>`;
         console.log(err);
@@ -39,39 +42,71 @@ async function add_key() {
     let username = document.getElementById("user").value;
     let password = document.getElementById("pass").value;
     let key = document.getElementById("key_input").value;
-    let body = {auth: {user: username, pass: password}, key: key};
+    let request = {auth: {user: username, pass: password}, key: key};
-    let url = 'https://api.account.skynet.ie/ldap/ssh/add';
 
-    if(await request(url,body, document.getElementById('formStatus'), 'POST')){
+    try {
-        document.getElementById('key_table').style.display = "table";
+        const response = await fetch('http://localhost:8087/ldap/ssh/add', {
-        add_to_table(key);
+            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) {
+async function delete_key(row_idx,key) {
-    let table = document.getElementById("key_table");
-    let key = table.rows[row_idx].cells[1].innerHTML;
-    let comment = table.rows[row_idx].cells[0].innerHTML;
-    key += comment;
-
     let username = document.getElementById("user").value;
     let password = document.getElementById("pass").value;
 
+    let request = {auth: {user: username, pass: password}, key: key};
 
-    let body = {auth: {user: username, pass: password}, key: key};
+    try {
-    let url = 'https://api.account.skynet.ie/ldap/ssh';
+        const response = await fetch('http://localhost:8087/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);
 
-    if(await request(url,body, document.getElementById('formStatus'), 'DELETE')){
+    } catch (err) {
-        table.deleteRow(row_idx);
+        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]}`;
@@ -90,18 +125,14 @@ function add_to_table(key) {
 
     cell_delete.appendChild(delete_button);
     cell_delete.addEventListener("click", function () {
-        delete_key(row.rowIndex);
+        delete_key(row.rowIndex, row.getAttribute("ssh_key"));
     });
 }
 
 document.addEventListener("DOMContentLoaded", () => {
     document.getElementById("ssh_form").addEventListener("submit", function (event) {
         event.preventDefault();
-        if (got_keys) {
-            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);
 });