role.html

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

{% block saas_title %}
{% trans role_descr=role_descr.title %}{{role_descr}} Role{% endtrans %}
{% endblock %}

{% block saas_content %}
<role-user-list-modal inline-template class="pt-3">
  <role-user-list inline-template
    :request-user="'{{request.user.username}}'"
    @create="create" @create-completed="createCompleted"
    @remove="remove" @remove-completed="removeCompleted"
    id="{{role_descr}}"
    data-trip data-trip-index="1"
    data-trip-content="<h2>{% trans role_descr=role_descr.title%}Add/Remove {{role_descr}}{% endtrans %}</h2><p>{% trans %}When a user is listed under a role for an organization, she will be able to view pages and execute actions associated with the role.{% endtrans %}</p><em>{% trans %}Use keyboard navigation or click 'Next' to move forward.{% endtrans %}</em>"
    data-trip-position="screen-center">
    <div id="user-relation-list-container">
      <div class="row">
      <div class="col-md-6">
      <div class="card">
        <div class="card-body">
          <form id="add-user" class="mb-4" @submit.prevent="submit">
            <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
            {# The following div is required for the typeahead dropbox to show under the input field. #}
            <account-typeahead inline-template ref="typeahead"
                               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>
            <!-- inviting a user to register. -->
            <div class="add-role-modal"
                 aria-labelledby="{% trans role_descr=role_descr.title %}Add {{role_descr}}{% endtrans %}" aria-hidden="true"
                 tabindex="-1"
                 title="{% trans role_descr=role_descr.title %}Invite {{role_descr}}{% endtrans %}"
                 v-show="profileRequestDone" v-cloak>
              <p class="text-danger">
                  {% trans invitee='[[requestedProfilePrintableName]]', role_descr=role_descr.title, organization=organization.printable_name %}{{invitee}} is not yet registered. This is an opportunity to invite and add her/him as a {{role_descr}} for {{organization}}.{% endtrans %}
              </p>
              <div class="form-group mb-3">
                <label class="form-label">
                  {% trans %}Full name{% endtrans %}
                </label>
                <input id="new-request-full-name"
                       class="form-control w-100"
                       name="full_name" type="text" max-length="150"
                       placeholder="John Doe"
                       ref="full_name"
                       v-model="unregistered.full_name" />
              </div>
              <div class="form-group mb-3">
                  <label class="form-label">
                    {% trans %}To{% endtrans %}
                  </label>
                  <input id="new-request-email"
                         class="form-control w-100"
                         name="email" type="text" max-length="150"
                         placeholder="invitee@example.com"
                         autofocus
                         v-model="unregistered.email" />
              </div>
              <div class="form-group">
                <label class="form-label">
                  {% trans %}The following invite message will be sent:{% endtrans %}
                </label>
                  <!-- textareas are very special in the way they handle whitespaces. Please do
                       not indent default text. -->
                <textarea class="form-control"
                          name="message"
                          maxlength="255" type="text" rows="10">{% trans invitee='[[unregistered.full_name]]', role_descr=role_descr.title, organization=organization.printable_name, user=request.user.first_name %}Hi {{invitee}},

I am adding you as a {{role_descr}} to {{organization}}.

Thank you,
- {{user}}{% endtrans %}
                </textarea>
              </div>
            </div><!-- add-role-modal -->
            <div class="d-grid gap-2">
              <button class="btn btn-primary btn-md mt-3"
                      type="submit">{% trans role_descr=role_descr.title %}Invite {{role_descr}}{% endtrans %}</button>
            </div>
          </form>
        </div>
      </div>
      </div>
      </div> {# /.row #}
      <hr />
      <div class="row mb-2" v-show="items.invited_count > 0 || items.requested_count > 0">
        <div class="col-12">
          <div class="btn-group" role="group" aria-label="{% trans %}Group of buttons to show or hide invited and requested roles{% endtrans %}" v-cloak>
            <button type="button" :class="showInvited ? 'btn btn-primary' : 'btn btn-outline-primary'" @click="showInvited = !showInvited" v-if="items.invited_count > 0">
              <i :class="showInvited ? 'fa fa-check-circle' : 'fa fa-circle-o'"></i> {% trans %}Pending Invites{% endtrans %} <span :class="showInvited ? 'badge bg-secondary' : 'badge bg-primary'">[[items.invited_count]]</span>
            </button>
            <button type="button" :class="showRequested ? 'btn btn-primary' : 'btn btn-outline-primary'" @click="showRequested = !showRequested" v-if="items.requested_count > 0">
              <i :class="showRequested ? 'fa fa-check-circle' : 'fa fa-circle-o'"></i> {% trans %}Roles Requested{% endtrans %} <span :class="showRequested ? 'badge bg-secondary' : 'badge bg-primary'">[[items.requested_count]]</span>
            </button>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          {% include "saas/_filter_match.html" %}
        </div>
      </div>
      <div class="row" v-show="!itemsLoaded">
        <div class="col-12">
          <h3 class="text-center"><i class="fa fa-refresh fa-spin fa-2x"></i></h3>
        </div>
      </div>
      <div class="row has-no-results"
           v-show="itemsLoaded && items.results.length == 0" v-cloak>
        <div class="col-12">
          <p class="text-muted mt-2">{% trans role_descr=role_descr.title %}No {{role_descr}}s yet{% endtrans %}</p>
        </div>
      </div>
      <div v-show="itemsLoaded && items.results.length > 0"
           v-cloak infinite-wrapper>
        <div v-for="(item, index) in items.results">
          <div :id="item.user.slug" :class="(item.grant_key || item.request_key) ? 'card card-inactive' : 'card'">
            <div class="card-body">
              <div class="row">
                <div class="col-2">
                  <div>
                    <a :href="'{{urls.profile_redirect}}' + item.user.slug + '/'"><img class="card-img-top rounded-circle" style="width:64px;height:64px;" v-bind:src="item.user.picture ? item.user.picture : '{{'/assets/img/default-user.png'|asset}}'" alt=""></a>
                  </div>
                </div>
                <div class="col-9 align-self-center">
                  <div class="row">
                    <div class="col col-md-4">
                      <h5 class="card-title"><a :href="'{{urls.profile_redirect}}' + item.user.slug + '/'">[[item.user.printable_name]]</a></h5>
                      <small class="card-subtitle">[[item.user.email]]</small>
                    </div>
                    <div class="col col-md-4">
                      <span v-if="!item.user.credentials">
                        {% trans %}Login disabled{% endtrans %}
                      </span>
                      <span v-if="item.user.otp_enabled">
                        <i class="fa fa-check text-success"></i>{% trans %} OTP enabled{% endtrans %}</span>
                    </div>
                    <div class="col col-md-4 text-start" v-if="item.accept_request_api_url">
                      <hr class="my-2" />
                      <small class="text-muted">{% trans %}requested{% endtrans %} [[$globals.humanizeDate(item.created_at)]]</small>
                      <button class="btn btn-primary btn-sm float-end"
                              @click="save(item.user)">{% trans %}Grant{% endtrans %}</button>
                    </div>
                    <div class="col col-md-4 text-start" v-if="item.grant_key">
                      <hr class="my-2" />
                      <small class="text-muted">{% trans %}invited{% endtrans %} [[$globals.humanizeDate(item.created_at)]]</small>
                      <button class="btn btn-primary btn-sm float-end"
                              @click="sendInvite(item.user.slug)">{% trans %}Resend Invite{% endtrans %}</button>
                    </div>
                  </div>{# /.row #}
                </div>
                <div class="col-1 text-center align-self-center">
                  <button class="btn btn-danger btn-sm remove"
                          data-trip data-trip-index="3"
                          data-trip-content="<p>{% trans %}Click here to revoke access to the user.{% endtrans %}</p>"
                          data-trip-position="s"
                          @click="removeConfirm(index)"><i class="fa fa-remove"></i></button>
                </div>
              </div> {# /#item.user.slug #}
            </div>
          </div>
        </div>
      </div>
      {% include "_pagination.html" %}

      <!-- modal dialog to confirm revoking a role -->
      <div id="revoke-action" class="revoke-modal modal fade"
           tabindex="-1" role="dialog"
           aria-labelledby="{% trans %}Revoke{% endtrans %}"
           aria-hidden="true">
        <form class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">{% trans %}Revoke{% endtrans %} ...</h5>
              <button type="button" class="btn-close"
                      data-bs-dismiss="modal" aria-hidden="true"></button>
            </div>
            <div class="modal-body">
              <p>
                {% trans %}You are about to delete yourself from this role. It is possible that you no longer can manage this profile after performing this action.{% endtrans %}
              </p>
              <p>
                {% trans %}Are you sure you want to continue?{% endtrans %}
              </p>
              <div class="modal-footer">
                <button id="cancel-revoke"
                        class="btn btn-primary"
                        data-bs-dismiss="modal">{% trans %}Cancel{% endtrans %}</button>
                <button type="submit" id="revoke-btn"
                        class="btn btn-danger"
                        data-bs-dismiss="modal"
                        @click="remove">{% trans %}Revoke{% endtrans %}</button>
              </div>
            </div>
          </div>
        </form>
      </div><!-- /modal dialog to confirm revoke -->
      {% include "_pagination.html" %}
    </div>
</role-user-list>
</role-user-list-modal>
{% endblock %}