keywarden/app/apps/servers/templates/servers/detail.html

{% extends "base.html" %}

{% block title %}{{ server.display_name }} • Keywarden{% endblock %}

{% block content %}
  <div class="space-y-6">
    {% include "servers/_header.html" %}

    <section class="grid gap-4 lg:grid-cols-3">
      <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
        <h2 class="text-lg font-semibold text-gray-900">Server details</h2>
        <dl class="mt-4 divide-y divide-gray-100 text-sm text-gray-600">
          <div class="flex items-center justify-between py-2">
            <dt>Hostname</dt>
            <dd class="font-medium text-gray-900">{{ server.hostname|default:"—" }}</dd>
          </div>
          <div class="flex items-center justify-between py-2">
            <dt>IPv4</dt>
            <dd class="font-medium text-gray-900">{{ server.ipv4|default:"—" }}</dd>
          </div>
          <div class="flex items-center justify-between py-2">
            <dt>IPv6</dt>
            <dd class="font-medium text-gray-900">{{ server.ipv6|default:"—" }}</dd>
          </div>
        </dl>
      </div>

      <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm lg:col-span-2">
        <div class="flex flex-wrap items-start justify-between gap-4">
          <div>
            <h2 class="text-lg font-semibold text-gray-900">Account & certificate</h2>
            <p class="mt-1 text-sm text-gray-500">Credentials and certificate download options.</p>
          </div>
          <span class="inline-flex items-center rounded-full bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-700">Access</span>
        </div>

        <dl class="mt-4 divide-y divide-gray-100 text-sm text-gray-600">
          <div class="flex items-center justify-between py-2">
            <dt>Account name</dt>
            <dd class="font-medium text-gray-900">
              {% if system_username %}
                {{ system_username }}
              {% else %}
                Unknown
              {% endif %}
            </dd>
          </div>
          <div class="flex items-center justify-between py-2">
            <dt>Account status</dt>
            <dd class="font-medium text-gray-900">
              {% if account_present is None %}
                Unknown
              {% elif account_present %}
                Present
              {% else %}
                Not on server
              {% endif %}
            </dd>
          </div>
          <div class="flex flex-col gap-3 py-2 sm:flex-row sm:items-center sm:justify-between">
            <dt>Certificate</dt>
            <dd class="font-medium text-gray-900">
              {% if certificate_key_id %}
                <div class="flex flex-wrap items-center gap-2">
                  <div class="inline-flex rounded-lg shadow-sm" role="group">
                    <button
                      type="button"
                      class="inline-flex items-center rounded-l-lg bg-blue-700 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300"
                      data-download-url="/api/v1/keys/{{ certificate_key_id }}/certificate"
                    >
                      Download
                    </button>
                    <button
                      type="button"
                      class="inline-flex items-center rounded-r-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-300"
                      data-download-url="/api/v1/keys/{{ certificate_key_id }}/certificate.sha256"
                    >
                      Hash
                    </button>
                  </div>
                  <button
                    type="button"
                    class="inline-flex items-center rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-300 js-regenerate-cert"
                    data-key-id="{{ certificate_key_id }}"
                  >
                    Regenerate
                  </button>
                </div>
              {% else %}
                <span class="text-xs font-semibold text-gray-500">Upload a key to download</span>
              {% endif %}
            </dd>
          </div>
        </dl>
      </div>

      <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm lg:col-span-3">
        <div class="flex flex-wrap items-start justify-between gap-4">
          <div>
            <h2 class="text-lg font-semibold text-gray-900">Access</h2>
            <p class="mt-1 text-sm text-gray-500">Review access windows and last usage.</p>
          </div>
          <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700">Usage</span>
        </div>
        <dl class="mt-4 divide-y divide-gray-100 text-sm text-gray-600">
          <div class="flex items-center justify-between py-2">
            <dt>Access until</dt>
            <dd class="font-medium text-gray-900">
              {% if expires_at %}
                {{ expires_at|date:"M j, Y H:i" }}
              {% else %}
                No expiry
              {% endif %}
            </dd>
          </div>
          <div class="flex items-center justify-between py-2">
            <dt>Last accessed</dt>
            <dd class="font-medium text-gray-900">
              {% if last_accessed %}
                {{ last_accessed|date:"M j, Y H:i" }}
              {% else %}
                —
              {% endif %}
            </dd>
          </div>
        </dl>
      </div>
    </section>
  </div>
  <script>
    (function () {
      function getCookie(name) {
        var value = "; " + document.cookie;
        var parts = value.split("; " + name + "=");
        if (parts.length === 2) {
          return parts.pop().split(";").shift();
        }
        return "";
      }

      function handleDownload(event) {
        var button = event.currentTarget;
        var url = button.getAttribute("data-download-url");
        if (!url) {
          return;
        }
        window.location.href = url;
      }

      function handleRegenerate(event) {
        var button = event.currentTarget;
        var keyId = button.getAttribute("data-key-id");
        if (!keyId) {
          return;
        }
        if (!window.confirm("Regenerate the certificate for this key?")) {
          return;
        }
        var csrf = getCookie("csrftoken");
        fetch("/api/v1/keys/" + keyId + "/certificate", {
          method: "POST",
          credentials: "same-origin",
          headers: {
            "X-CSRFToken": csrf,
          },
        })
          .then(function (response) {
            if (!response.ok) {
              throw new Error("Certificate regeneration failed.");
            }
            window.alert("Certificate regenerated.");
          })
          .catch(function (err) {
            window.alert(err.message);
          });
      }

      var downloadButtons = document.querySelectorAll("[data-download-url]");
      for (var i = 0; i < downloadButtons.length; i += 1) {
        downloadButtons[i].addEventListener("click", handleDownload);
      }
      var buttons = document.querySelectorAll(".js-regenerate-cert");
      for (var j = 0; j < buttons.length; j += 1) {
        buttons[j].addEventListener("click", handleRegenerate);
      }
    })();
  </script>
{% endblock %}