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

feat: merged in css from the almnui renew page/repo https://gitlab.skynet.ie/compsoc1/skynet/website/alumni-renew

Browse source
This commit is contained in:
silver 2023-09-27 01:58:27 +01:00
parent 2038a88466
commit d864a3bafd
11 changed files with 735 additions and 656 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
src/images/sharky_vector_svg.svg → src/images/sharky.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

78
src/index.html
View file

@ -1,41 +1,43 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-ie"> <html lang="en-ie">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Skynet</title> <title>Skynet Self Service</title>
<link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png"/> <link rel="icon" type="image/png" href="./images/favicon/favicon-16x16.png"/>
<link rel="stylesheet" type="text/css" href="stylesheets/index.css"/> <link rel="stylesheet" type="text/css" href="./stylesheets/index.css"/>
</head> </head>
<body> <body>
<div id="title"> <div class="wrapper">
<img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" height="81.56"/> <header class="page-header">
<h1>Skynet Password Reset & Sign-up service</h1> <img src="./images/sharky.svg" alt="Sharky, our mascot" width="145" height="81.56"/>
</div> <h1>Skynet self service</h1>
<div class="boxes"> </header>
<h2><a href="./signup.html">Sign-up Page</a></h2> <main class="page-body">
<p>Please use this if you have yet to activate an account on Skynet before.</p> <h2><a href="./signup.html">Sign-up</a></h2>
<h2><a href="./password.html">Change Password</a></h2> <p>Please use this if you have yet to activate an account on Skynet before.</p>
<p>Please use this service to change your skynet password</p> <h2><a href="./password.html">Change Password</a></h2>
<h2><a href="./modify.html">User modification</a></h2> <p>Please use this service to change your skynet password</p>
<p> <h2><a href="./modify.html">Account modification</a></h2>
Please use this service to modify your user data (email, login ssh key, etc.) <p>
</p> Please use this service to modify your user data (email, login ssh key, etc.)
<h2><a href="./recovery/username.html">Forgot your username?</a></h2> </p>
<p> <h2><a href="./recovery/username.html">Forgot your username?</a></h2>
Please use this service to get a reminder email with your skynet username <p>
</p> Please use this service to get a reminder email with your skynet username
<h2> </p>
<a href="./recovery/password.html">Forgot your password?</a> <h2>
</h2> <a href="./recovery/password.html">Forgot your password?</a>
<p> </h2>
Please use this service to reset your password. <p>
</p> Please use this service to reset your password.
</div> </p>
<footer> </main>
UL Computer Society 2023-<span id="year">2023</span> <footer class="page-footer">
</footer> UL Computer Society 2023-<span id="year">2023</span>
</body> <script>
<script> document.getElementById('year').textContent = new Date().getFullYear().toString()
document.getElementById('year').textContent = new Date().getFullYear().toString() </script>
</script> </footer>
</div>
</body>
</html> </html>

199
src/modify.html
View file

