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

Merge branch '#7-multiple-ssh-keys' into 'main'

Browse source 
Frontend for new SSH page

Closes #7

See merge request compsoc1/skynet/ldap/frontend!12
This commit is contained in:
silver 2024-02-18 17:28:20 +00:00
commit 36c5e5bbae
12 changed files with 272 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/index.html
View file

@ -34,7 +34,7 @@
<a href="modify.html">Account modification</a> <a href="modify.html">Account modification</a>
</h2> </h2>
<p> <p>
Please use this service to modify your user data (email, login ssh key, etc.) Please use this service to modify your user data (email, login, etc.)
</p> </p>
</section> </section>
<section> <section>
@ -53,6 +53,14 @@
Please use this service to reset your password. Please use this service to reset your password.
</p> </p>
</section> </section>
<section>
<h2>
<a href="modify_ssh.html">SSH</a>
</h2>
<p>
Please use this service to add or remove SSH keys from your Skynet account.
</p>
</section>
</main> </main>
<footer class="page-footer"> <footer class="page-footer">
UL Computer Society 2023-<span id="year">2023</span> UL Computer Society 2023-<span id="year">2023</span>

23
src/js/lib.js
View file

@ -1,28 +1,23 @@
export async function request(url, body, form_status, method) {
export async function post_request(url, body, form_status){
let req;
try { try {
req = await fetch(url, { const req = await fetch(url, {
method: 'POST', method: method,
body: JSON.stringify(body), body: JSON.stringify(body),
mode: "cors" mode: "cors"
}); });
} catch (e) {
form_status.innerHTML = `<span style='background-color: red; color: white'>${e}</span>`;
return;
}
if (req.status !== 200) { if (req.status !== 200) {
form_status.innerHTML = "<span style='background-color: red; color: white'>Failure</span>"; form_status.innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
return;
} }
let temp = await req.json(); let temp = await req.json();
if (temp.result === 'error') { if (temp.result === 'error') {
form_status.innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`; form_status.innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`;
} else { } else {
form_status.innerHTML = "<span style='background-color: green; color: white'>Success</span>"; form_status.innerHTML = "<span style='background-color: green; color: white'>Success</span>";
return true;
} }
} catch (e) {
form_status.innerHTML = `<span style='background-color: red; color: white'>${e}</span>`;
}
return false;
} }

1
src/modify.html
View file

@ -33,7 +33,6 @@
<select id="dropdown"> <select id="dropdown">
<option selected="selected" value="">Please select an option</option> <option selected="selected" value="">Please select an option</option>
<option value="mail">Email</option> <option value="mail">Email</option>
<option value="sshPublicKey">SSH key</option>
<option value="cn">First name & Surname</option> <option value="cn">First name & Surname</option>
<option value="sn">Surname</option> <option value="sn">Surname</option>
</select> </select>

4
src/modify.js
View file

@ -1,4 +1,4 @@
import {post_request} from "./js/lib.js"; import {request} from "./js/lib.js";
const form = document.getElementById("form"); const form = document.getElementById("form");
form.addEventListener('submit', formHandler); form.addEventListener('submit', formHandler);
@ -27,7 +27,7 @@ async function formHandler(listener) {
const body = {auth: {user: user, pass: pass}, field: dropdown_value, value: value}; const body = {auth: {user: user, pass: pass}, field: dropdown_value, value: value};
let url = 'https://api.account.skynet.ie/ldap/update'; let url = 'https://api.account.skynet.ie/ldap/update';
await post_request(url, body, form_status); await request(url, body, form_status, 'POST');
} }
function selectField() { function selectField() {

95
src/modify_ssh.html Normal file
View file

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en-ie">
<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 type="module" src="modify_ssh.js"></script>
</head>
<style>
.center {
margin-left: auto;
margin-right: auto;
}
.center, .center th, .center td {
border: 1px solid white;
}
.center {
border-spacing: 0;
}
.center th, .center td {
margin: 3px;
}
#key_table {
display: none;
}
textarea {
width: 650px;
height: 57px;
}
</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">
<h2>SSH</h2>
<p>
Add / Remove SSH Keys from your account.
</p>
<form id="ssh_form">
<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="submit" id="get_keys"> Show current keys</button>
</td>
</tr>
</table>
</form>
<p id="formStatus"></p>
<div> SSH Keys</div>
<form id="add_key_form">
<label for="key_input"></label>
<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>
<br>
<table id="key_table" class="center">
<tr>
<th>Name</th>
<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()
</script>
</footer>
</div>
</body>
</html>

139
src/modify_ssh.js Normal file
View file

@ -0,0 +1,139 @@
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', {
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: Got keys</span>";
let keys = data.success;
document.getElementById('key_table').style.display = "table";
update_table(keys)
} catch (err) {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${err}</span>`;
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};
try {
const response = await fetch('https://api.account.skynet.ie/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, key) {
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('https://api.account.skynet.ie/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);
} 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]}`;
//Names for SSH keys can have multiple spaces
let comment = "";
for (let i = 2; i < key_split.length; i++) {
comment += " " + key_split[i];
}
if (key_split.length === 2) {
comment = "No comment";
}
cell_name.textContent = comment;
let cell_delete = row.insertCell(2);
let delete_button = document.createElement("button");
delete_button.innerHTML = "Delete";
cell_delete.appendChild(delete_button);
cell_delete.addEventListener("click", function () {
delete_key(row.rowIndex, row.getAttribute("ssh_key"));
});
}
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("ssh_form").addEventListener("submit", function (event) {
event.preventDefault();
get_keys();
});
document.getElementById("add_key_button").addEventListener("click", add_key);
});

