NDOJ/templates/registration/registration_form.html

{% extends "base.html" %}

{% block media %}
    {% include "timezone/media-css.html" %}
    {{ form.media.css }}
    <style>
        #content-body {
            text-align: center;
        }
    </style>
{% endblock %}

{% block js_media %}
    {% include "timezone/media-js.html" %}
    {{ form.media.js }}
    <script type="text/javascript">
        $(function () {
            $('.pass-req-link').click(function () {
                $('.pass-req').toggle('fast');
                return false;
            });
        });
    </script>
    {% if form.captcha %}
        {{ recaptcha_init(LANGUAGE_CODE) }}
    {% endif %}
{% endblock %}

{% block body %}
    <div id="center-float" class="registration-form">
        <form id="edit-form" action="" method="post" class="form-area">
            {% csrf_token %}

            <div class="block-header">{{ _('Username') }}</div>
            <span class="fullwidth{% if form.username.errors %}-error{% endif %}">{{ form.username }}</span>
            {% if form.username.errors %}
                <div class="form-field-error">{{ form.username.errors }}</div>
            {% endif %}

            <div class="block-header">{{ _('Email') }}</div>
            <span class="fullwidth{% if form.email.errors %}-error{% endif %}">{{ form.email }}</span>
            {% if form.email.errors %}
                <div class="form-field-error">{{ form.email.errors }}</div>
            {% endif %}

            <div class="block-header">{{ _('Password') -}}
                <small>(<a href="#" class="pass-req-link">?</a>)</small>
            </div>
            <div style="display: none" class="pass-req alert alert-info">
                <ul>
                    {% for validator in password_validators %}
                        <li>{{ validator.get_help_text() }}</li>
                    {% endfor %}
                </ul>
            </div>
            <span class="fullwidth{% if form.password1.errors %}-error{% endif %}">{{ form.password1 }}</span>
            {% if form.password1.errors %}
                <div class="form-field-error">{{ form.password1.errors }}</div>
            {% endif %}
            <div class="block-header">{{ _('Password') }}<sup style="font-size: 0.7em;padding-left: 0.2em;">2</sup>{# -#}
                <small>{{ _('(again, for confirmation)') }}</small>
            </div>
            <span class="fullwidth{% if form.password2.errors %}-error{% endif %}">{{ form.password2 }}</span>
            {% if form.password2.errors %}
                <div class="form-field-error">{{ form.password2.errors }}</div>
            {% endif %}

            <div class="block-header">{{ _('Timezone') }}<small>{{ _('(select your closest major city)') }}</small></div>
            <div class="fullwidth">
                <div>{{ form.timezone }}
                    <div style="float: right">
                        {{ _('or') }}
                        <a id="open-map" href="#" data-featherlight=".map-wrap">{{ _('pick from map') }}</a>
                    </div>
                </div>
            </div>

            <div class="block-header">{{ _('Default language') }}</div>
            <span class="fullwidth">{{ form.language }}</span>

            <div class="block-header">{{ _('Affiliated organizations') }}</div>
            {{ form.organizations }}
            {% if form.organizations.errors %}
                <div class="form-field-error">{{ form.organizations.errors }}</div>
            {% endif %}

            {% if form.newsletter %}
                <div style="padding-top: 0.5em;">{{ form.newsletter }}
                    <label for="id_newsletter" style="float: unset;"
                           class="inline-header grayed">{{ _('Notify me about upcoming contests') }}</label>
                </div>
            {% endif %}

            {% if form.captcha %}
                <div style="margin-top: 0.5em">{{ form.captcha }}</div>
                {% if form.captcha.errors %}
                    <div class="form-field-error">{{ form.captcha.errors }}</div>
                {% endif %}
            {% endif %}

            <hr>
            {% if tos_url %}
                <span class="tos-section">
                    {{ _('By registering, you agree to our') }}
                    <a href="{{ tos_url }}">{{ _('Terms & Conditions') }}</a>.
                </span>
            {% endif %}
            <button style="float:right;" type="submit">{{ _('Register!') }}</button>
        </form>
    </div>

    <div class="map-wrap registration-form">
        <div class="map-inset">
            <div class="map-axis-x"></div>
            <div class="map-axis-y"></div>
        </div>
    </div>
{% endblock %}