119 lines
8.3 KiB
PHP
119 lines
8.3 KiB
PHP
<div style="width:100%;max-width:420px;padding:24px 16px">
|
|
|
|
{{-- Logo --}}
|
|
<div style="display:flex;align-items:center;gap:12px;margin-bottom:32px;justify-content:center">
|
|
<div style="width:36px;height:36px;background:linear-gradient(135deg,#6366f1 0%,#4338ca 100%);border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(99,102,241,.35);flex-shrink:0">
|
|
<svg width="21" height="21" viewBox="0 0 28 28" fill="none">
|
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
|
<path d="M15 9 C15 9 12 5 8 5 C9.5 7 10 9 11 10" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
|
<path d="M24 15 C24 15 27 13 28 10 C26 11 24 12 23 13.5" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
|
|
<circle cx="19" cy="8" r="1.5" fill="white" opacity=".95"/>
|
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-family:'Syne',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.3px;line-height:1"><span style="color:#e8eaf6">Clu</span><span style="color:#6366f1">Bird</span></div>
|
|
<div style="font-size:9px;font-weight:500;color:var(--mw-t4);text-transform:uppercase;letter-spacing:1.8px;margin-top:2px">Mail Server Management</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Setup-Done Banner --}}
|
|
@if($showBanner && $banner)
|
|
<div style="margin-bottom:14px;padding:12px 14px;border-radius:9px;border:1px solid rgba(34,197,94,.25);background:rgba(34,197,94,.07);display:flex;align-items:flex-start;gap:10px">
|
|
<svg width="15" height="15" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;margin-top:1px;color:#4ade80"><path d="M2 7.5l3 3 7-7" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<div>
|
|
<div style="font-size:12.5px;font-weight:600;color:rgba(134,239,172,.95)">{{ $banner['title'] ?? 'Einrichtung abgeschlossen' }}</div>
|
|
@if(!empty($banner['message']))
|
|
<div style="font-size:11.5px;color:rgba(134,239,172,.7);margin-top:2px">{{ $banner['message'] }}</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Karte --}}
|
|
<div style="background:var(--mw-bg2);border:1px solid var(--mw-b2);border-radius:14px;padding:28px 24px">
|
|
|
|
<div style="margin-bottom:20px">
|
|
<div style="font-size:15px;font-weight:600;color:var(--mw-t1)">Anmelden</div>
|
|
<div style="font-size:12px;color:var(--mw-t4);margin-top:3px">Melde dich mit deinem Account an</div>
|
|
</div>
|
|
|
|
{{-- Fehler --}}
|
|
@if($error)
|
|
<div style="margin-bottom:16px;padding:10px 12px;border-radius:8px;border:1px solid rgba(239,68,68,.25);background:rgba(239,68,68,.07);display:flex;align-items:center;gap:8px">
|
|
<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.3"/><path d="M7 4.5v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="7" cy="9.5" r=".7" fill="currentColor"/></svg>
|
|
<span style="font-size:12px;color:#f87171">{{ $error }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
<form wire:submit.prevent="login" style="display:flex;flex-direction:column;gap:16px">
|
|
|
|
<div>
|
|
<label class="mw-modal-label">E-Mail / Benutzername</label>
|
|
<input type="text"
|
|
wire:model.defer="name"
|
|
autocomplete="username"
|
|
autofocus
|
|
class="mw-modal-input @error('name') border-red-500/50 @enderror"
|
|
placeholder="admin@example.com">
|
|
@error('name') <div class="mw-modal-error">{{ $message }}</div> @enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label class="mw-modal-label">Passwort</label>
|
|
<div style="position:relative">
|
|
<input id="lf-password"
|
|
type="password"
|
|
wire:model.defer="password"
|
|
autocomplete="current-password"
|
|
class="mw-modal-input @error('password') border-red-500/50 @enderror"
|
|
style="padding-right:38px"
|
|
placeholder="••••••••••">
|
|
<button type="button"
|
|
onclick="(function(btn){var i=document.getElementById('lf-password'),s=btn.querySelector('.ico-show'),h=btn.querySelector('.ico-hide');i.type=i.type==='password'?'text':'password';s.style.display=i.type==='text'?'none':'block';h.style.display=i.type==='text'?'block':'none';})(this)"
|
|
style="position:absolute;right:0;top:0;height:100%;width:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--mw-t4)">
|
|
<svg class="ico-show" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
<svg class="ico-hide" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="display:none"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
|
|
</button>
|
|
</div>
|
|
@error('password') <div class="mw-modal-error">{{ $message }}</div> @enderror
|
|
</div>
|
|
|
|
<div style="display:flex;align-items:center;justify-content:space-between">
|
|
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
|
|
<input type="checkbox" wire:model.live="remember" style="display:none" id="lf-remember">
|
|
<span onclick="document.getElementById('lf-remember').click()"
|
|
style="width:16px;height:16px;border-radius:4px;border:1.5px solid var(--mw-b2);background:var(--mw-bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;{{ $remember ? 'background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.6)' : '' }}">
|
|
@if($remember)
|
|
<svg width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M1.5 4.5l2 2 4-4" stroke="#a5b4fc" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
@endif
|
|
</span>
|
|
<span style="font-size:12px;color:var(--mw-t4)">Merken</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit"
|
|
wire:loading.attr="disabled"
|
|
class="mbx-btn-primary"
|
|
style="width:100%;justify-content:center;font-size:13px;padding:9px 16px">
|
|
<span wire:loading.remove wire:target="login">Anmelden</span>
|
|
<span wire:loading wire:target="login" style="display:none">
|
|
<span style="display:inline-flex;align-items:center;gap:6px">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="animation:spin .7s linear infinite;flex-shrink:0">
|
|
<path d="M10 6A4 4 0 1 1 6 2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
|
</svg>
|
|
wird geprüft…
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
@if(\App\Models\Setting::signupAllowed())
|
|
<div style="margin-top:16px;text-align:center;font-size:12px;color:var(--mw-t4)">
|
|
Noch keinen Account?
|
|
<a wire:navigate href="{{ route('signup') }}" style="color:#a5b4fc;text-decoration:none">Zur Registrierung</a>
|
|
</div>
|
|
@endif
|
|
</div>
|