129 lines
4.7 KiB
PHP
129 lines
4.7 KiB
PHP
<?php
|
|
|
|
use App\Livewire\Forms\LoginForm;
|
|
use Illuminate\Support\Facades\Session;
|
|
use Livewire\Attributes\Layout;
|
|
use Livewire\Volt\Component;
|
|
|
|
new #[Layout('layouts.guest')] class extends Component
|
|
{
|
|
public LoginForm $form;
|
|
|
|
public bool $showPassword = false;
|
|
|
|
public function login(): void
|
|
{
|
|
$this->validate();
|
|
$this->form->authenticate();
|
|
Session::regenerate();
|
|
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
|
|
}
|
|
}; ?>
|
|
|
|
<div>
|
|
<div class="mb-6">
|
|
<h1 class="text-2xl font-bold tracking-tight text-[--color-text-primary]">Willkommen zurück</h1>
|
|
<p class="text-sm text-[--color-text-muted] mt-1">Melde dich mit deinem Konto an</p>
|
|
</div>
|
|
|
|
<x-auth-session-status class="mb-5" :status="session('status')" />
|
|
|
|
<form wire:submit="login" class="space-y-4">
|
|
|
|
<div>
|
|
<x-input-label for="email" value="E-Mail-Adresse" />
|
|
<x-text-input
|
|
wire:model="form.email"
|
|
id="email"
|
|
type="email"
|
|
name="email"
|
|
required
|
|
autofocus
|
|
autocomplete="username"
|
|
placeholder="name@schule.de"
|
|
/>
|
|
<x-input-error :messages="$errors->get('form.email')" />
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="password" value="Passwort" />
|
|
<div class="relative">
|
|
<x-text-input
|
|
wire:model="form.password"
|
|
id="password"
|
|
:type="$showPassword ? 'text' : 'password'"
|
|
name="password"
|
|
required
|
|
autocomplete="current-password"
|
|
class="pr-10"
|
|
/>
|
|
<button
|
|
type="button"
|
|
wire:click="$set('showPassword', !$showPassword)"
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 text-[--color-text-muted] hover:text-[--color-text-secondary] transition-colors duration-150 cursor-pointer"
|
|
aria-label="Passwort anzeigen / verbergen"
|
|
>
|
|
@if($showPassword)
|
|
<x-heroicon-o-eye-slash class="w-4 h-4" />
|
|
@else
|
|
<x-heroicon-o-eye class="w-4 h-4" />
|
|
@endif
|
|
</button>
|
|
</div>
|
|
<x-input-error :messages="$errors->get('form.password')" />
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-1">
|
|
<label class="flex items-center gap-2 cursor-pointer select-none">
|
|
<input
|
|
wire:model="form.remember"
|
|
id="remember"
|
|
type="checkbox"
|
|
class="w-4 h-4 rounded border-[--color-border-subtle] accent-[--color-accent] cursor-pointer"
|
|
>
|
|
<span class="text-sm text-[--color-text-secondary]">Angemeldet bleiben</span>
|
|
</label>
|
|
|
|
@if (Route::has('password.request'))
|
|
<a
|
|
href="{{ route('password.request') }}"
|
|
wire:navigate
|
|
class="text-sm text-[--color-accent] hover:underline font-medium"
|
|
>
|
|
Passwort vergessen?
|
|
</a>
|
|
@endif
|
|
</div>
|
|
|
|
<x-primary-button class="w-full mt-2" wire:loading.attr="disabled">
|
|
<span wire:loading.remove wire:target="login">
|
|
<x-heroicon-o-arrow-right-on-rectangle class="w-4 h-4" />
|
|
Anmelden
|
|
</span>
|
|
<span wire:loading wire:target="login" class="flex items-center gap-2">
|
|
<svg class="animate-spin w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
|
</svg>
|
|
Wird angemeldet…
|
|
</span>
|
|
</x-primary-button>
|
|
|
|
</form>
|
|
|
|
@if(app()->isLocal() && env('ALLOW_QUICK_LOGIN', false))
|
|
<div class="mt-6 pt-5 border-t border-[--color-border-subtle]">
|
|
<p class="text-xs font-medium text-[--color-text-muted] uppercase tracking-widest mb-3">
|
|
Dev · Quick Login
|
|
</p>
|
|
<a
|
|
href="{{ route('dev.quick-login') }}"
|
|
class="inline-flex items-center gap-1.5 text-xs text-[--color-accent] hover:underline"
|
|
>
|
|
<x-heroicon-o-bolt class="w-3.5 h-3.5" />
|
|
Alle Seed-User anzeigen
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|