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

Adding loader to the formStatus paragraph on submit button press.

Browse source 
Signed-off-by: Eoghan Conlon <eoghanconlon73@skynet.ie>
This commit is contained in:
eoghanconlon73 2023-09-03 20:01:41 +01:00
parent 050fd480fb
commit 38d79217d9
1 changed files with 26 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/signup.html
View file

@ -4,6 +4,30 @@
<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"/>
<!-- Below to be put refactored into this page's css file upon completion of that branch -->
<style>
/* Taken from the W3 schools loader tutorial */
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 20s linear;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head> </head>
<body> <body>
<h2>Welcome to Skynet</h2> <h2>Welcome to Skynet</h2>
@ -26,9 +50,10 @@
<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 ()
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};