@ -1,105 +1,106 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-ie"> <html lang="en-ie">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Modify user</title> <title>Modify Account</title>
<link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png"/> <link rel="icon" type="image/png" href="./images/favicon/favicon-16x16.png"/>
<link rel="stylesheet" type="text/css" href="stylesheets/index.css"/> <link rel="stylesheet" type="text/css" href="./stylesheets/index.css"/>
</head> </head>
<body> <body>
<div id="title"> <div class="wrapper">
<a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" <header class="page-header">
height="81.56"/> </a> <img src="./images/sharky.svg" alt="Picture of Sharky, the mascot of skynet" width="145" height="81.56"/>
<h1>Skynet Password Reset & Sign-up service</h1> <h1>Skynet self service</h1>
</div> </header>
<div class="boxes"> <main class="page-body">
<h2>User modification page</h2> <h2>User modification page</h2>
<p>Use this page to modify your account. Please remember to select a field before submitting the form</p> <p>Use this page to modify your account. Please remember to select a field before submitting the form</p>
<form id="reset"> <form id="reset">
<table id="table"> <table id="table">
<tr> <tr>
<td><label for="user">Username</label></td> <td><label for="user">Username</label></td>
<td><input type="text" id="user" name="user"/> <br/></td> <td><input type="text" id="user" name="user"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td><label for="pass">Password</label></td> <td><label for="pass">Password</label></td>
<td><input type="password" id="pass" name="pass"/> <br/></td> <td><input type="password" id="pass" name="pass"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td><label for="field">Field</label></td> <td><label for="field">Field</label></td>
<td> <td>
<select onchange="selectField()" id="field"> <select onchange="selectField()" id="field">
<option value="" selected="selected">Please select an option</option> <option value="" selected="selected">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> <option value="skDiscord">Discord username</option>
</select> </select>
</td> </td>
</tr> </tr>
<tr> <tr>
<td><label for="value">Value</label></td> <td><label for="value">Value</label></td>
<td><input type="text" id="value" name="value"/> <br/></td> <td><input type="text" id="value" name="value"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><input type="Submit" value="Submit"/></td> <td colspan="2"><input type="Submit" value="Submit"/></td>
</tr> </tr>
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
</div> <script>
<footer> const formEl = document.getElementById("reset");
UL Computer Society 2023-<span id="year">2023</span> formEl.addEventListener('submit', (listener) => formHandler(listener));
</footer>
<script>
const formEl = document.getElementById("reset");
formEl.addEventListener('submit', (listener) => formHandler(listener));
function formHandler(listener) { function formHandler(listener) {
listener.preventDefault(); listener.preventDefault();
const formData = new FormData(formEl); const formData = new FormData(formEl);
const field = document.getElementById('field').value; const field = document.getElementById('field').value;
if (field !== "") { if (field !== "") {
const user = formData.get("user"); const user = formData.get("user");
const pass = formData.get("pass"); const pass = formData.get("pass");
const value = formData.get("value"); const value = formData.get("value");
const object = {user: user, pass: pass, field: field, value: value} const object = {user: user, pass: pass, field: field, value: value}
fetch('https://api.account.skynet.ie/ldap/update', { fetch('https://api.account.skynet.ie/ldap/update', {
method: 'POST', method: 'POST',
body: JSON.stringify(object), body: JSON.stringify(object),
mode: "cors" mode: "cors"
}).then(res => { }).then(res => {
if (res.status === 200) { if (res.status === 200) {
let temp = res.json(); let temp = res.json();
if (temp.result === 'error') { if (temp.result === 'error') {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`; document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`;
} else { } else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>"; 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>";
}
} }
} 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() { function selectField() {
const field = document.getElementById('field').value; const field = document.getElementById('field').value;
const value = document.getElementById('value'); const value = document.getElementById('value');
if (field === 'mail') { if (field === 'mail') {
value.type = 'email'; value.type = 'email';
} else { } else {
value.type = 'text'; value.type = 'text';
} }
} }
</script> </script>
</body> </main>
<script> <footer class="page-footer">
document.getElementById('year').textContent = new Date().getFullYear().toString(); UL Computer Society 2023-<span id="year">2023</span>
</script> <script>
document.getElementById('year').textContent = new Date().getFullYear().toString()
</script>
</footer>
</div>
</body>
</html> </html>

153
src/password.html
View file

@ -1,80 +1,81 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-ie"> <html lang="en-ie">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Password reset</title> <title>Password reset</title>
<link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png"/> <link rel="icon" type="image/png" href="./images/favicon/favicon-16x16.png"/>
<link rel="stylesheet" type="text/css" href="stylesheets/index.css"/> <link rel="stylesheet" type="text/css" href="./stylesheets/index.css"/>
</head> </head>
<body> <body>
<div id="title"> <div class="wrapper">
<a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" <header class="page-header">
height="81.56"/> </a> <img src="./images/sharky.svg" alt="Picture of Sharky, the mascot of skynet" width="145" height="81.56"/>
<h1>Skynet Password Reset & Sign-up service</h1> <h1>Skynet self service</h1>
</div> </header>
<div class="boxes"> <main class="page-body">
<h2>Password Change</h2> <h2>Password Change</h2>
<p>Please use this page to change your Skynet password.</p> <p>Please use this page to change your Skynet password.</p>
<form id="reset"> <form id="reset">
<table id="table"> <table id="table">
<tr> <tr>
<td><label for="user">Username</label></td> <td><label for="user">Username</label></td>
<td><input type="text" id="user" name="user"/> <br/></td> <td><input type="text" id="user" name="user"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td><label for="pass">Old Password</label></td> <td><label for="pass">Old Password</label></td>
<td><input type="password" id="pass" name="pass"/> <br/></td> <td><input type="password" id="pass" name="pass"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td><label for="newPW1">New Password</label></td> <td><label for="newPW1">New Password</label></td>
<td><input type="password" id="newPW1" name="newPW"/> <br/></td> <td><input type="password" id="newPW1" name="newPW"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td><label for="newPW2">Confirm</label></td> <td><label for="newPW2">Confirm</label></td>
<td><input type="password" id="newPW2" name="newPWConfirm"/> <br/></td> <td><input type="password" id="newPW2" name="newPWConfirm"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><input type="Submit" value="Submit"/></td> <td colspan="2"><input type="Submit" value="Submit"/></td>
</tr> </tr>
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
</div> <script>
<footer> const formEl = document.getElementById("reset");
UL Computer Society 2023-<span id="year">2023</span> formEl.addEventListener('submit', (listener) => formHandler(listener));
</footer>
<script>
const formEl = document.getElementById("reset");
formEl.addEventListener('submit', (listener) => formHandler(listener));
function formHandler(listener) { function formHandler(listener) {
listener.preventDefault(); listener.preventDefault();
const formData = new FormData(formEl); const formData = new FormData(formEl);
const user = formData.get("user"); const user = formData.get("user");
const pass = formData.get("pass"); const pass = formData.get("pass");
const newPW = formData.get("newPW"); const newPW = formData.get("newPW");
if (newPW === formData.get("newPWConfirm")) { if (newPW === formData.get("newPWConfirm")) {
const object = {user: user, pass: pass, field: "userPassword", value: newPW} const object = {user: user, pass: pass, field: "userPassword", value: newPW}
fetch('https://api.account.skynet.ie/ldap/update', { fetch('https://api.account.skynet.ie/ldap/update', {
method: 'POST', method: 'POST',
body: JSON.stringify(object), body: JSON.stringify(object),
mode: "cors" mode: "cors"
}).then(res => { }).then(res => {
if (res.status === 200) { if (res.status === 200) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
} else if (res.status === 500) { } else if (res.status === 500) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
} else { } else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>"; 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>"); }).catch(() => document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>");
} else { } else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: new passwords don't match</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: new passwords don't match</span>";
} }
} }
</script> </script>
</body> </main>
<script> <footer class="page-footer">
document.getElementById('year').textContent = new Date().getFullYear().toString(); UL Computer Society 2023-<span id="year">2023</span>
</script> <script>
document.getElementById('year').textContent = new Date().getFullYear().toString()
</script>
</footer>
</div>
</body>
</html> </html>

161
src/recovery/password.html
View file

@ -1,92 +1,93 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-ie"> <html lang="en-ie">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Account Recovery</title> <title>Account Recovery</title>
<link rel="icon" type="image/png" href="../images/favicon/favicon-16x16.png"/> <link rel="icon" type="image/png" href="../images/favicon/favicon-16x16.png"/>
<link rel="stylesheet" type="text/css" href="../stylesheets/index.css"/> <link rel="stylesheet" type="text/css" href="../stylesheets/index.css"/>
</head> </head>
<body> <body>
<div id="title"> <div class="wrapper">
<a href="../"><img src="../images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" <header class="page-header">
height="81.56"/> </a> <img src="../images/sharky.svg" alt="Sharky, our mascot" width="145" height="81.56"/>
<h1>Skynet Password Reset & Sign-up service</h1> <h1>Skynet self service</h1>
</div> </header>
<div class="boxes"> <main class="page-body">
<h2>Forgot Password</h2> <h2>Forgot Password</h2>
<p>Please use this page to request a password reset link to your linked email.</p> <p>Please use this page to request a password reset link to your linked email.</p>
<form id="recovery"> <form id="recovery">
<table id="table"> <table id="table">
<tr> <tr>
<td><label for="username">Username</label> </td> <td><label for="username">Username</label></td>
<td><input type="text" id="username" name="username"/> <br/></td> <td><input type="text" id="username" name="username"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td>Or<br/></td> <td>Or<br/></td>
</tr> </tr>
<tr> <tr>
<td><label for="email">Email</label> </td> <td><label for="email">Email</label></td>
<td><input type="text" id="email" name="email"/> <br/></td> <td><input type="text" id="email" name="email"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><input type="submit" value="submit"/></td> <td colspan="2"><input type="submit" value="submit"/></td>
</tr> </tr>
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
</div> <script>
<footer> const formEl = document.getElementById('recovery');
UL Computer Society 2023-<span id="year">2023</span> formEl.addEventListener('submit', formHandler);
</footer>
<script>
const formEl = document.getElementById('recovery');
formEl.addEventListener('submit', formHandler);
async function formHandler(listener) { async function formHandler(listener) {
listener.preventDefault(); listener.preventDefault();
// reset teh form status // reset teh form status
document.getElementById('formStatus').innerHTML = ""; document.getElementById('formStatus').innerHTML = "";
const formData = new FormData(formEl); const formData = new FormData(formEl);
const username = formData.get('username').trim(); const username = formData.get('username').trim();
const email = formData.get('email').trim(); const email = formData.get('email').trim();
if (username.length === 0 && email.length === 0) { if (username.length === 0 && email.length === 0) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Please enter username or email</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Please enter username or email</span>";
return; return;
} }
let to_send = { let to_send = {
email: email email: email
}; };
// assuming username is not empty it is the preferred method // assuming username is not empty it is the preferred method
if (username.length > 0) { if (username.length > 0) {
to_send = {user: username}; to_send = {user: username};
} }
let url = "https://api.account.skynet.ie/ldap/recover/password"; let url = "https://api.account.skynet.ie/ldap/recover/password";
try { try {
let req = await fetch(url, { let req = await fetch(url, {
method: 'POST', method: 'POST',
body: JSON.stringify(to_send), body: JSON.stringify(to_send),
mode: "cors" mode: "cors"
}); });
if (req.status === 200) { if (req.status === 200) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success Please check emails</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success Please check emails</span>";
} else { } else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>";
} }
} catch (e) { } catch (e) {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${e}</span>`; document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Error: ${e}</span>`;
} }
} }
</script> </script>
</body> </main>
<script> <footer class="page-footer">
document.getElementById('year').textContent = new Date().getFullYear().toString() UL Computer Society 2023-<span id="year">2023</span>
</script> <script>
document.getElementById('year').textContent = new Date().getFullYear().toString()
</script>
</footer>
</div>
</body>
</html> </html>

136
src/recovery/password_reset.html
View file

@ -1,73 +1,83 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8"/>
<title>Password recovery</title> <title>Account Recovery</title>
</head> <link rel="icon" type="image/png" href="../images/favicon/favicon-16x16.png"/>
<body> <link rel="stylesheet" type="text/css" href="../stylesheets/index.css"/>
<h1>Password Recovery</h1> </head>
<p>Please enter a new password for your skynet account below</p> <body>
<form id="reset"> <div class="wrapper">
<label for="pass1">Password</label> <header class="page-header">
<input type="password" id="pass1" name="password"/> <br/> <img src="../images/sharky.svg" alt="Sharky, our mascot" width="145" height="81.56"/>
<label for="pass2">Confirm</label> <h1>Skynet self service</h1>
<input type="password" id="pass2" name="confirm"/> <br/> </header>
<input type="submit"/> <main class="page-body">
</form> <h1>Password Recovery</h1>
<p id="formStatus"></p> <p>Please enter a new password for your skynet account below</p>
<footer> <form id="reset">
UL Computer Society 2023-<span id="year">2023</span> <label for="pass1">Password</label>
</footer> <input type="password" id="pass1" name="password"/> <br/>
<script> <label for="pass2">Confirm</label>
document.getElementById('year').textContent = new Date().getFullYear().toString() <input type="password" id="pass2" name="confirm"/> <br/>
</script> <input type="submit"/>
<script> </form>
const formEl = document.getElementById("reset"); <p id="formStatus"></p>
formEl.addEventListener('submit', (listener) => formHandler(listener)); <script>
const url = new URL(window.location.href); const formEl = document.getElementById("reset");
const urlParam = new URLSearchParams(url.search); formEl.addEventListener('submit', (listener) => formHandler(listener));
const auth = urlParam.get("auth"); const url = new URL(window.location.href);
const urlParam = new URLSearchParams(url.search);
const auth = urlParam.get("auth");
async function formHandler(listener) { async function formHandler(listener) {
listener.preventDefault(); listener.preventDefault();
// reset // reset
document.getElementById('formStatus').innerHTML = ""; document.getElementById('formStatus').innerHTML = "";
const formData = new FormData(formEl); const formData = new FormData(formEl);
const pass = formData.get("password"); const pass = formData.get("password");
const confirm = formData.get("confirm"); const confirm = formData.get("confirm");
if (pass !== confirm) { if (pass !== confirm) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Passwords don't match</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Passwords don't match</span>";
return; return;
} }
let url = "https://api.account.skynet.ie/ldap/recover/password/auth"; let url = "https://api.account.skynet.ie/ldap/recover/password/auth";
let req; let req;
try { try {
req = await fetch(url, { req = await fetch(url, {
method: 'POST', method: 'POST',
body: JSON.stringify({auth: auth, pass: pass}), body: JSON.stringify({auth: auth, pass: pass}),
mode: "cors" mode: "cors"
}); });
} catch (e) { } catch (e) {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${e}</span>`; document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${e}</span>`;
return; return;
} }
if (req.status !== 200) { if (req.status !== 200) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
return; return;
} }
let data = req.json(); let data = req.json();
if (data.result === 'error') { if (data.result === 'error') {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${data.error}</span>`; document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${data.error}</span>`;
} else { } else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
} }
} }
</script> </script>
</body> </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> </html>

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

@ -1,64 +1,74 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8"/>
<title>SSH key recovery</title> <title>Account Recovery</title>
</head> <link rel="icon" type="image/png" href="../images/favicon/favicon-16x16.png"/>
<body> <link rel="stylesheet" type="text/css" href="../stylesheets/index.css"/>
<h1>SSH key recovery</h1> </head>
<form id="form"> <body>
<label for="user">Username</label> <div class="wrapper">
<input type="text" id="user" name="user"/> <br/> <header class="page-header">
<label for="mail">Email</label> <img src="../images/sharky.svg" alt="Sharky, our mascot" width="145" height="81.56"/>
<input type="email" id="mail" name="mail"/> <br/> <h1>Skynet self service</h1>
<input type="submit"/> </header>
</form> <main class="page-body">
<p id="formStatus"></p> <h1>SSH key recovery</h1>
<footer> <form id="form">
UL Computer Society 2023-<span id="year">2023</span> <label for="user">Username</label>
</footer> <input type="text" id="user" name="user"/> <br/>
<script> <label for="mail">Email</label>
document.getElementById('year').textContent = new Date().getFullYear().toString() <input type="email" id="mail" name="mail"/> <br/>
</script> <input type="submit"/>
<script> </form>
const formEl = document.getElementById("form"); <p id="formStatus"></p>
formEl.addEventListener('submit', formHandler); <script>
const formEl = document.getElementById("form");
formEl.addEventListener('submit', formHandler);
function formHandler(listener) { function formHandler(listener) {
listener.preventDefault(); listener.preventDefault();
const formData = new FormData(formEl); const formData = new FormData(formEl);
const object = {user: formData.get('user'), email: formData.get('mail')}; const object = {user: formData.get('user'), email: formData.get('mail')};
fetch('https://api.account.skynet.ie/ldap/recover/ssh/request', { fetch('https://api.account.skynet.ie/ldap/recover/ssh/request', {
method: 'POST', method: 'POST',
body: JSON.stringify(object), body: JSON.stringify(object),
mode: "cors" mode: "cors"
}) })
.then(status) .then(status)
.then(json) .then(json)
.catch(() => { .catch(() => {
document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>";
}); });
} }
function status(res) { function status(res) {
if (res.status === 200) { if (res.status === 200) {
return res.json(); return res.json();
} else if (res.status === 500) { } else if (res.status === 500) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
} else { } else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>";
} }
} }
function json(temp) { function json(temp) {
if (temp) { if (temp) {
if (temp.result === 'error') { if (temp.result === 'error') {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`; document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`;
} else { } else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
} }
} }
} }
</script> </script>
</body> </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> </html>

