200 lines
11 KiB
PHP
200 lines
11 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">
|
||
<h2 class="text-lg font-semibold text-white">Neues Postfach</h2>
|
||
<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">
|
||
@if(!$can_create)
|
||
<div class="mb-5">
|
||
<div class="rounded-xl border border-yellow-400/30 bg-yellow-500/10 text-yellow-200 text-sm px-3 py-2">
|
||
<i class="ph ph-warning text-[16px] mr-1.5"></i>
|
||
{{ $block_reason }}
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
<div class="space-y-4">
|
||
{{-- Domain + Localpart --}}
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div class="relative" wire:ignore>
|
||
<label class="block text-xs text-white/60 mb-1">Domain</label>
|
||
|
||
<el-select
|
||
id="domainSelect"
|
||
name="domain_id"
|
||
value="{{ (int)$domain_id }}"
|
||
class="block w-full"
|
||
wire:model.live="domain_id"
|
||
onchange="$wire.set('domain_id', parseInt(this.value))"
|
||
>
|
||
{{-- Trigger / sichtbarer Button --}}
|
||
<button type="button"
|
||
class="grid w-full grid-cols-1 cursor-default rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90
|
||
">
|
||
<el-selectedcontent class="col-start-1 row-start-1 flex items-center gap-2 pr-6">
|
||
<i class="ph ph-globe-hemisphere-west text-white/60 text-[16px]"></i>
|
||
<span class="block truncate">Domain wählen</span>
|
||
</el-selectedcontent>
|
||
<i class="ph ph-caret-down col-start-1 row-start-1 self-center justify-self-end text-white/50"></i>
|
||
</button>
|
||
|
||
{{-- Dropdown / Options (Glas, rund) --}}
|
||
<el-options anchor="bottom start" popover
|
||
class="max-h-60 w-(--button-width) overflow-auto rounded-2xl bg-gray-900/95 backdrop-blur
|
||
py-1 text-base outline-1 -outline-offset-1 outline-white/10 shadow-xl sm:text-sm
|
||
data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0">
|
||
@foreach($domains as $d)
|
||
@php
|
||
// Optional: Status fürs Label
|
||
$label = $d['domain'];
|
||
$locked = false; // falls du einzelne Domains sperren willst
|
||
@endphp
|
||
|
||
<el-option value="{{ $d['id'] }}"
|
||
class="group/option relative block cursor-default py-2 pr-9 pl-3 text-white/90 select-none
|
||
hover:bg-white/5 focus:bg-white/10 focus:text-white focus:outline-hidden
|
||
{{ $locked ? 'opacity-50 pointer-events-none' : '' }}">
|
||
<div class="flex items-center gap-2">
|
||
<i class="ph ph-globe-hemisphere-west text-white/60"></i>
|
||
<span
|
||
class="block truncate group-aria-selected/option:font-semibold">{{ $label }}</span>
|
||
</div>
|
||
|
||
{{-- Haken beim aktiven Eintrag --}}
|
||
<span
|
||
class="absolute inset-y-0 right-0 hidden items-center pr-3 text-emerald-300
|
||
group-aria-selected/option:flex in-[el-selectedcontent]:hidden">
|
||
<svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"/>
|
||
</svg>
|
||
</span>
|
||
</el-option>
|
||
@endforeach
|
||
</el-options>
|
||
</el-select>
|
||
|
||
@error('domain_id')
|
||
<div class="text-rose-300 text-xs mt-1">{{ $message }}</div>
|
||
@enderror
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-xs text-white/60 mb-1">Benutzername (linker Teil der E-Mail-Adresse)</label>
|
||
<input type="text" wire:model.live="localpart" placeholder="z. B. office"
|
||
class="w-full rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90 placeholder:text-white/50">
|
||
<div class="mt-1 text-[11px] text-white/50">Nur Buchstaben, Zahlen und „.-_+“</div>
|
||
@error('localpart')
|
||
<div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Anzeigename --}}
|
||
<div>
|
||
<label class="block text-xs text-white/60 mb-1">Name (Anzeigename)</label>
|
||
<input type="text" wire:model="display_name" placeholder="z. B. Max Mustermann"
|
||
class="w-full rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90 placeholder:text-white/50">
|
||
@error('display_name')
|
||
<div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
|
||
</div>
|
||
|
||
{{-- Adresse Preview --}}
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm text-white/60">Adresse:</span>
|
||
<span
|
||
class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-sm border border-white/10 bg-white/5 text-white/85">
|
||
<i class="ph ph-at text-[14px]"></i>
|
||
{{ $email_preview ?: '–' }}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="border-t border-white/10"></div>
|
||
|
||
{{-- Passwort / Quota --}}
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-xs text-white/60 mb-1">Passwort</label>
|
||
<input type="password" wire:model="password" placeholder="mind. 8 Zeichen"
|
||
class="w-full rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90 placeholder:text-white/50">
|
||
@error('password')
|
||
<div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
|
||
<div class="mt-1 text-xs text-white/50">Leer lassen, wenn extern gesetzt wird.</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-xs text-white/60 mb-1">Quota (MiB)</label>
|
||
<input type="number" min="0" wire:model.live="quota_mb"
|
||
class="w-full rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90">
|
||
@error('quota_mb')
|
||
<div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
|
||
<div class="mt-1 text-xs text-white/50">{{ $quota_hint }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Rate / Flags --}}
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-xs text-white/60 mb-1">Mails pro Stunde (optional)</label>
|
||
<input type="number" min="1" wire:model="rate_limit_per_hour"
|
||
@if($rate_limit_readonly) readonly disabled @endif
|
||
class="w-full rounded-2xl bg-white/5 border border-white/10 px-3.5 py-2.5 text-white/90 placeholder:text-white/50"
|
||
placeholder="z. B. 120">
|
||
@if($rate_limit_readonly)
|
||
<div class="mt-1 text-xs text-white/50">Von der Domain vorgegeben (Override deaktiviert).</div>
|
||
@endif
|
||
@error('rate_limit_per_hour')
|
||
<div class="text-rose-300 text-xs mt-1">{{ $message }}</div>@enderror
|
||
</div>
|
||
|
||
<div class="pt-3.5 grid items-center justify-start md:justify-center gap-6">
|
||
<label class="inline-flex items-center gap-2 cursor-pointer select-none group">
|
||
<input type="checkbox" wire:model="is_active" class="peer sr-only">
|
||
<span class="w-5 h-5 flex items-center justify-center rounded-md border border-white/15 bg-white/5
|
||
peer-checked:bg-emerald-500/20 peer-checked:border-emerald-400/40
|
||
group-hover:border-white/25 transition">
|
||
<i class="ph ph-check text-[12px] text-emerald-300 opacity-0 peer-checked:opacity-100 transition"></i>
|
||
</span>
|
||
<span class="text-white/80 text-sm">Postfach aktivieren</span>
|
||
</label>
|
||
|
||
{{-- <label class="inline-flex items-center gap-2 cursor-pointer select-none group">--}}
|
||
{{-- <input type="checkbox" wire:model="must_change_pw" class="peer sr-only">--}}
|
||
{{-- <span class="w-5 h-5 flex items-center justify-center rounded-md border border-white/15 bg-white/5--}}
|
||
{{-- peer-checked:bg-sky-500/20 peer-checked:border-sky-400/40--}}
|
||
{{-- group-hover:border-white/25 transition">--}}
|
||
{{-- <i class="ph ph-check text-[12px] text-sky-300 opacity-0 peer-checked:opacity-100 transition"></i>--}}
|
||
{{-- </span>--}}
|
||
{{-- <span class="text-white/80 text-sm">Passwort bei erstem Login ändern</span>--}}
|
||
{{-- </label>--}}
|
||
</div>
|
||
</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 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('mailbox:create')"
|
||
@disabled(!$can_create)
|
||
class="inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm
|
||
{{ $can_create
|
||
? 'bg-emerald-500/20 text-emerald-200 border border-emerald-400/40 hover:bg-emerald-500/30'
|
||
: 'bg-white/5 text-white/40 border border-white/10 cursor-not-allowed' }}">
|
||
<i class="ph ph-check text-[16px]"></i> Speichern
|
||
</button>
|
||
</div>
|
||
</div>
|
||
@endpush
|