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

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
Conversation 71 Commits 21 Files changed 12 +62 -31
2 changed files with 62 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit dcbce9942b - Show all commits

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