Add form validation on join page

2 files changed, 32 insertions, 6 deletions

diff --git a/app.py b/app.py
index c07105e..2e6929a 100644
--- a/app.py
+++ b/app.py
@@ -1,4 +1,4 @@
-from bottle import Bottle, run, debug, static_file, request, redirect, response
+from bottle import Bottle, run, debug, static_file, request, redirect, response, HTTPError
 from bottle import jinja2_template as template
 from oauthlib.oauth2 import WebApplicationClient
 from requests_oauthlib import OAuth2Session
@@ -47,6 +47,23 @@ def callback():
 def join_form():
     return template("join")
 
[email protected]("/join.html", method="POST")
+def join_submission(db):
+    name = request.forms.get("name")
+    preferred_role = request.forms.get("preferredRole")
+    motivation = request.forms.get("motivation")
+
+    if name == None or name.strip() == "":
+        raise HTTPError(400, "Namefield is empty or missing. ( warning: this is not good )")
+    if preferred_role == None:
+        raise HTTPError(400, "Preferred role is empty or missing.")
+    if preferred_role not in ("dps", "tank", "healer"):
+        raise HTTPError(400, "Preferred role must be one of the options (DPS, Tank, Healer) ( idiot )")
+    if motivation == None or motivation.strip() == "":
+        raise HTTPError(400, "Motivitaion field is empty or missing.")
+
+    db.execute(f"INSERT INTO applications(name, role, motivation) VALUES ({name}, {preferred_role}, {motivation})")
+
 @app.route("/<type:re:styles|images>/<filename>")
 def server_static(type, filename):
     return static_file(filename, root=f"./static/{type}/")
diff --git a/views/join.html b/views/join.html
index d899b2d..784019c 100644
--- a/views/join.html
+++ b/views/join.html
@@ -2,10 +2,19 @@
 
 {% block head %}
 	<link rel="stylesheet" href="/styles/join.css">
+	<script type="module">
+		var dropdown = document.getElementById("preferredRole");
+		document.getElementById("applicationForm").addEventListener("submit", (event) => {
+			if ( dropdown.value === "invalid" ) {
+				alert("Pick a preferred role.");
+				event.preventDefault()
+			}
+		});
+	</script>
 {% endblock %}
 
 {% block content %}
-	<form method="POST" class="signup">
+	<form method="POST" class="signup" id="applicationForm">
 		<div class="signup__box">
 			<label class="signup__label" for="name">Name</label>
 			<p>
@@ -16,7 +25,7 @@
 				If your application is accepted, we will accept your in-game guild application.
 				Please make sure you have supmitted such an application in the game's UI.
 			</p>
-			<input class="signup__input" type="text" id="name" required placeholder="PoopenFarten43">
+			<input class="signup__input" type="text" id="name" name="name" required placeholder="PoopenFarten43" minlength="2" maxlength="12">
 		</div>
 		<div class="signup__box">
 			<label class="signup__label" for="preferredRole">Preferred role</label>
@@ -25,8 +34,8 @@
 				As such it's important for us to know which role you like to play as.
 				Please feel free to elaborate in text box below.
 			</p>
-			<select required class="signup__input" id="preferredRole">
-				<option selected disabled>Choose a preferred role</option>
+			<select required class="signup__input" id="preferredRole" name="preferredRole">
+				<option value="invalid" selected disabled>Choose a preferred role</option>
 				<option value="dps">DPS</option>
 				<option value="tank">Tank</option>
 				<option value="healer">Healer</option>
@@ -39,7 +48,7 @@
 				Keep in mind that we get a lot of applications for our guild;
 				a simple "i like vidya" won't get you through the golden gates!
 			</p>
-			<textarea required class="signup__input" id="motivation" rows="20" placeholder="I would like to join because..."></textarea>
+			<textarea required class="signup__input" id="motivation" name="motivation" rows="20" placeholder="I would like to join because..."></textarea>
 		</div>
 		<div>
 			<button class="signup__submit" type="submit">Submit</button>