openvpn-endpoint-server/server/app/templates/gateways/profile_detail.html

232 lines
9.9 KiB
HTML

{% extends "base.html" %}
{% block title %}{{ profile.name }} - {{ gateway.name }} - mGuard VPN{% endblock %}
{% block content %}
<nav aria-label="breadcrumb" class="mb-3">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/gateways">Gateways</a></li>
<li class="breadcrumb-item"><a href="/gateways/{{ gateway.id }}">{{ gateway.name }}</a></li>
<li class="breadcrumb-item"><a href="/gateways/{{ gateway.id }}/profiles">VPN-Profile</a></li>
<li class="breadcrumb-item active">{{ profile.name }}</li>
</ol>
</nav>
<div class="d-flex justify-content-between align-items-center mb-4">
<h1>
<i class="bi bi-shield-lock"></i> {{ profile.name }}
{% if profile.priority == 1 %}
<span class="badge bg-success">Primär</span>
{% else %}
<span class="badge bg-secondary">Priorität {{ profile.priority }}</span>
{% endif %}
</h1>
<div>
<a href="/gateways/{{ gateway.id }}/profiles" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left"></i> Zurück
</a>
<a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}/edit" class="btn btn-outline-primary">
<i class="bi bi-pencil"></i> Bearbeiten
</a>
<a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}/provision" class="btn btn-success">
<i class="bi bi-download"></i> Herunterladen
</a>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card mb-4">
<div class="card-header">
<i class="bi bi-info-circle"></i> Profil-Informationen
</div>
<div class="card-body">
<table class="table table-borderless">
<tr>
<th style="width: 40%;">Name</th>
<td>{{ profile.name }}</td>
</tr>
<tr>
<th>Beschreibung</th>
<td>{{ profile.description or '-' }}</td>
</tr>
<tr>
<th>Status</th>
<td>
{% if profile.status.value == 'active' %}
<span class="badge bg-success">Aktiv</span>
{% elif profile.status.value == 'provisioned' %}
<span class="badge bg-info">Provisioniert</span>
{% elif profile.status.value == 'pending' %}
<span class="badge bg-warning text-dark">Ausstehend</span>
{% elif profile.status.value == 'expired' %}
<span class="badge bg-danger">Abgelaufen</span>
{% elif profile.status.value == 'revoked' %}
<span class="badge bg-dark">Widerrufen</span>
{% else %}
<span class="badge bg-secondary">{{ profile.status.value }}</span>
{% endif %}
</td>
</tr>
<tr>
<th>Priorität</th>
<td>{{ profile.priority }}</td>
</tr>
<tr>
<th>Aktiv</th>
<td>
{% if profile.is_active %}
<span class="text-success"><i class="bi bi-check-circle"></i> Ja</span>
{% else %}
<span class="text-danger"><i class="bi bi-x-circle"></i> Nein</span>
{% endif %}
</td>
</tr>
<tr>
<th>Erstellt</th>
<td>{{ profile.created_at.strftime('%d.%m.%Y %H:%M') }}</td>
</tr>
{% if profile.provisioned_at %}
<tr>
<th>Zuletzt provisioniert</th>
<td>{{ profile.provisioned_at.strftime('%d.%m.%Y %H:%M') }}</td>
</tr>
{% endif %}
</table>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<i class="bi bi-hdd-network"></i> VPN-Server
</div>
<div class="card-body">
{% if profile.vpn_server %}
<table class="table table-borderless">
<tr>
<th style="width: 40%;">Server</th>
<td>
<a href="/vpn-servers/{{ profile.vpn_server.id }}">
{{ profile.vpn_server.name }}
</a>
</td>
</tr>
<tr>
<th>Hostname</th>
<td><code>{{ profile.vpn_server.hostname }}</code></td>
</tr>
<tr>
<th>Port / Protokoll</th>
<td>{{ profile.vpn_server.port }} / {{ profile.vpn_server.protocol.value|upper }}</td>
</tr>
<tr>
<th>VPN-Netzwerk</th>
<td><code>{{ profile.vpn_server.vpn_network }}/{{ profile.vpn_server.vpn_netmask }}</code></td>
</tr>
</table>
{% else %}
<p class="text-muted mb-0">Kein VPN-Server zugewiesen</p>
{% endif %}
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card mb-4">
<div class="card-header">
<i class="bi bi-file-earmark-lock"></i> Zertifikat
</div>
<div class="card-body">
<table class="table table-borderless">
<tr>
<th style="width: 40%;">Common Name</th>
<td><code>{{ profile.cert_cn }}</code></td>
</tr>
<tr>
<th>Gültig von</th>
<td>{{ profile.valid_from.strftime('%d.%m.%Y') if profile.valid_from else '-' }}</td>
</tr>
<tr>
<th>Gültig bis</th>
<td>
{% if profile.valid_until %}
{{ profile.valid_until.strftime('%d.%m.%Y') }}
{% if profile.is_expired %}
<span class="badge bg-danger ms-2">Abgelaufen</span>
{% elif profile.days_until_expiry <= 30 %}
<span class="badge bg-warning text-dark ms-2">{{ profile.days_until_expiry }} Tage</span>
{% endif %}
{% else %}
-
{% endif %}
</td>
</tr>
<tr>
<th>CA</th>
<td>
{% if profile.certificate_authority %}
<a href="/ca/{{ profile.certificate_authority.id }}">
{{ profile.certificate_authority.name }}
</a>
{% else %}
-
{% endif %}
</td>
</tr>
</table>
{% if profile.client_cert %}
<hr>
<details>
<summary class="btn btn-sm btn-outline-secondary">
<i class="bi bi-eye"></i> Zertifikat anzeigen
</summary>
<pre class="mt-3 p-3 bg-light" style="max-height: 200px; overflow: auto; font-size: 0.8rem;">{{ profile.client_cert }}</pre>
</details>
{% endif %}
</div>
</div>
<div class="card mb-4">
<div class="card-header bg-success text-white">
<i class="bi bi-download"></i> Provisioning
</div>
<div class="card-body">
<p>
Laden Sie die OpenVPN-Konfigurationsdatei herunter und importieren Sie sie auf dem mGuard-Router.
</p>
<a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}/provision"
class="btn btn-success btn-lg w-100">
<i class="bi bi-download"></i> {{ profile.name }}.ovpn herunterladen
</a>
{% if profile.provisioned_at %}
<div class="text-muted mt-2 text-center">
<small>Zuletzt heruntergeladen: {{ profile.provisioned_at.strftime('%d.%m.%Y %H:%M') }}</small>
</div>
{% endif %}
</div>
</div>
{% if profile.status.value not in ['revoked', 'expired'] %}
<div class="card border-danger">
<div class="card-header bg-danger text-white">
<i class="bi bi-exclamation-triangle"></i> Gefahrenzone
</div>
<div class="card-body">
<p class="mb-3">
Durch das Widerrufen des Zertifikats wird der Zugang zum VPN-Server gesperrt.
Diese Aktion kann nicht rückgängig gemacht werden.
</p>
<form action="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}/revoke" method="post"
onsubmit="return confirm('Sind Sie sicher? Das Zertifikat wird unwiderruflich gesperrt.');">
<button type="submit" class="btn btn-outline-danger">
<i class="bi bi-shield-x"></i> Zertifikat widerrufen
</button>
</form>
</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}