52 lines
2.8 KiB
PHP
52 lines
2.8 KiB
PHP
@php
|
|
$field = 'h-11 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none';
|
|
$label = 'mb-1.5 block font-mono text-[11px] uppercase tracking-wider text-ink-3';
|
|
$err = 'mt-1.5 flex items-center gap-1.5 font-mono text-[11px] text-offline';
|
|
@endphp
|
|
|
|
<div class="space-y-7">
|
|
<div class="space-y-1.5">
|
|
<p class="font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-accent-text">Control Plane</p>
|
|
<h1 class="font-display text-2xl font-bold tracking-tight text-ink">Anmelden</h1>
|
|
<p class="font-mono text-xs text-ink-3">Zugang zum Clusev-Panel.</p>
|
|
</div>
|
|
|
|
<form wire:submit="authenticate" class="space-y-4">
|
|
<div>
|
|
<label for="email" class="{{ $label }}">E-Mail</label>
|
|
<input wire:model="email" id="email" type="email" autocomplete="username" autofocus
|
|
class="{{ $field }}" placeholder="admin@clusev.local" />
|
|
@error('email') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="password" class="{{ $label }}">Passwort</label>
|
|
<input wire:model="password" id="password" type="password" autocomplete="current-password"
|
|
class="{{ $field }}" placeholder="••••••••" />
|
|
@error('password') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
|
</div>
|
|
|
|
<label class="flex items-center gap-2 font-mono text-xs text-ink-2">
|
|
<input wire:model="remember" type="checkbox" class="h-4 w-4 rounded border-line bg-inset accent-accent" />
|
|
Angemeldet bleiben
|
|
</label>
|
|
|
|
<x-btn variant="primary" size="lg" type="submit" class="w-full" wire:loading.attr="disabled" wire:target="authenticate">
|
|
<svg wire:loading wire:target="authenticate" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
|
|
<span wire:loading.remove wire:target="authenticate">Anmelden</span>
|
|
<span wire:loading wire:target="authenticate">Prüfe…</span>
|
|
</x-btn>
|
|
</form>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<span class="h-px flex-1 bg-line"></span>
|
|
<span class="font-mono text-[10px] uppercase tracking-[0.14em] text-ink-4">Gesichert</span>
|
|
<span class="h-px flex-1 bg-line"></span>
|
|
</div>
|
|
|
|
<p class="flex items-start gap-2 font-mono text-[11px] leading-relaxed text-ink-4">
|
|
<x-icon name="shield" class="mt-px h-3.5 w-3.5 shrink-0 text-online" />
|
|
Verbindung über SSH · 2FA erforderlich · jede Aktion landet im Audit-Log.
|
|
</p>
|
|
</div>
|