From 5d3d901d968db7eb3da9c038e6d823f7c75f1e10 Mon Sep 17 00:00:00 2001
From: adam <adam@>
Date: Fri, 29 Jan 2021 02:16:01 +0200
Subject: some cosmetic stuff

---
 css/style.css       | 15 +++++++++++++++
 index.php           |  9 ++++++++-
 js/arrows.js        |  2 +-
 js/validate_hero.js | 43 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 js/validate_hero.js
diff --git a/css/style.css b/css/style.css
index e6c5e93..76eb6e8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -125,6 +125,21 @@ form p {
 	margin: 1rem 0px 0.3rem 0px;
 }
 
+
+.hero_form_error {
+	animation: fadein 0.2s;
+	background-color: #ff4d4d;
+	color: #ffffff;
+	padding-left: 0.5rem;
+	border-bottom-left-radius: 0.5rem;
+	border-bottom-right-radius: 0.5rem;
+	margin-top: -0.2rem;
+
+}
+@keyframes fadein {
+	from { opacity: 0; }
+	to   { opacity: 1; }
+}
 input {
 	min-width: 300px;
 	border: 1px solid #bbb;
diff --git a/index.php b/index.php
index 2d1ddfb..38eb660 100644
--- a/index.php
+++ b/index.php
@@ -27,17 +27,23 @@
 					</div>
 
 					<div class="vcenter">
-						<form action="/register.php" method="post">
+						<form name="hero_form" action="/register.php" method="post" onsubmit="return validate_hero_form()">
 							<h2>Get started</h2>
 							<div class="content">
 								<p>Username</p>
 								<input type="text" id="username" name="username">
+								<p id="username-length-error" class="hero_form_error" hidden>Please specify a username</p>
+
 								<p>Email address</p> 
 								<input type="text" id="email" name="email">
+								<p id="email-error" class="hero_form_error" hidden>Invalid email address</p>
+
 								<p>Password</p>
 								<input type="password" id="password" name="password">
+
 								<p>Repeat Password</p>
 								<input type="password" id="password2" name="password2">
+								<p id="password-error" class="hero_form_error" hidden>Passwords didn't match</p>
 								<input type="submit" value="Sign up">
 								<p style="font-size: 1.1em;">Already have an account? <a href="login.html">Sign in</a>
 							</div>
@@ -52,6 +58,7 @@
 		</div>
 
 		<script src="js/arrows.js"></script>
+		<script src="js/validate_hero.js"></script>
 
 	</body>
 	<html>
diff --git a/js/arrows.js b/js/arrows.js
index a23af87..ec7352c 100644
--- a/js/arrows.js
+++ b/js/arrows.js
@@ -4,7 +4,7 @@ arrows = [];
 const minSpeed = 3;
 const maxSpeed = 8;
 const delay = 1500;
-const lifetime = 25000;
+const lifetime = 20000;
 
 function make_arrow() {
 	const svg = document.getElementById("protoarrow").cloneNode();
diff --git a/js/validate_hero.js b/js/validate_hero.js
new file mode 100644
index 0000000..118abbf
--- /dev/null
+++ b/js/validate_hero.js
@@ -0,0 +1,43 @@
+
+function clear_hero_errors()
+{
+	var errors = document.getElementsByClassName("hero_form_error");
+	var i;
+	for (i = 0; i < errors.length; i++)
+	{
+		errors[i].hidden = true;
+	}
+}
+function validate_hero_form()
+{
+			var username=document.forms["hero_form"]["username"].value;
+			var email=document.forms["hero_form"]["email"].value;
+			var password=document.forms["hero_form"]["password"].value;
+			var password2=document.forms["hero_form"]["password2"].value;
+
+			var flag=true;
+			clear_hero_errors();
+
+			if(username.length==0)
+			{
+				document.getElementById("username-length-error").hidden=false;
+				flag=false;
+			}
+			if(!email.match(/\S+@\S+/))
+			{
+				document.getElementById("email-error").hidden=false;
+				flag=false;
+			}
+			if(password !== password2)
+			{
+				document.getElementById("password-error").hidden=false;
+				flag=false;
+			}
+
+			if(flag)
+			{
+				document.getElementById("success").hidden=false;
+			}
+			return flag;
+
+}
-- 
cgit v1.2.3

