Add touch-ready Filament login and admin update tooling

This commit is contained in:
soeren
2026-01-18 15:34:16 +01:00
parent 6f6ea8b24f
commit 30ca8082b3
31 changed files with 1940 additions and 1159 deletions

View File

@@ -0,0 +1,137 @@
@php
$selectedEmail = $get('email');
$pin = (string) ($get('pin') ?? '');
$pinLength = strlen($pin);
@endphp
<div class="fi-grid" style="--cols-default: 1; gap: 1.5rem;">
@if (! $hasPinUsers)
<x-filament::empty-state
heading="No admin PINs yet"
description="Use the password login fields below to sign in, then set an Admin PIN in Users."
icon="heroicon-o-lock-closed"
icon-color="gray"
>
<x-slot:footer>
<x-filament::badge color="gray" size="lg">
Password login enabled
</x-filament::badge>
</x-slot:footer>
</x-filament::empty-state>
@else
<x-filament::section
heading="Admin selection"
description="Tap your name to select an account."
>
<div class="fi-grid fi-grid-ctn sm:fi-grid-cols lg:fi-grid-cols" style="--cols-default: 1; --cols-sm: 2; --cols-lg: 3; gap: 1rem;">
@foreach ($users as $user)
<div class="fi-grid-col">
<x-filament::button
type="button"
wire:click="selectUser({{ $user->id }})"
:color="$selectedEmail === $user->email ? 'primary' : 'gray'"
:outlined="$selectedEmail !== $user->email"
size="lg"
style="width: 100%; text-align: left;"
>
<div>
<div>{{ $user->name }}</div>
<div>{{ $user->email }}</div>
</div>
</x-filament::button>
</div>
@endforeach
</div>
</x-filament::section>
<x-filament::section
heading="PIN"
description="Enter the selected admin PIN to continue."
>
<x-slot:afterHeader>
<x-filament::button
type="button"
color="gray"
outlined
size="sm"
wire:click="clearPin"
>
Clear
</x-filament::button>
</x-slot:afterHeader>
<x-filament::badge
color="gray"
size="lg"
style="font-size: 2.25rem; padding: 1.25rem 2rem; letter-spacing: 0.6rem;"
>
{{ $pinLength ? str_repeat('*', $pinLength) : '----' }}
</x-filament::badge>
<table class="fi-ta-table" style="margin-top: 1rem;">
<tbody>
@foreach ([[1, 2, 3], [4, 5, 6], [7, 8, 9]] as $row)
<tr>
@foreach ($row as $digit)
<td class="fi-ta-cell fi-align-center" style="width: 33%;">
<x-filament::button
type="button"
wire:click="appendPinDigit({{ $digit }})"
size="xl"
color="gray"
style="width: 100%;"
>
{{ $digit }}
</x-filament::button>
</td>
@endforeach
</tr>
@endforeach
<tr>
<td class="fi-ta-cell fi-align-center" style="width: 33%;">
<x-filament::button
type="button"
wire:click="clearPin"
size="xl"
color="gray"
outlined
style="width: 100%;"
>
Clear
</x-filament::button>
</td>
<td class="fi-ta-cell fi-align-center" style="width: 33%;">
<x-filament::button
type="button"
wire:click="appendPinDigit(0)"
size="xl"
color="gray"
style="width: 100%;"
>
0
</x-filament::button>
</td>
<td class="fi-ta-cell fi-align-center" style="width: 33%;">
<x-filament::button
type="button"
wire:click="deletePinDigit"
size="xl"
color="gray"
outlined
style="width: 100%;"
>
Del
</x-filament::button>
</td>
</tr>
</tbody>
</table>
</x-filament::section>
@error('data.email')
<x-filament::badge color="danger" size="lg">
{{ $message }}
</x-filament::badge>
@enderror
@endif
</div>