FreedomBox/plinth/modules/users/templates/users_passkeys.html

{% extends "base.html" %}
{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}

{% load static %}
{% load i18n %}
{% load extras %}

{% block page_js %}
  <script type="text/javascript" src="{% static 'users/passkeys.js' %}" defer></script>
{% endblock %}

{% block page_head %}
  <link type="text/css" rel="stylesheet" href="{% static 'users/users.css' %}">
{% endblock %}

{% block content %}

  <div id="passkey-message-template" class="d-none">
    <div class="alert alert-danger alert-dismissible
                d-flex align-items-center fade show"
         role="alert">
      <div class="me-2">
        {% icon 'exclamation-triangle' %}
        <span class="visually-hidden">{% trans "Error:" %}</span>
      </div>

      <div>
        {% trans "Adding passkey failed: " %}
        <span class="message"></span>
        <button type="button" class="btn-close" data-bs-dismiss="alert"
                aria-label="{% trans "Close" %}">
        </button>
      </div>
    </div>
  </div>

  <div id="localized-strings" class="d-none">
    <div id="browser-does-not-support-passkeys">
      {% trans "Browser does not support passkeys." %}
    </div>
  </div>

  <div id="passkey-messages">
  </div>

  <h2>{% trans "Passkeys" %}</h2>

  <noscript>
    <div class="alert alert-danger d-flex align-items-center" role="alert">
      <div class="me-2">
        <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
        <span class="visually-hidden">{% trans "Error:" %}</span>
      </div>
      <div>
        {% blocktrans trimmed %}
          Working with passkeys requires using browser's Javascript API. Please
          enable Javascript support in your browser to continue.
        {% endblocktrans %}
      </div>
    </div>
  </noscript>

  <p>
    {% blocktrans trimmed %}
      Passkeys are way to verify user's identity using digital signatures.
      They are a more secure alternative to passwords. Secret information is
      kept with the user on their phone, laptop, or a hardware token and
      unlocked using a PIN, fingerprint, or face ID. No secrets are stored on
      the server. The server knows only the public information that can used to
      verify user's signatures.
    {% endblocktrans %}
  </p>
  <p class="manual-page">
    <a href="{% url 'help:manual-page' lang='-' page='Passkeys' %}">
      {% trans 'Learn more...' %}
    </a>
  </p>
  <p>
    {% csrf_token %}
    <a id="add-passkey" href="#" class="btn btn-primary" role="button"
       title="{% trans 'Add passkey' %}">
      {% icon "plus" %}
      {% trans 'Add passkey' %}
    </a>
  </p>
  {% if object_list %}
    <div class="table-responsive">
      <table class="table">
        <thead>
          <th>{% trans "Name" %}</th>
          <th>{% trans "For Domain" %}</th>
          <th>{% trans "Added" %}</th>
          <th>{% trans "Last Used" %}</th>
          <th>{% trans "Actions" %}</th>
        </thead>
        <tbody>
          {% for passkey in object_list %}
            <tr class="passkey" data-passkey-name="{{ passkey.name }}"
                data-passkey-id="{{ passkey.id }}">
              <td>{{ passkey.name }}</td>
              <td>{{ passkey.domain }}</td>
              <td>{{ passkey.created_time }}</td>
              <td>{{ passkey.last_used_time }}</td>
              <td class="operations">
                <a class="btn btn-sm btn-default" role="button"
                   href="{% url 'users:passkey_edit' passkey.user.username passkey.id %}">
                    {% icon "pencil-square-o" %}
                </a>
                <form class="form form-passkey-delete" method="post"
                      action="{% url 'users:passkey_delete' passkey.user.username passkey.id %}">
                  {% csrf_token %}
                  <button class="btn btn-sm btn-default passkey-delete-button"
                          type="submit">
                    {% icon "trash-o" %}
                  </button>
                </form>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    <p>{% trans "No passkeys added to user account." %}
  {% endif %}

  <div id="passkey-delete-confirm-dialog" class="modal" tabindex="-1"
       role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            {% blocktrans trimmed with username=object.username %}
              Delete passkey <em class="passkey-name"></em>?
            {% endblocktrans %}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"
                  aria-label="{% trans 'Close' %}">
          </button>
        </div>
        <div class="modal-body">
          <p>
            {% blocktrans trimmed %}
              You will need this passkey's device to add it back again.
            {% endblocktrans %}
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger confirm">
            {% trans "Delete passkey" %}
          </button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            {% trans "Cancel" %}
          </button>
        </div>
      </div>
    </div>
  </div>

{% endblock %}