feat: POS PIN unlock with employee number + PIN auth
- Add employeeNumber and pinHash fields to users table - POST /auth/pin-login: takes combined code (4-digit employee# + 4-digit PIN) - POST /auth/set-pin: employee sets their own PIN (requires full auth) - DELETE /auth/pin: remove PIN - Lock screen with numpad, auto-submits on 8 digits, visual dot separator - POS uses its own auth token separate from admin session - Admin "POS" link clears admin session before navigating - /pos route has no auth guard — lock screen is the auth - API client uses POS token when available, admin token otherwise - Auto-lock timer reads pos_lock_timeout from app_config (default 15 min) - Lock button in POS top bar, shows current cashier name Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
ryan
168
packages/admin/src/components/pos/pos-lock-screen.tsx
Normal file
168
packages/admin/src/components/pos/pos-lock-screen.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import { useState, useCallback, useEffect, useRef } from 'react'
|
||||
import { usePOSStore } from '@/stores/pos.store'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Delete, Lock } from 'lucide-react'
|
||||
|
||||
interface PinUser {
|
||||
id: string
|
||||
email: string
|
||||
firstName: string
|
||||
lastName: string
|
||||
role: string
|
||||
}
|
||||
|
||||
export function POSLockScreen() {
|
||||
const unlock = usePOSStore((s) => s.unlock)
|
||||
const [code, setCode] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// Auto-focus on mount
|
||||
useEffect(() => {
|
||||
containerRef.current?.focus()
|
||||
}, [])
|
||||
|
||||
const handleDigit = useCallback((digit: string) => {
|
||||
setError('')
|
||||
setCode((p) => {
|
||||
if (p.length >= 10) return p
|
||||
return p + digit
|
||||
})
|
||||
}, [])
|
||||
|
||||
const handleBackspace = useCallback(() => {
|
||||
setError('')
|
||||
setCode((p) => p.slice(0, -1))
|
||||
}, [])
|
||||
|
||||
const handleClear = useCallback(() => {
|
||||
setError('')
|
||||
setCode('')
|
||||
}, [])
|
||||
|
||||
const handleSubmit = useCallback(async (submitCode: string) => {
|
||||
if (submitCode.length < 8) {
|
||||
setError('Enter your employee # (4) + PIN (4)')
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const res = await api.post<{ user: PinUser; token: string }>('/v1/auth/pin-login', { code: submitCode })
|
||||
unlock(res.user, res.token)
|
||||
setCode('')
|
||||
} catch {
|
||||
setError('Invalid code')
|
||||
setCode('')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [unlock])
|
||||
|
||||
// Auto-submit when 8 digits entered
|
||||
useEffect(() => {
|
||||
if (code.length === 8) {
|
||||
handleSubmit(code)
|
||||
}
|
||||
}, [code, handleSubmit])
|
||||
|
||||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||
if (e.key >= '0' && e.key <= '9') handleDigit(e.key)
|
||||
else if (e.key === 'Backspace') handleBackspace()
|
||||
else if (e.key === 'Enter' && code.length >= 8) handleSubmit(code)
|
||||
else if (e.key === 'Escape') handleClear()
|
||||
}, [handleDigit, handleBackspace, handleSubmit, handleClear, code])
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="absolute inset-0 z-50 bg-background flex items-center justify-center"
|
||||
onKeyDown={handleKeyDown}
|
||||
tabIndex={0}
|
||||
>
|
||||
<div className="w-80 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="text-center space-y-2">
|
||||
<Lock className="h-10 w-10 mx-auto text-muted-foreground" />
|
||||
<h1 className="text-xl font-semibold">POS Locked</h1>
|
||||
<p className="text-sm text-muted-foreground">Employee # + PIN</p>
|
||||
</div>
|
||||
|
||||
{/* Code dots — 4 employee + 4 PIN with separator */}
|
||||
<div className="flex justify-center items-center gap-2">
|
||||
<div className="flex gap-1.5">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div
|
||||
key={`e${i}`}
|
||||
className={`w-3.5 h-3.5 rounded-full border-2 ${
|
||||
i < Math.min(code.length, 4) ? 'bg-foreground border-foreground' : 'border-muted-foreground/30'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-muted-foreground/40 text-lg">-</span>
|
||||
<div className="flex gap-1.5">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div
|
||||
key={`p${i}`}
|
||||
className={`w-3.5 h-3.5 rounded-full border-2 ${
|
||||
i < Math.max(0, code.length - 4) ? 'bg-foreground border-foreground' : 'border-muted-foreground/30'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<p className="text-sm text-destructive text-center">{error}</p>
|
||||
)}
|
||||
|
||||
{/* Numpad */}
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{['1', '2', '3', '4', '5', '6', '7', '8', '9'].map((d) => (
|
||||
<Button
|
||||
key={d}
|
||||
variant="outline"
|
||||
className="h-14 text-xl font-medium"
|
||||
onClick={() => handleDigit(d)}
|
||||
disabled={loading}
|
||||
>
|
||||
{d}
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-14 text-sm"
|
||||
onClick={handleClear}
|
||||
disabled={loading}
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-14 text-xl font-medium"
|
||||
onClick={() => handleDigit('0')}
|
||||
disabled={loading}
|
||||
>
|
||||
0
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-14"
|
||||
onClick={handleBackspace}
|
||||
disabled={loading}
|
||||
>
|
||||
<Delete className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<p className="text-sm text-muted-foreground text-center">Verifying...</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user