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

Merge branch '4-account-recovery' into 'main'

Browse source 
Feat. Form default behaviour bypassed

See merge request compsoc1/skynet/ldap/frontend!10
This commit is contained in:
silver 2023-09-26 20:22:50 +00:00
commit 3c3649ccfe
10 changed files with 563 additions and 349 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/index.html
View file

@ -1,38 +1,41 @@
<!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</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 id="title">
<a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" <img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" height="81.56"/>
height="81.56"/> </a> <h1>Skynet Password Reset & Sign-up service</h1>
<h1>Skynet Password Reset & Sign-up service</h1>
</div> </div>
<div class="boxes"> <div class="boxes">
<h2><a href="./signup.html">Sign-up Page</a></h2> <h2><a href="./signup.html">Sign-up Page</a></h2>
<p>Please use this if you have yet to activate an account on Skynet before.</p> <p>Please use this if you have yet to activate an account on Skynet before.</p>
<h2><a href="password.html">Change Password</a></h2> <h2><a href="./password.html">Change Password</a></h2>
<p>Please use this service to change your skynet password</p> <p>Please use this service to change your skynet password</p>
<h2><a href="modify.html">User modification</a></h2> <h2><a href="./modify.html">User modification</a></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>
<h2><a href="./recovery/username.html">Forgot your username?</a></h2> <h2><a href="./recovery/username.html">Forgot your username?</a></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>
<h2>
<a href="./recovery/password.html">Forgot your password?</a>
</h2>
<p>
Please use this service to reset your password.
</p>
</div> </div>
<!--testing2-->
<footer> <footer>
UL Computer Society 2023-<span id="year">2023</span> UL Computer Society 2023-<span id="year">2023</span>
</footer> </footer>
</body> </body>
<script> <script>
document.getElementById('year').textContent = new Date().getFullYear().toString() document.getElementById('year').textContent = new Date().getFullYear().toString()
</script> </script>
</html> </html>

164
src/modify.html
View file