117
src/recovery/username.html
View file

@ -1,60 +1,65 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-ie"> <html lang="en-ie">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Forgot Username</title> <title>Account Recovery</title>
<link rel="icon" type="image/png" href="../images/favicon/favicon-16x16.png"/> <link rel="icon" type="image/png" href="../images/favicon/favicon-16x16.png"/>
<link rel="stylesheet" type="text/css" href="../stylesheets/index.css"/> <link rel="stylesheet" type="text/css" href="../stylesheets/index.css"/>
</head> </head>
<body> <body>
<div id="title"> <div class="wrapper">
<a href="../"><img src="../images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" <header class="page-header">
height="81.56"/> </a> <img src="../images/sharky.svg" alt="Sharky, our mascot" width="145" height="81.56"/>
<h1>Skynet Password Reset & Sign-up service</h1> <h1>Skynet self service</h1>
</div> </header>
<div class="boxes"> <main class="page-body">
<h2>Forgot Username</h2> <div class="boxes">
<p>Please use this page to get a reminder email with your skynet username in it.</p> <h2>Forgot Username</h2>
<form id="reset"> <p>Please use this page to get a reminder email with your skynet username in it.</p>
<table id="table"> <form id="reset">
<tr> <table id="table">
<td><label for="email">Email Address</label></td> <tr>
<td><input type="text" id="email" name="email"/> <br/></td> <td><label for="email">Email Address</label></td>
</tr> <td><input type="text" id="email" name="email"/> <br/></td>
<tr> </tr>
<td colspan="2"><input type="Submit" value="Submit"/></td> <tr>
</tr> <td colspan="2"><input type="Submit" value="Submit"/></td>
</table> </tr>
</form> </table>
<p id="formStatus"></p> </form>
</div> <p id="formStatus"></p>
<footer> </div>
UL Computer Society 2023-<span id="year">2023</span> <script>
</footer> const formEl = document.getElementById("reset");
<script> formEl.addEventListener('submit', (listener) => formHandler(listener));
const formEl = document.getElementById("reset");
formEl.addEventListener('submit', (listener) => formHandler(listener));
function formHandler(listener) { function formHandler(listener) {
listener.preventDefault(); listener.preventDefault();
const formData = new FormData(formEl); const formData = new FormData(formEl);
const email = formData.get("email"); const email = formData.get("email");
const object = {email: email}; const object = {email: email};
fetch('https://api.account.skynet.ie/ldap/recover/username', { fetch('https://api.account.skynet.ie/ldap/recover/username', {
method: 'POST', method: 'POST',
body: JSON.stringify(object), body: JSON.stringify(object),
mode: "cors" mode: "cors"
}).then(res => { }).then(res => {
if (res.status === 200) { if (res.status === 200) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
} else if (res.status === 500) { } else if (res.status === 500) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
} else { } else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>"; 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>"); }).catch(() => document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>");
} }
</script> </script>
</body> </main>
<script></script> <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> </html>

169
src/register.html
View file

@ -1,89 +1,90 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-ie"> <html lang="en-ie">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Skynet Register</title> <title>Skynet Register</title>
<link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png"/> <link rel="icon" type="image/png" href="./images/favicon/favicon-16x16.png"/>
<link rel="stylesheet" type="text/css" href="stylesheets/index.css"/> <link rel="stylesheet" type="text/css" href="./stylesheets/index.css"/>
</head> </head>
<body> <body>
<div id="title"> <div class="wrapper">
<a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" <header class="page-header">
height="81.56"/> </a> <img src="./images/sharky.svg" alt="Picture of Sharky, the mascot of skynet" width="145" height="81.56"/>
<h1>Skynet Password Reset & Sign-up service</h1> <h1>Skynet self service</h1>
</div> </header>
<div class="boxes"> <main class="page-body">
<h2>Register</h2> <h2>Register</h2>
<p>Thank you for signing up for your free skynet account. Please complete the process by filling in the form <p>Thank you for signing up for your free skynet account. Please complete the process by filling in the form
below</p> below</p>
<form id="register"> <form id="register">
<table id="table"> <table id="table">
<tr> <tr>
<td><label for="user">Username</label></td> <td><label for="user">Username</label></td>
<td><input type="text" id="user" name="user"/> <br/></td> <td><input type="text" id="user" name="user"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td><label for="pass">Password</label></td> <td><label for="pass">Password</label></td>
<td><input type="password" id="pass" name="pass" minlength="8" maxlength="254"/> <br/></td> <td><input type="password" id="pass" name="pass" minlength="8" maxlength="254"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td><label for="confirm">Confirm</label></td> <td><label for="confirm">Confirm</label></td>
<td><input type="password" id="confirm" name="confirm"/></td> <td><input type="password" id="confirm" name="confirm"/></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><input type="Submit" value="Submit"/></td> <td colspan="2"><input type="Submit" value="Submit"/></td>
</tr> </tr>
</table> </table>
</form> </form>
</div> <p id="formStatus"></p>
<p id="formStatus"></p> <script>
<footer> const formEl = document.getElementById("register");
UL Computer Society 2023-<span id="year">2023</span> formEl.addEventListener('submit', (listener) => formHandler(listener));
</footer>
<script>
const formEl = document.getElementById("register");
formEl.addEventListener('submit', (listener) => formHandler(listener));
function formHandler(listener) { function formHandler(listener) {
listener.preventDefault(); listener.preventDefault();
const formData = new FormData(formEl); const formData = new FormData(formEl);
const pass = formData.get("pass"); const pass = formData.get("pass");
if (pass === formData.get("confirm")) { if (pass === formData.get("confirm")) {
const url = new URL(window.location.href); const url = new URL(window.location.href);
const urlParam = new URLSearchParams(url.search); const urlParam = new URLSearchParams(url.search);
const auth = urlParam.get("auth"); const auth = urlParam.get("auth");
const user = formData.get("user"); const user = formData.get("user");
const object = {auth: auth, user: user, pass: pass}; const object = {auth: auth, user: user, pass: pass};
fetch('https://api.account.skynet.ie/ldap/new/account', { fetch('https://api.account.skynet.ie/ldap/new/account', {
method: 'POST', method: 'POST',
body: JSON.stringify(object), body: JSON.stringify(object),
mode: "cors" mode: "cors"
}).then(res => { }).then(res => {
if (res.status === 200) { if (res.status === 200) {
return res.json(); return res.json();
} else if (res.status === 500) { } else if (res.status === 500) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
} else { } else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>";
} }
}) })
.then((temp) => { .then((temp) => {
if (temp) { if (temp) {
if (temp.result === 'error') { if (temp.result === 'error') {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`; document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>${temp.error}</span>`;
} else { } else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>"; 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>
.catch(() => document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>"); <footer class="page-footer">
} else { UL Computer Society 2023-<span id="year">2023</span>
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Passwords don't match</span>`; <script>
} document.getElementById('year').textContent = new Date().getFullYear().toString()
} </script>
</script> </footer>
</body> </div>
<script> </body>
document.getElementById('year').textContent = new Date().getFullYear().toString()
</script>
</html> </html>

175
src/signup.html
View file

@ -1,95 +1,96 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-ie"> <html lang="en-ie">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Skynet Sign-up</title> <title>Skynet Sign-up</title>
<link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png"/> <link rel="icon" type="image/png" href="images/favicon/favicon-16x16.png"/>
<link rel="stylesheet" type="text/css" href="stylesheets/index.css"/> <link rel="stylesheet" type="text/css" href="stylesheets/index.css"/>
<style> <style>
/* Taken from the W3 schools loader tutorial */ /* Taken from the W3 schools loader tutorial */
.loader { .loader {
border: 16px solid #f3f3f3; border: 16px solid #f3f3f3;
border-radius: 50%; border-radius: 50%;
border-top: 16px solid #3498db; border-top: 16px solid #3498db;
width: 60px; width: 60px;
height: 60px; height: 60px;
-webkit-animation: spin 2s linear infinite; /* Safari */ -webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 20s linear; animation: spin 20s linear;
} }
/* Safari */ /* Safari */
@-webkit-keyframes spin { @-webkit-keyframes spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
} }
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin { @keyframes spin {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
100% { </style>
transform: rotate(360deg); </head>
} <body>
} <div class="wrapper">
</style> <header class="page-header">
</head> <img src="./images/sharky.svg" alt="Picture of Sharky, the mascot of skynet" width="145" height="81.56"/>
<body> <h1>Skynet self service</h1>
<div id="title"> </header>
<a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" <main class="page-body">
height="81.56"/> </a> <h2>Welcome to Skynet</h2>
<h1>Skynet Password Reset & Sign-up service</h1> <p>
</div> Skynet is a server cluster that the UL Computer Society runs. If you previously had an account and need to
<div class="boxes"> activate <br/>
<h2>Welcome to Skynet</h2> it please click <a href="./modify.html">here</a> to set a contact email address for your account. IF you are a
<p> new <br/>
Skynet is a server cluster that the UL Computer Society runs. If you previously had an account and need to user, please fill in the form below with the email that you use on ul wolves.
activate <br/> </p>
it please click <a href="./modify.html">here</a> to set a contact email address for your account. IF you are a <form id="register">
new <br/> <label for="mail">Email address</label>
user, please fill in the form below with the email that you use on ul wolves. <input type="email" id="mail" name="email"/> <br/>
</p> <input type="submit" value="Submit"/>
<form id="register"> </form>
<label for="mail">Email address</label> <p id="formStatus"></p>
<input type="email" id="mail" name="email"/> <br/> <script>
<input type="submit" value="Submit"/> const formEl = document.getElementById('register');
</form> formEl.addEventListener('submit', (listener) => formHandler(listener));
<p id="formStatus"></p>
</div>
<footer>
UL Computer Society 2023-<span id="year">2023</span>
</footer>
<script>
const formEl = document.getElementById('register');
formEl.addEventListener('submit', (listener) => formHandler(listener));
function formHandler(listener) { function formHandler(listener) {
listener.preventDefault(); listener.preventDefault();
//HTML below taken from the W3 schools tutorial () //HTML below taken from the W3 schools tutorial ()
document.getElementById('formStatus').innerHTML = "<div class='loader'></div>" document.getElementById('formStatus').innerHTML = "<div class='loader'></div>"
const formData = new FormData(formEl); const formData = new FormData(formEl);
const email = formData.get("email"); const email = formData.get("email");
const object = {email: email}; const object = {email: email};
fetch('https://api.account.skynet.ie/ldap/new/email', { fetch('https://api.account.skynet.ie/ldap/new/email', {
method: 'POST', method: 'POST',
body: JSON.stringify(object), body: JSON.stringify(object),
mode: "cors" mode: "cors"
}).then(res => { }).then(res => {
if (res.status === 200) { if (res.status === 200) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success</span>";
} else if (res.status === 500) { } else if (res.status === 500) {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>"; document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure</span>";
} else { } else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failure: Failed to communicate to server</span>"; 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>"); }).catch(() => document.getElementById('formStatus').innerHTML = "<span style='background-color: yellow; color: black'>Please try again</span>");
} }
</script> </script>
</body> </main>
<script> <footer class="page-footer">
document.getElementById('year').textContent = new Date().getFullYear().toString() UL Computer Society 2023-<span id="year">2023</span>
</script> <script>
document.getElementById('year').textContent = new Date().getFullYear().toString()
</script>
</footer>
</div>
</body>
</html> </html>

77
src/stylesheets/index.css
View file

@ -1,28 +1,75 @@
/* General styling */
html {
background: #008B8B url(../images/backgroundsharkycoin.png);
-webkit-font-smoothing: antialiased;
}
body { body {
background-image: url(../images/backgroundsharkycoin.png); text-align: center;
text-align: center; background: #008B8B;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
color: #F0FFFF;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0 auto;
max-width: 800px;
padding: 2em 2em 4em;
}
h1, h2 {
color: #F0FFFF;
font-weight: 600;
line-height: 1.3;
}
.p1 {
color: #FFFF00
} }
/* Title bar */ /* Title bar */
#title { header {
display: inline-flex; display: inline-flex;
background-color: white; align-items: center;
height: auto; justify-content: center;
height: auto;
} }
#title img { header img {
float: left; float: left;
} }
.boxes { .boxes {
display: -moz-flex; display: -moz-flex;
background-color: #008B8B; background-color: #008B8B;
margin-left: 20%; margin-left: 20%;
margin-right: 20%; margin-right: 20%;
margin-bottom: 3%; margin-bottom: 3%;
} }
#table { #table {
display: inline; display: inline;
}
/*
Sticky Footer
https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers
*/
html, body {
box-sizing: border-box;
height: 100%;
}
.wrapper {
box-sizing: border-box;
min-height: 100%;
display: flex;
flex-direction: column;
}
.page-header, .page-footer {
flex-grow: 0;
flex-shrink: 0;
}
.page-body {
flex-grow: 1;
} }