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

156 lines
6.9 KiB
HTML

{% extends "base.html" %}
{% block title %}VPN-Profile - {{ 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 active">VPN-Profile</li>
</ol>
</nav>
<div class="d-flex justify-content-between align-items-center mb-4">
<h1>
<i class="bi bi-shield-lock"></i> VPN-Profile
<span class="badge bg-primary">{{ profiles|length }}</span>
</h1>
<div>
<a href="/gateways/{{ gateway.id }}" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left"></i> Zurück
</a>
<a href="/gateways/{{ gateway.id }}/profiles/new" class="btn btn-primary">
<i class="bi bi-plus-lg"></i> Neues Profil
</a>
</div>
</div>
{% if profiles %}
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead>
<tr>
<th style="width: 60px;">Priorität</th>
<th>Name</th>
<th>VPN-Server</th>
<th>Common Name</th>
<th>Status</th>
<th>Gültigkeit</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
{% for profile in profiles %}
<tr>
<td>
<span class="badge bg-secondary fs-6">{{ profile.priority }}</span>
</td>
<td>
<a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}" class="text-decoration-none">
<strong>{{ profile.name }}</strong>
</a>
{% if profile.priority == 1 %}
<span class="badge bg-success ms-1">Primär</span>
{% endif %}
</td>
<td>
{% if profile.vpn_server %}
<a href="/vpn-servers/{{ profile.vpn_server.id }}">
{{ profile.vpn_server.name }}
</a>
<br>
<small class="text-muted">
{{ profile.vpn_server.hostname }}:{{ profile.vpn_server.port }}/{{ profile.vpn_server.protocol.value }}
</small>
{% else %}
<span class="text-muted">-</span>
{% endif %}
</td>
<td>
<code>{{ profile.cert_cn }}</code>
</td>
<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>
<td>
{% if profile.valid_until %}
<small>
bis {{ profile.valid_until.strftime('%d.%m.%Y') }}
{% if profile.days_until_expiry is defined %}
{% if profile.days_until_expiry <= 30 %}
<br><span class="text-warning">{{ profile.days_until_expiry }} Tage</span>
{% endif %}
{% endif %}
</small>
{% else %}
<span class="text-muted">-</span>
{% endif %}
</td>
<td>
<div class="btn-group btn-group-sm">
<a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}"
class="btn btn-outline-primary" title="Details">
<i class="bi bi-eye"></i>
</a>
<a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}/edit"
class="btn btn-outline-secondary" title="Bearbeiten">
<i class="bi bi-pencil"></i>
</a>
<a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}/provision"
class="btn btn-outline-success" title="Konfiguration herunterladen">
<i class="bi bi-download"></i>
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<div class="card mt-4">
<div class="card-header">
<i class="bi bi-info-circle"></i> Hinweis zur Priorität
</div>
<div class="card-body">
<p class="mb-0">
Profile mit niedrigerer Prioritätsnummer werden bevorzugt verwendet.
Bei Verbindungsproblemen mit dem primären Server (Priorität 1) versucht der Client
automatisch, sich mit dem nächsten Profil zu verbinden (Failover).
</p>
</div>
</div>
{% else %}
<div class="card">
<div class="card-body text-center py-5">
<i class="bi bi-shield-lock" style="font-size: 3rem;" class="text-muted"></i>
<h4 class="mt-3">Keine VPN-Profile vorhanden</h4>
<p class="text-muted">
Erstellen Sie ein VPN-Profil, um dieses Gateway mit einem VPN-Server zu verbinden.
</p>
<a href="/gateways/{{ gateway.id }}/profiles/new" class="btn btn-primary">
<i class="bi bi-plus-lg"></i> Erstes Profil erstellen
</a>
</div>
</div>
{% endif %}
{% endblock %}