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

Merge branch 'main' of https://gitlab.skynet.ie/compsoc1/skynet/ldap/frontend into #7-multiple-ssh-keys

Browse source 
# Conflicts:
#	src/index.html
This commit is contained in:
daragh 2024-01-01 16:48:44 +00:00
commit a12bd3e040
18 changed files with 370 additions and 389 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/index.html
View file

@ -1,13 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-ie"> <html lang="en-ie">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Skynet Self Service</title> <title>Skynet Self Service</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"/>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<header class="page-header"> <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> <h1>Skynet Self Service</h1>
@ -15,7 +15,7 @@
<main class="page-body"> <main class="page-body">
<section> <section>
<h2> <h2>
<a href="./signup.html">Sign-up</a> <a href="signup.html">Sign-up</a>
</h2> </h2>
<p> <p>
Please use this if you have yet to activate an account on Skynet before. Please use this if you have yet to activate an account on Skynet before.
@ -23,18 +23,18 @@
</section> </section>
<section> <section>
<h2> <h2>
<a href="./password.html">Change Password</a> <a href="password.html">Change Password</a>
</h2> </h2>
<p> <p>
Please use this service to change your Skynet password. Please use this service to change your Skynet password
</p> </p>
</section> </section>
<section> <section>
<h2> <h2>
<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 ssh key, etc.)
</p> </p>
</section> </section>
<section> <section>
@ -42,7 +42,7 @@
<a href="./recovery/username.html">Forgot your username?</a> <a href="./recovery/username.html">Forgot your username?</a>
</h2> </h2>
<p> <p>
Please use this service to get a reminder email with your Skynet username. Please use this service to get a reminder email with your Skynet username
</p> </p>
</section> </section>
<section> <section>
@ -53,14 +53,6 @@
Please use this service to reset your password. Please use this service to reset your password.
</p> </p>
</section> </section>
<section>
<h2>
<a href="ssh/index.html">SSH</a>
</h2>
<p>
Please use this service to manage your SSH keys.
</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>
@ -68,6 +60,6 @@
document.getElementById('year').textContent = new Date().getFullYear().toString() document.getElementById('year').textContent = new Date().getFullYear().toString()
</script> </script>
</footer> </footer>
</div> </div>
</body> </body>
</html> </html>

28
src/js/lib.js Normal file
View file

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

62
src/modify.html
View file

