Misago/misago/templates/_misago/register/form.html

{% extends "misago/base.html" %}
{% load i18n misago_capture misago_forms staticfiles %}


{% block title %}
{% trans "Register" %} | {{ block.super }}
{% endblock title %}


{% block content %}
<div class="container">

  <div class="row">
    <div class="col-md-8 col-md-offset-2">

      <div class="form-panel">
        <form method="POST" role="form" class="form-horizontal">
          {% csrf_token %}

          <div class="form-header">
            <h1>{% trans "Register new account" %}</h1>
          </div>

          {% include "misago/form_errors.html" %}

          <div class="form-body no-fieldsets">
            {% with label_class="col-md-3" field_class="col-md-9" %}

            {% for field, api_link in form.api_fields %}
            <div class="form-group has-api-validation has-feedback" data-validation-api="{% url api_link %}" data-validation-value="{{ field.name }}">
              <label class="control-label {{ label_class }}" for="{{ field.auto_id }}">{{ field.label }}:</label>
              <div class="{{ field_class }}">
                {% form_input field %}
                <span class="fa fa-asterisk form-control-feedback"></span>
                <div class="control-message hide fade">
                  <p class="help-block">
                    <strong></strong>
                  </p>
                </div>
              </div>
            </div>
            {% endfor %}

            <div class="form-group">
              <label class="control-label {{ label_class }}" >{% trans "Password strength" %}:</label>
              <div class="col-md-5 form-control-static">
                <p class="password-strength"><strong id="password-strength"></strong></p>
                <div class="progress thin">
                  <div id="password-bar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
                </div>
              </div>
            </div>

            {% if form.has_recaptcha %}
            <div class="form-group {% if form.recaptcha.errors %}has-error{% endif %}">
              <label class="control-label {{ label_class }}" for="{{ form.recaptcha.auto_id }}">{{ form.recaptcha.label }}:</label>
              <div class="{{ field_class }}">
                {{ form.recaptcha_html|safe }}
                {% if form.recaptcha.errors %}
                <div class="control-errors">
                  {% for error in form.recaptcha.errors %}
                  <p class="help-block">
                    <strong>{{ error }}</strong>
                  </p>
                  {% endfor %}
                </div>
                {% endif %}
                {% if form.recaptcha.help_text %}
                <p class="help-block">{{ form.recaptcha.help_text }}</p>
                {% endif %}
              </div>
            </div>
            {% elif form.passed_recaptcha %}
            <div class="form-group has-success">
              <label class="control-label {{ label_class }}">{{ form.recaptcha.label }}:</label>
              <div class="{{ field_class }} form-control-static text-success">
                <p>
                  <span class="fa fa-check"></span>
                  <strong>{% trans "Ok!" %}</strong>
                  {% trans "Text from image was correct!" %}
                </p>
              </div>
            </div>
            {% endif %}

            {% if form.has_qa_captcha %}
            <div class="form-group has-feedback {% if form.qa_answer.errors %}has-error{% endif %}">
              <label class="control-label {{ label_class }}" for="{{ form.qa_answer.auto_id }}">{{ form.qa_answer.label }}:</label>
              <div class="{{ field_class }}">
                {% form_input form.qa_answer %}
                <span class="fa fa-{% if form.qa_answer.errors %}times{% else%}asterisk{% endif %} form-control-feedback"></span>
                {% if form.qa_answer.errors %}
                <div class="control-errors">
                  {% for error in form.qa_answer.errors %}
                  <p class="help-block">
                    <strong>{{ error }}</strong>
                  </p>
                  {% endfor %}
                </div>
                {% endif %}
                {% if form.qa_answer.help_text %}
                <p class="help-block">{{ form.qa_answer.help_text }}</p>
                {% endif %}
              </div>
            </div>
            {% elif form.passed_qa_captcha %}
            <div class="form-group has-success">
              <label class="control-label {{ label_class }}">{{ form.qa_answer.label }}:</label>
              <div class="{{ field_class }} form-control-static text-success">
                <p>
                  <span class="fa fa-check"></span>
                  <strong>{% trans "Ok!" %}</strong>
                  {% trans "Your answer was correct!" %}
                </p>
              </div>
            </div>
            {% endif %}

            {% endwith %}
          </div>

          <div class="form-footer">
            <div class="row">
              <div class="col-md-9 col-md-offset-3">

                <button class="btn btn-primary">{% trans "Register account" %}</button>

                {% if misago_settings.terms_of_service or misago_settings.terms_of_service_link %}
                <div class="extra">
                  {% capture trimmed as tos_link %}
                  <a href="{% url 'misago:terms_of_service' %}" target="_blank">{% trans 'our terms of service' %}</a>
                  {% endcapture %}
                  <p>
                    <strong>
                      <span class="fa fa-exclamation-circle"></span>
                      {% trans "Notice:" %}
                    </strong>
                    {% blocktrans trimmed with tos=tos_link|safe %}
                    By clicking the button above you accept {{ tos }}.
                    {% endblocktrans %}
                  </p>
                </div>
                {% endif %}

              </div>
            </div>
          </div>

        </form>
      </div>

    </div>
  </div>

