certauth/api/templates/certs.html

68 lines
3.5 KiB
HTML

{% extends "base.html" %}
{% block title %} - Certificates{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold">Certificates</h1>
</div>
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700 mb-6">
<h2 class="font-bold mb-4">Request New Certificate</h2>
<form hx-post="/api/certs/web/request" hx-swap="innerHTML" hx-target="#cert-result"
class="flex gap-3 flex-wrap">
<input name="cn" placeholder="CN (e.g., git.example.com)" required
class="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white flex-1 min-w-[200px] focus:outline-none focus:border-blue-500">
<input name="sans" placeholder="SANs (comma-separated, e.g., git.example.com,*.git.example.com)"
class="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white flex-1 min-w-[200px] focus:outline-none focus:border-blue-500">
<select name="domain_id" class="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500">
<option value="0">No domain</option>
{% for d in domains %}
<option value="{{ d.id }}">{{ d.name }}</option>
{% endfor %}
</select>
<button type="submit" class="bg-blue-600 hover:bg-blue-500 px-4 py-2 rounded font-medium">Request</button>
</form>
<div id="cert-result" class="mt-3 text-sm"></div>
</div>
<div class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
<table class="w-full text-sm">
<thead class="border-b border-gray-700">
<tr>
<th class="text-left p-3 text-gray-400">Subject</th>
<th class="text-left p-3 text-gray-400">Domain</th>
<th class="text-left p-3 text-gray-400">Status</th>
<th class="text-left p-3 text-gray-400">Expires</th>
<th class="text-left p-3 text-gray-400">Actions</th>
</tr>
</thead>
<tbody>
{% for c in certs %}
<tr class="border-b border-gray-700/50">
<td class="p-3 font-mono">{{ c.subject }}</td>
<td class="p-3">{{ c.domain_name or '-' }}</td>
<td class="p-3">
<span class="px-2 py-1 rounded text-xs {% if c.status == 'issued' %}bg-green-900 text-green-300{% elif c.status == 'pending' %}bg-yellow-900 text-yellow-300{% endif %}">
{{ c.status }}
</span>
</td>
<td class="p-3 text-gray-400">{{ c.expires_at[:10] if c.expires_at else '-' }}</td>
<td class="p-3">
{% if c.status == 'issued' %}
<a href="/api/certs/{{ c.id }}/pem" class="text-blue-400 hover:text-blue-300 mr-2">PEM</a>
<a href="/api/certs/{{ c.id }}/pfx" class="text-blue-400 hover:text-blue-300">PFX</a>
{% elif c.status == 'pending' %}
<button hx-post="/api/certs/{{ c.id }}/sign/web" hx-target="#sign-msg-{{ c.id }}"
class="text-yellow-400 hover:text-yellow-300">Issue</button>
<span id="sign-msg-{{ c.id }}" class="ml-2"></span>
{% endif %}
</td>
</tr>
{% endfor %}
{% if not certs %}
<tr><td colspan="5" class="p-6 text-center text-gray-500">No certificates yet</td></tr>
{% endif %}
</tbody>
</table>
</div>
{% endblock %}