316 lines
14 KiB
HTML
316 lines
14 KiB
HTML
|
{% extends "base.html" %}
|
|||
|
|
{% block content %}
|
|||
|
|
<div class="max-w-3xl mx-auto">
|
|||
|
|
<h1 class="text-lg font-semibold tracking-tight mb-1">
|
|||
|
|
{% if server %}Server bearbeiten{% else %}Neuen Server anlegen{% endif %}
|
|||
|
|
</h1>
|
|||
|
|
<p class="text-xs text-slate-400 mb-4">
|
|||
|
|
Trage alle relevanten Infos zu deinem VPS / Server ein.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
{% if not can_encrypt %}
|
|||
|
|
<div class="mb-4 text-xs text-amber-200 bg-amber-500/10 border border-amber-500/60 rounded-lg p-3">
|
|||
|
|
ENCRYPTION_KEY ist nicht gesetzt – eingegebene Management-Passwörter werden nicht gespeichert.
|
|||
|
|
</div>
|
|||
|
|
{% endif %}
|
|||
|
|
|
|||
|
|
<form method="post" class="space-y-6">
|
|||
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
|
|||
|
|
<!-- General -->
|
|||
|
|
<section class="rounded-xl border border-slate-800 bg-slate-900/70 p-4 space-y-3">
|
|||
|
|
<h2 class="text-sm font-semibold text-slate-100">Allgemein</h2>
|
|||
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Name *</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="name"
|
|||
|
|
required
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="Prod-DB-01"
|
|||
|
|
value="{{ server.name if server else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Provider *</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="provider"
|
|||
|
|
required
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="Hetzner / OVH / ..."
|
|||
|
|
value="{{ server.provider if server else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Hostname</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="hostname"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="server1.example.com"
|
|||
|
|
value="{{ server.hostname if server and server.hostname else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Typ</label>
|
|||
|
|
<select
|
|||
|
|
name="type"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
>
|
|||
|
|
{% set t = server.type if server else 'vps' %}
|
|||
|
|
<option value="vps" {% if t == 'vps' %}selected{% endif %}>VPS</option>
|
|||
|
|
<option value="dedicated" {% if t == 'dedicated' %}selected{% endif %}>Dedicated</option>
|
|||
|
|
<option value="storage" {% if t == 'storage' %}selected{% endif %}>Storage</option>
|
|||
|
|
<option value="managed" {% if t == 'managed' %}selected{% endif %}>Managed</option>
|
|||
|
|
<option value="other" {% if t == 'other' %}selected{% endif %}>Sonstiges</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Location</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="location"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="Falkenstein / Frankfurt / Helsinki / Ashburn"
|
|||
|
|
value="{{ server.location if server and server.location else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Tags (kommagetrennt)</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="tags"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="prod,critical,backup"
|
|||
|
|
value="{{ server.tags if server and server.tags else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Network -->
|
|||
|
|
<section class="rounded-xl border border-slate-800 bg-slate-900/70 p-4 space-y-3">
|
|||
|
|
<h2 class="text-sm font-semibold text-slate-100">Netzwerk</h2>
|
|||
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">IPv4</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="ipv4"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="192.0.2.10"
|
|||
|
|
value="{{ server.ipv4 if server and server.ipv4 else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">IPv6</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="ipv6"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="2001:db8::10"
|
|||
|
|
value="{{ server.ipv6 if server and server.ipv6 else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Costs -->
|
|||
|
|
<section class="rounded-xl border border-slate-800 bg-slate-900/70 p-4 space-y-3">
|
|||
|
|
<h2 class="text-sm font-semibold text-slate-100">Kosten</h2>
|
|||
|
|
<div class="grid md:grid-cols-3 gap-4">
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Betrag</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
step="0.01"
|
|||
|
|
name="price"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="5.00"
|
|||
|
|
value="{{ server.price if server else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Währung</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="currency"
|
|||
|
|
value="{{ server.currency if server else 'EUR' }}"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Abrechnung</label>
|
|||
|
|
<select
|
|||
|
|
name="billing_period"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
>
|
|||
|
|
{% set bp = server.billing_period if server else 'monthly' %}
|
|||
|
|
<option value="monthly" {% if bp == 'monthly' %}selected{% endif %}>Monatlich</option>
|
|||
|
|
<option value="yearly" {% if bp == 'yearly' %}selected{% endif %}>Jährlich</option>
|
|||
|
|
<option value="other" {% if bp == 'other' %}selected{% endif %}>Sonstiges</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Vertragsbeginn</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
name="contract_start"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
value="{{ server.contract_start if server and server.contract_start else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Vertragsende</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
name="contract_end"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
value="{{ server.contract_end if server and server.contract_end else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Hardware -->
|
|||
|
|
<section class="rounded-xl border border-slate-800 bg-slate-900/70 p-4 space-y-3">
|
|||
|
|
<h2 class="text-sm font-semibold text-slate-100">Hardware</h2>
|
|||
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">CPU-Modell</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="cpu_model"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="Ryzen 5 3600"
|
|||
|
|
value="{{ server.cpu_model if server and server.cpu_model else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">CPU Cores</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
name="cpu_cores"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
value="{{ server.cpu_cores if server and server.cpu_cores else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">RAM (MB)</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
name="ram_mb"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
value="{{ server.ram_mb if server and server.ram_mb else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Storage (GB)</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
name="storage_gb"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
value="{{ server.storage_gb if server and server.storage_gb else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Storage-Typ</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="storage_type"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="nvme / ssd / hdd / ceph"
|
|||
|
|
value="{{ server.storage_type if server and server.storage_type else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Access -->
|
|||
|
|
<section class="rounded-xl border border-slate-800 bg-slate-900/70 p-4 space-y-3">
|
|||
|
|
<h2 class="text-sm font-semibold text-slate-100">Zugänge</h2>
|
|||
|
|
<p class="text-xs text-slate-400">
|
|||
|
|
SSH: hier nur <strong>Key-Namen</strong> oder Hints eintragen, keine privaten Keys.
|
|||
|
|
</p>
|
|||
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Management URL</label>
|
|||
|
|
<input
|
|||
|
|
type="url"
|
|||
|
|
name="mgmt_url"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="https://hetzner.cloud/project/..."
|
|||
|
|
value="{{ server.mgmt_url if server and server.mgmt_url else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Management User</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="mgmt_user"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
value="{{ server.mgmt_user if server and server.mgmt_user else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">Management Passwort</label>
|
|||
|
|
<input
|
|||
|
|
type="password"
|
|||
|
|
name="mgmt_password"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="{% if can_encrypt %}Neues Passwort setzen (leer = unverändert){% else %}Wird NICHT gespeichert{% endif %}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">SSH User</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="ssh_user"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="root / debian / nocci"
|
|||
|
|
value="{{ server.ssh_user if server and server.ssh_user else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1">
|
|||
|
|
<label class="text-xs text-slate-300">SSH Key Hint</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="ssh_key_hint"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="id_ed25519_hetzner"
|
|||
|
|
value="{{ server.ssh_key_hint if server and server.ssh_key_hint else '' }}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Notes -->
|
|||
|
|
<section class="rounded-xl border border-slate-800 bg-slate-900/70 p-4 space-y-3">
|
|||
|
|
<h2 class="text-sm font-semibold text-slate-100">Notizen</h2>
|
|||
|
|
<textarea
|
|||
|
|
name="notes"
|
|||
|
|
rows="4"
|
|||
|
|
class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
|
|||
|
|
placeholder="Besondere Einstellungen, Projekte, die hier laufen, etc."
|
|||
|
|
>{{ server.notes if server and server.notes else '' }}</textarea>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<div class="flex justify-between items-center">
|
|||
|
|
<a
|
|||
|
|
href="/"
|
|||
|
|
class="rounded-lg border border-slate-700 px-4 py-2 text-sm text-slate-200 hover:border-slate-500 hover:text-white"
|
|||
|
|
>Abbrechen</a
|
|||
|
|
>
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
class="rounded-lg bg-indigo-500 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-400 focus:outline-none focus:ring focus:ring-indigo-500/40"
|
|||
|
|
>
|
|||
|
|
{% if server %}Änderungen speichern{% else %}Speichern{% endif %}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
{% endblock %}
|
|||
|
|
s
|