Skynet/ldap_frontend
6
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>
<link href="images/favicon/favicon-16x16.png" rel="icon" type="image/png"/>
<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>
<style>
.center {

91
src/modify_ssh.js
View file

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