index.html

{% extends "saas/base_dashboard.html" %}

<!-- Dashboard User Profile Page -->

{% block saas_title %}
{% trans %}Profile{% endtrans %}
{% endblock %}

{% block saas_page_layout %}
<{% if urls.user %}user{% else %}profile{% endif %}-update inline-template id="profile-container">
<div>
  <div class="row">
    <div class="col-md-6">
    {# We use the hidden input to pass the picture URL to the Vue component. #}
      <input name="picture" value="{% if form.instance.picture %}{{form.instance.picture}}{% else %}{% if organization and not (urls.user and urls.user.password_change) %}{{'/assets/img/default-organization.png'}}{% else %}{{'/assets/img/default-user.png'}}{% endif %}{% endif %}" type="hidden">
      <img class="img-thumbnail{% if urls.user %} rounded-circle{% endif %}"
           :src="formFields.picture" width="100" height="100"
           data-bs-toggle="modal" data-bs-target="#upload-picture-modal">
    </div>
    <div class="col-md-6">
      {% block saas_help %}
      {% trans %}Update your contact information, password, etc.{% endtrans %}
      {% endblock %}
    </div>
  </div>
  <div class="row pb-3">
    <div class="col-md-6">
      {% include "saas/profile/_form.html" %}
    </div>
    <div class="col-md-6">
      {% if organization %}
      {% trans created_at=organization.created_at|humanize_short_date %}Created at {{created_at}}{% endtrans %}
      {% elif user %}
      {% trans created_at=user.date_joined|humanize_short_date %}Created at {{created_at}}{% endtrans %}
      {% endif %}
      <hr />
      {% if urls.api_activities %}
      <div class="mt-4 p-2 bg-warning-subtle">
        {% include "saas/profile/_provider_form.html" %}
        <hr />
        <contact-update inline-template>
          <div>
            <h3>{% trans %}Activities{% endtrans %}</h3>
            <form class="form" @submit.prevent="createActivity">
              <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
              <div class="form-group mb-3">
                <label class="form-label">{% if organization %}{% trans %}Contact{% endtrans %}{% else %}{% trans %}Profile{% endtrans %}{% endif %}</label>
                <account-typeahead inline-template ref="contact"
                                   v-bind:dataset="items.results"
                                   v-on:selectitem="updateItemSelected">
                  <div>
                    <div class="input-group mb-3">
                      <!-- optional indicators -->
                      <span class="input-group-text">
                        <i class="fa fa-spinner fa-spin" v-if="loading"></i>
                        <template v-else>
                          <i class="fa fa-search" v-show="isEmpty"></i>
                          <i class="fa fa-times" v-show="isDirty" @click="reset"></i>
                        </template>
                      </span>
                      <!-- the input field -->
                      <input class="form-control"
                             type="text"
                             name="user"
                             placeholder="{% trans %}Username or e-mail{% endtrans %}"
                             autocomplete="off"
                             v-model="query"
                             @keydown.down="down"
                             @keydown.up="up"
                             @keydown.enter.prevent="hit"
                             @blur="clear"
                             @input="update" />
                      <!-- the list -->
                      {# Implementation note: If we use `d-block` instead of  #}
                      {# `style="display: block;"` the dropdown shows even    #}
                      {# when `hasItems` is `False`.                          #}
                      <ul class="dropdown-menu nav-pills p-1 top-100"
                          style="display: block;"
                          v-show="hasItems">
                        <li v-for="(item, $item) in items" class="nav-item"
                            @mousedown="hit"
                            @mousemove="setActive($item)">
                          <a :class="'nav-link px-3 py-2' + activeClass($item)" v-text="item.printable_name"></a>
                        </li>
                      </ul>
                  </div>
                  </div>
                </account-typeahead>
              </div>
              <div class="form-group mb-3">
                <label class="form-label">{% trans %}Description{% endtrans %}</label>
                <textarea class="form-control" rows="10"
                          name="text"
                          v-model="activityText"></textarea>
              </div>
              <div class="text-end">
                <button class="btn btn-primary"
                        type="submit"value="submit">{% trans %}Create activity{% endtrans %}</button>
              </div>
            </form>
            <div v-show="!itemsLoaded">
              <h4  class="text-center"><i class="fa fa-refresh fa-spin"></i></h4>
            </div>
            <div id="has-no-activity" v-show="itemsLoaded && items.results.length === 0" v-cloak>
              <h4><em>{% trans %}No activity{% endtrans %}<span> [[params.q]]</span></em></h4>
            </div>
            <div id="has-activities" v-show="itemsLoaded && items.results.length > 0" v-cloak>
              <div v-for="entry in items.results">
                <p>[[$globals.humanizeDate(entry.created_at)]]
                  <span v-if="entry.created_by">
                    {% trans %}by{% endtrans %} <a :href="'{{request|site_url}}/users/' + entry.created_by.username + '/'">[[entry.created_by.printable_name]]</a></span>:
                </p>
                <p v-if="entry.contact">
                  {% trans %}Contact{% endtrans %}: <a :href="'{{request|site_url}}/users/' + entry.contact.username + '/'">[[entry.contact.printable_name]]</a>
                </p>
                <div>[[entry.text]]</div>
              </div>
            </div>
          </div>
        </contact-update>
      </div>
      {% endif %}
    </div>
  </div>
  <!-- End Form Inputs -->

  <div class="row">
    <div class="col-md-12">
      <hr class="my-0" />
    </div>
  </div>

  <div class="row">
    {% if urls.user %}
    <div class="col-md-6 mt-4">
      <div class="card border-secondary">
        <div class="card-body text-secondary">

        {# Update Password #}
        {% if urls.user.password_change %}
        <div class="row align-items-center mb-3">
          <div class="col-md-12">
            <a id="change-password" class="mb-2" href="{{urls.user.password_change}}">{% trans %}Change Password{% endtrans %}</a>
          </div>
          <div class="col-md-12">
            {% trans %}Use a new password to login.{% endtrans %}
          </div>
        </div>
        {% endif %}

        {# Update Keys #}
        {% if urls.user.keys_update %}
        <div class="row align-items-center mb-3">
          <div class="col-md-12">
            <a id="keys-update" class="mb-2" href="{{urls.user.keys_update}}">{% trans %}Programmatic Keys{% endtrans %}</a>
          </div>
          <div class="col-md-12">
            {% trans %}Obtain new API Keys to authenticate.{% endtrans %}
          </div>
        </div>
        {% endif %}

        {% if urls.user.api_activate %}
        <div class="row align-items-center">
          <div class="col-sm-5">
            <div class="d-grid gap-2">
              <button id="activate-user" class="btn btn-primary" @click="activate">{% trans %}Activate{% endtrans %}</button>
            </div>
          </div>
          <div class="col-sm-7">
              {% trans %}Send an activation e-mail to the user.{% endtrans %}
          </div>
        </div>
        {% endif %}
        </div>
      </div>
    </div>
    {% endif %}

    <!-- Danger Zone -->
    <div class="col-md-6 mt-4">
      <div class="card border-danger h-100">
        <div class="card-header">
          {% trans %}Danger Zone{% endtrans %}
        </div>
        <div class="card-body text-danger">
          <div class="row align-items-center">
            <div class="col-md-12">
              <div class="d-grid gap-2">
                <button id="delete-action-open"
                        class="btn btn-danger mb-3"
                        data-bs-toggle="modal"
                        data-bs-target="#delete-action">{% trans %}Delete{% endtrans %}</button>
              </div>
            </div>
            <div class="col-md-12">
                {% trans %}This operation cannot be reversed.{% endtrans %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- *** -->
  <!-- Start Modal Dialogs -->
  <!-- *** -->

  <!-- Modal dialog to upload a picture -->
  <div id="upload-picture-modal"
       class="upload-picture modal fade"
       title="{% trans %}Upload picture ...{% endtrans %}"
       tabindex="-1" role="dialog"
       aria-labelledby="{% trans %}Upload picture ...{% endtrans %}"
       aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">{% trans %}Upload picture ...{% endtrans %}</h4>
            <button type="button" class="btn-close"
                    data-bs-dismiss="modal" aria-hidden="true"></button>
        </div>
        <div class="modal-body">
          <div class="text-center border">
            <croppa v-model="picture"{% if urls.user %} v-init-croppa{% endif %} v-zoom-slider
                    :width="300"
                    :height="300"
                    :prevent-white-space="true"
                    :show-remove-button="false"
            ></croppa>
          </div>
        </div>
        <div class="modal-footer">
            <button type="button"
                    class="btn btn-outline-primary"
                    data-bs-dismiss="modal">
                {% trans %}Cancel{% endtrans %}</button>
            <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" @click="uploadProfilePicture">{% trans %}Save picture{% endtrans %}</button>
        </div>
      </div>
    </div>
  </div>

  <!-- modal dialog to delete organization. -->
  <div class="modal fade"
       id="delete-action" tabindex="-1" role="dialog"
       aria-labelledby="{% trans %}Delete Profile{% endtrans %}" aria-hidden="true">
    <form class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{% trans %}Delete Profile{% endtrans %} ...</h5>
          <button type="button" class="btn-close"
                  data-bs-dismiss="modal" aria-hidden="true"></button>
        </div>
        <div class="modal-body">
          <p>
            {% if organization %}
            {% trans profile_name=organization.printable_name %}You are about to delete the profile and account for {{profile_name}}.{% endtrans %}
            {% elif user %}
            {% trans profile_name=user.full_name %}You are about to delete the profile and account for {{profile_name}}.{% endtrans %}
            {% endif %}
            {% trans %}This operation cannot be reversed.{% endtrans %}
          </p>
          <p>
            {% trans %}Are you sure you want to continue?{% endtrans %}
          </p>
        </div>
        <div class="modal-footer">
          <button data-bs-dismiss="modal"
                  class="btn btn-outline-primary">{% trans %}Cancel{% endtrans %}</button>
          <button type="button" id="delete-organization-btn"
                  class="btn btn-danger"
                  data-bs-dismiss="modal"
                  @click="deleteProfile">{% trans %}Delete{% endtrans %}</button>
        </div>
      </div>
    </form>
  </div><!-- end modal to delete profile -->

  <!-- modal dialog to verifiy email -->
  <div class="modal fade"
       id="verify-email" tabindex="-1" role="dialog"
       aria-labelledby="{% trans %}Verify e-mail{% endtrans %}"
       aria-hidden="true">
    <form class="modal-dialog" method="POST" @submit.prevent="updateProfile">
      <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{% trans %}Verify e-mail{% endtrans %} ...</h5>
          <button type="button" class="btn-close"
                  data-bs-dismiss="modal" aria-hidden="true"></button>
        </div>
        <div class="modal-body" v-show="!codeSent">
          <p>
{% trans %}We will send an e-mail with a one-time verification link. Please click, or copy/paste the link in a browser window, to verify the e-mail address.{% endtrans %}
          </p>
          <p>
            {% trans %}Are you ready to verify the email address?{% endtrans %}
          </p>
        </div>
        <div class="modal-body" v-show="codeSent">
          <p>
            {% trans %}We sent a code to your e-mail address.{% endtrans %}
          </p>
          <label class="form-label">{% trans %}Verification Code{% endtrans %}</label>
          <input class="form-control" type="text" name="email_code" v-model="emailCode"></input>
        </div>
        <div class="modal-footer">
          <button data-bs-dismiss="modal"
                  class="btn btn-outline-primary">{% trans %}Cancel{% endtrans %}</button>
          <button type="button" id="verify-email-btn"
                  class="btn btn-primary"
                  @click.prevent="verifyEmail" v-if="!codeSent">{% trans %}Email link{% endtrans %}</button>
          <button type="submit" id="verify-email-code"
                  class="btn btn-primary"
                  data-bs-dismiss="modal"
                  v-if="codeSent">{% trans %}Verify{% endtrans %}</button>
        </div>
      </div>
    </form>
  </div><!-- /#verify-email -->

  <!-- modal dialog to verifiy phone -->
  <div class="modal fade"
       id="verify-phone" tabindex="-1" role="dialog"
       aria-labelledby="{% trans %}Verify phone{% endtrans %}"
       aria-hidden="true">
    <form class="modal-dialog" method="POST" @submit.prevent="updateProfile">
      <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{% trans %}Verify phone number{% endtrans %} ...</h5>
          <button type="button" class="btn-close"
                  data-bs-dismiss="modal" aria-hidden="true"></button>
        </div>
        <div class="modal-body" v-if="!codeSent">
          <p>
{% trans %}We will text a one-time code to the phone number. We will then ask you to enter this code to verify the phone number.{% endtrans %}
          </p>
          <p>
            {% trans %}Are you ready to verify the phone number?{% endtrans %}
          </p>
        </div>
        <div class="modal-body" v-if="codeSent">
            <label class="form-label">{% trans %}Verification Code{% endtrans %}</label>
            <input class="form-control" type="text" name="phone_code" v-model="phoneCode"></input>
        </div>
        <div class="modal-footer">
          <button data-bs-dismiss="modal"
                  class="btn btn-outline-primary">{% trans %}Cancel{% endtrans %}</button>
          <button type="button" id="verify-phone-btn"
                  class="btn btn-primary"
                  @click.prevent="verifyPhone" v-if="!codeSent">{% trans %}Text a code{% endtrans %}</button>
          <button type="submit" id="verify-phone-code"
                  class="btn btn-primary"
                  data-bs-dismiss="modal"
                  v-if="codeSent">{% trans %}Verify{% endtrans %}</button>
        </div>
      </div>
    </form>
  </div><!-- /#verify-phone -->

</div>
</{% if urls.user %}user{% else %}profile{% endif %}-update>
{% endblock %}

{% block dashboard_bodyscripts %}
{% if urls.user %}
<script type="text/javascript">
Vue.directive('init-croppa', {
inserted: function(el) {
    var croppaInstance = el.__vue__;

    if (croppaInstance && typeof croppaInstance.addClipPlugin === 'function') {
        croppaInstance.addClipPlugin(function(ctx, x, y, w, h) {
          ctx.beginPath();
          ctx.arc(x + w / 2, y + h / 2, w / 2, 0, 2 * Math.PI, true);
          ctx.closePath();
        });
      }
    }
});
</script>
{% endif %}
{% endblock %}