index.html

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

<!-- Dashboard User Profile Page -->

{% block saas_title %}
  {% if organization %}
    {% trans organization=organization.printable_name %}
      {{organization}} Profile
    {% endtrans %}
  {% elif user %}
    {% trans user=user.full_name %}
      {{user}} Profile
    {% endtrans %}
  {% else %}
    {% trans %}Profile{% endtrans %}
  {% endif %}
{% endblock %}

{% block saas_page_layout %}
<{% if urls.user %}user{% else %}profile{% endif %}-update inline-template id="profile-container">
<div>
  <div class="container">
    <div class="row">
      <div class="col-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 %}{{'/static/img/default-user.png'}}{% endif %}" type="hidden">
        <img :src="formFields.picture" width="100" height="100" data-toggle="modal" data-target="#upload-picture-modal">
      </div>
      <div class="col-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 "_form.html" %}
      </div>
    </div>
  </div>
  <!-- End Form Inputs -->

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

  <div class="container">
    <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="btn btn-secondary btn-block 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 %}

              {% if urls.user.api_generate_keys %}
                <div class="row align-items-center" style="margin-top:15px;">
                  <div class="col-md-12">
                    <button id="generate-key-open" class="btn btn-secondary btn-block mb-2" data-toggle="modal" data-target="#generate-key">{% trans %}Reset API Key{% endtrans %}</button>
                  </div>
                  <div class="col-md-12">
                    {% trans %}Obtain a new API Key to authenticate.{% endtrans %}
                  </div>
                </div>
              {% endif %}

              {% if urls.user.api_activate %}
              <div class="row align-items-center">
                <div class="col-sm-5">
                  <button id="activate-user" class="btn btn-secondary btn-block" @click="activate">{% trans %}Activate{% endtrans %}</button>
                </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">
                <button id="delete-action-open"
                        class="btn btn-danger btn-block mb-3"
                        data-toggle="modal"
                        data-target="#delete-action">{% trans %}Delete{% endtrans %}</button>
              </div>
              <div class="col-md-12">
                {% trans %}This operation cannot be reversed.{% endtrans %}
              </div>
            </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="close"
                    data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <div class="text-center" style="border: 1px solid grey;">
            <croppa v-model="picture" :width="300" :height="300"></croppa>
          </div>
        </div>
        <div class="modal-footer">
            <button type="button"
                    class="btn btn-secondary"
                    data-dismiss="modal">
                {% trans %}Cancel{% endtrans %}</button>
            <button type="submit" class="btn btn-primary" data-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="close"
                  data-dismiss="modal" aria-hidden="true">&times;</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 id="cancel-delete"
                  data-dismiss="modal"
                  class="btn btn-secondary">{% trans %}Cancel{% endtrans %}</button>
          <button type="button" id="delete-organization-btn"
                  class="btn btn-danger"
                  data-dismiss="modal"
                  @click="deleteProfile">{% trans %}Delete{% endtrans %}</button>
        </div>
      </div>
    </form>
  </div><!-- end modal to delete profile -->

  {% if urls.user %}

  <!-- modal dialog asking for password before generating API keys -->
  <div id="generate-key" class="modal fade"
       tabindex="-1" role="dialog"
       aria-labelledby="{% trans %}Ask for password{% endtrans %}" aria-hidden="true">
    <form class="modal-dialog" method="POST" @submit.prevent="generateKey">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{% trans %}Please re-enter your password ...{% endtrans %}</h5>
          <button type="button" class="close"
                  data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group mb-0">
            <input class="form-control"
                   name="password" placeholder="{% trans %}Password{% endtrans %}" type="password"
                   v-model="password" />
          </div>
          <div class="form-group mt-3 mb-0" v-show="apiKey != 'Generating ...'">
            <input class="form-control"
                   name="key" placeholder="{% trans %}Generating{% endtrans %} ..." type="text"
                   v-model="apiKey">
            <small class="form-text text-muted text-center">
              {% trans %}This is your secret API key.{% endtrans %}
            </small>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary"
                  type="submit">{% trans %}Submit{% endtrans %}</button>
        </div>
      </div>
    </form>
  </div>

  <!-- modal dialog to generate API keys -->
  <div id="show-key" class="modal fade"
       tabindex="-1" role="dialog"
       aria-labelledby="{% trans %}API Key{% endtrans %}" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close"
                  data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">{% trans %}API Key{% endtrans %}</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <div class="controls">
              <input class="form-control"
                     name="key" maxlength="128"
                     type="text" disabled placeholder="{% trans %}Generating{% endtrans %} ..."
                     v-model="apiKey" />
            </div>
          </div>
          <div class="form-group">
            <input class="form-control"
                   name="password" maxlength="128"
                   type="password" placeholder="{% trans %}Password{% endtrans %}"
                   v-model="password" />
          </div>
          <div>
            <p>
              {% trans %}This is the API key you can use to authenticate with the service.{% endtrans %}
            </p>
            <p>
              {% trans %}The key will only be displayed once. Keep it secure.{% endtrans %}
            </p>
          </div>
        </div>
        <div class="modal-footer">
          <button id="regenerate-key" class="btn btn-secondary" type="button"
                  data-toggle="modal" data-target="#generate-key"
                  data-dismiss="modal">{% trans %}Generate{% endtrans %}</button>
          <button class="btn btn-primary"
                  data-dismiss="modal">{% trans %}OK{% endtrans %}</button>
        </div>
      </div>
    </div>
  </div><!-- end of modal dialog to generate API keys -->
  {% endif %}
</div>
</{% if urls.user %}user{% else %}profile{% endif %}-update>
{% endblock %}