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

Code standardisation

Browse source 
Signed-off-by: Eoghan Conlon <eoghanconlon73@skynet.ie>
This commit is contained in:
eoghanconlon73 2023-09-18 12:18:33 +01:00
parent 2e72c1deaf
commit c9e91ba1be
6 changed files with 120 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/index.html
View file

@ -8,18 +8,19 @@
</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" height="81.56"/> </a> <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
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">Password Reset</a></h2> <h2><a href="password.html">Password Reset</a></h2>
<p>Please use this service if you ever forget your skynet password</p> <p>Please use this service if you ever forget 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>
</div> </div>
<!--testing2--> <!--testing2-->

75
src/modify.html
View file

@ -8,45 +8,46 @@
</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" height="81.56"/> </a> <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
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>
@ -71,7 +72,7 @@
}).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>";
@ -87,10 +88,10 @@
} }
} }
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';

61
src/password.html
View file

@ -1,43 +1,44 @@
<!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" height="81.56"/> </a> <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
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 Reset</h2> <h2>Password Reset</h2>
<p>Please use this page to reset you password should you need to change it.</p> <p>Please use this page to reset you password should you need to change it.</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>
<td><label for="pass">Old Password</label></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="pass">Old Password</label></td>
<td><input type="password" id="newPW1" name="newPW" /> <br /></td> <td><input type="password" id="pass" name="pass"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td><label for="newPW2">Confirm</label></td> <td><label for="newPW1">New Password</label></td>
<td><input type="password" id="newPW2" name="newPWConfirm" /> <br /> </td> <td><input type="password" id="newPW1" name="newPW"/> <br/></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><input type="Submit" value="Submit" /></td> <td><label for="newPW2">Confirm</label></td>
</tr> <td><input type="password" id="newPW2" name="newPWConfirm"/> <br/></td>
</table> </tr>
</form> <tr>
<p id="formStatus"></p> <td colspan="2"><input type="Submit" value="Submit"/></td>
</tr>
</table>
</form>
<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>
@ -46,22 +47,22 @@
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 { } 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>";

46
src/register.html
View file

@ -8,31 +8,33 @@
</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" height="81.56"/> </a> <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
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 below</p> <p>Thank you for signing up for your free skynet account. Please complete the process by filling in the form
<form id="register"> below</p>
<table id="table"> <form id="register">
<tr> <table id="table">
<td><label for="user">Username</label></td> <tr>
<td><input type="text" id="user" name="user"/> <br/> </td> <td><label for="user">Username</label></td>
</tr> <td><input type="text" id="user" name="user"/> <br/></td>
<tr> </tr>
<td><label for="pass">Password</label></td> <tr>
<td><input type="password" id="pass" name="pass" minlength="8" maxlength="254"/> <br/></td> <td><label for="pass">Password</label></td>
</tr> <td><input type="password" id="pass" name="pass" minlength="8" maxlength="254"/> <br/></td>
<tr> </tr>
<td><label for="confirm">Confirm</label></td> <tr>
<td><input type="password" id="confirm" name="confirm"/> </td> <td><label for="confirm">Confirm</label></td>
</tr> <td><input type="password" id="confirm" name="confirm"/></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>
</form>
</div> </div>
<p id="formStatus"></p> <p id="formStatus"></p>
<footer> <footer>

29
src/signup.html
View file

@ -39,22 +39,25 @@
</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" height="81.56"/> </a> <a href="./"><img src="images/sharky_vector_svg.svg" alt="Picture of Sharky, the mascot of skynet" width="145"
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 activate <br /> Skynet is a server cluster that the UL Computer Society runs. If you previously had an account and need to
it please click <a href="./modify.html">here</a> to set a contact email address for your account. IF you are a new <br /> activate <br/>
user, please fill in the form below with the email that you use on ul wolves. 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/>
<form id="register"> user, please fill in the form below with the email that you use on ul wolves.
<label for="mail">Email address</label> </p>
<input type="email" id="mail" name="email"/> <br/> <form id="register">
<input type="submit" value="Submit"/> <label for="mail">Email address</label>
</form> <input type="email" id="mail" name="email"/> <br/>
<p id="formStatus"></p> <input type="submit" value="Submit"/>
</form>
<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>

5
src/stylesheets/index.css
View file

@ -1,8 +1,9 @@
/* General styling */ /* General styling */
body{ body {
background-image: url(../images/backgroundsharkycoin.png); background-image: url(../images/backgroundsharkycoin.png);
text-align: center; text-align: center;
} }
/* Title bar */ /* Title bar */
#title { #title {
display: inline-flex; display: inline-flex;
@ -22,6 +23,6 @@ body{
margin-bottom: 3%; margin-bottom: 3%;
} }
#table{ #table {
display: inline; display: inline;
} }