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

30
src/index.html
View file

@ -2,21 +2,22 @@
<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">
<h2><a href="./signup.html">Sign-up</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">Account 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>
@ -30,12 +31,13 @@
<p> <p>
Please use this service to reset your password. Please use this service to reset your password.
</p> </p>
</div> </main>
<footer> <footer class="page-footer">
UL Computer Society 2023-<span id="year">2023</span> UL Computer Society 2023-<span id="year">2023</span>
</footer>
</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>

31
src/modify.html
View file

@ -2,17 +2,17 @@
<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">
@ -48,10 +48,6 @@
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
</div>
<footer>
UL Computer Society 2023-<span id="year">2023</span>
</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));
@ -98,8 +94,13 @@
} }
} }
</script> </script>
</body> </main>
<footer class="page-footer">
UL Computer Society 2023-<span id="year">2023</span>
<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>

29
src/password.html
View file

@ -3,16 +3,16 @@
<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">
@ -39,10 +39,6 @@
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
</div>
<footer>
UL Computer Society 2023-<span id="year">2023</span>
</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));
@ -73,8 +69,13 @@
} }
} }
</script> </script>
</body> </main>
<footer class="page-footer">
UL Computer Society 2023-<span id="year">2023</span>
<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>

23
src/recovery/password.html
View file

@ -7,12 +7,12 @@
<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">
@ -34,10 +34,6 @@
</table> </table>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
</div>
<footer>
UL Computer Society 2023-<span id="year">2023</span>
</footer>
<script> <script>
const formEl = document.getElementById('recovery'); const formEl = document.getElementById('recovery');
formEl.addEventListener('submit', formHandler); formEl.addEventListener('submit', formHandler);
@ -85,8 +81,13 @@
} }
} }
</script> </script>
</body> </main>
<footer class="page-footer">
UL Computer Society 2023-<span id="year">2023</span>
<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>

26
src/recovery/password_reset.html
View file

@ -1,10 +1,18 @@
<!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>
<link rel="icon" type="image/png" href="../images/favicon/favicon-16x16.png"/>
<link rel="stylesheet" type="text/css" href="../stylesheets/index.css"/>
</head> </head>
<body> <body>
<div class="wrapper">
<header class="page-header">
<img src="../images/sharky.svg" alt="Sharky, our mascot" width="145" height="81.56"/>
<h1>Skynet self service</h1>
</header>
<main class="page-body">
<h1>Password Recovery</h1> <h1>Password Recovery</h1>
<p>Please enter a new password for your skynet account below</p> <p>Please enter a new password for your skynet account below</p>
<form id="reset"> <form id="reset">
@ -15,12 +23,6 @@
<input type="submit"/> <input type="submit"/>
</form> </form>
<p id="formStatus"></p> <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> <script>
const formEl = document.getElementById("reset"); const formEl = document.getElementById("reset");
formEl.addEventListener('submit', (listener) => formHandler(listener)); formEl.addEventListener('submit', (listener) => formHandler(listener));
@ -69,5 +71,13 @@
} }
} }
</script> </script>
</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> </body>
</html> </html>

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

@ -1,10 +1,18 @@
<!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>
<link rel="icon" type="image/png" href="../images/favicon/favicon-16x16.png"/>
<link rel="stylesheet" type="text/css" href="../stylesheets/index.css"/>
</head> </head>
<body> <body>
<div class="wrapper">
<header class="page-header">
<img src="../images/sharky.svg" alt="Sharky, our mascot" width="145" height="81.56"/>
<h1>Skynet self service</h1>
</header>
<main class="page-body">
<h1>SSH key recovery</h1> <h1>SSH key recovery</h1>
<form id="form"> <form id="form">
<label for="user">Username</label> <label for="user">Username</label>
@ -14,12 +22,6 @@
<input type="submit"/> <input type="submit"/>
</form> </form>
<p id="formStatus"></p> <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> <script>
const formEl = document.getElementById("form"); const formEl = document.getElementById("form");
formEl.addEventListener('submit', formHandler); formEl.addEventListener('submit', formHandler);
@ -60,5 +62,13 @@
} }
} }
</script> </script>
</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> </body>
</html> </html>

25
src/recovery/username.html
View file

@ -2,16 +2,17 @@
<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>
<main class="page-body">
<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>
@ -28,9 +29,6 @@
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
</div> </div>
<footer>
UL Computer Society 2023-<span id="year">2023</span>
</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));
@ -55,6 +53,13 @@
}).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>
</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> </body>
<script></script>
</html> </html>

27
src/register.html
View file

@ -3,16 +3,16 @@
<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>
@ -35,11 +35,7 @@
</tr> </tr>
</table> </table>
</form> </form>
</div>
<p id="formStatus"></p> <p id="formStatus"></p>
<footer>
UL Computer Society 2023-<span id="year">2023</span>
</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));
@ -82,8 +78,13 @@
} }
} }
</script> </script>
</body> </main>
<footer class="page-footer">
UL Computer Society 2023-<span id="year">2023</span>
<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>

23
src/signup.html
View file

@ -38,12 +38,12 @@
</style> </style>
</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>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
@ -58,10 +58,6 @@
<input type="submit" value="Submit"/> <input type="submit" value="Submit"/>
</form> </form>
<p id="formStatus"></p> <p id="formStatus"></p>
</div>
<footer>
UL Computer Society 2023-<span id="year">2023</span>
</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));
@ -88,8 +84,13 @@
}).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>
<footer class="page-footer">
UL Computer Society 2023-<span id="year">2023</span>
<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>

57
src/stylesheets/index.css
View file

@ -1,17 +1,41 @@
/* 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;
justify-content: center;
height: auto; height: auto;
} }
#title img { header img {
float: left; float: left;
} }
@ -26,3 +50,26 @@ body {
#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;
}