385 lines
23 KiB
PHP
385 lines
23 KiB
PHP
{{-- resources/views/livewire/domains/dns-assistant-modal.blade.php --}}
|
|
@push('modal.header')
|
|
<div class="px-5 pt-5 pb-3 border-b border-white/10 backdrop-blur rounded-t-2xl relative">
|
|
<span class="absolute top-3 right-3 z-20 inline-flex items-center gap-2
|
|
rounded-full border border-slate-700/70 bg-slate-800/70
|
|
px-3 py-1 text-[11px] text-slate-200 shadow-sm">
|
|
<i class="ph ph-clock text-slate-300"></i> TTL: {{ $ttl }}
|
|
</span>
|
|
|
|
<h2 class="text-[18px] font-semibold text-slate-100">DNS-Einträge</h2>
|
|
<p class="text-[13px] text-slate-300/80">
|
|
Setze die folgenden Records für
|
|
<span class="text-sky-300 underline decoration-sky-500/40 underline-offset-2">{{ $zone }}</span>.
|
|
</p>
|
|
</div>
|
|
@endpush
|
|
|
|
<div class="relative p-5">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
|
|
{{-- Step 1: Mail-Records (domain-spezifisch) --}}
|
|
<section>
|
|
<div class="mb-2 flex items-center gap-2 text-[11px]">
|
|
<span class="px-2 py-0.5 rounded bg-slate-800/80 text-slate-200">Step 1</span>
|
|
<span class="text-slate-300/80">Mail-Records</span>
|
|
<span class="ml-auto px-2 py-0.5 rounded bg-indigo-600/20 text-indigo-200 border border-indigo-500/20">
|
|
<i class="ph ph-seal-check mr-1"></i> Absenderdomain
|
|
</span>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
@foreach ($dynamic as $r)
|
|
<div class="rounded-xl border {{ $r['boxClass'] ?? $stateColors['neutral'] }}">
|
|
<div class="flex items-center justify-between px-4 py-2 text-[12px]">
|
|
<div class="flex items-center gap-2">
|
|
<span class="px-2 py-0.5 rounded {{ $recordColors[$r['type']] ?? 'bg-slate-700/50 text-slate-300' }}">
|
|
{{ $r['type'] }}
|
|
</span>
|
|
<span class="text-slate-200">{{ $r['name'] }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-slate-300/70">
|
|
<x-button.copy-btn :text="$r['value']" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 pb-3 space-y-2">
|
|
<pre class="text-[12px] w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 opacity-80 whitespace-pre-wrap break-all">{{ $r['value'] }}</pre>
|
|
|
|
@if($checked && filled(trim($r['actual'] ?? '')) && ($r['state'] ?? '') !== 'ok')
|
|
<div class="text-[11px] text-white/60 break-words">
|
|
<span class="opacity-70">Ist:</span>
|
|
<span class="font-mono break-all">
|
|
{{ str_replace('"', '', preg_replace('/\s+/', ' ', trim($r['actual']))) }}
|
|
</span>
|
|
</div>
|
|
@endif
|
|
{{-- @if($checked && !empty($r['actual']))--}}
|
|
{{-- <div class="text-[11px] text-white/60">--}}
|
|
{{-- <span class="opacity-70">Ist:</span>--}}
|
|
{{-- <span class="font-mono break-words">{{ $r['actual'] }}</span>--}}
|
|
{{-- </div>--}}
|
|
{{-- @endif--}}
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
{{-- Step 2: Globale Infrastruktur (MTA-Host) --}}
|
|
<section>
|
|
<div class="mb-2 flex items-center gap-2 text-[11px]">
|
|
<span class="px-2 py-0.5 rounded bg-slate-800/80 text-slate-200">Step 2</span>
|
|
<span class="text-slate-300/80">Globale Infrastruktur (MTA-Host)</span>
|
|
<span class="text-slate-400/70">gilt für alle Domains</span>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
@foreach ($static as $r)
|
|
<div class="rounded-xl border {{ $r['boxClass'] ?? $stateColors['neutral'] }}">
|
|
<div class="flex items-center justify-between px-4 py-2 text-[12px]">
|
|
<div class="flex items-center gap-2">
|
|
<span class="px-2 py-0.5 rounded {{ $recordColors[$r['type']] ?? 'bg-slate-700/50 text-slate-300' }}">{{ $r['type'] }}</span>
|
|
<span class="text-slate-200">{{ $r['name'] }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-slate-300/70">
|
|
<x-button.copy-btn :text="$r['value']" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 pb-3 space-y-2">
|
|
<pre class="text-[12px] w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 opacity-80 whitespace-pre-wrap break-all">{{ $r['value'] }}</pre>
|
|
@if($checked && filled(trim($r['actual'] ?? '')) && ($r['state'] ?? '') !== 'ok')
|
|
<div class="text-[11px] text-white/60 break-words">
|
|
<span class="opacity-70">Ist:</span>
|
|
<span class="font-mono break-all">{{ $r['actual'] }}</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{{-- Optional-Block unterhalb (einspaltig) --}}
|
|
@if(!empty($optional))
|
|
<div class="mt-5">
|
|
<div class="mb-2 flex items-center gap-2 text-[11px]">
|
|
<span class="px-2 py-0.5 rounded bg-slate-800/80 text-slate-200">Optional</span>
|
|
<span class="text-slate-300/80">empfohlene Zusatz-Records</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
@foreach ($optional as $r)
|
|
<div class="rounded-xl border {{ $r['boxClass'] ?? $stateColors['neutral'] }}">
|
|
<div class="flex items-center justify-between px-4 py-2 text-[12px]">
|
|
<div class="flex items-center gap-2">
|
|
<span class="px-2 py-0.5 rounded {{ $recordColors[$r['type']] ?? 'bg-slate-700/50 text-slate-300' }}">
|
|
{{ $r['type'] }}
|
|
</span>
|
|
<span class="text-slate-200">{{ $r['name'] }}</span>
|
|
<span class="ml-2 text-[10px] px-2 py-0.5 rounded bg-white/5 border border-white/10 text-white/70">
|
|
Optional
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-slate-300/70">
|
|
<x-button.copy-btn :text="$r['value']" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 pb-3 space-y-2">
|
|
<pre class="text-[12px] w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 opacity-80 whitespace-pre-wrap break-all">{{ $r['value'] }}</pre>
|
|
|
|
@if($checked && filled(trim($r['actual'] ?? '')) && ($r['state'] ?? '') !== 'ok')
|
|
<div class="text-[11px] text-white/60 break-words">
|
|
<span class="opacity-70">Ist:</span>
|
|
<span class="font-mono break-all">
|
|
{{ str_replace('"', '', preg_replace('/\s+/', ' ', trim($r['actual']))) }}
|
|
</span>
|
|
</div>
|
|
@endif
|
|
@if(!empty($r['helpUrl']))
|
|
<div>
|
|
<span class="text-xs text-white/60">{{ $r['info'] }}</span>
|
|
</div>
|
|
<a href="{{ $r['helpUrl'] }}" target="_blank" rel="noopener"
|
|
class="mt-2 inline-flex items-center gap-1 text-[12px] text-sky-300 hover:text-sky-200">
|
|
<i class="ph ph-arrow-square-out"></i>{{ $r['helpLabel'] }}
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@push('modal.footer')
|
|
<div class="px-5 py-3 border-t border-white/10 backdrop-blur rounded-b-2xl">
|
|
<div class="flex flex-wrap items-center gap-4 text-[12px] text-slate-300">
|
|
|
|
<span class="inline-flex items-center gap-1">
|
|
<i class="ph ph-check-circle text-emerald-300"></i> vorhanden
|
|
</span>
|
|
<span class="inline-flex items-center gap-1">
|
|
<i class="ph ph-warning text-amber-300"></i> Syntaxfehler
|
|
</span>
|
|
<span class="inline-flex items-center gap-1">
|
|
<i class="ph ph-x-circle text-rose-300"></i> fehlt (nur Pflicht)
|
|
</span>
|
|
|
|
<span class="ml-auto"></span>
|
|
|
|
<button wire:click="$dispatch('domain:check-dns')" wire:loading.attr="disabled"
|
|
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-[12px]
|
|
bg-white/5 border border-white/10 hover:bg-white/10">
|
|
<i class="ph ph-magnifying-glass"></i>
|
|
<span wire:loading.remove>DNS prüfen</span>
|
|
<span wire:loading>prüfe…</span>
|
|
</button>
|
|
|
|
<button wire:click="$dispatch('closeModal')"
|
|
class="px-3 py-1.5 rounded-lg text-sm bg-emerald-500/20 text-emerald-300
|
|
border border-emerald-400/30 hover:bg-emerald-500/30">
|
|
<i class="ph ph-check"></i> Fertig
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endpush
|
|
|
|
{{--@push('modal.header')--}}
|
|
{{-- <div class="px-5 pt-5 pb-3 border-b border-white/10--}}
|
|
{{-- backdrop-blur rounded-t-2xl relative">--}}
|
|
{{-- <span class="absolute top-3 right-3 z-20 inline-flex items-center gap-2--}}
|
|
{{-- rounded-full border border-slate-700/70 bg-slate-800/70--}}
|
|
{{-- px-3 py-1 text-[11px] text-slate-200 shadow-sm">--}}
|
|
{{-- <i class="ph ph-clock text-slate-300"></i> TTL: {{ $ttl }}--}}
|
|
{{-- </span>--}}
|
|
{{-- <h2 class="text-[18px] font-semibold text-slate-100">DNS-Einträge</h2>--}}
|
|
|
|
{{-- <p class="text-[13px] text-slate-300/80">--}}
|
|
{{-- Setze die folgenden Records für--}}
|
|
{{-- <span class="text-sky-300 underline decoration-sky-500/40 underline-offset-2">{{ $zone }}</span>.--}}
|
|
{{-- </p>--}}
|
|
{{-- </div>--}}
|
|
{{--@endpush--}}
|
|
|
|
{{--<div class="relative p-5">--}}
|
|
{{-- <div class="space-y-5">--}}
|
|
{{-- --}}{{-- GRID: links (Mail-Records), rechts (Infrastruktur) --}}
|
|
{{-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">--}}
|
|
{{-- --}}{{-- Mail-Records --}}
|
|
{{-- <section>--}}
|
|
{{-- <div class="mb-2 flex items-center gap-2 text-[11px]">--}}
|
|
{{-- <span class="px-2 py-0.5 rounded bg-slate-800/80 text-slate-200">Step 1</span>--}}
|
|
{{-- <span class="text-slate-300/80">Mail-Records</span>--}}
|
|
{{-- <span class="ml-auto px-2 py-0.5 rounded bg-indigo-600/20 text-indigo-200 border border-indigo-500/20">--}}
|
|
{{-- <i class="ph ph-seal-check mr-1"></i>Absenderdomain--}}
|
|
{{-- </span>--}}
|
|
{{-- </div>--}}
|
|
|
|
{{-- <div class="space-y-4">--}}
|
|
{{-- @foreach ($dynamic as $r)--}}
|
|
{{-- <div class="rounded-xl border--}}
|
|
{{-- {{ $checked ? ($stateColors[$r['state'] ?? 'neutral'] ?? $stateColors['neutral']) : $stateColors['neutral'] }}">--}}
|
|
{{-- <div class="flex items-center justify-between px-4 py-2 text-[12px]">--}}
|
|
{{-- <div class="flex items-center gap-2">--}}
|
|
{{-- <span class="px-2 py-0.5 rounded {{ $recordColors[$r['type']] ?? 'bg-slate-700/50 text-slate-300' }}">--}}
|
|
{{-- {{ $r['type'] }}--}}
|
|
{{-- </span>--}}
|
|
{{-- <span class="text-slate-200">{{ $r['name'] }}</span>--}}
|
|
{{-- </div>--}}
|
|
{{-- <div class="flex items-center gap-2 text-slate-300/70">--}}
|
|
{{-- <x-button.copy-btn :text="$r['value']" />--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{-- <div class="px-4 pb-3">--}}
|
|
{{-- <pre class="text-[12px] w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm opacity-70 whitespace-pre-wrap break-all">{{ $r['value'] }}</pre>--}}
|
|
{{-- @if(!empty($r['helpUrl']))--}}
|
|
{{-- <a href="{{ $r['helpUrl'] }}" target="_blank" rel="noopener"--}}
|
|
{{-- class="mt-2 inline-flex items-center gap-1 text-[12px] text-sky-300 hover:text-sky-200">--}}
|
|
{{-- <i class="ph ph-arrow-square-out"></i>{{ $r['helpLabel'] }}--}}
|
|
{{-- </a>--}}
|
|
{{-- @endif--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{-- <div class="rounded-xl border border-white/10 bg-white/[0.04] #rounded-xl #border #border-slate-700/50 #bg-slate-900/60">--}}
|
|
{{-- <div class="flex items-center justify-between px-4 py-2 text-[12px]">--}}
|
|
{{-- <div class="flex items-center gap-2">--}}
|
|
{{-- <span class="px-2 py-0.5 rounded {{ $recordColors[$r['type']] ?? 'bg-slate-700/50 text-slate-300' }}">{{ $r['type'] }}</span>--}}
|
|
{{-- <span class="text-slate-200">{{ $r['name'] }}</span>--}}
|
|
{{-- </div>--}}
|
|
{{-- <div class="flex items-center gap-2 text-slate-300/70">--}}
|
|
{{-- <x-button.copy-btn :text="$r['value']" />--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{-- <div class="px-4 pb-3">--}}
|
|
{{-- <pre class="text-[12px] w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm opacity-70 whitespace-pre-wrap break-all">{{ $r['value'] }}</pre>--}}
|
|
{{-- @if(!empty($r['helpUrl']))--}}
|
|
{{-- <a href="{{ $r['helpUrl'] }}" target="_blank" rel="noopener"--}}
|
|
{{-- class="mt-2 inline-flex items-center gap-1 text-[12px] text-sky-300 hover:text-sky-200">--}}
|
|
{{-- <i class="ph ph-arrow-square-out"></i>{{ $r['helpLabel'] }}--}}
|
|
{{-- </a>--}}
|
|
{{-- @endif--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{-- @endforeach--}}
|
|
|
|
{{-- @foreach ($optional as $r)--}}
|
|
{{-- <div class="rounded-xl border border-white/10 bg-white/[0.04] #rounded-xl #border #border-slate-700/50 #bg-slate-900/60">--}}
|
|
{{-- <div class="flex items-center justify-between px-4 py-2 text-[12px]">--}}
|
|
{{-- <div class="flex items-center gap-2">--}}
|
|
{{-- <span class="px-2 py-0.5 rounded {{ $recordColors[$r['type']] ?? 'bg-slate-700/50 text-slate-300' }}">{{ $r['type'] }}</span>--}}
|
|
{{-- <span class="text-slate-200">{{ $r['name'] }}</span>--}}
|
|
{{-- </div>--}}
|
|
{{-- <div class="flex items-center gap-2 text-slate-300/70">--}}
|
|
{{-- <span class="text-[11px] px-2 py-0.5 rounded {{ $recordColors['OPTIONAL'] ?? 'bg-slate-700/50 text-slate-300' }}">Optional</span>--}}
|
|
{{-- <x-button.copy-btn :text="$r['value']" />--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{-- <div class="px-4 pb-3">--}}
|
|
{{-- <pre class="text-[12px] w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm opacity-70 whitespace-pre-wrap break-all">{{ $r['value'] }}</pre>--}}
|
|
{{-- @if(!empty($r['helpUrl']))--}}
|
|
{{-- <a href="{{ $r['helpUrl'] }}" target="_blank" rel="noopener"--}}
|
|
{{-- class="mt-2 inline-flex items-center gap-1 text-[12px] text-sky-300 hover:text-sky-200">--}}
|
|
{{-- <i class="ph ph-arrow-square-out"></i>{{ $r['helpLabel'] }}--}}
|
|
{{-- </a>--}}
|
|
{{-- @endif--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{-- @endforeach--}}
|
|
{{-- </div>--}}
|
|
{{-- </section>--}}
|
|
|
|
{{-- --}}{{-- Globale Infrastruktur --}}
|
|
{{-- <section>--}}
|
|
{{-- <div class="mb-2 flex items-center gap-2 text-[11px]">--}}
|
|
{{-- <span class="px-2 py-0.5 rounded bg-slate-800/80 text-slate-200">Step 2</span>--}}
|
|
{{-- <span class="text-slate-300/80">Globale Infrastruktur (MTA-Host)</span>--}}
|
|
{{-- <span class="text-slate-400/70">gilt für alle Domains</span>--}}
|
|
{{-- </div>--}}
|
|
|
|
{{-- <div class="space-y-4">--}}
|
|
{{-- @foreach ($static as $r)--}}
|
|
{{-- <div class="rounded-xl border--}}
|
|
{{-- {{ $checked ? ($stateColors[$r['state'] ?? 'neutral'] ?? $stateColors['neutral']) : $stateColors['neutral'] }}">--}}
|
|
{{-- <div class="flex items-center justify-between px-4 py-2 text-[12px]">--}}
|
|
{{-- <div class="flex items-center gap-2">--}}
|
|
{{-- <span class="px-2 py-0.5 rounded {{ $recordColors[$r['type']] ?? 'bg-slate-700/50 text-slate-300' }}">--}}
|
|
{{-- {{ $r['type'] }}--}}
|
|
{{-- </span>--}}
|
|
{{-- <span class="text-slate-200">{{ $r['name'] }}</span>--}}
|
|
{{-- </div>--}}
|
|
{{-- <div class="flex items-center gap-2 text-slate-300/70">--}}
|
|
{{-- <x-button.copy-btn :text="$r['value']" />--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{-- <div class="px-4 pb-3">--}}
|
|
{{-- <pre class="text-[12px] w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm opacity-70 whitespace-pre-wrap break-all">{{ $r['value'] }}</pre>--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
|
|
{{-- <div class="rounded-xl border border-white/10 bg-white/[0.04] #rounded-xl #border #border-slate-700/50 #bg-slate-900/60">--}}
|
|
{{-- <div class="flex items-center justify-between px-4 py-2 text-[12px]">--}}
|
|
{{-- <div class="flex items-center gap-2">--}}
|
|
{{-- <span class="px-2 py-0.5 rounded {{ $recordColors[$r['type']] ?? 'bg-slate-700/50 text-slate-300' }}">{{ $r['type'] }}</span>--}}
|
|
{{-- <span class="text-slate-200">{{ $r['name'] }}</span>--}}
|
|
{{-- </div>--}}
|
|
{{-- <div class="flex items-center gap-2 text-slate-300/70">--}}
|
|
{{-- <x-button.copy-btn :text="$r['value']" />--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{-- <div class="px-4 pb-3">--}}
|
|
{{-- <pre class="text-[12px] w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm opacity-70 whitespace-pre-wrap break-all">{{ $r['value'] }}</pre>--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{-- @endforeach--}}
|
|
{{-- </div>--}}
|
|
{{-- </section>--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{--</div>--}}
|
|
|
|
{{--@push('modal.footer')--}}
|
|
{{-- <div class="px-5 py-3 border-t border-white/10 backdrop-blur rounded-b-2xl">--}}
|
|
{{-- <div class="flex flex-wrap items-center gap-4 text-[12px] text-slate-300">--}}
|
|
{{-- <span class="inline-flex items-center gap-1">--}}
|
|
{{-- <i class="ph ph-check-circle text-emerald-300"></i> vorhanden--}}
|
|
{{-- </span>--}}
|
|
{{-- <span class="inline-flex items-center gap-1">--}}
|
|
{{-- <i class="ph ph-warning text-amber-300"></i> abweichend--}}
|
|
{{-- </span>--}}
|
|
{{-- <span class="inline-flex items-center gap-1">--}}
|
|
{{-- <i class="ph ph-x-circle text-rose-300"></i> fehlt--}}
|
|
{{-- </span>--}}
|
|
|
|
{{-- <span class="ml-auto">--}}
|
|
{{-- <div class="flex items-center gap-2">--}}
|
|
{{-- <button wire:click="$dispatch('domain:check-dns')" wire:loading.attr="disabled"--}}
|
|
{{-- class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-[12px]--}}
|
|
{{-- bg-white/5 border border-white/10 hover:bg-white/10">--}}
|
|
{{-- <i class="ph ph-magnifying-glass"></i>--}}
|
|
{{-- <span wire:loading.remove>DNS prüfen</span>--}}
|
|
{{-- <span wire:loading>prüfe…</span>--}}
|
|
{{-- </button>--}}
|
|
{{-- <button wire:click="$dispatch('closeModal')"--}}
|
|
{{-- class="px-3 py-1.5 rounded-lg text-sm bg-emerald-500/20 text-emerald-300 border border-emerald-400/30 hover:bg-emerald-500/30">--}}
|
|
{{-- <i class="ph ph-check"></i> Fertig--}}
|
|
{{-- </button>--}}
|
|
{{-- </div>--}}
|
|
{{-- </span>--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{--@endpush--}}
|
|
{{--@push('modal.footer')--}}
|
|
{{-- <div class="px-5 py-3 border-t border-white/10 backdrop-blur rounded-b-2xl">--}}
|
|
{{-- <div class="flex justify-end">--}}
|
|
{{-- <button wire:click="$dispatch('closeModal')"--}}
|
|
{{-- 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">--}}
|
|
{{-- <i class="ph ph-check"></i> Fertig--}}
|
|
{{-- </button>--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{--@endpush--}}
|