Fix: SSL-Seite zweispaltig (Tabelle links, Einrichten rechts) + Settings kompakt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
main v1.1.287
boban 2026-04-26 10:20:28 +02:00
parent 996c9c19fe
commit 38d6fdba6f
2 changed files with 110 additions and 143 deletions

View File

@ -27,116 +27,9 @@
</div>
</div>
{{-- Zweispaltig: links Einrichten, rechts Tabelle --}}
<div class="sec-layout">
{{-- ═══ Linke Spalte: Einrichten ═══ --}}
<div style="min-width:0">
<div class="mbx-sections">
<div class="mbx-section">
<div class="mbx-domain-head">
<div class="mbx-domain-info">
<span class="mbx-badge-mute">Let's Encrypt einrichten</span>
</div>
</div>
<div style="padding:14px 16px;display:flex;flex-direction:column;gap:10px">
{{-- Domain-Status --}}
@php
$domainMap = [
'ui' => ['label' => 'UI', 'domain' => $uiDomain],
'webmail' => ['label' => 'Webmail', 'domain' => $webmailDomain],
'mail' => ['label' => 'Mailserver', 'domain' => $mailDomain],
];
@endphp
<div style="display:flex;flex-direction:column;gap:5px">
@foreach($domainMap as $key => $info)
@php
$d = $info['domain'];
$certOk = $d && (file_exists("/etc/letsencrypt/renewal/{$d}.conf") || is_dir("/etc/letsencrypt/live/{$d}"));
@endphp
<div style="display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;background:var(--mw-bg3);border:1px solid var(--mw-b2)">
@if(!$d)
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:var(--mw-t4)"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
@elseif($certOk)
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:#22c55e"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M5 9.5l1.3 1.3 2.7-2.7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
@else
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:#f87171"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M5 5l4 4M9 5l-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
@endif
<div style="flex:1;min-width:0;overflow:hidden">
<span style="font-size:11px;font-weight:500;color:var(--mw-t3)">{{ $info['label'] }}</span>
@if($d)
<span style="font-size:10.5px;color:var(--mw-t4);margin-left:6px;font-family:monospace;white-space:nowrap">{{ $d }}</span>
@endif
</div>
<span style="font-size:10.5px;flex-shrink:0;color:{{ !$d ? 'var(--mw-t4)' : ($certOk ? '#22c55e' : '#f87171') }}">
{{ !$d ? '—' : ($certOk ? 'Vorhanden' : 'Fehlt') }}
</span>
</div>
@endforeach
</div>
{{-- Fortschritt --}}
@if($sslProvisioning || $sslDone)
<div style="display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:8px;background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.2)">
<div style="font-size:11px;font-weight:600;color:var(--mw-t2);margin-bottom:2px">
{{ $sslProvisioning ? 'Zertifikate werden eingerichtet…' : 'Einrichtung abgeschlossen' }}
</div>
@foreach(['ui' => 'UI', 'webmail' => 'Webmail', 'mail' => 'Mailserver'] as $key => $label)
@php $st = $sslProgress[$key] ?? 'pending'; @endphp
<div style="display:flex;align-items:center;gap:8px">
@if($st === 'done')
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="flex-shrink:0;color:#22c55e"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.1"/><path d="M3.5 6l1.8 1.8 3.2-3.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
@elseif($st === 'error' || $st === 'nodns')
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="flex-shrink:0;color:#f87171"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.1"/><path d="M4 4l4 4M8 4l-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
@elseif($st === 'running')
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="flex-shrink:0;color:#818cf8;animation:spin 1s linear infinite"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.3" stroke-dasharray="16 8" stroke-linecap="round"/></svg>
@else
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="flex-shrink:0;color:var(--mw-t4)"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.1" stroke-dasharray="3 3"/></svg>
@endif
<span style="font-size:11px;color:{{ in_array($st,['error','nodns']) ? '#f87171' : ($st==='done' ? '#22c55e' : 'var(--mw-t3)') }}">
{{ $label }}
@if($st === 'nodns') <span style="font-size:10px"> kein DNS</span>
@elseif($st === 'error') <span style="font-size:10px"> fehlgeschlagen</span>
@elseif($st === 'running') <span style="font-size:10px;color:var(--mw-t4)"> läuft…</span>
@endif
</span>
</div>
@endforeach
</div>
@endif
{{-- Button --}}
@if(!$uiDomain || !$webmailDomain || !$mailDomain)
<div style="font-size:11.5px;color:var(--mw-t4);padding:4px 0">
Bitte erst alle Domains unter
<a href="{{ route('ui.system.settings') }}" style="color:var(--mw-v)">Einstellungen</a>
speichern.
</div>
@else
<button wire:click="startSslProvisioning"
wire:loading.attr="disabled"
wire:target="startSslProvisioning"
@disabled($sslProvisioning)
class="{{ $sslDone ? 'mw-btn-secondary' : 'mw-btn-primary' }}"
style="width:100%;justify-content:center">
<svg width="12" height="12" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
<span wire:loading.remove wire:target="startSslProvisioning">
@if($sslProvisioning) Läuft…
@elseif($sslDone) Erneut einrichten
@else Let's Encrypt Zertifikate einrichten
@endif
</span>
<span wire:loading wire:target="startSslProvisioning">Startet…</span>
</button>
@endif
</div>
</div>
</div>
</div>
{{-- ═══ Rechte Spalte: Ausgestellte Zertifikate ═══ --}}
{{-- ═══ Links (breit): Ausgestellte Zertifikate ═══ --}}
<div style="min-width:0">
<div class="mbx-sections">
<div class="mbx-section">
@ -157,7 +50,7 @@
<div style="padding:28px 16px;text-align:center">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" style="color:var(--mw-t4);margin:0 auto 10px;display:block"><rect x="2" y="8" width="20" height="13" rx="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M7 8V6a5 5 0 0 1 10 0v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
<div style="font-size:12.5px;color:var(--mw-t3)">Noch keine Zertifikate</div>
<div style="font-size:11px;color:var(--mw-t4);margin-top:4px">Links auf "Einrichten" klicken</div>
<div style="font-size:11px;color:var(--mw-t4);margin-top:4px">Rechts auf "Einrichten" klicken</div>
</div>
@else
<div class="mbx-table-wrap">
@ -227,5 +120,97 @@
</div>
</div>
{{-- ═══ Rechts (schmal): Let's Encrypt einrichten ═══ --}}
<div style="min-width:0">
<div class="mbx-sections">
<div class="mbx-section">
<div class="mbx-domain-head">
<div class="mbx-domain-info">
<span class="mbx-badge-mute">Let's Encrypt einrichten</span>
</div>
</div>
<div style="padding:12px 14px;display:flex;flex-direction:column;gap:10px">
{{-- Nur Schloss + Domain --}}
@php
$domainMap = [
['domain' => $uiDomain],
['domain' => $webmailDomain],
['domain' => $mailDomain],
];
@endphp
<div style="display:flex;flex-direction:column;gap:5px">
@foreach($domainMap as $info)
@php
$d = $info['domain'];
$certOk = $d && (file_exists("/etc/letsencrypt/renewal/{$d}.conf") || is_dir("/etc/letsencrypt/live/{$d}"));
@endphp
<div style="display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;background:var(--mw-bg3);border:1px solid var(--mw-b2)">
@if($certOk)
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:#22c55e"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M5 9.5l1.3 1.3 2.7-2.7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
@elseif($d)
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:#f87171"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
@else
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:var(--mw-t4)"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
@endif
<span style="font-size:11px;color:var(--mw-t3);font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $d ?: '—' }}</span>
</div>
@endforeach
</div>
{{-- Fortschritt --}}
@if($sslProvisioning || $sslDone)
<div style="display:flex;flex-direction:column;gap:5px;padding:9px 11px;border-radius:7px;background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.2)">
<div style="font-size:11px;font-weight:600;color:var(--mw-t2);margin-bottom:1px">
{{ $sslProvisioning ? 'Läuft…' : 'Abgeschlossen' }}
</div>
@foreach(['ui' => 'UI', 'webmail' => 'Webmail', 'mail' => 'Mailserver'] as $key => $label)
@php $st = $sslProgress[$key] ?? 'pending'; @endphp
<div style="display:flex;align-items:center;gap:7px">
@if($st === 'done')
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" style="flex-shrink:0;color:#22c55e"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.1"/><path d="M3.5 6l1.8 1.8 3.2-3.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
@elseif($st === 'error' || $st === 'nodns')
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" style="flex-shrink:0;color:#f87171"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.1"/><path d="M4 4l4 4M8 4l-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
@elseif($st === 'running')
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" style="flex-shrink:0;color:#818cf8;animation:spin 1s linear infinite"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.3" stroke-dasharray="14 7" stroke-linecap="round"/></svg>
@else
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" style="flex-shrink:0;color:var(--mw-t4)"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.1" stroke-dasharray="3 3"/></svg>
@endif
<span style="font-size:10.5px;color:{{ in_array($st,['error','nodns']) ? '#f87171' : ($st==='done' ? '#22c55e' : 'var(--mw-t4)') }}">
{{ $label }}@if($st==='nodns') kein DNS@elseif($st==='error') Fehler@endif
</span>
</div>
@endforeach
</div>
@endif
{{-- Button --}}
@if(!$uiDomain || !$webmailDomain || !$mailDomain)
<p style="font-size:11px;color:var(--mw-t4);margin:0">
Erst alle Domains unter <a href="{{ route('ui.system.settings') }}" style="color:var(--mw-v)">Einstellungen</a> speichern.
</p>
@else
<button wire:click="startSslProvisioning"
wire:loading.attr="disabled"
wire:target="startSslProvisioning"
@disabled($sslProvisioning)
class="{{ $sslDone ? 'mw-btn-secondary' : 'mw-btn-primary' }}"
style="width:100%;justify-content:center">
<svg width="12" height="12" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
<span wire:loading.remove wire:target="startSslProvisioning">
@if($sslProvisioning) Läuft…
@elseif($sslDone) Erneut einrichten
@else Zertifikate einrichten
@endif
</span>
<span wire:loading wire:target="startSslProvisioning">Startet…</span>
</button>
@endif
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -294,46 +294,28 @@
<div class="mbx-domain-info">
<span class="mbx-badge-mute">SSL-Zertifikate</span>
</div>
<div class="mbx-domain-actions">
<a href="{{ route('ui.security.ssl') }}" class="mbx-act-btn" title="SSL-Verwaltung öffnen">
<svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M5.5 2H2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M9 1h4v4M13 1 7.5 6.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
</div>
<div style="padding:12px 16px;display:flex;flex-direction:column;gap:6px">
@php $certLabels = ['ui' => 'UI', 'webmail' => 'Webmail', 'mail' => 'Mailserver']; @endphp
<div style="padding:10px 14px;display:flex;flex-direction:column;gap:5px">
@foreach(['ui','webmail','mail'] as $key)
@php $c = $sslCerts[$key] ?? null; @endphp
<div style="display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:7px;background:var(--mw-bg3);border:1px solid var(--mw-b2)">
@if(!$c || $c['status'] === 'nodomain')
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:var(--mw-t4)"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
@elseif($c['status'] === 'ok')
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:#22c55e"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M5 9.5l1.3 1.3 2.7-2.7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
@elseif($c['status'] === 'expiring')
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:#f59e0b"><path d="M7 1.5L12.5 11H1.5L7 1.5Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/><path d="M7 5.5v2.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="9.5" r=".6" fill="currentColor"/></svg>
@php
$c = $sslCerts[$key] ?? null;
$ok = $c && in_array($c['status'], ['ok','expiring']);
$domain = $c['domain'] ?? '';
@endphp
<div style="display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;background:var(--mw-bg3);border:1px solid var(--mw-b2)">
@if($ok)
<svg width="12" height="12" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:#22c55e"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M5 9.5l1.3 1.3 2.7-2.7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
@elseif($domain)
<svg width="12" height="12" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:#f87171"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
@else
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:#f87171"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M5 5l4 4M9 5l-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
@endif
<div style="flex:1;min-width:0">
<span style="font-size:11px;font-weight:500;color:var(--mw-t3)">{{ $certLabels[$key] }}</span>
<span style="font-size:10.5px;color:var(--mw-t4);margin-left:6px;font-family:monospace">{{ $c['domain'] ?? '—' }}</span>
</div>
@if(!$c || $c['status'] === 'nodomain')
<span style="font-size:10.5px;color:var(--mw-t4)">Keine Domain</span>
@elseif($c['status'] === 'missing')
<span style="font-size:10.5px;color:#f87171">Fehlt</span>
@elseif($c['status'] === 'expired')
<span style="font-size:10.5px;color:#f87171">Abgelaufen</span>
@elseif($c['status'] === 'expiring')
<span style="font-size:10.5px;color:#f59e0b">Läuft ab in {{ $c['days'] }} Tagen</span>
@elseif($c['status'] === 'ok')
<span style="font-size:10.5px;color:#22c55e">Gültig bis {{ $c['expiry'] }}</span>
<svg width="12" height="12" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:var(--mw-t4)"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
@endif
<span style="font-size:11px;color:var(--mw-t3);font-family:monospace">{{ $domain ?: '—' }}</span>
</div>
@endforeach
<a href="{{ route('ui.security.ssl') }}" style="display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mw-v);padding:4px 2px;text-decoration:none">
<svg width="11" height="11" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
Zertifikate einrichten / erneuern
<a href="{{ route('ui.security.ssl') }}" style="display:flex;align-items:center;gap:5px;font-size:11px;color:var(--mw-v);padding:5px 2px;text-decoration:none;margin-top:2px">
<svg width="10" height="10" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="6" width="11" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.3"/><path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
Zertifikate verwalten
</a>
</div>
</div>