{% extends "layout.html" %}

{% comment %}
Copyright (C) 2020-2024  The Software Heritage developers
See the AUTHORS file at the top-level directory of this distribution
License: GNU Affero General Public License version 3, or any later version
See top-level LICENSE file for more information
{% endcomment %}

{% load render_bundle from webpack_loader %}
{% load swh_templatetags %}

{% block page_title %}
  User profile
{% endblock page_title %}

{% block header %}
  {% render_bundle 'auth' %}
{% endblock header %}

{% block navbar-content %}
  <h4>User profile</h4>
{% endblock navbar-content %}

{% block content %}
  <ul class="nav nav-tabs" style="padding-left: 5px;">
    <li class="nav-item">
      <a class="nav-link active"
         data-bs-toggle="tab"
         id="swh-oidc-profile-account-tab"
         href="#swh-oidc-profile-account">Account</a>
    </li>
    <li class="nav-item">
      <a class="nav-link"
         data-bs-toggle="tab"
         id="swh-oidc-profile-tokens-tab"
         href="#swh-oidc-profile-tokens">API tokens</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="swh-oidc-profile-account" class="tab-pane active">
      <p class="mt-3">
        Below are the details of your user account.
        You can edit your personal information in the
        <a href="{{ keycloak.server_url }}realms/{{ keycloak.realm_name }}/account/">
          Software Heritage Account Management
        </a>
        interface.
      </p>
      <table class="table swh-table w-100 mt-3 border-top border-bottom">
        <tr>
          <th>Username</th>
          <td class="border-bottom">{{ user.username }}</td>
        </tr>
        <tr>
          <th>First name</th>
          <td class="border-bottom">{{ user.first_name }}</td>
        </tr>
        <tr>
          <th>Last name</th>
          <td class="border-bottom">{{ user.last_name }}</td>
        </tr>
        <tr>
          <th>Email</th>
          <td class="border-bottom">{{ user.email }}</td>
        </tr>
        <tr>
          <th>Permissions:</th>
          <td>
            {% for perm in user.get_all_permissions %}
              {{ perm }}
              <br />
            {% endfor %}
          </td>
        </tr>
      </table>
    </div>
    <div id="swh-oidc-profile-tokens" class="tab-pane">
      <p class="mt-3">
        That interface enables to manage bearer tokens for Web API authentication.
        A token has to be sent in HTTP authorization headers to make authenticated API requests.
      </p>
      <p>
        For instance when using <code>curl</code> proceed as follows:
        <pre>curl -H "Authorization: Bearer ${TOKEN}" {{ site_base_url }}/api/...</pre>
      </p>
      <p>Please not that a bearer token will automatically expire after 30 days of inactivity.</p>
      <div class="mt-3">
        <div class="float-end">
          <button class="btn btn-secondary btn-sm"
                  onclick="swh.auth.applyTokenAction('generate')">Generate new token</button>
          <button class="btn btn-secondary btn-sm"
                  onclick="swh.auth.applyTokenAction('revokeAll')">Revoke all tokens</button>
        </div>
        <table id="swh-bearer-tokens-table"
               class="table swh-table swh-table-striped"
               width="100%">
          <thead>
            <tr>
              <th>Creation date</th>
              <th>Actions</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
  <script>swh.auth.initProfilePage();</script>
{% endblock content %}
