Add touch-ready Filament login and admin update tooling
This commit is contained in:
137
resources/views/filament/pages/auth/kiosk-login.blade.php
Normal file
137
resources/views/filament/pages/auth/kiosk-login.blade.php
Normal 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>
|
||||
Reference in New Issue
Block a user