274 lines
15 KiB
PHP
274 lines
15 KiB
PHP
@push('modal.header')
|
||
<div class="px-5 pt-5 pb-3 border-b border-white/10
|
||
backdrop-blur rounded-t-2xl relative">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h2 class="text-lg font-semibold text-white">Domain hinzufügen</h2>
|
||
<p class="text-[13px] text-slate-300/85">
|
||
Lege Limits & Quotas fest. DKIM & empfohlene DNS-Records werden automatisch vorbereitet.
|
||
</p>
|
||
</div>
|
||
<button wire:click="$dispatch('closeModal')" class="text-white/60 hover:text-white text-lg">
|
||
<i class="ph ph-x"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
@endpush
|
||
|
||
<div class="p-6">
|
||
<div class="space-y-4">
|
||
{{-- SECTION: Basisdaten --}}
|
||
<section class="rounded-2xl border border-slate-700/60 bg-white/[0.04] p-5 backdrop-blur">
|
||
{{-- Domain --}}
|
||
<div>
|
||
<label class="flex items-center gap-2 text-sm text-slate-200">
|
||
<i class="ph ph-at text-slate-300"></i> Domain
|
||
</label>
|
||
<input type="text" placeholder="example.com" wire:model.defer="domain" class="mt-1 nx-input">
|
||
@error('domain') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
|
||
</div>
|
||
|
||
{{-- Beschreibung --}}
|
||
<div class="mt-4">
|
||
<div class="flex items-center gap-2">
|
||
<label class="text-sm text-slate-200">Beschreibung</label>
|
||
<span
|
||
class="px-2 py-0.5 rounded-full text-[11px] border border-slate-600/60 bg-slate-800/70 text-slate-200">optional</span>
|
||
</div>
|
||
<input type="text" placeholder="optional" wire:model.defer="description" class="mt-1 nx-input">
|
||
@error('description') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
|
||
</div>
|
||
</section>
|
||
|
||
{{-- Tags --}}
|
||
<section class="rounded-2xl border border-slate-700/60 bg-white/[0.04] p-5 backdrop-blur">
|
||
<div class="#mt-4">
|
||
<div class="flex items-center gap-2">
|
||
<label class="text-sm text-slate-200">Tags</label>
|
||
<span
|
||
class="px-2 py-0.5 rounded-full text-[11px] border border-slate-600/60 bg-slate-800/70 text-slate-200">optional</span>
|
||
</div>
|
||
|
||
{{-- Liste der Tags --}}
|
||
<div class="mt-2 space-y-2">
|
||
@foreach($tags as $i => $t)
|
||
<div class="#rounded-xl #border #border-slate-700/60 #bg-white/[0.04] #p-3">
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||
{{-- Label --}}
|
||
<div class="md:col-span-2">
|
||
<label class="block text-xs text-slate-300/80 mb-1">Label</label>
|
||
<input
|
||
type="text"
|
||
placeholder="z. B. Kunde, Produktion"
|
||
wire:model.defer="tags.{{ $i }}.label"
|
||
class="nx-input"
|
||
>
|
||
</div>
|
||
|
||
{{-- Farbe (HEX + Picker) --}}
|
||
<div>
|
||
<label class="block text-xs text-slate-300/80 mb-1">Farbe (HEX)</label>
|
||
<div class="flex items-center gap-2">
|
||
<input
|
||
type="text"
|
||
placeholder="#22c55e"
|
||
wire:model.lazy="tags.{{ $i }}.color"
|
||
class="nx-input font-mono"
|
||
>
|
||
<input
|
||
type="color"
|
||
value="{{ $t['color'] ?? '#22c55e' }}"
|
||
wire:change="pickTagColor({{ $i }}, $event.target.value)"
|
||
class="size-8 min-w-8 rounded-md border border-white/15 bg-white/5 p-1 cursor-pointer"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Palette + Entfernen --}}
|
||
<div class="mt-3 flex items-center justify-between gap-2">
|
||
<div class="flex gap-2">
|
||
<span class="text-xs text-slate-400">Palette:</span>
|
||
@foreach($tagPalette as $hex)
|
||
<button
|
||
type="button"
|
||
class="h-6 w-6 rounded-md border {{ ($t['color'] ?? '') === $hex ? 'ring-2 ring-white/80' : 'border-white/15' }}"
|
||
style="background: {{ $hex }}"
|
||
wire:click="pickTagColor({{ $i }}, '{{ $hex }}')"
|
||
title="{{ $hex }}"
|
||
></button>
|
||
@endforeach
|
||
</div>
|
||
<button
|
||
type="button"
|
||
wire:click="removeTag({{ $i }})"
|
||
class="inline-flex items-center gap-1.5 rounded-lg p-2 bg-rose-500/20 text-rose-200 border border-rose-400/40 hover:bg-rose-500/30 shrink-0"
|
||
>
|
||
<i class="ph ph-trash-simple text-sm"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
|
||
{{-- Tag hinzufügen --}}
|
||
<div class="mt-8 text-end">
|
||
<button
|
||
type="button"
|
||
wire:click="addTag"
|
||
class="inline-flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-2.5 py-1 text-xs text-white/80 hover:text-white hover:border-white/20">
|
||
<i class="ph ph-plus text-[14px]"></i> Tag hinzufügen
|
||
</button>
|
||
</div>
|
||
|
||
@error('tags.*.label') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
|
||
@error('tags.*.color') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
|
||
</div>
|
||
</section>
|
||
|
||
{{-- SECTION: Limits (Anzahl) --}}
|
||
<section class="rounded-2xl border border-slate-700/60 bg-white/[0.04] p-5 backdrop-blur">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||
<div>
|
||
<label class="text-sm text-slate-200">Max. mögliche Aliasse</label>
|
||
<input type="number" wire:model.defer="max_aliases" class="mt-1 nx-input">
|
||
@error('max_aliases') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
|
||
</div>
|
||
<div>
|
||
<label class="text-sm text-slate-200">Max. mögliche Mailboxen</label>
|
||
<input type="number" wire:model.defer="max_mailboxes" class="mt-1 nx-input">
|
||
@error('max_mailboxes') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- SECTION: Quotas / Speicher --}}
|
||
<section class="rounded-2xl border border-slate-700/60 bg-white/[0.04] p-5 backdrop-blur">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||
<div>
|
||
<div class="flex items-center gap-2">
|
||
<label class="text-sm text-slate-200">Standard-Quota je Mailbox (MiB)</label>
|
||
<span
|
||
class="px-2 py-0.5 rounded-full text-[11px] border border-indigo-500/30 bg-indigo-500/15 text-indigo-200">Voreinstellung</span>
|
||
</div>
|
||
<input type="number" wire:model.defer="default_quota_mb" class="mt-1 nx-input">
|
||
<p class="mt-2 text-xs text-slate-300/90">Startwert für neue Postfächer (pro Postfach änderbar).</p>
|
||
@error('default_quota_mb') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
|
||
</div>
|
||
|
||
<div>
|
||
<div class="flex items-center gap-2">
|
||
<label class="text-sm text-slate-200">Speicher je Mailbox (MiB)</label>
|
||
<span
|
||
class="px-2 py-0.5 rounded-full text-[11px] border border-fuchsia-500/30 bg-fuchsia-500/15 text-fuchsia-200">Obergrenze</span>
|
||
<span
|
||
class="px-2 py-0.5 rounded-full text-[11px] border border-slate-600/60 bg-slate-800/70 text-slate-200">optional</span>
|
||
</div>
|
||
<input type="number" wire:model.defer="max_quota_per_mailbox_mb" class="mt-1 nx-input">
|
||
<p class="mt-2 text-xs text-slate-300/90">
|
||
Leer lassen = keine Obergrenze; limitiert nur durch die <span
|
||
class="underline decoration-slate-600/70">Domain-Gesamtgröße</span>.
|
||
</p>
|
||
@error('max_quota_per_mailbox_mb') <p
|
||
class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
|
||
</div>
|
||
|
||
<div class="md:col-span-2">
|
||
<label class="text-sm text-slate-200">Domain-Speicherplatz gesamt (MiB)</label>
|
||
<input type="number" min="1" max="{{ $available_mib }}" wire:model.defer="total_quota_mb"
|
||
class="mt-1 nx-input">
|
||
<div class="mt-2 text-xs">
|
||
<div
|
||
class="inline-flex items-center gap-2 rounded-lg border border-slate-700/70 bg-slate-900/70 px-2 py-1 text-slate-300/90">
|
||
<i class="ph ph-info"></i>
|
||
Verfügbar (nach Systemreserve): {{ number_format($available_mib) }} MiB
|
||
</div>
|
||
<p class="mt-2 text-slate-300/80">Beachte: Summe aller Postfach-Quotas darf diese Domain-Größe
|
||
nicht überschreiten.</p>
|
||
</div>
|
||
@error('total_quota_mb') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- SECTION: Versandlimits & Status --}}
|
||
<section class="rounded-2xl border border-slate-700/60 bg-white/[0.04] p-5 backdrop-blur">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||
<div>
|
||
<div class="flex items-center gap-2">
|
||
<label class="text-sm text-slate-200">Mails pro Stunde</label>
|
||
<span
|
||
class="px-2 py-0.5 rounded-full text-[11px] border border-slate-600/60 bg-slate-800/70 text-slate-200">optional</span>
|
||
</div>
|
||
<input type="number" placeholder="leer = kein Limit" wire:model.defer="rate_limit_per_hour"
|
||
class="mt-1 nx-input">
|
||
@error('rate_limit_per_hour') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
|
||
</div>
|
||
|
||
<div class="grid items-center gap-3">
|
||
<label class="inline-flex items-center gap-3 select-none">
|
||
<input type="checkbox" wire:model.defer="rate_limit_override"
|
||
class="peer appearance-none w-5 h-5 rounded-md border border-emerald-500/50 bg-transparent checked:bg-emerald-500 checked:border-emerald-400 grid place-content-center transition">
|
||
<span class="text-slate-200">Postfach-Overrides erlauben</span>
|
||
</label>
|
||
<label class="inline-flex items-center gap-3 select-none">
|
||
<input type="checkbox" wire:model.defer="active"
|
||
class="peer appearance-none w-5 h-5 rounded-md border border-emerald-500/50 bg-transparent checked:bg-emerald-500 checked:border-emerald-400 grid place-content-center transition">
|
||
<span class="text-slate-200">Domain aktivieren</span>
|
||
</label>
|
||
|
||
</div>
|
||
|
||
{{-- <div class="flex items-center gap-3">--}}
|
||
{{-- <label class="inline-flex items-center gap-3 select-none">--}}
|
||
{{-- <input type="checkbox" wire:model.defer="active"--}}
|
||
{{-- class="peer appearance-none w-5 h-5 rounded-md border border-emerald-500/50 bg-transparent checked:bg-emerald-500 checked:border-emerald-400 grid place-content-center transition">--}}
|
||
{{-- <span class="text-slate-200">Domain aktivieren</span>--}}
|
||
{{-- </label>--}}
|
||
{{-- </div>--}}
|
||
</div>
|
||
</section>
|
||
|
||
{{-- SECTION: DKIM --}}
|
||
<section class="rounded-2xl border border-slate-700/60 bg-white/[0.04] p-5 backdrop-blur">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||
<div>
|
||
<label class="text-sm text-slate-200">DKIM-Selector</label>
|
||
<input type="text" placeholder="dkim" wire:model.defer="dkim_selector" class="mt-1 nx-input">
|
||
@error('dkim_selector') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
|
||
</div>
|
||
<div>
|
||
<label class="text-sm text-slate-200">DKIM-Schlüssellänge (bits)</label>
|
||
<select wire:model.defer="dkim_bits" class="mt-1 nx-input">
|
||
<option value="1024">1024</option>
|
||
<option value="2048">2048</option>
|
||
<option value="3072">3072</option>
|
||
<option value="4096">4096</option>
|
||
</select>
|
||
<p class="mt-2 text-xs text-slate-300/90">
|
||
<i class="ph ph-warning-circle mr-1"></i>
|
||
2048 ist meist ideal. 4096 erzeugt sehr lange TXT-Records – DNS-Provider prüfen.
|
||
</p>
|
||
@error('dkim_bits') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
@push('modal.footer')
|
||
<div class="px-5 py-3 border-t border-white/10 backdrop-blur rounded-b-2xl">
|
||
<div class="flex justify-end gap-2">
|
||
<button type="button" wire:click="$dispatch('closeModal')"
|
||
class="px-4 py-2 rounded-lg text-sm border border-white/10 text-white/70 hover:text-white hover:border-white/20">
|
||
Abbrechen
|
||
</button>
|
||
|
||
<button type="submit" wire:click="$dispatch('domain:create')"
|
||
class="px-4 py-2 rounded-lg text-sm bg-emerald-500/20 text-emerald-300 border border-emerald-400/30 hover:bg-emerald-500/30">
|
||
Domain hinzufügen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
@endpush
|