@ -3,13 +3,13 @@
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Modify Account</title> <title>Modify Account</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"/>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<header class="page-header"> <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> <h1>Skynet Self Service</h1>
</header> </header>
<main class="page-body"> <main class="page-body">
@ -17,7 +17,7 @@
<p> <p>
Modify details of your Skynet account. Modify details of your Skynet account.
</p> </p>
<form id="reset"> <form id="form">
<table id="table"> <table id="table">
<tr> <tr>
<td><label for="user">Username</label></td> <td><label for="user">Username</label></td>
@ -28,15 +28,14 @@
<td><input id="pass" name="pass" type="password"/> <br/></td> <td><input id="pass" name="pass" type="password"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td><label for="field">Field</label></td> <td><label for="dropdown">Field</label></td>
<td> <td>
<select id="field" onchange="selectField()"> <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="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>
<option value="skDiscord">Discord username</option>
</select> </select>
</td> </td>
</tr> </tr>
@ -45,57 +44,12 @@
<td><input id="value" name="value" type="text"/> <br/></td> <td><input id="value" name="value" type="text"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><input type="Submit" value="Submit"/></td> <td colspan="2"><input type="Submit" value="Submit" id="button"/></td>
</tr> </tr>
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
<script> <script type="module" src="modify.js"></script>
const formEl = document.getElementById("reset");
formEl.addEventListener('submit', (listener) => formHandler(listener));
function formHandler(listener) {
listener.preventDefault();
const formData = new FormData(formEl);
const field = document.getElementById('field').value;
if (field !== "") {
const user = formData.get("user");
const pass = formData.get("pass");
const value = formData.get("value");
const object = {auth: {user: user, pass: pass}, field: field, value: value}
fetch('https://api.account.skynet.ie/ldap/update', {
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>");
} else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Please select a field to modify</span>";
}
}
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> </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>

39
src/modify.js Normal file
View file

@ -0,0 +1,39 @@
import {post_request} from "./js/lib.js";
const form = document.getElementById("form");
form.addEventListener('submit', formHandler);
const form_status = document.getElementById("formStatus");
const button = document.getElementById("button");
button.addEventListener('submit', formHandler);
const dropdown = document.getElementById("dropdown");
dropdown.addEventListener('onchange', selectField);
async function formHandler(listener) {
listener.preventDefault();
const formData = new FormData(form);
const dropdown_value = dropdown.value;
if (dropdown_value === "") {
form_status.innerHTML = "<span style='background-color: red; color: white'>Please select a field to modify</span>";
return;
}
const user = formData.get("user");
const pass = formData.get("pass");
const value = formData.get("value");
const body = {auth: {user: user, pass: pass}, field: dropdown_value, value: value};
let url = 'https://api.account.skynet.ie/ldap/update';
await post_request(url, body, form_status);
}
function selectField() {
if (dropdown.value === 'mail') {
document.getElementById('value').type = 'email';
} else {
document.getElementById('value').type = 'text';
}
}

41
src/password.html
View file

@ -3,13 +3,13 @@
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Password reset</title> <title>Password reset</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"/>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<header class="page-header"> <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> <h1>Skynet Self Service</h1>
</header> </header>
<main class="page-body"> <main class="page-body">
@ -17,7 +17,7 @@
<p> <p>
Change your Skynet password. Change your Skynet password.
</p> </p>
<form id="reset"> <form id="form">
<table id="table"> <table id="table">
<tr> <tr>
<td><label for="user">Username</label></td> <td><label for="user">Username</label></td>
@ -36,41 +36,12 @@
<td><input id="newPW2" name="newPWConfirm" type="password"/> <br/></td> <td><input id="newPW2" name="newPWConfirm" type="password"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><input type="Submit" value="Submit"/></td> <td colspan="2"><input id="button" type="Submit" value="Submit"/></td>
</tr> </tr>
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
<script> <script type="module" src="password.js"></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 newPW = formData.get("newPW");
if (newPW === formData.get("newPWConfirm")) {
const object = {auth: {user: user, pass: pass}, field: "userPassword", value: newPW}
fetch('https://api.account.skynet.ie/ldap/update', {
method: 'POST',
body: JSON.stringify(object),
mode: "cors"
}).then(res => {
if (res.status === 200) {
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>");
} else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: new passwords don't match</span>";
}
}
</script>
</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>

28
src/password.js Normal file
View file

@ -0,0 +1,28 @@
import {post_request} from "./js/lib.js";
const form = document.getElementById("form");
form.addEventListener('submit', formHandler);
const form_status = document.getElementById("formStatus");
const button = document.getElementById("button");
button.addEventListener('submit', formHandler);
async function formHandler(listener) {
listener.preventDefault();
const formData = new FormData(form);
const user = formData.get("user");
const pass = formData.get("pass");
const newPW = formData.get("newPW");
if (newPW !== formData.get("newPWConfirm")) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: new passwords don't match</span>";
return;
}
const body = {auth: {user: user, pass: pass}, field: "userPassword", value: newPW}
let url = 'https://api.account.skynet.ie/ldap/update';
await post_request(url, body, form_status);
}

56
src/recovery/password.html
View file

@ -15,9 +15,11 @@
<main class="page-body"> <main class="page-body">
<h2>Forgot Password</h2> <h2>Forgot Password</h2>
<p> <p>
Request a password reset sent to your linked email. <br> Enter either email address or skynet username. </br> Request a password reset sent to your linked email.
<br>
Enter either email address or skynet username.
</p> </p>
<form id="recovery"> <form id="form">
<table id="table"> <table id="table">
<tr> <tr>
<td><label for="username">Username</label></td> <td><label for="username">Username</label></td>
@ -31,58 +33,12 @@
<td><input id="email" name="email" type="text"/> <br/></td> <td><input id="email" name="email" type="text"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><input type="submit" value="submit"/></td> <td colspan="2"><input id="button" type="submit" value="submit"/></td>
</tr> </tr>
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
<script> <script type="module" src="password.js"></script>
const formEl = document.getElementById('recovery');
formEl.addEventListener('submit', formHandler);
async function formHandler(listener) {
listener.preventDefault();
// reset teh form status
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Please wait.</span>";
const formData = new FormData(formEl);
const username = formData.get('username').trim();
const email = formData.get('email').trim();
if (username.length === 0 && email.length === 0) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Please enter username or email</span>";
return;
}
let to_send = {
email: email
};
// assuming username is not empty it is the preferred method
if (username.length > 0) {
to_send = {user: username};
}
let url = "https://api.account.skynet.ie/ldap/recover/password";
try {
let req = await fetch(url, {
method: 'POST',
body: JSON.stringify(to_send),
mode: "cors"
});
if (req.status === 200) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success Please check emails</span>";
} else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>";
}
} catch (e) {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${e}</span>`;
}
}
</script>
</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>

50
src/recovery/password.js Normal file
View file

@ -0,0 +1,50 @@
const form = document.getElementById("form");
form.addEventListener('submit', formHandler);
const form_status = document.getElementById("formStatus");
const button = document.getElementById("button");
button.addEventListener('submit', formHandler);
async function formHandler(listener) {
listener.preventDefault();
// reset teh form status
form_status.innerHTML = "<span style='background-color: green; color: white'>Please wait.</span>";
const formData = new FormData(form);
const username = formData.get('username').trim();
const email = formData.get('email').trim();
if (username.length === 0 && email.length === 0) {
form_status.innerHTML = "<span style='background-color: red; color: white'>Please enter username or email</span>";
return;
}
let to_send = {
email: email
};
// assuming username is not empty it is the preferred method
if (username.length > 0) {
to_send = {user: username};
}
let url = "https://api.account.skynet.ie/ldap/recover/password";
try {
let req = await fetch(url, {
method: 'POST',
body: JSON.stringify(to_send),
mode: "cors"
});
if (req.status === 200) {
form_status.innerHTML = "<span style='background-color: green; color: white'>Success Please check emails</span>";
} else {
form_status.innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>";
}
} catch (e) {
form_status.innerHTML = `<span style='background-color: red; color: white'>Error: ${e}</span>`;
}
}

53
src/recovery/password_reset.html
View file

@ -17,7 +17,7 @@
<p> <p>
Enter a new password for your Skynet account below. Enter a new password for your Skynet account below.
</p> </p>
<form id="reset"> <form id="form">
<table id="table"> <table id="table">
<tr> <tr>
<td><label for="pass1">New Password</label> </td> <td><label for="pass1">New Password</label> </td>
@ -28,59 +28,12 @@
<td><input id="pass2" name="confirm" type="password"/> <br/> </td> <td><input id="pass2" name="confirm" type="password"/> <br/> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><input type="submit"/> </td> <td colspan="2"><input id="button" type="submit"/> </td>
</tr> </tr>
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
<script> <script type="module" src="password_reset.js"></script>
const formEl = document.getElementById("reset");
formEl.addEventListener('submit', (listener) => formHandler(listener));
const url = new URL(window.location.href);
const urlParam = new URLSearchParams(url.search);
const auth = urlParam.get("auth");
async function formHandler(listener) {
listener.preventDefault();
// reset
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Please wait.</span>";
const formData = new FormData(formEl);
const pass = formData.get("password");
const confirm = formData.get("confirm");
if (pass !== confirm) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Passwords don't match</span>";
return;
}
let url = "https://api.account.skynet.ie/ldap/recover/password/auth";
let req;
try {
req = await fetch(url, {
method: 'POST',
body: JSON.stringify({auth: auth, pass: pass}),
mode: "cors"
});
} catch (e) {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${e}</span>`;
return;
}
if (req.status !== 200) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
return;
}
let data = req.json();
if (data.result === 'error') {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${data.error}</span>`;
} else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
}
}
</script>
</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>

37
src/recovery/password_reset.js Normal file
View file

@ -0,0 +1,37 @@
import {post_request} from "../js/lib.js";
const form = document.getElementById("form");
form.addEventListener('submit', formHandler);
const form_status = document.getElementById("formStatus");
const button = document.getElementById("button");
button.addEventListener('submit', formHandler);
async function formHandler(listener) {
listener.preventDefault();
// reset
form_status.innerHTML = "<span style='background-color: green; color: white'>Please wait.</span>";
const formData = new FormData(form);
const pass = formData.get("password");
const confirm = formData.get("confirm");
if (pass !== confirm) {
form_status.innerHTML = "<span style='background-color: red; color: white'>Failure: Passwords don't match</span>";
return;
}
const urlParam = new URLSearchParams(new URL(window.location.href).search);
const auth = urlParam.get("auth");
if(!auth){
return;
}
let url = "https://api.account.skynet.ie/ldap/recover/password/auth";
let body = {auth: auth, pass: pass};
await post_request(url, body, form_status);
}

47
src/recovery/ssh-request.html
View file

@ -15,7 +15,9 @@
<main class="page-body"> <main class="page-body">
<h1>SSH key recovery</h1> <h1>SSH key recovery</h1>
<p> <p>
Recover a legacy skynet account using your username and set a new email address to link to the account. Use this only if you do not remember the account password and the linked account email is lost or incorrect.<br> Enter skynet username & email you have used with UL Wolves. </br> Recover a legacy skynet account using your username and set a new email address to link to the account. Use this only if you do not remember the account password and the linked account email is lost or incorrect.
<br>
Enter skynet username & email you have used with UL Wolves.
</p> </p>
<form id="form"> <form id="form">
@ -29,51 +31,12 @@
<td><input id="mail" name="mail" type="email"/> <br/></td> <td><input id="mail" name="mail" type="email"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><input type="submit" value="submit"/></td> <td colspan="2"><input id="button" type="submit" value="submit"/></td>
</tr> </tr>
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
<script> <script type="module" src="ssh-request.js"></script>
const formEl = document.getElementById("form");
formEl.addEventListener('submit', formHandler);
function formHandler(listener) {
listener.preventDefault();
const formData = new FormData(formEl);
const object = {user: formData.get('user'), email: formData.get('mail')};
fetch('https://api.account.skynet.ie/ldap/recover/ssh/request', {
method: 'POST',
body: JSON.stringify(object),
mode: "cors"
})
.then(status)
.then(json)
.catch(() => {
document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>";
});
}
function status(res) {
if (res.status === 200) {
return res.json();
} 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>";
}
}
function json(temp) {
if (temp) {
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>";
}
}
}
</script>
</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>

19
src/recovery/ssh-request.js Normal file
View file

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

33
src/recovery/username.html
View file

@ -18,47 +18,20 @@
<p> <p>
Get a reminder email of your Skynet username. Get a reminder email of your Skynet username.
</p> </p>
<form id="reset"> <form id="form">
<table id="table"> <table id="table">
<tr> <tr>
<td><label for="email">Email Address</label></td> <td><label for="email">Email Address</label></td>
<td><input id="email" name="email" type="text"/> <br/></td> <td><input id="email" name="email" type="text"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><input type="Submit" value="Submit"/></td> <td colspan="2"><input id="button" type="Submit" value="Submit"/></td>
</tr> </tr>
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
</div> </div>
<script> <script type="module" src="username.js"></script>
const formEl = document.getElementById("reset");
formEl.addEventListener('submit', (listener) => formHandler(listener));
function formHandler(listener) {
listener.preventDefault();
// reset
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Please wait.</span>";
const formData = new FormData(formEl);
const email = formData.get("email");
const object = {email: email};
fetch('https://api.account.skynet.ie/ldap/recover/username', {
method: 'POST',
body: JSON.stringify(object),
mode: "cors"
}).then(res => {
if (res.status === 200) {
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>");
}
</script>
</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>

25
src/recovery/username.js Normal file
View file

@ -0,0 +1,25 @@
import {post_request} from "../js/lib.js";
const form = document.getElementById("form");
form.addEventListener('submit', formHandler);
const form_status = document.getElementById("formStatus");
const button = document.getElementById("button");
button.addEventListener('submit', formHandler);
async function formHandler(listener) {
listener.preventDefault();
// reset
form_status.innerHTML = "<span style='background-color: green; color: white'>Please wait.</span>";
const formData = new FormData(form);
const email = formData.get("email");
const body = {email: email};
let url = 'https://api.account.skynet.ie/ldap/recover/username';
await post_request(url, body, form_status);
}

53
src/register.html
View file

@ -3,13 +3,13 @@
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Skynet Register</title> <title>Skynet Register</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"/>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<header class="page-header"> <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> <h1>Skynet Self Service</h1>
</header> </header>
<main class="page-body"> <main class="page-body">
@ -23,7 +23,7 @@
<br> <br>
It must be lowercase, start with a letter and contain only 0-9 a-z and _- It must be lowercase, start with a letter and contain only 0-9 a-z and _-
</p> </p>
<form id="register"> <form id="form">
<table id="table"> <table id="table">
<tr> <tr>
<td><label for="user">Username</label></td> <td><label for="user">Username</label></td>
@ -38,53 +38,12 @@
<td><input id="confirm" name="confirm" type="password"/></td> <td><input id="confirm" name="confirm" type="password"/></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><input type="Submit" value="Submit"/></td> <td colspan="2"><input id="button" type="Submit" value="Submit"/></td>
</tr> </tr>
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
<script> <script type="module" src="register.js"></script>
const formEl = document.getElementById("register");
formEl.addEventListener('submit', (listener) => formHandler(listener));
function formHandler(listener) {
listener.preventDefault();
const formData = new FormData(formEl);
const pass = formData.get("pass");
if (pass === formData.get("confirm")) {
const url = new URL(window.location.href);
const urlParam = new URLSearchParams(url.search);
const auth = urlParam.get("auth");
const user = formData.get("user");
const object = {auth: auth, user: user, pass: pass};
fetch('https://api.account.skynet.ie/ldap/new/account', {
method: 'POST',
body: JSON.stringify(object),
mode: "cors"
}).then(res => {
if (res.status === 200) {
return res.json();
} 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>";
}
})
.then((temp) => {
if (temp) {
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>";
}
}
})
.catch(() => document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>");
} else {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Passwords don't match</span>`;
}
}
</script>
</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>

