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

feat : made input for new key textarea, split keys on their comment to display in table. Made js code use async/await instead of then.

Browse source 
Works fine with mockoon but might need more testing with actual LDAP server.
This commit is contained in:
daragh 2023-12-30 23:27:32 +00:00
parent 7f40a4b259
commit 128794648c
No known key found for this signature in database
4 changed files with 153 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/index.html
View file

@ -55,7 +55,7 @@
</section>
<section>
<h2>
<a href="./ssh.html">SSH</a>
<a href="ssh/index.html">SSH</a>
</h2>
<p>
Please use this service to manage your SSH keys.

128
src/scripts/ssh.js
View file

@ -1,128 +0,0 @@
let got_keys = false;
function get_keys() {
console.log("get_keys running , got_keys = ", got_keys);
let username = document.getElementById("user").value;
let password = document.getElementById("pass").value;
let request = {auth: {user: username, pass: password}};
fetch('http://127.0.0.1:8087/ldap/ssh', {
// can switch this to get with auth headers i think
method: 'POST',
body: JSON.stringify(request),
mode: 'cors',
}).then(res => {
if (res.status === 200) {
return res.json();
} else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
}
}).then(data => {
if (data.result === "success") {
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);
})
} else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to get keys</span>";
}
}).catch(err => {
console.log(err);
});
}
function add_key() {
let username = document.getElementById("user").value;
let password = document.getElementById("pass").value;
let key = document.getElementById("key_input").value;
let request = {auth: {user: username, pass: password}, key: key};
if (key === "") {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Key cannot be empty</span>";
return;
}
fetch('http://127.0.0.1:8087/ldap/ssh/add', {
method: 'POST',
body: JSON.stringify(request),
mode: 'cors',
}).then(res => {
if (res.status === 200) {
return res.json();
} else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
}
}).then(data => {
if (data.result === "success") {
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success : Key added</span>";
document.getElementById('key_table').style.display = "table";
add_to_table(key);
} else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to add</span>";
}
}).catch(err => {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Error </span>";
console.log(err);
});
}
function delete_key(row_idx) {
let table = document.getElementById("key_table");
let key = table.rows[row_idx].cells[0].innerHTML;
let username = document.getElementById("user").value;
let password = document.getElementById("pass").value;
let request = {auth: {user: username, pass: password}, key: key};
fetch('http://127.0.0.1:8087/ldap/ssh', {
method: 'DELETE',
body: JSON.stringify(request),
mode: 'cors',
}).then(res => {
if (res.status === 200) {
return res.json();
} else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
}
}).then(data => {
if (data.result === "success") {
table.deleteRow(row_idx);
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'>Failed to delete</span>";
}
}).catch(err => {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Error </span>";
console.log(err);
})
}
function add_to_table(key) {
let table = document.getElementById("key_table");
let row = table.insertRow();
let cell1 = row.insertCell(0);
cell1.innerHTML = key;
let cell2 = row.insertCell(1);
let button = document.createElement("button");
button.innerHTML = "Delete";
cell2.appendChild(button);
//cell2.appendChild(document.createElement("button")).innerHTML = "Delete";
button.addEventListener("click", function () {
delete_key(row.rowIndex);
});
}
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("get_keys").addEventListener("click", function () {
if (got_keys) {
console.log("got keys already");
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);
});

27
src/ssh.html → src/ssh/index.html
View file

@ -3,15 +3,25 @@
<head>
<meta charset="UTF-8"/>
<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="scripts/ssh.js"></script>
<link href="../images/favicon/favicon-16x16.png" rel="icon" type="image/png"/>
<link href="../stylesheets/index.css" rel="stylesheet" type="text/css"/>
<script src="ssh.js"></script>
</head>
<style>
.center {
margin-left: auto;
margin-right: auto;
table, th{
border: 1px solid;
}
td { border: 1px solid;
width: fit-content;
white-space: nowrap;
}
}
#key_table {
@ -23,7 +33,7 @@
<body>
<div class="wrapper">
<header class="page-header">
<img alt="Sharky, our mascot" height="81.56" src="./images/sharky.svg" width="145"/>
<img alt="Sharky, our mascot" height="81.56" src="../images/sharky.svg" width="145"/>
<h1>Skynet Self Service</h1>
</header>
<main class="page-body">
@ -31,7 +41,7 @@
<p>
Add / Remove SSH Keys from your account.
</p>
<form id="reset">
<form id="ssh_form">
<table id="table">
<tr>
<td><label for="user">Username</label></td>
@ -43,7 +53,7 @@
</tr>
<tr>
<td colspan="2">
<button type="button" id="get_keys"> Show current keys</button>
<button type="submit" id="get_keys"> Show current keys</button>
</td>
</tr>
</table>
@ -53,17 +63,16 @@
<div> SSH Keys</div>
<form id="add_key_form">
<label for="key_input"></label>
<input type="text" id="key_input" placeholder="Add key">
<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>
</form>
<table id="key_table" class="center">
<tr>
<!-- <th> Name </th> split on spaces for this later? -->
<th>Name</th>
<th>Key</th>
<th>Remove</th>
</tr>
</table>
</main>

134
src/ssh/ssh.js Normal file
View file

@ -0,0 +1,134 @@
let got_keys = false;
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('http://127.0.0.1:8087/ldap/ssh', {
method: 'POST',
body: JSON.stringify(request),
mode: 'cors',
});
if (response.status === 200) {
const data = await response.json();
if (data.result === "success") {
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);
});
} 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) {
console.log(err);
}
}
async function add_key() {
let username = document.getElementById("user").value;
let password = document.getElementById("pass").value;
let key = document.getElementById("key_input").value;
let request = {auth: {user: username, pass: password}, key: key};
if (key === "") {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Key cannot be empty</span>";
return;
}
try {
const response = await fetch('http://127.0.0.1:8087/ldap/ssh/add', {
method: 'POST',
body: JSON.stringify(request),
mode: 'cors',
});
if (response.status === 200) {
const data = await response.json();
if (data.result === "success") {
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success: Key added</span>";
document.getElementById('key_table').style.display = "table";
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) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Error </span>";
console.log(err);
}
}
async function delete_key(row_idx) {
let table = document.getElementById("key_table");
let key = table.rows[row_idx].cells[0].innerHTML;
let username = document.getElementById("user").value;
let password = document.getElementById("pass").value;
let request = {auth: {user: username, pass: password}, key: key};
try {
const response = await fetch('http://127.0.0.1:8087/ldap/ssh', {
method: 'DELETE',
body: JSON.stringify(request),
mode: 'cors',
});
if (response.status === 200) {
const data = await response.json();
if (data.result === "success") {
table.deleteRow(row_idx);
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) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Error </span>";
console.log(err);
}
}
function add_to_table(key) {
let table = document.getElementById("key_table");
let new_row = table.insertRow();
let name_cell = new_row.insertCell(0);
let key_cell = new_row.insertCell(1);
//Splitting by spaces, first two make the key + type, rest is a comment/name of the key
let key_split = key.split(' ');
let key_string = key_split[0] + ' ' + key_split[1];
key_cell.textContent = key_string;
//Names for SSH keys can have multiple spaces
let comment = "";
for (i = 2; i < key_split.length; i++) {
comment += " " + key_split[i];
}
name_cell.textContent = comment;
let delete_cell = new_row.insertCell(2);
let delete_button = document.createElement("button");
delete_button.innerHTML = "Delete";
delete_cell.appendChild(delete_button);
delete_cell.addEventListener("click", function () {
delete_key(new_row.rowIndex);
});
}
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();
}
});
document.getElementById("add_key_button").addEventListener("click", add_key);
});