</div>
{% endblock content %}


{% block javascripts %}
{{ block.super }}
<script type="text/javascript">

  // Password strength
  var zxcvbn_src = "{% static "misago/js/zxcvbn.js" %}";
  var labels = ["{% trans "Very weak" %}", "{% trans "Weak" %}", "{% trans "Medium" %}", "{% trans "Good" %}", "{% trans "Strong" %}"];
  var label_styles = ["text-danger", "text-warning", "text-warning", "text-info", "text-success"];
  var bar_styles = ["progress-bar-danger", "progress-bar-warning", "progress-bar-warning", "progress-bar-info", "progress-bar-success"];

  function zxcvbn_load_hook() {
    $(function() {
      var $bar = $('#password-bar');
      var $label = $('#password-strength');

      function gradePassStrength() {
        var username = $('#id_username').val();
        var email = $('#id_email').val();
        var password = $('#id_password').val();

        var power = zxcvbn(password, [username, email]).score;

        $label.text(labels[power]);
        $label.attr('class', label_styles[power]);
        $bar.css('width', ((power + 1) * 20) + '%');
        $bar.attr('class', "progress-bar " + bar_styles[power]);
      }

      gradePassStrength();
      $('#id_password').keyup(gradePassStrength);
    });
  }

  $(function () {
    // API-based validation
    var csrf_token = $('input[name="csrfmiddlewaretoken"]').val()

    $('.has-api-validation').each(function() {
      var $control = $(this);
      var $input = $control.find('input');
      var $icon = $(this).find('.fa');
      var $control_message = $(this).find('.control-message');

      var api_url = $(this).data('validation-api');
      var api_value = $(this).data('validation-value');

      function validate() {
        var data = {csrfmiddlewaretoken: csrf_token};
        data[api_value] = $.trim($input.val());
        $.post(api_url, data, function(data, textStatus, jqXHR) {
          $control_message.find('strong').text(data.message);

          if (data.has_error) {
            $control.attr('class', 'form-group has-api-validation has-feedback has-error');
            $icon.attr('class', 'fa fa-times form-control-feedback');
            $control_message.attr('class', 'control-errors fade in')
          } else {
            $control.attr('class', 'form-group has-api-validation has-feedback has-success');
            $icon.attr('class', 'fa fa-check form-control-feedback');
            $control_message.attr('class', 'control-success fade in')
          }
        });
      }
      {% if form.is_bound %}
      validate();
      {% endif %}
      $input.keyup(validate);
    });
  });

</script>
<script type="text/javascript" src="{% static "misago/js/zxcvbn-async.js" %}"></script>
{% endblock javascripts %}