4
src/password.js
View file

@ -1,4 +1,4 @@
import {post_request} from "./js/lib.js"; import {request} from "./js/lib.js";
const form = document.getElementById("form"); const form = document.getElementById("form");
form.addEventListener('submit', formHandler); form.addEventListener('submit', formHandler);
@ -24,5 +24,5 @@ async function formHandler(listener) {
const body = {auth: {user: user, pass: pass}, field: "userPassword", value: newPW} const body = {auth: {user: user, pass: pass}, field: "userPassword", value: newPW}
let url = 'https://api.account.skynet.ie/ldap/update'; let url = 'https://api.account.skynet.ie/ldap/update';
await post_request(url, body, form_status); await request(url, body, form_status, 'POST');
} }

4
src/recovery/password_reset.js
View file

@ -1,4 +1,4 @@
import {post_request} from "../js/lib.js"; import {request} from "../js/lib.js";
const form = document.getElementById("form"); const form = document.getElementById("form");
form.addEventListener('submit', formHandler); form.addEventListener('submit', formHandler);
@ -33,5 +33,5 @@ async function formHandler(listener) {
let url = "https://api.account.skynet.ie/ldap/recover/password/auth"; let url = "https://api.account.skynet.ie/ldap/recover/password/auth";
let body = {auth: auth, pass: pass}; let body = {auth: auth, pass: pass};
await post_request(url, body, form_status); await request(url, body, form_status, 'POST');
} }

4
src/recovery/ssh-request.js
View file

@ -1,4 +1,4 @@
import {post_request} from "../js/lib.js"; import {request} from "../js/lib.js";
const form = document.getElementById("form"); const form = document.getElementById("form");
form.addEventListener('submit', formHandler); form.addEventListener('submit', formHandler);
@ -15,5 +15,5 @@ async function formHandler(listener) {
const body = {user: formData.get('user'), email: formData.get('mail')}; const body = {user: formData.get('user'), email: formData.get('mail')};
let url = 'https://api.account.skynet.ie/ldap/recover/ssh/request'; let url = 'https://api.account.skynet.ie/ldap/recover/ssh/request';
await post_request(url, body, form_status); await request(url, body, form_status, 'POST');
} }

4
src/recovery/username.js
View file

@ -1,4 +1,4 @@
import {post_request} from "../js/lib.js"; import {request} from "../js/lib.js";
const form = document.getElementById("form"); const form = document.getElementById("form");
form.addEventListener('submit', formHandler); form.addEventListener('submit', formHandler);
@ -21,5 +21,5 @@ async function formHandler(listener) {
let url = 'https://api.account.skynet.ie/ldap/recover/username'; let url = 'https://api.account.skynet.ie/ldap/recover/username';
await post_request(url, body, form_status); await request(url, body, form_status, 'POST');
} }

4
src/register.js
View file

@ -1,4 +1,4 @@
import {post_request} from "./js/lib.js"; import {request} from "./js/lib.js";
const form = document.getElementById("form"); const form = document.getElementById("form");
form.addEventListener('submit', formHandler); form.addEventListener('submit', formHandler);
@ -31,5 +31,5 @@ async function formHandler(listener) {
const body = {auth: auth, user: user, pass: pass}; const body = {auth: auth, user: user, pass: pass};
let url = 'https://api.account.skynet.ie/ldap/new/account'; let url = 'https://api.account.skynet.ie/ldap/new/account';
await post_request(url, body, form_status); await request(url, body, form_status, 'POST');
} }

4
src/signup.js
View file

@ -1,4 +1,4 @@
import {post_request} from "./js/lib.js"; import {request} from "./js/lib.js";
const form = document.getElementById("form"); const form = document.getElementById("form");
form.addEventListener('submit', formHandler); form.addEventListener('submit', formHandler);
@ -19,6 +19,6 @@ async function formHandler(listener) {
let url = 'https://api.account.skynet.ie/ldap/new/email'; let url = 'https://api.account.skynet.ie/ldap/new/email';
await post_request(url, body, form_status); await request(url, body, form_status, 'POST');
} }