ldap_frontend/src/ssh/ssh.js

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