feat : made input for new key textarea, split keys on their comment to display in table. Made js code use async/await instead of then.

Works fine with mockoon but might need more testing with actual LDAP server.

src/ssh/ssh.js

@@ -0,0 +1,134 @@
+let got_keys = false;
+
+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('http://127.0.0.1:8087/ldap/ssh', {
+            method: 'POST',
+            body: JSON.stringify(request),
+            mode: 'cors',
+        });
+        if (response.status === 200) {
+            const data = await response.json();
+            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'>Error: Failed to get keys</span>";
+            }
+        } else {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
+        }
+    } catch (err) {
+        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};
+    if (key === "") {
+        document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Key cannot be empty</span>";
+        return;
+    }
+    try {
+        const response = await fetch('http://127.0.0.1:8087/ldap/ssh/add', {
+            method: 'POST',
+            body: JSON.stringify(request),
+            mode: 'cors',
+        });
+        if (response.status === 200) {
+            const data = await response.json();
+            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(request.key);
+            } else {
+                document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Error:Failed to add</span>";
+            }
+        } else {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
+        }
+    } catch (err) {
+        document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Error </span>";
+        console.log(err);
+    }
+}
+
+async 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};
+    try {
+        const response = await fetch('http://127.0.0.1:8087/ldap/ssh', {
+            method: 'DELETE',
+            body: JSON.stringify(request),
+            mode: 'cors',
+        });
+        if (response.status === 200) {
+            const data = await response.json();
+            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'>Error: Failed to delete</span>";
+            }
+        } else {
+            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</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 new_row = table.insertRow();
+    let name_cell = new_row.insertCell(0);
+    let key_cell = new_row.insertCell(1);
+
+    //Splitting by spaces, first two make the key + type, rest is a comment/name of the key
+    let key_split = key.split(' ');
+    let key_string = key_split[0] + ' ' + key_split[1];
+    key_cell.textContent = key_string;
+    //Names for SSH keys can have multiple spaces
+    let comment = "";
+    for (i = 2; i < key_split.length; i++) {
+        comment += " " + key_split[i];
+    }
+    name_cell.textContent = comment;
+    let delete_cell = new_row.insertCell(2);
+    let delete_button = document.createElement("button");
+    delete_button.innerHTML = "Delete";
+
+    delete_cell.appendChild(delete_button);
+    delete_cell.addEventListener("click", function () {
+        delete_key(new_row.rowIndex);
+    });
+}
+
+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);
+});