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")

9 files changed, 143 insertions, 61 deletions

diff --git a/app.py b/app.py
index c64c280..de7a1d3 100644
--- a/app.py
+++ b/app.py
@@ -43,11 +43,15 @@ def callback():
 
     return f'Access token: {token_response.get("access_token")}'
 
[email protected]("/join.html")
[email protected]("/join_intro.html")
+def join_intro():
+    return template("join_intro")
+
[email protected]("/join_form.html")
 def join_form():
-    return template("join")
+    return template("join_form")
 
[email protected]("/join.html", method="POST")
[email protected]("/join_form.html", method="POST")
 def join_submission(db):
     name = request.forms.get("name")
     preferred_role = request.forms.get("preferredRole")
@@ -64,6 +68,8 @@ def join_submission(db):
 
     db.execute(f"INSERT INTO applications(name, role, motivation) VALUES ({name}, {preferred_role}, {motivation})")
 
+    return template("join_success")
+
 @app.route("/<type:re:styles|images>/<filename>")
 def server_static(type, filename):
     return static_file(filename, root=f"./static/{type}/")
diff --git a/static/styles/base.css b/static/styles/base.css
index f9b1ae6..2ae562e 100644
--- a/static/styles/base.css
+++ b/static/styles/base.css
@@ -60,3 +60,14 @@ footer {
 	font-size: small;
 	margin: 1rem;
 }
+
+/* Chill link styling */
+a {
+	/* dark and twisted color, lighter for contrast */
+	color: #a27d7d;
+	text-decoration: underline;
+}
+
+a:visited {
+	color: inherit;
+}
diff --git a/static/styles/join.css b/static/styles/join.css
deleted file mode 100644
index f958aad..0000000
--- a/static/styles/join.css
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * This file contains styles specific to the "join" view. The corresponding
- * HTML/template file is `views/join.html`.
- */
-
-main {
-	width: 100%;
-	max-width: 500px;
-	margin: 2rem auto;
-}
-
-.signup {
-
-}
-
-.signup__box {
-	margin-bottom: 1reM;
-}
-
-.signup__label {
-	font-weight: bold;
-}
-
-.signup__input {
-	width: 100%;
-	padding: .5rem;
-	border-radius: 5px;
-}
-
-textarea.signup__input {
-	/* Remove UA's default monospace font */
-	font-family: inherit;
-
-	/* Horizontal resizing totally breaks our layout :( */
-	resize: vertical;
-}
-
-.signup__submit {
-	/* Horizontally center the element */
-	display: block;
-	margin-inline: auto;
-
-	/* Make it look dark and twisted */
-	background-color: #6e1818;
-	color: white;
-	border: none;
-	border-radius: 500px;
-	padding: 1rem;
-	font-size: large;
-}
-
-/* The usual dimming effect makes interaction feel more tactile */
-.signup__submit:hover { filter: brightness(90%); }
-.signup__submit:active { filter: brightness(60%); }
\ No newline at end of file
diff --git a/static/styles/join_common.css b/static/styles/join_common.css
new file mode 100644
index 0000000..93bdb1d
--- /dev/null
+++ b/static/styles/join_common.css
@@ -0,0 +1,44 @@
+/*
+ * This file contains styles specific to the "join" views. There are a couple
+ * of views which are all part of the same user flow and reuse some styles. The
+ * corresponding HTML/template files are `views/join_*.html`.
+ */
+
+main {
+	/* Center align and keep width readable. */
+	width: 100%;
+	max-width: 500px;
+	margin: 2rem auto;
+
+}
+
+/* Some pages are text heavy. Keep a nice line distance. */
+p { line-height: 1.5; }
+
+.button {
+	/* Horizontally center the element */
+	display: block;
+	margin-inline: auto;
+
+	/* Make it look dark and twisted */
+	background-color: #6e1818;
+	color: white;
+	border: none;
+	border-radius: 500px;
+	padding: 1rem;
+	font-size: large;
+}
+
+/* The usual dimming effect makes interaction feel more tactile */
+.button:hover { filter: brightness(90%); }
+.button:active { filter: brightness(60%); }
+
+/* We use button-styles anchor-tags to preserve HTML semantics. */
+a.button {
+	/* Remove link styling */
+	color: inherit;
+	text-decoration: none;
+
+	/* Inline elements expand by default. */
+	width: fit-content;
+}
diff --git a/static/styles/join_form.css b/static/styles/join_form.css
new file mode 100644
index 0000000..f4ba0f1
--- /dev/null
+++ b/static/styles/join_form.css
@@ -0,0 +1,33 @@
+/*
+ * This file contains styles specific to the "join_form" view. The corresponding
+ * HTML/template file is `views/join_form.html`.
+ *
+ * See also the file `static/styles/join_common.css` which contains some styles
+ * which are reused among the "join_" group of views.
+ */
+
+.signup {
+
+}
+
+.signup__box {
+	margin-bottom: 1reM;
+}
+
+.signup__label {
+	font-weight: bold;
+}
+
+.signup__input {
+	width: 100%;
+	padding: .5rem;
+	border-radius: 5px;
+}
+
+textarea.signup__input {
+	/* Remove UA's default monospace font */
+	font-family: inherit;
+
+	/* Horizontal resizing totally breaks our layout :( */
+	resize: vertical;
+}
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_form.html
index 784019c..0e06399 100644
--- a/views/join.html
+++ b/views/join_form.html
@@ -1,7 +1,8 @@
 {% extends "base.html" %}
 
 {% block head %}
-	<link rel="stylesheet" href="/styles/join.css">
+	<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) => {
@@ -51,7 +52,7 @@
 			<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>
+			<button class="button" type="submit">Submit</button>
 		</div>
 	</form>
-{% endblock %}
\ No newline at end of file
+{% 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 %}