332 lines
22 KiB
PHP
332 lines
22 KiB
PHP
<div>
|
|
<style>
|
|
.mw-toggle{appearance:none;-webkit-appearance:none;width:34px;height:19px;border-radius:10px;
|
|
background:var(--mw-bg4);border:1.5px solid var(--mw-b2);position:relative;cursor:pointer;
|
|
flex-shrink:0;transition:background .18s,border-color .18s;display:block;margin-top:2px;}
|
|
.mw-toggle::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;
|
|
background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .18s;}
|
|
.mw-toggle:checked{background:var(--mw-v);border-color:var(--mw-v);}
|
|
.mw-toggle:checked::after{transform:translateX(15px);}
|
|
</style>
|
|
|
|
<div class="mbx-page-header">
|
|
<div class="mbx-page-title" style="font-size:14px;">Einstellungen</div>
|
|
</div>
|
|
|
|
{{-- ── Tab-Nav ─────────────────────────────────────────────────────────── --}}
|
|
<div style="display:flex;gap:2px;margin-bottom:20px;border-bottom:1px solid var(--mw-b1);padding-bottom:0;">
|
|
@foreach(['allgemein'=>'Allgemein','filter'=>'Filter','abwesenheit'=>'Abwesenheit','weiterleitung'=>'Weiterleitung'] as $key=>$label)
|
|
<button wire:click="$set('activeTab','{{ $key }}')"
|
|
style="padding:8px 14px;font-size:12.5px;background:none;border:none;cursor:pointer;
|
|
border-bottom:2px solid {{ $activeTab===$key ? 'var(--mw-v)' : 'transparent' }};
|
|
color:{{ $activeTab===$key ? 'var(--mw-t1)' : 'var(--mw-t4)' }};
|
|
font-weight:{{ $activeTab===$key ? '600' : '400' }};
|
|
margin-bottom:-1px;transition:color .1s;">
|
|
{{ $label }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
<form wire:submit.prevent="save">
|
|
|
|
{{-- ══════════════════════════════════════════════════════════════════════ --}}
|
|
{{-- TAB: ALLGEMEIN --}}
|
|
{{-- ══════════════════════════════════════════════════════════════════════ --}}
|
|
@if($activeTab === 'allgemein')
|
|
|
|
{{-- E-Mails lesen --}}
|
|
<div class="mbx-section" style="margin-bottom:16px;">
|
|
<div style="padding:14px 18px 12px;border-bottom:1px solid var(--mw-b1);display:flex;align-items:center;justify-content:space-between;">
|
|
<div>
|
|
<div style="font-size:13px;font-weight:600;color:var(--mw-t1);">E-Mails lesen</div>
|
|
<div style="font-size:11.5px;color:var(--mw-t4);margin-top:2px;">Verhalten beim Öffnen von Nachrichten</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- autoMarkRead --}}
|
|
<div style="padding:14px 18px;border-bottom:1px solid var(--mw-b1);display:flex;align-items:flex-start;gap:14px;">
|
|
<div style="flex:1;">
|
|
<div style="font-size:13px;color:var(--mw-t1);font-weight:500;">Automatisch als gelesen markieren</div>
|
|
<div style="font-size:12px;color:var(--mw-t4);margin-top:3px;line-height:1.5;">
|
|
E-Mails werden beim Öffnen automatisch als gelesen markiert. Deaktivieren, wenn du den Gelesentstatus manuell steuern möchtest.
|
|
</div>
|
|
@if($autoMarkRead)
|
|
<div style="margin-top:10px;display:flex;align-items:center;gap:10px;">
|
|
<span style="font-size:12px;color:var(--mw-t3);">Markieren nach</span>
|
|
<select wire:model="autoMarkReadDelay"
|
|
style="background:var(--mw-bg3);border:1px solid var(--mw-b1);border-radius:5px;padding:4px 8px;font-size:12px;color:var(--mw-t2);">
|
|
<option value="0">Sofort beim Anzeigen</option>
|
|
<option value="3">3 Sekunden</option>
|
|
<option value="5">5 Sekunden</option>
|
|
<option value="10">10 Sekunden</option>
|
|
<option value="30">30 Sekunden</option>
|
|
</select>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<input type="checkbox" class="mw-toggle" wire:model.live="autoMarkRead">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Signatur --}}
|
|
<div class="mbx-section" style="margin-bottom:16px;">
|
|
<div style="padding:14px 18px 12px;border-bottom:1px solid var(--mw-b1);">
|
|
<div style="font-size:13px;font-weight:600;color:var(--mw-t1);">Signatur</div>
|
|
<div style="font-size:11.5px;color:var(--mw-t4);margin-top:2px;">Wird automatisch an neue Nachrichten angehängt</div>
|
|
</div>
|
|
|
|
{{-- signatureNew --}}
|
|
<div style="padding:14px 18px;border-bottom:1px solid var(--mw-b1);display:flex;align-items:flex-start;gap:14px;">
|
|
<div style="flex:1;">
|
|
<div style="font-size:13px;color:var(--mw-t1);font-weight:500;">Signatur bei neuer Nachricht</div>
|
|
<div style="font-size:12px;color:var(--mw-t4);margin-top:3px;line-height:1.5;">
|
|
Beim Öffnen von „Neue Nachricht" wird der Signaturtext automatisch ins Textfeld eingefügt.
|
|
</div>
|
|
</div>
|
|
<input type="checkbox" class="mw-toggle" wire:model.live="signatureNew">
|
|
</div>
|
|
|
|
{{-- signatureReply --}}
|
|
<div style="padding:14px 18px;border-bottom:1px solid var(--mw-b1);display:flex;align-items:flex-start;gap:14px;">
|
|
<div style="flex:1;">
|
|
<div style="font-size:13px;color:var(--mw-t1);font-weight:500;">Signatur bei Antwort</div>
|
|
<div style="font-size:12px;color:var(--mw-t4);margin-top:3px;line-height:1.5;">
|
|
Beim Antworten auf eine E-Mail wird die Signatur automatisch oberhalb des zitierten Textes eingefügt.
|
|
</div>
|
|
</div>
|
|
<input type="checkbox" class="mw-toggle" wire:model.live="signatureReply">
|
|
</div>
|
|
|
|
{{-- Signaturtext --}}
|
|
<div style="padding:14px 18px;"
|
|
x-data="{ sig: {{ json_encode($signature) }}, get hasHtml() { return /<[a-zA-Z][^>]*>/.test(this.sig); } }">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
|
|
<label style="font-size:12px;color:var(--mw-t4);font-weight:500;">Signaturtext</label>
|
|
<span x-show="hasHtml"
|
|
style="font-size:10.5px;color:var(--mw-v2);background:var(--mw-vbg);
|
|
border:1px solid var(--mw-vbd);border-radius:4px;padding:1px 7px;">
|
|
HTML erkannt
|
|
</span>
|
|
</div>
|
|
<textarea wire:model.blur="signature" rows="5" class="mw-modal-input"
|
|
x-model="sig"
|
|
placeholder="-- Max Mustermann max@beispiel.de Oder mit HTML: <b>Max Mustermann</b><br>max@beispiel.de"
|
|
style="resize:vertical;font-family:monospace;font-size:12px;"></textarea>
|
|
|
|
{{-- HTML-Vorschau --}}
|
|
<div x-show="hasHtml" x-cloak
|
|
style="margin-top:10px;padding:10px 12px;background:var(--mw-bg4);border:1px solid var(--mw-b2);
|
|
border-radius:6px;">
|
|
<div style="font-size:10px;color:var(--mw-t5);text-transform:uppercase;letter-spacing:.06em;
|
|
font-weight:600;margin-bottom:6px;">Vorschau</div>
|
|
<div style="font-size:13px;line-height:1.6;color:var(--mw-t2);"
|
|
x-html="sig"></div>
|
|
</div>
|
|
|
|
<div style="font-size:11.5px;color:var(--mw-t4);margin-top:8px;line-height:1.5;">
|
|
Unterstützt HTML (z.B. <code style="background:var(--mw-bg3);padding:1px 5px;border-radius:3px;font-size:11px;"><b></code>,
|
|
<code style="background:var(--mw-bg3);padding:1px 5px;border-radius:3px;font-size:11px;"><a href="…"></code>,
|
|
<code style="background:var(--mw-bg3);padding:1px 5px;border-radius:3px;font-size:11px;"><br></code>).
|
|
Ohne HTML: Mit <code style="background:var(--mw-bg3);padding:1px 5px;border-radius:3px;font-size:11px;">-- </code> als erste Zeile als E-Mail-Standard-Trenner.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;justify-content:flex-end;gap:10px;align-items:center;">
|
|
<span wire:loading wire:target="save" style="font-size:12px;color:var(--mw-t4);">Wird gespeichert …</span>
|
|
<button type="submit" class="mbx-btn-primary">Einstellungen speichern</button>
|
|
</div>
|
|
|
|
{{-- ══════════════════════════════════════════════════════════════════════ --}}
|
|
{{-- TAB: FILTER --}}
|
|
{{-- ══════════════════════════════════════════════════════════════════════ --}}
|
|
@elseif($activeTab === 'filter')
|
|
|
|
<div style="margin-bottom:16px;padding:10px 14px;background:var(--mw-vbg);border:1px solid var(--mw-vbd);
|
|
border-radius:8px;font-size:12px;color:var(--mw-v2);display:flex;align-items:flex-start;gap:8px;">
|
|
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;margin-top:1px;">
|
|
<circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/>
|
|
<path d="M7 4.5v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
|
<circle cx="7" cy="10" r=".7" fill="currentColor"/>
|
|
</svg>
|
|
Filterregeln werden direkt auf dem Mailserver ausgeführt (Sieve). Sie wirken auf alle eingehenden E-Mails, bevor diese im Posteingang erscheinen.
|
|
</div>
|
|
|
|
{{-- Bestehende Regeln --}}
|
|
@if(count($filterRules))
|
|
<div class="mbx-section" style="margin-bottom:16px;">
|
|
<div style="padding:12px 16px;border-bottom:1px solid var(--mw-b1);font-size:11px;font-weight:600;color:var(--mw-t4);letter-spacing:.06em;text-transform:uppercase;">Aktive Regeln</div>
|
|
<table class="mbx-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="mbx-th">Bedingung</th>
|
|
<th class="mbx-th">Wert</th>
|
|
<th class="mbx-th">Aktion</th>
|
|
<th class="mbx-th" style="width:40px;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($filterRules as $rule)
|
|
@php
|
|
$fieldLabel = ['from'=>'Von','to'=>'An','subject'=>'Betreff'][$rule['field']] ?? $rule['field'];
|
|
$opLabel = ['is'=>'ist','contains'=>'enthält','domain'=>'Domain ist'][$rule['op']] ?? $rule['op'];
|
|
$actionLabel = ['discard'=>'Verwerfen','move'=>'Verschieben nach','forward'=>'Weiterleiten an'][$rule['action']] ?? $rule['action'];
|
|
$actionSuffix= in_array($rule['action'],['move','forward']) ? (' → '.($rule['folder'] ?? '')) : '';
|
|
@endphp
|
|
<tr class="mbx-tr">
|
|
<td class="mbx-td mbx-td-muted">{{ $fieldLabel }} {{ $opLabel }}</td>
|
|
<td class="mbx-td"><code style="font-size:11.5px;background:var(--mw-bg3);padding:2px 6px;border-radius:3px;">{{ $rule['value'] }}</code></td>
|
|
<td class="mbx-td">{{ $actionLabel }}{{ $actionSuffix }}</td>
|
|
<td class="mbx-td">
|
|
<button type="button" wire:click="removeFilterRule('{{ $rule['id'] }}')"
|
|
class="mbx-act-btn mbx-act-danger" style="padding:3px 8px;font-size:11px;">✕</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Neue Regel --}}
|
|
<div class="mbx-section" style="margin-bottom:16px;">
|
|
<div style="padding:12px 16px;border-bottom:1px solid var(--mw-b1);font-size:11px;font-weight:600;color:var(--mw-t4);letter-spacing:.06em;text-transform:uppercase;">Neue Regel</div>
|
|
<div style="padding:14px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;">
|
|
<div>
|
|
<div style="font-size:11.5px;color:var(--mw-t4);margin-bottom:4px;">Feld</div>
|
|
<select wire:model="newField" style="background:var(--mw-bg3);border:1px solid var(--mw-b1);border-radius:5px;padding:6px 8px;font-size:12.5px;color:var(--mw-t2);">
|
|
<option value="from">Von</option>
|
|
<option value="to">An</option>
|
|
<option value="subject">Betreff</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:11.5px;color:var(--mw-t4);margin-bottom:4px;">Operator</div>
|
|
<select wire:model="newOp" style="background:var(--mw-bg3);border:1px solid var(--mw-b1);border-radius:5px;padding:6px 8px;font-size:12.5px;color:var(--mw-t2);">
|
|
<option value="is">ist</option>
|
|
<option value="contains">enthält</option>
|
|
<option value="domain">Domain ist</option>
|
|
</select>
|
|
</div>
|
|
<div style="flex:1;min-width:160px;">
|
|
<div style="font-size:11.5px;color:var(--mw-t4);margin-bottom:4px;">Wert</div>
|
|
<input wire:model="newValue" type="text" class="mw-modal-input" style="margin:0;"
|
|
placeholder="z.B. noreply@domain.de oder domain.de">
|
|
@error('newValue') <div style="color:var(--mw-rd);font-size:11px;margin-top:3px;">{{ $message }}</div> @enderror
|
|
</div>
|
|
<div>
|
|
<div style="font-size:11.5px;color:var(--mw-t4);margin-bottom:4px;">Aktion</div>
|
|
<select wire:model.live="newAction" style="background:var(--mw-bg3);border:1px solid var(--mw-b1);border-radius:5px;padding:6px 8px;font-size:12.5px;color:var(--mw-t2);">
|
|
<option value="discard">Verwerfen</option>
|
|
<option value="move">In Ordner verschieben</option>
|
|
<option value="forward">Weiterleiten an</option>
|
|
</select>
|
|
</div>
|
|
@if(in_array($newAction, ['move','forward']))
|
|
<div>
|
|
<div style="font-size:11.5px;color:var(--mw-t4);margin-bottom:4px;">{{ $newAction === 'move' ? 'Zielordner' : 'Zieladresse' }}</div>
|
|
<input wire:model="newFolder" type="text" class="mw-modal-input" style="margin:0;width:150px;"
|
|
placeholder="{{ $newAction === 'move' ? 'Junk' : 'weiter@beispiel.de' }}">
|
|
</div>
|
|
@endif
|
|
<div style="padding-bottom:1px;">
|
|
<button type="button" wire:click="addFilterRule" class="mbx-btn-primary">+ Regel hinzufügen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;justify-content:flex-end;">
|
|
<button type="submit" class="mbx-btn-primary">Filterregeln speichern</button>
|
|
</div>
|
|
|
|
{{-- ══════════════════════════════════════════════════════════════════════ --}}
|
|
{{-- TAB: ABWESENHEIT --}}
|
|
{{-- ══════════════════════════════════════════════════════════════════════ --}}
|
|
@elseif($activeTab === 'abwesenheit')
|
|
|
|
<div style="margin-bottom:16px;padding:10px 14px;background:var(--mw-vbg);border:1px solid var(--mw-vbd);
|
|
border-radius:8px;font-size:12px;color:var(--mw-v2);display:flex;align-items:flex-start;gap:8px;">
|
|
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;margin-top:1px;">
|
|
<circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/>
|
|
<path d="M7 4.5v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
|
<circle cx="7" cy="10" r=".7" fill="currentColor"/>
|
|
</svg>
|
|
Die Abwesenheitsnotiz wird serverseitig aktiviert und antwortet automatisch auf eingehende E-Mails — auch wenn du nicht eingeloggt bist. Antworten werden maximal einmal pro Tag an denselben Absender gesendet.
|
|
</div>
|
|
|
|
<div class="mbx-section" style="margin-bottom:16px;">
|
|
<div style="padding:14px 18px;border-bottom:1px solid var(--mw-b1);display:flex;align-items:flex-start;gap:14px;">
|
|
<div style="flex:1;">
|
|
<div style="font-size:13px;color:var(--mw-t1);font-weight:500;">Abwesenheitsnotiz aktivieren</div>
|
|
<div style="font-size:12px;color:var(--mw-t4);margin-top:3px;line-height:1.5;">
|
|
Wenn aktiviert, erhalten Absender automatisch eine Antwort mit dem unten eingegebenen Text.
|
|
</div>
|
|
</div>
|
|
<input type="checkbox" class="mw-toggle" wire:model.live="vacationEnabled">
|
|
</div>
|
|
|
|
<div style="padding:14px 18px 16px;display:flex;flex-direction:column;gap:14px;
|
|
{{ !$vacationEnabled ? 'opacity:.45;pointer-events:none;' : '' }}">
|
|
<div>
|
|
<label style="font-size:12px;color:var(--mw-t4);display:block;margin-bottom:5px;font-weight:500;">Betreff der automatischen Antwort</label>
|
|
<input wire:model="vacationSubject" type="text" class="mw-modal-input"
|
|
style="max-width:480px;"
|
|
placeholder="Ich bin derzeit nicht erreichbar."
|
|
@if(!$vacationEnabled) disabled @endif>
|
|
@error('vacationSubject') <div style="color:var(--mw-rd);font-size:11px;margin-top:3px;">{{ $message }}</div> @enderror
|
|
</div>
|
|
<div>
|
|
<label style="font-size:12px;color:var(--mw-t4);display:block;margin-bottom:5px;font-weight:500;">Nachrichtentext</label>
|
|
<textarea wire:model="vacationBody" rows="6" class="mw-modal-input"
|
|
style="resize:vertical;font-family:inherit;"
|
|
placeholder="Ich bin vom … bis … abwesend und melde mich so bald wie möglich bei dir."
|
|
@if(!$vacationEnabled) disabled @endif></textarea>
|
|
@error('vacationBody') <div style="color:var(--mw-rd);font-size:11px;margin-top:3px;">{{ $message }}</div> @enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;justify-content:flex-end;">
|
|
<button type="submit" class="mbx-btn-primary">Abwesenheit speichern</button>
|
|
</div>
|
|
|
|
{{-- ══════════════════════════════════════════════════════════════════════ --}}
|
|
{{-- TAB: WEITERLEITUNG --}}
|
|
{{-- ══════════════════════════════════════════════════════════════════════ --}}
|
|
@elseif($activeTab === 'weiterleitung')
|
|
|
|
<div style="margin-bottom:16px;padding:10px 14px;background:var(--mw-vbg);border:1px solid var(--mw-vbd);
|
|
border-radius:8px;font-size:12px;color:var(--mw-v2);display:flex;align-items:flex-start;gap:8px;">
|
|
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;margin-top:1px;">
|
|
<circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/>
|
|
<path d="M7 4.5v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
|
<circle cx="7" cy="10" r=".7" fill="currentColor"/>
|
|
</svg>
|
|
Die Weiterleitung wird serverseitig konfiguriert. Eingehende E-Mails werden sofort und automatisch an die Zieladresse weitergeleitet — auch ohne aktive Sitzung. Originale werden im Postfach behalten.
|
|
</div>
|
|
|
|
<div class="mbx-section" style="margin-bottom:16px;">
|
|
<div style="padding:14px 18px 16px;display:flex;flex-direction:column;gap:12px;">
|
|
<div>
|
|
<label style="font-size:12px;color:var(--mw-t4);display:block;margin-bottom:5px;font-weight:500;">E-Mails weiterleiten an</label>
|
|
<input wire:model="forwardTo" type="email" class="mw-modal-input"
|
|
style="max-width:360px;"
|
|
placeholder="z.B. andere@beispiel.de">
|
|
@error('forwardTo') <div style="color:var(--mw-rd);font-size:11px;margin-top:3px;">{{ $message }}</div> @enderror
|
|
<div style="font-size:12px;color:var(--mw-t4);margin-top:8px;line-height:1.5;">
|
|
Feld leer lassen um die Weiterleitung zu deaktivieren.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;justify-content:flex-end;">
|
|
<button type="submit" class="mbx-btn-primary">Weiterleitung speichern</button>
|
|
</div>
|
|
|
|
@endif
|
|
|
|
</form>
|
|
|
|
</div>
|