[Jams] Signups code is more or less done, just a few things left

7 files changed, 453 insertions, 22 deletions

diff --git a/templates/main/jams/already.html b/templates/main/jams/already.html
new file mode 100644
index 00000000..0baaf4a9
--- /dev/null
+++ b/templates/main/jams/already.html
@@ -0,0 +1,26 @@
+{% extends "main/base.html" %}
+{% block title %}Code Jams | Banned{% endblock %}
+{% block og_title %}Code Jams | Banned{% endblock %}
+
+{% block content %}
+<div class="uk-section">
+    <div class="uk-container uk-container-small">
+        <h1 class="uk-header uk-article-title">
+            Code Jam {{ jam.number }}: {{ jam.title }}
+        </h1>
+        <p class="uk-article-meta">
+            Bring the thunder!
+        </p>
+
+        <p class="uk-alert uk-alert-danger">
+            Thanks for your interest in this code jam! It looks like we already have an application here for you,
+            so please just sit back, relax, and we'll let you know whether you've been selected for this code
+            jam when the time comes.
+        </p>
+
+        <a class="uk-button uk-button-secondary uk-align-center" href="{{ url_for("main.jams.index") }}">
+            <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Back to all code jams
+        </a>
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/main/jams/banned.html b/templates/main/jams/banned.html
new file mode 100644
index 00000000..adc82fef
--- /dev/null
+++ b/templates/main/jams/banned.html
@@ -0,0 +1,44 @@
+{% extends "main/base.html" %}
+{% block title %}Code Jams | Banned{% endblock %}
+{% block og_title %}Code Jams | Banned{% endblock %}
+
+{% block content %}
+<div class="uk-section">
+    <div class="uk-container uk-container-small">
+        <h1 class="uk-header uk-article-title">
+            Code Jam {{ jam.number }}: {{ jam.title }}
+        </h1>
+        <p class="uk-article-meta">
+            Bring the thunder!
+        </p>
+
+        {% if infraction.number == -1 %}
+            <p class="uk-alert uk-alert-danger">
+                Thanks for your interest in this code jam! Unfortunately, due to your previous actions, you have been
+                permanently banned from participating in our code jams.
+                <br />
+                <br />
+                The reason given is: <span style="font-family: monospace">{{ infraction.reason }}</span>
+                <br />
+                <br />
+                If you feel that this is a mistake, please feel free to contact one of the admins on Discord.
+            </p>
+        {% else %}
+            <p class="uk-alert uk-alert-danger">
+                Thanks for your interest in this code jam! Unfortunately, due to your previous actions, you have been
+                temporarily banned from participating in our code jams.
+                <br />
+                <br />
+                The reason given is: <span style="font-family: monospace">{{ infraction.reason }}</span>
+                <br />
+                <br />
+                If you feel that this is a mistake, please feel free to contact one of the admins on Discord.
+            </p>
+        {% endif
+
+        <a class="uk-button uk-button-secondary uk-align-center" href="{{ url_for("main.jams.index") }}">
+            <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Back to all code jams
+        </a>
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/main/jams/index.html b/templates/main/jams/index.html
index a5d2a5d0..71bce999 100644
--- a/templates/main/jams/index.html
+++ b/templates/main/jams/index.html
@@ -61,7 +61,7 @@
                         Code Jam {{ jam.number }}: {{ jam.title }}
                         <span class="uk-float-right">
                             {% if jam.state == "announced" %}
-                                <a class="uk-button uk-button-primary" target="_blank" href="{{ jam.repo }}">
+                                <a class="uk-button uk-button-primary" href="{{ url_for("main.jams.join", jam=jam.number) }}">
                                     <i class="uk-icon fa-fw far fa-plus"></i> &nbsp;Join
                                 </a>
                             {% else %}
diff --git a/templates/main/jams/join.html b/templates/main/jams/join.html
new file mode 100644
index 00000000..ffa80cb5
--- /dev/null
+++ b/templates/main/jams/join.html
@@ -0,0 +1,357 @@
+{% extends "main/base.html" %}
+{% block title %}Code Jams | Join{% endblock %}
+{% block og_title %}Code Jams | Join{% endblock %}
+
+{% macro show_question(question) %}
+    <div id="div-{{ question.id }}">
+        <div class="uk-form-label">
+            {% if question.optional %}
+                <label class="uk-form-label" style="margin-top: 0" for="{{ question.id }}">
+                    <strong>{{ question.title }}</strong>
+                    <br />
+                    <span class="uk-text-meta">You may skip this question</span>
+                </label>
+            {% else %}
+                <label class="uk-form-label" style="margin-top: 0" for="{{ question.id }}">
+                    <strong>{{ question.title }}</strong>
+                    <br />
+                    <span class="uk-text-meta">This question is required</span>
+                </label>
+            {% endif %}
+        </div>
+        <div class="uk-form-controls uk-form-controls-text">
+            {% if question.type == "checkbox" %}
+                {% if question.optional %}
+                    <input class="uk-checkbox" type="checkbox" name="{{ question.id }}" id="{{ question.id }}">
+                    <label for="{{ question.id }}" style="padding-left: 0.7rem;">Confirm</label>
+                {% else %}
+                    <input class="uk-checkbox" type="checkbox" name="{{ question.id }}" id="{{ question.id }}" required>
+                    <label for="{{ question.id }}" style="padding-left: 0.7rem;">Confirm</label>
+                {% endif %}
+
+            {% elif question.type == "email" %}
+                {% if question.optional %}
+                    <input class="uk-input" type="email" name="{{ question.id }}" id="{{ question.id }}" placeholder="[email protected]">
+                {% else %}
+                    <input class="uk-input" type="email" name="{{ question.id }}" id="{{ question.id }}" placeholder="[email protected]" required>
+                {% endif %}
+
+            {% elif question.type == "number" %}
+                {% if question.optional %}
+                    <input class="uk-input" type="number" max="{{ question.data.max }}" min="{{ question.data.min }}" name="{{ question.id }}" id="{{ question.id }}" value="{{ question.data.min }}">
+                {% else %}
+                    <input class="uk-input" type="number" max="{{ question.data.max }}" min="{{ question.data.min }}" name="{{ question.id }}" id="{{ question.id }}" value="{{ question.data.min }}" required>
+                {% endif %}
+
+            {% elif question.type == "radio" %}
+                {% if question.optional %}
+                    {% for option in question.data.options %}
+                        <input class="uk-radio radio-{{ question.id }}" type="radio" name="{{ question.id }}" id="{{ question.id }}-{{ option }}" value="{{ option }}">
+                        <label style="padding-left: 0.7rem; padding-right: 1rem;" for="{{ question.id }}-{{ option }}">{{ option }}</label>
+                    {% endfor %}
+                {% else %}
+                    {% for option in question.data.options %}
+                        <input class="uk-radio radio-{{ question.id }}" type="radio" name="{{ question.id }}" id="{{ question.id }}-{{ option }}" value="{{ option }}" required>
+                        <label style="padding-left: 0.7rem; padding-right: 1rem;" for="{{ question.id }}-{{ option }}">{{ option }}</label>
+                    {% endfor %}
+                {% endif %}
+
+            {% elif question.type == "range" %}
+                <div class="uk-flex uk-flex-between">
+                    {% if question.optional %}
+                        {% for num in range(question.data.min, question.data.max + 1) %}
+                            <span>
+                                <input class="uk-radio radio-{{ question.id }}" type="radio" name="{{ question.id }}" id="{{ question.id }}-{{ num }}" value="{{ num }}">
+                                <label style="padding-left: 0.3rem;" for="{{ question.id }}-{{ num }}">{{ num }}</label>
+                            </span>
+                        {% endfor %}
+                    {% else %}
+                        {% for num in range(question.data.min, question.data.max + 1) %}
+                            <span>
+                                <input class="uk-radio radio-{{ question.id }}" type="radio" name="{{ question.id }}" id="{{ question.id }}-{{ num }}" value="{{ num }}" required>
+                                <label style="padding-left: 0.3rem;" for="{{ question.id }}-{{ num }}">{{ num }}</label>
+                            </span>
+                        {% endfor %}
+                    {% endif %}
+                </div>
+
+            {% elif question.type == "text" %}
+                {% if question.optional %}
+                    <input class="uk-input" type="text" name="{{ question.id }}" id="{{ question.id }}">
+                {% else %}
+                    <input class="uk-input" type="text" name="{{ question.id }}" id="{{ question.id }}" required>
+                {% endif %}
+
+            {% elif question.type == "textarea" %}
+                {% if question.optional %}
+                    <textarea class="uk-input uk-textarea" name="{{ question.id }}" id="{{ question.id }}" style="resize: vertical; min-height: 15rem; font-family: monospace;"></textarea>
+                {% else %}
+                    <textarea class="uk-input uk-textarea" name="{{ question.id }}" id="{{ question.id }}" style="resize: vertical; min-height: 15rem; font-family: monospace;" required></textarea>
+                {% endif %}
+
+            {% elif question.type == "slider" %}
+                <div class="uk-flex uk-flex-between">
+                    <label class="uk-label" style="margin-right: 1rem;" for="{{ question.id }}" id="{{ question.id }}-slider-value">{{ question.data.min }}</label>
+                    <input class="uk-range range-slider" name="{{ question.id }}" id="{{ question.id }}" min="{{ question.data.min }}" max="{{ question.data.max }}" step="1" value="{{ question.data.min }}" type="range">
+                </div>
+
+            {% endif %}
+        </div>
+    </div>
+{% endmacro %}
+
+{% block content %}
+<div class="uk-section">
+    <div class="uk-container uk-container-small">
+        <h1 class="uk-header uk-article-title">
+            Code Jam {{ jam.number }}: {{ jam.title }}
+        </h1>
+        <p class="uk-article-meta">
+            Bring the thunder!
+        </p>
+        <p>
+            Please fill out the form below to apply for this code jam. Once you've submitted your application and the
+            application window has closed, we'll review it and let you know whether you've been entered!
+        </p>
+        <p>
+            Please note that you will not be able to edit your application after you've submitted it.
+        </p>
+        <hr class="uk-divider-icon" />
+
+        {% if jam.state != "announced" %}
+            <p class="uk-alert uk-alert-primary">
+                Unfortunately, we're not accepting applications for this code jam right now - but we appreciate your
+                interest. Keep an eye on <code>#announcements</code> on Discord for information on the next jam!
+            </p>
+        {% else %}
+            <form action="{{ url_for("main.jams.join", jam=jam.number) }}" method="post" class="uk-form-horizontal">
+                {% for question in questions %}
+                    {{ show_question(question) }}
+                    <br />
+                {% endfor %}
+                <br />
+
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+
+                <div class="uk-text-center">
+                    <a class="uk-button uk-button-default" href="{{ url_for("main.jams.index") }}">
+                        <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Back
+                    </a>
+                    <button type="submit" class="uk-button uk-button-primary" name="submit" id="submit" disabled>
+                        <i class="uk-icon fa-fw far fa-check"></i> &nbsp;Apply
+                    </button>
+                </div>
+            </form>
+
+        {% endif %}
+    </div>
+</div>
+
+<script type="application/javascript">
+    "use strict";
+
+    // noinspection JSAnnotator (It thinks I'm not assigning this for some reason)
+    const questions = {{ questions | tojson }};
+    const button = document.getElementById("submit");
+
+    function validateEmail(email) {
+        let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test(String(email).toLowerCase());
+    }
+
+    function isNum(value) {
+        return !isNaN(parseInt(value));
+    }
+
+    function checkInputs() {
+        let input, inputs, div;
+        let disabled = false;
+
+        for (let question of questions) {
+            div = document.getElementById("div-" + question.id);
+
+            switch (question.type) {
+                case "checkbox":
+                    if (!question.optional) {
+                        let input = document.getElementById(question.id);
+
+                        if (!input.checked) {
+                            disabled = true;
+                            div.classList.add("danger-input");
+                        } else {
+                            div.classList.remove("danger-input");
+                        }
+                    }
+                    break;
+                case "email":
+                    input = document.getElementById(question.id);
+
+                    if (!question.optional || input.value.length > 0) {
+                        if (input.value.length < 5 || !validateEmail(input.value)) {
+                            disabled = true;
+                            div.classList.add("danger-input");
+                        } else {
+                            div.classList.remove("danger-input");
+                        }
+                    } else {
+                        div.classList.remove("danger-input");
+                    }
+                    break;
+                case "number":
+                    input = document.getElementById(question.id);
+
+                    if (!question.optional || input.value.length > 0) {
+                        if (input.value.length < 1 || !isNum(input.value)) {
+                            disabled = true;
+                            div.classList.add("danger-input");
+                        } else {
+                            let val = parseInt(input.value);
+
+                            if (val < question.data.min || val > question.data.max) {
+                                disabled = true;
+                                div.classList.add("danger-input");
+                            } else {
+                                div.classList.remove("danger-input");
+                            }
+                        }
+                    }
+                    break;
+                case "radio":
+                    if (! question.optional) {
+                        inputs = document.getElementsByClassName("radio-" + question.id);
+                        let selected = null;
+
+                        for (let inner of inputs) {
+                            if (inner.checked) {
+                                selected = inner;
+                            }
+                        }
+
+                        if (selected === null) {
+                            disabled = true;
+                            div.classList.add("danger-input");
+                        } else {
+                            div.classList.remove("danger-input");
+                        }
+                    }
+
+                    break;
+                case "range":
+                    if (! question.optional) {
+                        inputs = document.getElementsByClassName("radio-" + question.id);
+                        let selected = null;
+
+                        for (let inner of inputs) {
+                            if (inner.checked) {
+                                selected = inner;
+                            }
+                        }
+
+                        if (selected === null) {
+                            disabled = true;
+
+                            div.classList.add("danger-input");
+                        } else {
+                            div.classList.remove("danger-input");
+                        }
+                    }
+
+                    break;
+                case "text":
+                    if (!question.optional) {
+                        input = document.getElementById(question.id);
+
+                        if (input.value.length < 1) {
+                            disabled = true;
+                            div.classList.add("danger-input");
+                        } else {
+                            div.classList.remove("danger-input");
+                        }
+                    }
+
+                    break;
+                case "textarea":
+                    if (!question.optional) {
+                        input = document.getElementById(question.id);
+
+                        if (input.value.length < 1) {
+                            disabled = true;
+                            div.classList.add("danger-input");
+                        } else {
+                            div.classList.remove("danger-input");
+                        }
+                    }
+
+                    break;
+                case "slider":
+                    break;
+            }
+        }
+
+        button.disabled = disabled;
+    }
+
+    function setUpChecks() {
+        let input, inputs, label;
+
+        for (let question of questions) {
+            switch (question.type) {
+                case "checkbox":
+                    input = document.getElementById(question.id);
+                    input.onchange = checkInputs;
+
+                    break;
+                case "email":
+                    input = document.getElementById(question.id);
+                    input.oninput = checkInputs;
+
+                    break;
+                case "number":
+                    input = document.getElementById(question.id);
+                    input.oninput = checkInputs;
+                    input.onchange = checkInputs;
+
+                    break;
+                case "radio":
+                    inputs = document.getElementsByClassName("radio-" + question.id);
+
+                    for (let inner of inputs) {
+                        inner.onchange = checkInputs;
+                    }
+
+                    break;
+                case "range":
+                    inputs = document.getElementsByClassName("radio-" + question.id);
+
+                    for (let inner of inputs) {
+                        inner.onchange = checkInputs;
+                    }
+
+                    break;
+                case "text":
+                    input = document.getElementById(question.id);
+                    input.oninput = checkInputs;
+
+                    break;
+                case "textarea":
+                    input = document.getElementById(question.id);
+                    input.oninput = checkInputs;
+
+                    break;
+                case "slider":
+                    input = document.getElementById(question.id);
+                    label = document.getElementById(question.id + "-slider-value");
+
+                    input.oninput = function() {
+                        label.textContent = this.value;
+                        checkInputs();
+                    };
+                    break;
+            }
+        }
+    }
+
+    setUpChecks();
+    checkInputs();
+</script>
+{% endblock %}
diff --git a/templates/main/jams/signup.html b/templates/main/jams/signup.html
deleted file mode 100644
index ddb48733..00000000
--- a/templates/main/jams/signup.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{% extends "main/base.html" %}
-{% block title %}Home{% endblock %}
-{% block og_title %}Home{% endblock %}
-{% block content %}
-<div class="uk-section">
-    <div class="uk-container uk-container-small uk-text-center">
-        <h1 class="uk-header">
-            Sign Up
-        </h1>
-        <p class="uk-article-meta">
-            # TODO
-        </p>
-    </div>
-</div>
-{% endblock %}
diff --git a/templates/main/jams/thanks.html b/templates/main/jams/thanks.html
new file mode 100644
index 00000000..e6709485
--- /dev/null
+++ b/templates/main/jams/thanks.html
@@ -0,0 +1,25 @@
+{% extends "main/base.html" %}
+{% block title %}Code Jams | Banned{% endblock %}
+{% block og_title %}Code Jams | Banned{% endblock %}
+
+{% block content %}
+<div class="uk-section">
+    <div class="uk-container uk-container-small">
+        <h1 class="uk-header uk-article-title">
+            Code Jam {{ jam.number }}: {{ jam.title }}
+        </h1>
+        <p class="uk-article-meta">
+            Bring the thunder!
+        </p>
+
+        <p class="uk-alert uk-alert-success">
+            Thanks for your application! Just sit back, relax, and we'll let you know whether you've been selected
+            for this code jam when the time comes.
+        </p>
+
+        <a class="uk-button uk-button-secondary uk-align-center" href="{{ url_for("main.jams.index") }}">
+            <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Back to all code jams
+        </a>
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/main/navigation.html b/templates/main/navigation.html
index 391bbcf5..4e2ed369 100644
--- a/templates/main/navigation.html
+++ b/templates/main/navigation.html
@@ -107,12 +107,6 @@
                                 <li><a href="{{ url_for('main.jams.index') }}">Info</a></li>
                             {% endif %}
 
-                            {% if current_page == "main.jams.signup" %}
-                                <li class="uk-active"><a href="{{ url_for('main.jams.signup') }}">Sign Up</a></li>
-                            {% else %}
-                                <li><a href="{{ url_for('main.jams.signup') }}">Sign Up</a></li>
-                            {% endif %}
-
                             <li class="uk-nav-divider"></li>
 
                             {% if current_page.startswith("main.about.privacy") %}