workstand/bikeshop_project/registration/templates/member_form.html

{% extends 'dashboard.html' %}
{% load staticfiles %}

{% block scripts %}
    <script src="{% static 'vendor/moment/min/moment.min.js' %}"></script>
    <script>
    dateOfBirthInput = document.getElementById('{{ form.date_of_birth.id_for_label }}');

    dateOfBirthInput.addEventListener('blur', function(event) {
        var input = event.target;
        input.parentNode.classList.add('is-dirty');

        var threshold = moment.duration(18, 'years');
        var dob = moment(input.value, 'YYYY-MM-DD');

        if (dob.add(threshold).isAfter(moment())) {
            document.getElementById('{{ form.guardian_name.id_for_label }}').disabled = false;
            document.getElementById('{{ form.guardian_name.id_for_label }}').required = true;
            document.getElementById('{{ form.guardian_name.id_for_label }}').parentNode.classList.remove('is-disabled');
        } else {
            document.getElementById('{{ form.guardian_name.id_for_label }}').disabled = true;
            document.getElementById('{{ form.guardian_name.id_for_label }}').parentNode.classList.add('is-disabled');
        }
    });

    var waiverCheckBox = document.getElementById('{{ form.waiver_substitute.id_for_label }}');
    var submitButton = document.getElementById('submit');
    var form = document.getElementsByTagName('form')[0];
    var inputs = Array.prototype.slice.call(document.getElementsByTagName('input'));

    for (var anInput of inputs) {
      anInput.addEventListener('change', function() {
        submitButton.disabled = !form.checkValidity()
      })
    }

    var requiredCheckboxes = function() {
        return waiverCheckBox.checked;
    };

    waiverCheckBox.addEventListener('change', function() {
        if (requiredCheckboxes()) {
            submitButton.disabled = false;
        }
        else {
            submitButton.disabled = true;
        }
    });

    // On page load check on the check boxes
    if (requiredCheckboxes()) {
        submitButton.disabled = false;
    }

    </script>
{% endblock %}

