From dcbce9942b8172a97efcbe28fbdaedae5bda473d Mon Sep 17 00:00:00 2001
From: daragh <daraghdownes12@gmail.com>
Date: Sun, 18 Feb 2024 02:42:06 +0000
Subject: [PATCH] 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 |  2 +-
 src/modify_ssh.js   | 91 ++++++++++++++++++++++++++++++---------------
 2 files changed, 62 insertions(+), 31 deletions(-)

diff --git a/src/modify_ssh.html b/src/modify_ssh.html
index 298d140..8d0d47a 100644
--- a/src/modify_ssh.html
+++ b/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 {
diff --git a/src/modify_ssh.js b/src/modify_ssh.js
index b9b4737..7068b66 100644
--- a/src/modify_ssh.js
+++ b/src/modify_ssh.js
@@ -1,13 +1,19 @@
-import {request} from "./js/lib";
-
-let got_keys = false;
-
+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', {
+        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;
-        keys.forEach(key => {
-            add_to_table(key);
-        });
+        update_table(keys)
     } 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 url = 'https://api.account.skynet.ie/ldap/ssh/add';
+    let request = {auth: {user: username, pass: password}, key: key};
 
-    if(await request(url,body, document.getElementById('formStatus'), 'POST')){
-        document.getElementById('key_table').style.display = "table";
-        add_to_table(key);
+    try {
+        const response = await fetch('http://localhost:8087/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) {
-    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;
-
+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};
 
-    let body = {auth: {user: username, pass: password}, key: key};
-    let url = 'https://api.account.skynet.ie/ldap/ssh';
+    try {
+        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')){
-        table.deleteRow(row_idx);
+    } 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]}`;
@@ -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();
-        }
+        get_keys();
     });
     document.getElementById("add_key_button").addEventListener("click", add_key);
 });
\ No newline at end of file