Frontend for new SSH page #22
2 changed files with 185 additions and 70 deletions
127
src/scripts/ssh.js
Normal file
127
src/scripts/ssh.js
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
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', {
|
||||
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/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/delete', {
|
||||
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);
|
||||
});
|
||||
|
||||
128
src/ssh.html
128
src/ssh.html
|
|
@ -1,90 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-ie">
|
||||
<head>
|
||||
<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"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header class="page-header">
|
||||
<script src="scripts/ssh.js"></script>
|
||||
</head>
|
||||
|
||||
<style>
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#key_table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header class="page-header">
|
||||
<img alt="Sharky, our mascot" height="81.56" src="./images/sharky.svg" width="145"/>
|
||||
<h1>Skynet Self Service</h1>
|
||||
</header>
|
||||
<main class="page-body">
|
||||
</header>
|
||||
<main class="page-body">
|
||||
<h2>SSH</h2>
|
||||
<p>
|
||||
Add / Remove SSH Keys from your account.
|
||||
</p><p>
|
||||
Enter Username and Password to see your current keys.
|
||||
Add / Remove SSH Keys from your account.
|
||||
</p>
|
||||
<form id="reset">
|
||||
<table id="table">
|
||||
<tr>
|
||||
<td><label for="user">Username</label></td>
|
||||
<td><input id="user" name="user" type="text"/> <br/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="pass">Password</label></td>
|
||||
<td><input id="pass" name="pass" type="password"/> <br/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><input type="Submit" value="Submit"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
<table id="table">
|
||||
<tr>
|
||||
<td><label for="user">Username</label></td>
|
||||
<td><input id="user" name="user" type="text"/> <br/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="pass">Password</label></td>
|
||||
<td><input id="pass" name="pass" type="password"/> <br/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<button type="button" id="get_keys"> Show current keys</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p id="formStatus"></p>
|
||||
<!-- here we can do a tableStatus for the ssh keys then fill them in once we get 200 ! -->
|
||||
<script>
|
||||
const formEl = document.getElementById("reset");
|
||||
formEl.addEventListener('submit', (listener) => formHandler(listener));
|
||||
|
||||
function formHandler(listener) {
|
||||
listener.preventDefault();
|
||||
const formData = new FormData(formEl);
|
||||
const user = formData.get("user");
|
||||
const pass = formData.get("pass");
|
||||
const object = {user: user, pass: pass}
|
||||
console.log("test");
|
||||
// getting ssh key list
|
||||
fetch('http://127.0.0.1:8087/ldap/ssh', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(object),
|
||||
mode: "cors",
|
||||
}).then(res => {
|
||||
if (res.status === 200) {
|
||||
let temp = res.json();
|
||||
if (temp.result === 'error') {
|
||||
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`;
|
||||
} else {
|
||||
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
|
||||
}
|
||||
} else if (res.status === 500) {
|
||||
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
|
||||
} else {
|
||||
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>";
|
||||
}
|
||||
}).catch(() => document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>");
|
||||
}
|
||||
<div> SSH Keys</div>
|
||||
<form id="add_key_form">
|
||||
<label for="key_input"></label>
|
||||
<input type="text" id="key_input" placeholder="Add key">
|
||||
<button type="button" id="add_key_button"> Add key</button>
|
||||
</form>
|
||||
|
||||
function selectField() {
|
||||
const field = document.getElementById('field').value;
|
||||
const value = document.getElementById('value');
|
||||
if (field === 'mail') {
|
||||
value.type = 'email';
|
||||
} else {
|
||||
value.type = 'text';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</main>
|
||||
<footer class="page-footer">
|
||||
<table id="key_table" class="center">
|
||||
<tr>
|
||||
<!-- <th> Name </th> split on spaces for this later? -->
|
||||
<th>Key</th>
|
||||
<th>Remove</th>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
</main>
|
||||
<footer class="page-footer">
|
||||
UL Computer Society 2023-<span id="year">2023</span>
|
||||
<script>
|
||||
document.getElementById('year').textContent = new Date().getFullYear().toString()
|
||||
document.getElementById('year').textContent = new Date().getFullYear().toString()
|
||||
</script>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue