Software Público Brasileiro

{% extends "base.html" %}
{% load i18n gravatar plugins widgets_tag %}

{% block title %}Atualizar perfil - SPB{% endblock %}

{% block html %}
   {% import_widgets 'profile' %}
   {{ block.super }}
{% endblock %}

{% block head_js %}
  {% for widget in widgets_profile %}
      {{widget.get_header}}
  {% endfor %}
<script>
$(function() {

  $('#add-email').on('click', function(event) {
    $.ajax({
      url: "{% url 'archive_email_view' %}",
      type: 'post',
      data: { email: $('#new_email').val(), user: '{{ user_.pk }}' },
      beforeSend: function(xhr, settings) {
        xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
      }
    }).done(function() {
      location.reload();
    });

    event.preventDefault();
  });

  $('#new_email').on('keypress', function(event) {
    if (event.which == 13) {
      event.preventDefault();
      $('#add-email').trigger('click');
    }
  });

  $('.delete-email').on('click', function(event) {
    var $email_block = $(event.target).parent().parent();
    $.ajax({
      url: "{% url 'archive_email_view' %}",
      type: 'delete',
      data: {
        email: $('.email-address', $email_block).text(),
        user: '{{ user_.pk }}'
      },
      context: $email_block[0],
      beforeSend: function(xhr, settings) {
        xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
      }
    }).done(function() {
        $(this).remove();
    });

    event.preventDefault();
  });

  $('.verify-email').on('click', function(event) {
    var $email_block = $(event.target).parent().parent();
    $.ajax({
      url: "{% url 'archive_email_validation_view' %}",
      type: 'post',
      data: {
        email: $('.email-address', $email_block).text(),
        user: '{{ user_.pk }}'
      },
      context: $email_block[0],
      beforeSend: function(xhr, settings) {
        xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
      }
    }).done(function() {
      var email = $('.email-address', $(this)).text();
      var msg = '{% trans "We sent a verification email to " %}' + email + '. ' +
                '{% trans "Please follow the instructions in it." %}';
      $('#alert-message').text(msg);
      $('#alert-js').removeClass('alert-warning').addClass('alert-success');
      $('#alert-js').show();
      window.scroll(0, 0);
      $('.verify-email').button('reset');
    });

    event.preventDefault();
  });

  $('.set-primary').on('click', function(event) {
    var $email_block = $(event.target).parent().parent();
    $.ajax({
      url: "{% url 'archive_email_view' %}",
      type: 'update',
      data: {
        email: $('.email-address', $email_block).text(),
        user: '{{ user_.pk }}'
      },
      beforeSend: function(xhr, settings) {
        xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
      }
    }).done(function() {
      location.reload();
    });

    event.preventDefault();
  });

  // User feedbacks
  $('.panel-default').on('click', '.set-primary, .verify-email, .delete-email', function() {
    $(this).button('loading');
  });

  // Active profile bars
  active = function (identifier){
      $('#navbar li').each(function(index,value){
        $(this).removeClass('active');
      })
      $(identifier).addClass('active');
      $('#profile_content .profile_item').each(function(index,value){
        $(this).addClass('hidden');
      })
      $(identifier+'-content').removeClass('hidden');
  }
  if (location.hash != '') active(location.hash)
});
</script>
{% endblock %}

{% block main-content %}

  <div class="col-lg-12">
    {% with user_.first_name as firstname %}
    <h2>{% trans 'profile information'|title %}</h2>
    {% endwith %}

    <h3>{% gravatar user_.email 50 %} {{ user_.get_full_name }} ({{ user_.username }})</h3>
    <a href="https://gravatar.com" target="_blank">
      {% trans "Change your avatar at Gravatar.com" %}
    </a>
  </div>
  <br>
  <br>

  <style type="text/css">
    .tab-pane{
      border: 1px solid #DDD;
      border-top: none;
      padding: 10px;
    }

    .nav-tabs a:focus {
       outline: none;
    }
  </style>

  {% if widgets_profile %}
      <ul id='navbar' class="nav nav-tabs">
          <li  id='colab_profile' class='active' role="presentation"><a href="#colab_profile" onclick="active('#colab_profile')">{% trans 'Colab Profile' %}</a></li>
      {% for widget in widgets_profile %}
      <li id='{{widget.identifier}}' role="presentation"><a href="#{{widget.identifier}}" onclick="active('#{{widget.identifier}}')">{{widget.name}}</a></li>
      {% endfor %}
      </ul>
  {% endif %}

  <div id='profile_content'>
      <div class='profile_item' id='colab_profile-content'>
          <form method="post">
            {% csrf_token %}

            <input type='hidden' name='colab_form' value='true'>
            <div class="row">
              <div class="col-lg-8 col-md-7 col-sm-12 col-xm-12">
                {% for field in form %}
                <div class="col-lg-6 col-md-6 col-sm-12 col-xm-12">
                  <div class="form-group{% if field.field.required %} required{% endif %}{% if field.errors %} alert alert-danger has-error{% endif %}">
                    <label for="{{ field.name }}" class="control-label">
                      {{ field.label }}
                    </label>
                    {{ field }}
                    {{ field.errors }}
                  </div>
                </div>
                {% endfor %}
              </div>

              <div class="col-lg-4 col-md-5 col-sm-12 col-xm-12">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">{% trans "Emails" %}</h3>
                  </div>
                  <div class="panel-body">
                    <ul class="unstyled-list emails">
                    {% for email in user_.emails.iterator %}
                      <li>
                        {% gravatar user_.email 30 %}
                        <span class="email-address">{{ email.address }}</span>
                        {% if email.address == user_.email %}
                          <span class="label label-success">{% trans "Primary" %}</span>
                        {% else %}
                          <div class="text-right">
                            <button class="btn btn-default set-primary" data-loading-text="{% trans 'Setting...' %}">{% trans "Set as Primary" %}</button>
                            <button class="btn btn-danger delete-email" data-loading-text="{% trans 'Deleting...' %}">{% trans "Delete" %}</button>
                          </div>
                        {% endif %}
                        <hr />
                      </li>
                    {% endfor %}
                    {% for email in user_.emails_not_validated.iterator %}
                      <li>
                        {% gravatar user_.email 30 %}
                        <span class="email-address">{{ email.address }}</span>
                        <div class="text-right">
                          <button class="btn btn-default verify-email" data-loading-text="{% trans 'Sending verification...' %}"><span class="icon-warning-sign"></span> {% trans "Verify" %}</button>
                          <button class="btn btn-danger delete-email">{% trans "Delete" %}</button>
                        </div>
                        <hr />
                      </li>
                    {% endfor %}
                    </ul>
                    <div class="form-group">
                      <label for="new_email">{% trans "Add another email address:" %}</label>
                      <input id="new_email" name="new_email" class="form-control" autocomplete="off" />
                    </div>
                    <button class="btn btn-primary pull-right" id="add-email">{% trans "Add" %}</button>
                  </div>
                </div>
              </div>
              <div id="password_container" class="col-lg-4 col-md-5 col-sm-12 col-xm-12">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">
                      {% trans 'Change Password' %}
                    </h3>
                  </div>
                  <div class="panel-body">
                    <a href="{% url 'password_change' %}" class="btn btn-default btn-primary pull-right btn-block">{% trans "Change Password" %}</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="links-group">
                  <button type="submit" class="btn btn-primary btn-lg" expanded="false">{% trans "Update" %}</button>
                  <a href="{% url 'user_profile' user %}" class="btn btn-default btn-lg" role="button">{% trans "Go to profile panel" %}</a>
                </div>
              </div>
            </div>
          </form>
        </div>

      {% for widget in widgets_profile %}
        <div id='{{widget.identifier}}-content' class='profile_item hidden'>
          {{widget.get_body}}
        </div>
      {% endfor %}
  </div>

{% endblock %}