121 lines
5.2 KiB
PHP
121 lines
5.2 KiB
PHP
<div class="w-full #min-h-[86vh] grid place-items-center
|
|
bg-[radial-gradient(1200px_600px_at_10%_-10%,rgba(59,130,246,.08),transparent),
|
|
radial-gradient(900px_500px_at_90%_0%,rgba(99,102,241,.06),transparent)]">
|
|
|
|
{{-- Banner (dismissbar) --}}
|
|
@if($showBanner && $banner)
|
|
<div class="max-w-[520px] mb-5 rounded-2xl border border-emerald-400/30 text-emerald-300 bg-emerald-500/10 p-4 #md:p-5 shadow backdrop-blur"
|
|
role="status" aria-live="polite">
|
|
<div class="flex items-start gap-3">
|
|
<div class="shrink-0 mt-0.5">
|
|
<i class="ph ph-check-circle text-emerald-100 text-xl"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold text-emerald-100">
|
|
{{ $banner['title'] ?? 'Erfolgreich registriert' }}
|
|
</div>
|
|
<div class="mt-0.5 text-sm text-emerald-200">
|
|
{{ $banner['message'] ?? 'Dein Konto ist bereit. Melde dich jetzt an.' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="nx-card w-full max-w-[520px]">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<span class="nx-chip">Erster Login</span>
|
|
<i class="ph ph-lock-simple text-white/60"></i>
|
|
</div>
|
|
{{-- globale Fehlermeldung --}}
|
|
@if($error)
|
|
<div class="nx-alert mb-6">
|
|
<i class="ph ph-warning-circle text-rose-300"></i>
|
|
<div>
|
|
<p class="font-medium">Anmeldung fehlgeschlagen</p>
|
|
<p class="text-sm/5 text-rose-200/90">{{ $error }}</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<form wire:submit.prevent="login" class="space-y-5">
|
|
|
|
<div>
|
|
<label class="nx-label" for="email">E-Mail / Benutzername</label>
|
|
<input id="name" type="name"
|
|
wire:model.defer="name"
|
|
autocomplete="username" autofocus
|
|
class="nx-input @error('name') input-error @enderror">
|
|
@error('name')
|
|
<p class="field-error #mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<label class="nx-label" for="password">Passwort</label>
|
|
<div class="relative">
|
|
<input id="password" type="{{ $show ? 'text' : 'password' }}"
|
|
wire:model.defer="password"
|
|
autocomplete="current-password"
|
|
class="nx-input pr-10 @error('password') input-error @enderror">
|
|
<button type="button" class="nx-eye"
|
|
onclick="togglePassword('password', this)">
|
|
<i class="ph ph-eye text-white/60"></i>
|
|
</button>
|
|
</div>
|
|
@error('password')
|
|
<p class="field-error mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex items-center justify-between pt-1">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" wire:model.live="remember" class="peer hidden">
|
|
<span
|
|
class="w-5 h-5 flex items-center justify-center rounded border border-white/30 bg-white/5 peer-checked:bg-emerald-500/20 peer-checked:border-emerald-400 transition">
|
|
<i class="ph ph-check text-emerald-400 text-xs hidden peer-checked:inline nx-check"></i>
|
|
</span>
|
|
<span class="text-sm text-white/70">Merken</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<button type="submit" class="nx-btn w-full" wire:loading.attr="disabled">
|
|
<span wire:loading.remove>Anmelden</span>
|
|
<span wire:loading class="inline-flex items-center gap-2">
|
|
<svg class="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
|
<path class="opacity-75" fill="currentColor"
|
|
d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
|
|
</svg>
|
|
wird geprüft…
|
|
</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
@if(\App\Models\Setting::signupAllowed())
|
|
<div class="mt-6 text-sm text-white/70">
|
|
Noch keinen Account? <a wire:navigate href="{{ route('signup') }}" class="nx-link">Zur Registiereung</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<script>
|
|
function togglePassword(id, btn) {
|
|
const input = document.getElementById(id);
|
|
const icon = btn.querySelector('i');
|
|
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.remove('ph-eye');
|
|
icon.classList.add('ph-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.remove('ph-eye-slash');
|
|
icon.classList.add('ph-eye');
|
|
}
|
|
}
|
|
</script>
|