From c0d2b9eb7e2b65b582039aafdca765fe32acf81e Mon Sep 17 00:00:00 2001
From: Linnnus <linnnus@users.noreply.github.com>
Date: Sat, 27 Apr 2024 21:21:51 +0200
Subject: Flesh out 'join' user flow

This commit splits the user flow when sending in an application to join
the guild into three staged:

1. Intro text
2. HTML form
3. Form submission feedback (aka. "yay it went through")
---
 views/base.html         |  2 +-
 views/join.html         | 57 ------------------------------------------------
 views/join_form.html    | 58 +++++++++++++++++++++++++++++++++++++++++++++++++
 views/join_intro.html   | 23 ++++++++++++++++++++
 views/join_success.html | 18 +++++++++++++++
 5 files changed, 100 insertions(+), 58 deletions(-)
 delete mode 100644 views/join.html
 create mode 100644 views/join_form.html
 create mode 100644 views/join_intro.html
 create mode 100644 views/join_success.html

(limited to 'views')

diff --git a/views/base.html b/views/base.html
index 9133090..cba0c5d 100644
--- a/views/base.html
+++ b/views/base.html
@@ -14,7 +14,7 @@
 			<ul class="navbar__links" role="navigation" aria-label="Main">
 				<li><a class="navbar__location" href="/index.html">About us</a></li>
 				<li><a class="navbar__location" href="/history.html">History</a></li>
-				<li><a class="navbar__location" href="/join.html">Join</a></li>
+				<li><a class="navbar__location" href="/join_intro.html">Join</a></li>
 				<li><a class="navbar__location" href="/battle">Log in</a></li>
 			</ul>
 		</header>
diff --git a/views/join.html b/views/join.html
deleted file mode 100644
index 784019c..0000000
--- a/views/join.html
+++ /dev/null
@@ -1,57 +0,0 @@
-{% extends "base.html" %}
-
-{% 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" id="applicationForm">
-		<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="signup__submit" type="submit">Submit</button>
-		</div>
-	</form>
-{% endblock %}
\ No newline at end of file
diff --git a/views/join_form.html b/views/join_form.html
new file mode 100644
index 0000000..0e06399
--- /dev/null
+++ b/views/join_form.html
@@ -0,0 +1,58 @@
+{% 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">
+		<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 %}
diff --git a/views/join_intro.html b/views/join_intro.html
new file mode 100644
index 0000000..9ed93d5
--- /dev/null
+++ b/views/join_intro.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% block head %}
+	<link rel="stylesheet" href="/styles/join_common.css">
+{% endblock %}
+
+{% block content %}
+	<h1>Joining the Blind Guild</h1>
+	<p>
+		So you want to join the Blind Guild.
+		Be warned,
+		we are a very exclusive club
+		and we aren't actively seeking new members.
+		However, if you're a skilled player
+		and feel like you could help elevate the Blind Guild,
+		feel free to send us an application!
+	</p>
+	<p>
+		Click the button below to go to the form
+		where you can submit your application.
+	</p>
+	<a class="button" href="/join_form.html">Apply</a>
+{% endblock %}
diff --git a/views/join_success.html b/views/join_success.html
new file mode 100644
index 0000000..7e9dace
--- /dev/null
+++ b/views/join_success.html
@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+
+{% block head %}
+	<link rel="stylesheet" href="/styles/join_common.css">
+{% endblock %}
+
+{% block content %}
+	<h1>Application recieved</h1>
+	<p>
+		Your application was submitted successfully!
+		We'll review it and decide if you're cool enough to join our exclusive club.
+		Please note that it may take a few days for us to get to your application.
+	</p>
+	<p>
+		If you're accepted into our elite gang of high-tier gamers,
+		you'll receive an in-game invite to the Blind Guild.
+	</p>
+{% endblock %}
-- 
cgit v1.2.3