{% block content %}
    <div id="member-form" class="mdl-cell mdl-cell--8-col">
        <h1>New Contact</h1>
        <p>
            The Bridge City Bicycle Co-operative (herein referred to as The BCBC and The Community) is a nonprofit,
            community bicycle repair education and resource co-operative. We offer our members nonjudgmental repair
            space, tools and instruction during business hours (hours on website) by donation, and educational
            workshops. We also offer reconditioned/recycled low cost bikes and parts for sale.
            The BCBC is operated by volunteers; a medley of professionals, students, bike enthusiasts, activists,
            and other community members who share a love for cycling in Saskatoon. Membership is open to all
            individuals and costs $20 per year. A receipt will be issued to you once your membership fee has been paid.
        </p>
        <form method="post">
        {% csrf_token %}

        {% if form.non_field_errors %}
            <div>
            {% for errors in form.non_field_errors %}
                <span class="mdl-textfield__error">{{ error }}</span>
            {% endfor %}
            </div>
        {% endif %}
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.email.errors %}is-invalid{% endif %}">
            {{ form.email }}
            <label class="mdl-textfield__label" for="{{ form.email.id_for_label }}">{{ form.email.label }}</label>
            {% if form.email.errors %}
            <span class="mdl-textfield__error">{{ form.email.errors }}</span>
            {% else %}
            <span class="mdl-textfield__error">Invalid email.</span>
            {% endif %}
        </div>
        <div>
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="{{ form.email_consent.id_for_label }}">
                {{ form.email_consent }}
                <span class="mdl-checkbox__label">{{ form.email_consent.label }}</span>
            </label>
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.first_name.errors %}is-invalid{% endif %}">
            {{ form.first_name }}
            <label class="mdl-textfield__label" for="{{ form.first_name.id_for_label }}">{{ form.first_name.label }}{% if form.first_name.field.required %} <sup>*</sup>{% endif %}</label>
            {% if form.first_name.errors %}
            <span class="mdl-textfield__error">{{ form.first_name.errors }}</span>
            {% else %}
            <span class="mdl-textfield__error">Name too long.</span>
            {% endif %}
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.last_name.errors %}is-invalid{% endif %}">
            {{ form.last_name }}
            <label class="mdl-textfield__label" for="{{ form.last_name.id_for_label }}">{{ form.last_name.label }}{% if form.last_name.field.required %} <sup>*</sup>{% endif %}</label>
            {% if form.last_name.errors %}
            <span class="mdl-textfield__error">{{ form.last_name.errors }}</span>
            {% else %}
            <span class="mdl-textfield__error">Name too long.</span>
            {% endif %}
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.preferred_name.errors %}is-invalid{% endif %}">
            {{ form.preferred_name }}
            <label class="mdl-textfield__label" for="{{ form.preferred_name.id_for_label }}">{{ form.preferred_name.label }}</label>
            {% if form.preferred_name.errors %}
            <span class="mdl-textfield__error">{{ form.preferred_name.errors }}</span>
            {% else %}
            <span class="mdl-textfield__error">Name too long.</span>
            {% endif %}
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.date_of_birth.errors %}is-invalid{% endif %}">
            {{ form.date_of_birth }}
            <label class="mdl-textfield__label" for="{{ form.date_of_birth.id_for_label }}">{{ form.date_of_birth.label }}</label>
            {% if form.date_of_birth.errors %}
            <span class="mdl-textfield__error">{{ form.date_of_birth.errors }}</span>
            {% else %}
            <span class="mdl-textfield__error">Incorrect date.</span>
            {% endif %}
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.guardian_name.errors %}is-invalid{% endif %}">
            {{ form.guardian_name }}
            <label class="mdl-textfield__label" for="{{ form.guardian_name.id_for_label }}">{{ form.guardian_name.label }}</label>
            {% if form.guardian_name.errors %}
            <span class="mdl-textfield__error">{{ form.guardian_name.errors }}</span>
            {% else %}
            <span class="mdl-textfield__error">Name too long.</span>
            {% endif %}
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.phone.errors %}is-invalid{% endif %}">
            {{ form.phone }}
            <label class="mdl-textfield__label" for="{{ form.phone.id_for_label }}">{{ form.phone.label }}</label>
            {% if form.phone.errors %}
            <span class="mdl-textfield__error">{{ form.phone.errors }}</span>
            {% else %}
            <span class="mdl-textfield__error">Digits only.</span>
            {% endif %}
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.post_code.errors %}is-invalid{% endif %}">
            {{ form.post_code }}
            <label class="mdl-textfield__label" for="{{ form.post_code.id_for_label }}">{{ form.post_code.label }}{% if form.post_code.field.required %} <sup>*</sup>{% endif %}</label>
            {% if form.post_code.errors %}
            <span class="mdl-textfield__error">{{ form.post_code.errors }}</span>
            {% else %}
            <span class="mdl-textfield__error">Format: A0A 0A0</span>
            {% endif %}
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.street.errors %}is-invalid{% endif %}">
            {{ form.street }}
            <label class="mdl-textfield__label" for="{{ form.street.id_for_label }}">{{ form.street.label }}</label>
            {% if form.street.errors %}
            <span class="mdl-textfield__error">{{ form.street.errors }}</span>
            {% endif %}
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.city.errors %}is-invalid{% endif %}">
            {{ form.city }}
            <label class="mdl-textfield__label" for="{{ form.city.id_for_label }}">{{ form.city.label }}</label>
            {% if form.city.errors %}
            <span class="mdl-textfield__error">{{ form.city.errors }}</span>
            {% endif %}
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.province.errors %}is-invalid{% endif %}">
            {{ form.province }}
            <label class="mdl-textfield__label" for="{{ form.province.id_for_label }}">{{ form.province.label }}</label>
            {% if form.province.errors %}
            <span class="mdl-textfield__error">{{ form.province.errors }}</span>
            {% endif %}
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.country.errors %}is-invalid{% endif %}">
            {{ form.country }}
            <label class="mdl-textfield__label" for="{{ form.country.id_for_label }}">{{ form.country.label }}</label>
            {% if form.country.errors %}
            <span class="mdl-textfield__error">{{ form.country.errors }}</span>
            {% endif %}
        </div>

         <div class="">
            <h6 class="template__header mdl-typography--title">Liability Waiver</h6>
            <p><strong>Children under the age of 18 must have a parent or guardian co-sign the following waiver form.
                <br>Children under the age of 13 must have guardian supervision when participating in BCBC activities and events.</strong></p>
             <p>By signing this form in the space provided below, I hereby assume all of the risks of participating and/or volunteering in the Bridge City Bicycle Co-operative, hereinafter referred to as the BCBC and the Community. I realize that liability may arise from negligence or carelessness on the part of the persons or entities being released, from dangerous or defective equipment or property owned, maintained or controlled by them or because of their possible liability without fault. I acknowledge that this Accident Waiver and Release of Liability form will be used by the Community, sponsors and organizers, in which I may participate and that it will govern my actions and responsibilities during my use of its services. In consideration of my application and permitting me to participate in this program, I hereby take action for myself, my executors, administrators, heirs, next of kin, successors, and assigns as follows:</p>
             <p>(A) Waive, Release and Discharge from any and all liability for my death, disability, personal injury, property damage, property theft or actions of any kind which may hereafter accrue to me including my travelling to and from space or using the shop's bicycle, equipment or other facilities, THE FOLLOWING ENTITIES OR PERSONS: The directors, officers, employees, volunteers, representatives, and agents, the event holders, sponsors, volunteers of the Community;</p>
             <p>(B) Indemnify and Hold Harmless the entities and persons set forth in (A) above from any and all liabilities and claims arising from my participation in the Community, including my use of a bicycle belonging to the Community, irrespective of whether the cause of the claims or liability arise from the negligence, acts or omissions of me, a third party, or the Community.</p>

            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="{{ form.waiver_substitute.id_for_label }}">
                {{ form.waiver_substitute }}
                <span class="mdl-checkbox__label">{{ form.waiver_substitute.label }}</span>
            </label>
        </div>
        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--12-col">
                <button disabled id="submit" type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">Submit</button>
            </div>
        </div>
        </form>
    </div>
{% endblock %}