1 files changed, 59 insertions, 0 deletions
diff --git a/views/join_form.html b/views/join_form.html
new file mode 100644
index 0000000..440c993
--- /dev/null
+++ b/views/join_form.html
@@ -0,0 +1,59 @@
+{% extends "base.html" %}
+
+{% block head %}
+	<link rel="stylesheet" href="/styles/join_common.css">
+	<link rel="stylesheet" href="/styles/join_form.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" id="applicationForm">
+		<input type="hidden" name="userId" value="{{ user_id | e }}">
+		<div class="signup__box">
+			<label class="signup__label" for="name">Name</label>
+			<p>
+				We use your username to connect you with your account later.
+				Please make sure it's spelled correclty.
+			</p>
+			<p>
+				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" name="name" required placeholder="PoopenFarten43" minlength="2" maxlength="12">
+		</div>
+		<div class="signup__box">
+			<label class="signup__label" for="preferredRole">Preferred role</label>
+			<p>
+				We are always looking ot balance our guild.
+				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" 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>
+			</select>
+		</div>
+		<div class="signup__box">
+			<label class="signup__label" for="motivation">Motivation</label>
+			<p>
+				Write us a little post about why you'd like to join our guild.
+				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" name="motivation" rows="20" placeholder="I would like to join because..."></textarea>
+		</div>
+		<div>
+			<button class="button" type="submit">Submit</button>
+		</div>
+	</form>
+{% endblock %}