plateforme-tfjm2/registration/templates/registration/signup.html

<!-- templates/signup.html -->
{% extends 'base.html' %}
{% load crispy_forms_filters %}
{% load i18n %}
{% block title %}{% trans "Sign up" %}{% endblock %}

{% block extracss %}
    {{ student_registration_form.media }}
{% endblock %}

{% block content %}
    {% now "c" as now %}
    {% if now < TFJM.REGISTRATION_DATES.open.isoformat %}
        <div class="alert alert-warning">
            {% trans "Thank you for your great interest, but registrations are not opened yet!" %}
            {% trans "They will open on:" %} {{ TFJM.REGISTRATION_DATES.open|date:'DATETIME_FORMAT' }}.
            {% trans "Please come back at this time to register!" %}
        </div>
    {% elif now > TFJM.REGISTRATION_DATES.close.isoformat %}
        <div class="alert alert-danger">
            {% trans "Registrations are closed for this year. We hope to see you next year!" %}
            {% trans "If needed, you can contact us by mail." %}
        </div>
    {% else %}
        <form method="post">
            {% csrf_token %}
            {{ form|crispy }}
            <div id="registration_form"></div>
    
            <div class="py-2 text-muted">
                <i class="fas fa-info-circle"></i>
                {% trans "By registering, you certify that you have read and accepted our" %}
                <a href="{% url 'about' %}#politique-confidentialite">{% trans "privacy policy" %}</a>.
            </div>
    
            <button class="btn btn-success" type="submit">
                {% trans "Sign up" %}
            </button>
        </form>
    
        <div id="student_registration_form" class="d-none">
            {{ student_registration_form|crispy }}
        </div>
        <div id="coach_registration_form" class="d-none">
            {{ coach_registration_form|crispy }}
        </div>
    {% endif %}
{% endblock %}

{% block extrajavascript %}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let role_elem = document.getElementById("id_role")
            function updateView () {
                let selected_role = role_elem.options[role_elem.selectedIndex].value
                if (selected_role === "participant")
                    document.getElementById("registration_form").innerHTML = document.getElementById("student_registration_form").innerHTML
                else
                    document.getElementById("registration_form").innerHTML = document.getElementById("coach_registration_form").innerHTML
            }
            role_elem.addEventListener('change', updateView)
            updateView()
        })
    </script>
{% endblock %}