Frontend for new SSH page #22
2 changed files with 55 additions and 54 deletions
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue