Frontend for new SSH page #22

Merged
esy merged 21 commits from #7-multiple-ssh-keys into main 2024-02-18 17:28:21 +00:00
2 changed files with 55 additions and 54 deletions
Showing only changes of commit 202c89ca74 - Show all commits

View file

@ -7,21 +7,21 @@
<link href="../stylesheets/index.css" rel="stylesheet" type="text/css"/> <link href="../stylesheets/index.css" rel="stylesheet" type="text/css"/>
<script src="ssh.js"></script> <script src="ssh.js"></script>
</head> </head>
<style> <style>
.center { .center {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
table, th{
table, th {
border: 1px solid; border: 1px solid;
} }
td { border: 1px solid;
td {
border: 1px solid;
width: fit-content; width: fit-content;
white-space: nowrap; white-space: nowrap;
} }
} }
#key_table { #key_table {
@ -29,7 +29,6 @@
} }
</style> </style>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<header class="page-header"> <header class="page-header">
@ -63,7 +62,8 @@
<div> SSH Keys</div> <div> SSH Keys</div>
<form id="add_key_form"> <form id="add_key_form">
<label for="key_input"></label> <label for="key_input"></label>
<textarea name="key_input" rows = "4" cols="30" id = "key_input" placeholder="ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAINS2UR/o+nK8lNHHTj5I84ZAAp6P+ZhXqhedMfx0KHE4 My skynet key!"></textarea> <textarea name="key_input" rows="4" cols="30" id="key_input"
placeholder="ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAINS2UR/o+nK8lNHHTj5I84ZAAp6P+ZhXqhedMfx0KHE4 My skynet key!"></textarea>
<button type="button" id="add_key_button"> Add key</button> <button type="button" id="add_key_button"> Add key</button>
</form> </form>

View file

@ -4,16 +4,21 @@ async function get_keys() {
let username = document.getElementById("user").value; let username = document.getElementById("user").value;
let password = document.getElementById("pass").value; let password = document.getElementById("pass").value;
let request = {auth: {user: username, pass: password}}; let request = {auth: {user: username, pass: password}};
try { try {
const response = await fetch('https://api.account.skynet.ie/ldap/ssh', { const response = await fetch('https://api.account.skynet.ie/ldap/ssh', {
method: 'POST', method: 'POST',
body: JSON.stringify(request), body: JSON.stringify(request),
mode: 'cors', mode: 'cors',
}); });
if (response.status === 200) { 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(); const data = await response.json();
if (data.result === "success") { 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: Got keys</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success: Got keys</span>";
let keys = data.success; let keys = data.success;
document.getElementById('key_table').style.display = "table"; document.getElementById('key_table').style.display = "table";
@ -21,13 +26,8 @@ async function get_keys() {
keys.forEach(key => { keys.forEach(key => {
add_to_table(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) { } catch (err) {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${err}</span>`;
console.log(err); console.log(err);
} }
} }
@ -48,20 +48,21 @@ async function add_key() {
body: JSON.stringify(request), body: JSON.stringify(request),
mode: 'cors', mode: 'cors',
}); });
if (response.status === 200) { 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(); const data = await response.json();
if (data.result === "success") { 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: Key added</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success: Key added</span>";
document.getElementById('key_table').style.display = "table"; document.getElementById('key_table').style.display = "table";
add_to_table(request.key); 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) { } catch (err) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Error </span>"; document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${err}</span>`;
console.log(err); console.log(err);
} }
} }
@ -78,46 +79,46 @@ async function delete_key(row_idx) {
body: JSON.stringify(request), body: JSON.stringify(request),
mode: 'cors', mode: 'cors',
}); });
if (response.status === 200) { 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(); const data = await response.json();
if (data.result === "success") { if (data.result !== "success") {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${data.error}</span>`;
return;
}
table.deleteRow(row_idx); table.deleteRow(row_idx);
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success: Key deleted</span>"; 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) { } catch (err) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Error </span>"; document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${err}</span>`;
console.log(err); console.log(err);
} }
} }
function add_to_table(key) { function add_to_table(key) {
let table = document.getElementById("key_table"); let table = document.getElementById("key_table");
let new_row = table.insertRow(); let row = table.insertRow();
let name_cell = new_row.insertCell(0); let cell_name = row.insertCell(0);
let key_cell = new_row.insertCell(1); let cell_key = row.insertCell(1);
//Splitting by spaces, first two make the key + type, rest is a comment/name of the key //Splitting by spaces, first two make the key + type, rest is a comment/name of the key
let key_split = key.split(' '); let key_split = key.split(' ');
let key_string = key_split[0] + ' ' + key_split[1]; cell_key.textContent = `${key_split[0]} ${key_split[1]}`;
key_cell.textContent = key_string;
//Names for SSH keys can have multiple spaces //Names for SSH keys can have multiple spaces
let comment = ""; let comment = "";
for (i = 2; i < key_split.length; i++) { for (i = 2; i < key_split.length; i++) {
comment += " " + key_split[i]; comment += " " + key_split[i];
} }
name_cell.textContent = comment; cell_name.textContent = comment;
let delete_cell = new_row.insertCell(2); let cell_delete = row.insertCell(2);
let delete_button = document.createElement("button"); let delete_button = document.createElement("button");
delete_button.innerHTML = "Delete"; delete_button.innerHTML = "Delete";
delete_cell.appendChild(delete_button); cell_delete.appendChild(delete_button);
delete_cell.addEventListener("click", function () { cell_delete.addEventListener("click", function () {
delete_key(new_row.rowIndex); delete_key(row.rowIndex);
}); });
} }