116 lines
7.7 KiB
PHP
116 lines
7.7 KiB
PHP
<div style="width:100%;max-width:420px;padding:24px 16px">
|
|
|
|
{{-- Logo --}}
|
|
<div style="display:flex;align-items:center;gap:10px;margin-bottom:32px;justify-content:center">
|
|
<div style="width:32px;height:32px;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(99,102,241,.4)">
|
|
<svg width="16" height="16" viewBox="0 0 18 18" fill="none">
|
|
<path d="M9 2L15.5 5.5v7L9 16 2.5 12.5v-7L9 2Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
|
|
<path d="M9 6L12 7.5v3L9 12 6 10.5v-3L9 6Z" fill="white" opacity=".9"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:14px;font-weight:700;letter-spacing:.3px;color:var(--mw-t1)">MAILWOLT</div>
|
|
<div style="font-size:11px;color:var(--mw-t4);margin-top:-1px">Control Panel</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>
|