94 lines
4.0 KiB
HTML
94 lines
4.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}VPN-Server - mGuard VPN{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1><i class="bi bi-server"></i> VPN-Server</h1>
|
|
<a href="/vpn-servers/new" class="btn btn-primary">
|
|
<i class="bi bi-plus-lg"></i> Neuer VPN-Server
|
|
</a>
|
|
</div>
|
|
|
|
<div class="row">
|
|
{% for server in servers %}
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card h-100 {% if server.is_primary %}border-primary{% endif %}">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span>
|
|
{% if server.status.value == 'running' %}
|
|
<span class="status-indicator online"></span>
|
|
{% else %}
|
|
<span class="status-indicator offline"></span>
|
|
{% endif %}
|
|
{{ server.name }}
|
|
</span>
|
|
<div>
|
|
{% if server.is_primary %}
|
|
<span class="badge bg-primary">Primär</span>
|
|
{% endif %}
|
|
{% if server.protocol.value == 'udp' %}
|
|
<span class="badge badge-udp">UDP</span>
|
|
{% else %}
|
|
<span class="badge badge-tcp">TCP</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted small">{{ server.description or 'Keine Beschreibung' }}</p>
|
|
|
|
<!-- Connection Info -->
|
|
<div class="mb-3">
|
|
<code>{{ server.hostname }}:{{ server.port }}</code>
|
|
</div>
|
|
|
|
<!-- Status -->
|
|
<div class="mb-2">
|
|
{% if server.status.value == 'running' %}
|
|
<span class="badge bg-success">Läuft</span>
|
|
<span class="badge bg-light text-dark">{{ server.connected_clients }} Clients</span>
|
|
{% elif server.status.value == 'stopped' %}
|
|
<span class="badge bg-secondary">Gestoppt</span>
|
|
{% elif server.status.value == 'starting' %}
|
|
<span class="badge bg-warning">Startet...</span>
|
|
{% elif server.status.value == 'error' %}
|
|
<span class="badge bg-danger">Fehler</span>
|
|
{% else %}
|
|
<span class="badge bg-light text-dark">{{ server.status.value }}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Details -->
|
|
<ul class="list-unstyled small mb-0">
|
|
<li><strong>Netzwerk:</strong> {{ server.vpn_network }}/{{ server.vpn_netmask }}</li>
|
|
<li><strong>Cipher:</strong> {{ server.cipher.value }}</li>
|
|
<li><strong>CA:</strong> {{ server.certificate_authority.name if server.certificate_authority else '-' }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="/vpn-servers/{{ server.id }}" class="btn btn-sm btn-primary">
|
|
<i class="bi bi-eye"></i> Details
|
|
</a>
|
|
<a href="/vpn-servers/{{ server.id }}/clients" class="btn btn-sm btn-outline-secondary">
|
|
<i class="bi bi-people"></i> Clients
|
|
</a>
|
|
<a href="/vpn-servers/{{ server.id }}/edit" class="btn btn-sm btn-outline-secondary">
|
|
<i class="bi bi-pencil"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="col-12">
|
|
<div class="alert alert-info">
|
|
<i class="bi bi-info-circle"></i>
|
|
Keine VPN-Server vorhanden.
|
|
<a href="/vpn-servers/new">Erstellen Sie einen neuen VPN-Server</a>.
|
|
<br>
|
|
<small class="text-muted">Hinweis: Sie benötigen zuerst eine <a href="/ca">Certificate Authority</a>.</small>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endblock %}
|