@ -1,105 +1,105 @@
<!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 user</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 id="title">
<a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
height="81.56"/> </a> height="81.56"/> </a>
<h1>Skynet Password Reset & Sign-up service</h1> <h1>Skynet Password Reset & Sign-up service</h1>
</div> </div>
<div class="boxes"> <div class="boxes">
<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> </div>
<footer> <footer>
UL Computer Society 2023-<span id="year">2023</span> UL Computer Society 2023-<span id="year">2023</span>
</footer> </footer>
<script> <script>
const formEl = document.getElementById("reset"); const formEl = document.getElementById("reset");
formEl.addEventListener('submit', (listener) => formHandler(listener)); 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) { } 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 {
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 { } else {
document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Please select a field to modify</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>");
} 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> </body>
<script> <script>
document.getElementById('year').textContent = new Date().getFullYear().toString(); document.getElementById('year').textContent = new Date().getFullYear().toString();
</script> </script>
</html> </html>

118
src/password.html
View file

@ -1,80 +1,80 @@
<!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 id="title">
<a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
height="81.56"/> </a> height="81.56"/> </a>
<h1>Skynet Password Reset & Sign-up service</h1> <h1>Skynet Password Reset & Sign-up service</h1>
</div> </div>
<div class="boxes"> <div class="boxes">
<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> </div>
<footer> <footer>
UL Computer Society 2023-<span id="year">2023</span> UL Computer Society 2023-<span id="year">2023</span>
</footer> </footer>
<script> <script>
const formEl = document.getElementById("reset"); const formEl = document.getElementById("reset");
formEl.addEventListener('submit', (listener) => formHandler(listener)); 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 {
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 { } 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: 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> </script>
</body> </body>
<script> <script>
document.getElementById('year').textContent = new Date().getFullYear().toString(); document.getElementById('year').textContent = new Date().getFullYear().toString();
</script> </script>
</html> </html>

0
src/recovery/.gitkeep
View file

74
src/recovery/password.html Normal file
View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en-ie">
<head>
<meta charset="UTF-8"/>
<title>Account Recovery</title>
<link rel="icon" type="image/png" href="../images/favicon/favicon-16x16.png"/>
</head>
<body>
<form id="recovery">
<label for="username">Username</label>
<input type="text" id="username" name="username"/>
<p>Or</p>
<label for="email">Email</label>
<input type="text" id="email" name="email"/>
<br/>
<br/>
<input type="submit" value="submit"/>
</form>
<p id="formStatus"></p>
<footer>
UL Computer Society 2023-<span id="year">2023</span>
</footer>
<script>
const formEl = document.getElementById('recovery');
formEl.addEventListener('submit', formHandler);
async function formHandler(listener) {
listener.preventDefault();
// reset teh form status
document.getElementById('formStatus').innerHTML = "";
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>
</body>
<script>
document.getElementById('year').textContent = new Date().getFullYear().toString()
</script>
</html>

73
src/recovery/password_reset.html Normal file
View file

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Password recovery</title>
</head>
<body>
<h1>Password Recovery</h1>
<p>Please enter a new password for your skynet account below</p>
<form id="reset">
<label for="pass1">Password</label>
<input type="password" id="pass1" name="password"/> <br/>
<label for="pass2">Confirm</label>
<input type="password" id="pass2" name="confirm"/> <br/>
<input type="submit"/>
</form>
<p id="formStatus"></p>
<footer>
UL Computer Society 2023-<span id="year">2023</span>
</footer>
<script>
document.getElementById('year').textContent = new Date().getFullYear().toString()
</script>
<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 = "";
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>
</body>
</html>

64
src/recovery/ssh-request.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSH key recovery</title>
</head>
<body>
<h1>SSH key recovery</h1>
<form id="form">
<label for="user">Username</label>
<input type="text" id="user" name="user"/> <br/>
<label for="mail">Email</label>
<input type="email" id="mail" name="mail"/> <br/>
<input type="submit"/>
</form>
<p id="formStatus"></p>
<footer>
UL Computer Society 2023-<span id="year">2023</span>
</footer>
<script>
document.getElementById('year').textContent = new Date().getFullYear().toString()
</script>
<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>
</body>
</html>

86
src/recovery/username.html
View file

@ -1,59 +1,59 @@
<!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>Forgot Username</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 id="title">
<a href="../"><img src="../images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" <a href="../"><img src="../images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
height="81.56"/> </a> height="81.56"/> </a>
<h1>Skynet Password Reset & Sign-up service</h1> <h1>Skynet Password Reset & Sign-up service</h1>
</div> </div>
<div class="boxes"> <div class="boxes">
<h2>Forgot Username</h2> <h2>Forgot Username</h2>
<p>Please use this page to get a reminder email with your skynet username in it.</p> <p>Please use this page to get a reminder email with your skynet username in it.</p>
<form id="reset"> <form id="reset">
<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 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> </div>
<footer> <footer>
UL Computer Society 2023-<span id="year">2023</span> UL Computer Society 2023-<span id="year">2023</span>
</footer> </footer>
<script> <script>
const formEl = document.getElementById("reset"); const formEl = document.getElementById("reset");
formEl.addEventListener('submit', (listener) => formHandler(listener)); 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> </body>
<script></script> <script></script>

134
src/register.html
View file

@ -1,89 +1,89 @@
<!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 id="title">
<a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
height="81.56"/> </a> height="81.56"/> </a>
<h1>Skynet Password Reset & Sign-up service</h1> <h1>Skynet Password Reset & Sign-up service</h1>
</div> </div>
<div class="boxes"> <div class="boxes">
<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> </div>
<p id="formStatus"></p> <p id="formStatus"></p>
<footer> <footer>
UL Computer Society 2023-<span id="year">2023</span> UL Computer Society 2023-<span id="year">2023</span>
</footer> </footer>
<script> <script>
const formEl = document.getElementById("register"); const formEl = document.getElementById("register");
formEl.addEventListener('submit', (listener) => formHandler(listener)); 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 {
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 { } else {
document.getElementById('formStatus').innerHTML = `<span style='background-color: red; color: white'>Passwords don't match</span>`; 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> </script>
</body> </body>
<script> <script>
document.getElementById('year').textContent = new Date().getFullYear().toString() document.getElementById('year').textContent = new Date().getFullYear().toString()
</script> </script>
</html> </html>

150
src/signup.html
View file

@ -1,95 +1,95 @@
<!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% { 100% {
-webkit-transform: rotate(360deg); -webkit-transform: rotate(360deg);
} }
} }
@keyframes spin { @keyframes spin {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
</style> </style>
</head> </head>
<body> <body>
<div id="title"> <div id="title">
<a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145" <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
height="81.56"/> </a> height="81.56"/> </a>
<h1>Skynet Password Reset & Sign-up service</h1> <h1>Skynet Password Reset & Sign-up service</h1>
</div> </div>
<div class="boxes"> <div class="boxes">
<h2>Welcome to Skynet</h2> <h2>Welcome to Skynet</h2>
<p> <p>
Skynet is a server cluster that the UL Computer Society runs. If you previously had an account and need to Skynet is a server cluster that the UL Computer Society runs. If you previously had an account and need to
activate <br/> activate <br/>
it please click <a href="./modify.html">here</a> to set a contact email address for your account. IF you are a it please click <a href="./modify.html">here</a> to set a contact email address for your account. IF you are a
new <br/> new <br/>
user, please fill in the form below with the email that you use on ul wolves. user, please fill in the form below with the email that you use on ul wolves.
</p> </p>
<form id="register"> <form id="register">
<label for="mail">Email address</label> <label for="mail">Email address</label>
<input type="email" id="mail" name="email"/> <br/> <input type="email" id="mail" name="email"/> <br/>
<input type="submit" value="Submit"/> <input type="submit" value="Submit"/>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
</div> </div>
<footer> <footer>
UL Computer Society 2023-<span id="year">2023</span> UL Computer Society 2023-<span id="year">2023</span>
</footer> </footer>
<script> <script>
const formEl = document.getElementById('register'); const formEl = document.getElementById('register');
formEl.addEventListener('submit', (listener) => formHandler(listener)); 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> </body>
<script> <script>
document.getElementById('year').textContent = new Date().getFullYear().toString() document.getElementById('year').textContent = new Date().getFullYear().toString()
</script> </script>
</html> </html>