Skynet/ldap_frontend
6
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Table now refreshes after deleting / adding key

Browse source 
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.
This commit is contained in:
daragh 2024-02-18 02:42:06 +00:00
parent 5f11bbce09
commit dcbce9942b
No known key found for this signature in database
2 changed files with 62 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/modify_ssh.html
View file

@ -5,7 +5,7 @@
<title>SSH</title> <title>SSH</title>
<link href="images/favicon/favicon-16x16.png" rel="icon" type="image/png"/> <link href="images/favicon/favicon-16x16.png" rel="icon" type="image/png"/>
<link href="stylesheets/index.css" rel="stylesheet" type="text/css"/> <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> </head>
<style> <style>
.center { .center {

91
src/modify_ssh.js
View file

@ -1,13 +1,19 @@
import {request} from "./js/lib"; function update_table(keys){
let table = document.getElementById("key_table")
let got_keys = false; //removing old table
while(table.rows.length > 0){
table.deleteRow(0);
}
keys.forEach(key => {
add_to_table(key);
})
}
async function get_keys() { 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('http://localhost:8087/ldap/ssh', {
method: 'POST', method: 'POST',
body: JSON.stringify(request), body: JSON.stringify(request),
mode: 'cors', 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>"; 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";
got_keys = true; update_table(keys)
keys.forEach(key => {
add_to_table(key);
});
} catch (err) { } catch (err) {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${err}</span>`; document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${err}</span>`;
console.log(err); console.log(err);
@ -39,39 +42,71 @@ async function add_key() {
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 key = document.getElementById("key_input").value; let key = document.getElementById("key_input").value;
let body = {auth: {user: username, pass: password}, key: key}; let request = {auth: {user: username, pass: password}, key: key};
let url = 'https://api.account.skynet.ie/ldap/ssh/add';
if(await request(url,body, document.getElementById('formStatus'), 'POST')){ try {
document.getElementById('key_table').style.display = "table"; const response = await fetch('http://localhost:8087/ldap/ssh/add', {
add_to_table(key); 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) { async function delete_key(row_idx,key) {
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;
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}, key: key};
let body = {auth: {user: username, pass: password}, key: key}; try {
let url = 'https://api.account.skynet.ie/ldap/ssh'; 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')){ } catch (err) {
table.deleteRow(row_idx); document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${err}</span>`;
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 row = table.insertRow(); let row = table.insertRow();
row.setAttribute("ssh_key",key);
let cell_name = row.insertCell(0); let cell_name = row.insertCell(0);
let cell_key = row.insertCell(1); 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 //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(' ');
cell_key.textContent = `${key_split[0]} ${key_split[1]}`; 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.appendChild(delete_button);
cell_delete.addEventListener("click", function () { cell_delete.addEventListener("click", function () {
delete_key(row.rowIndex); delete_key(row.rowIndex, row.getAttribute("ssh_key"));
}); });
} }
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
document.getElementById("ssh_form").addEventListener("submit", function (event) { document.getElementById("ssh_form").addEventListener("submit", function (event) {
event.preventDefault(); event.preventDefault();
if (got_keys) { get_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); document.getElementById("add_key_button").addEventListener("click", add_key);
}); });