35
src/register.js Normal file
View file

@ -0,0 +1,35 @@
import {post_request} from "./js/lib.js";
const form = document.getElementById("form");
form.addEventListener('submit', formHandler);
const form_status = document.getElementById("formStatus");
const button = document.getElementById("button");
button.addEventListener('submit', formHandler);
async function formHandler(listener) {
listener.preventDefault();
const formData = new FormData(form);
const pass = formData.get("pass");
if (pass !== formData.get("confirm")) {
form_status.innerHTML = `<span style='background-color: red; color: white'>Passwords don't match</span>`;
return;
}
const urlParam = new URLSearchParams(new URL(window.location.href).search);
const auth = urlParam.get("auth");
// if there is no auth value then return here
if(!auth){
return;
}
const user = formData.get("user");
const body = {auth: auth, user: user, pass: pass};
let url = 'https://api.account.skynet.ie/ldap/new/account';
await post_request(url, body, form_status);
}

35
src/signup.html
View file

@ -30,48 +30,23 @@
<body> <body>
<div class="wrapper"> <div class="wrapper">
<header class="page-header"> <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> <h1>Skynet Self Service</h1>
</header> </header>
<main class="page-body"> <main class="page-body">
<h2>Welcome to Skynet</h2> <h2>Welcome to Skynet</h2>
<p> <p>
If you previously had an account please <a href="./modify.html">set your email</a> to be the same as UL Wolves. If you previously had an account please <a href="modify.html">set your email</a> to be the same as UL Wolves.
<br/> <br/>
If you are a new user, please fill in the form below with the email that you use on ul wolves. If you are a new user, please fill in the form below with the email that you use on ul wolves.
</p> </p>
<form id="register"> <form id="form">
<label for="mail">Email address</label> <label for="mail">Email address</label>
<input id="mail" name="email" type="email"/> <br/> <input id="mail" name="email" type="email"/> <br/>
<input type="submit" value="Submit"/> <input id="button" type="submit" value="Submit"/>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
<script> <script type="module" src="signup.js"></script>
const formEl = document.getElementById('register');
formEl.addEventListener('submit', (listener) => formHandler(listener));
function formHandler(listener) {
listener.preventDefault();
//HTML below taken from the W3 schools tutorial ()
document.getElementById('formStatus').innerHTML = "<div class='loader'></div>"
const formData = new FormData(formEl);
const email = formData.get("email");
const object = {email: email};
fetch('https://api.account.skynet.ie/ldap/new/email', {
method: 'POST',
body: JSON.stringify(object),
mode: "cors"
}).then(res => {
if (res.status === 200) {
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>");
}
</script>
</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>

24
src/signup.js Normal file
View file

@ -0,0 +1,24 @@
import {post_request} from "./js/lib.js";
const form = document.getElementById("form");
form.addEventListener('submit', formHandler);
const form_status = document.getElementById("formStatus");
const button = document.getElementById("button");
button.addEventListener('submit', formHandler);
async function formHandler(listener) {
listener.preventDefault();
//HTML below taken from the W3 schools tutorial ()
form_status.innerHTML = "<div class='loader'></div>"
const formData = new FormData(form);
const email = formData.get("email");
const body = {email: email};
let url = 'https://api.account.skynet.ie/ldap/new/email';
await post_request(url, body, form_status);
}