openvpn-endpoint-server/server/app/templates/vpn_servers/form.html

205 lines
11 KiB
HTML

{% extends "base.html" %}
{% block title %}{% if server %}VPN-Server bearbeiten{% else %}Neuer VPN-Server{% endif %} - mGuard VPN{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
<div class="card-header">
<h4 class="mb-0">
{% if server %}
<i class="bi bi-pencil"></i> VPN-Server bearbeiten
{% else %}
<i class="bi bi-plus-lg"></i> Neuer VPN-Server
{% endif %}
</h4>
</div>
<div class="card-body">
<form action="{% if server %}/vpn-servers/{{ server.id }}/edit{% else %}/vpn-servers/new{% endif %}" method="post">
<!-- Basic Settings -->
<h6 class="text-muted mb-3">Grundeinstellungen</h6>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">Name *</label>
<input type="text" name="name" class="form-control" required
value="{{ server.name if server else '' }}"
placeholder="z.B. Produktion UDP">
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Certificate Authority *</label>
{% if server %}
<input type="text" class="form-control" disabled
value="{{ server.certificate_authority.name }}">
<input type="hidden" name="ca_id" value="{{ server.ca_id }}">
{% else %}
<select name="ca_id" class="form-select" required>
<option value="">-- CA auswählen --</option>
{% for ca in cas %}
<option value="{{ ca.id }}">{{ ca.name }}</option>
{% endfor %}
</select>
{% endif %}
</div>
</div>
<div class="mb-3">
<label class="form-label">Beschreibung</label>
<textarea name="description" class="form-control" rows="2"
placeholder="Optionale Beschreibung">{{ server.description if server else '' }}</textarea>
</div>
<hr>
<h6 class="text-muted mb-3">Netzwerk</h6>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">Hostname/IP *</label>
<input type="text" name="hostname" class="form-control" required
value="{{ server.hostname if server else '' }}"
placeholder="vpn.meinefirma.de">
</div>
<div class="col-md-3 mb-3">
<label class="form-label">Port *</label>
<input type="number" name="port" class="form-control" required
value="{{ server.port if server else 1194 }}"
min="1" max="65535">
</div>
<div class="col-md-3 mb-3">
<label class="form-label">Protokoll *</label>
<select name="protocol" class="form-select">
<option value="udp" {% if not server or server.protocol.value == 'udp' %}selected{% endif %}>UDP</option>
<option value="tcp" {% if server and server.protocol.value == 'tcp' %}selected{% endif %}>TCP</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">VPN-Netzwerk</label>
<input type="text" name="vpn_network" class="form-control"
value="{{ server.vpn_network if server else '10.8.0.0' }}"
placeholder="10.8.0.0">
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Netzmaske</label>
<input type="text" name="vpn_netmask" class="form-control"
value="{{ server.vpn_netmask if server else '255.255.255.0' }}"
placeholder="255.255.255.0">
</div>
</div>
<hr>
<h6 class="text-muted mb-3">Sicherheit</h6>
<div class="row">
<div class="col-md-4 mb-3">
<label class="form-label">Cipher</label>
<select name="cipher" class="form-select">
{% for c in ciphers %}
<option value="{{ c.value }}" {% if server and server.cipher.value == c.value %}selected{% elif not server and c.value == 'AES-256-GCM' %}selected{% endif %}>
{{ c.value }}
</option>
{% endfor %}
</select>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Auth</label>
<select name="auth" class="form-select">
{% for a in auth_methods %}
<option value="{{ a.value }}" {% if server and server.auth.value == a.value %}selected{% elif not server and a.value == 'SHA256' %}selected{% endif %}>
{{ a.value }}
</option>
{% endfor %}
</select>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">TLS Version min</label>
<select name="tls_version_min" class="form-select">
<option value="1.2" {% if not server or server.tls_version_min == '1.2' %}selected{% endif %}>1.2</option>
<option value="1.3" {% if server and server.tls_version_min == '1.3' %}selected{% endif %}>1.3</option>
</select>
</div>
</div>
<hr>
<h6 class="text-muted mb-3">Performance</h6>
<div class="row">
<div class="col-md-3 mb-3">
<label class="form-label">Max Clients</label>
<input type="number" name="max_clients" class="form-control"
value="{{ server.max_clients if server else 100 }}"
min="1" max="1000">
</div>
<div class="col-md-3 mb-3">
<label class="form-label">Keepalive (s)</label>
<input type="number" name="keepalive_interval" class="form-control"
value="{{ server.keepalive_interval if server else 10 }}"
min="1" max="60">
</div>
<div class="col-md-3 mb-3">
<label class="form-label">Timeout (s)</label>
<input type="number" name="keepalive_timeout" class="form-control"
value="{{ server.keepalive_timeout if server else 60 }}"
min="10" max="300">
</div>
<div class="col-md-3 mb-3">
<label class="form-label">Kompression</label>
<select name="compression" class="form-select">
{% for co in compression_options %}
<option value="{{ co.value }}" {% if server and server.compression.value == co.value %}selected{% elif not server and co.value == 'none' %}selected{% endif %}>
{{ co.value }}
</option>
{% endfor %}
</select>
</div>
</div>
<hr>
<h6 class="text-muted mb-3">Docker</h6>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">Management-Port</label>
<input type="number" name="management_port" class="form-control"
value="{{ server.management_port if server else 7505 }}"
min="1" max="65535">
</div>
<div class="col-md-6 mb-3 d-flex align-items-end">
<div class="form-check">
<input type="checkbox" name="is_primary" class="form-check-input" id="isPrimary"
{% if server and server.is_primary %}checked{% endif %}>
<label class="form-check-label" for="isPrimary">Primärer Server</label>
</div>
</div>
</div>
{% if server %}
<div class="row">
<div class="col-md-6 mb-3 d-flex align-items-end">
<div class="form-check">
<input type="checkbox" name="is_active" class="form-check-input" id="isActive"
{% if server.is_active %}checked{% endif %}>
<label class="form-check-label" for="isActive">Server aktiv</label>
</div>
</div>
</div>
{% endif %}
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-lg"></i>
{% if server %}Speichern{% else %}VPN-Server erstellen{% endif %}
</button>
<a href="/vpn-servers" class="btn btn-outline-secondary">Abbrechen</a>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}