82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
'use client';
|
||
|
||
import * as React from 'react';
|
||
import { DoorOpen, KeyRound } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||
import { PinInput } from '@/components/ui/pin-input';
|
||
import { isPinInputComplete } from '@/lib/pin-input';
|
||
|
||
interface PinLockModalProps {
|
||
open: boolean;
|
||
isSubmitting: boolean;
|
||
error?: string | null;
|
||
onSubmit: (pin: string) => Promise<void>;
|
||
onLogout?: () => void;
|
||
}
|
||
|
||
export function PinLockModal({ open, isSubmitting, error, onSubmit, onLogout }: PinLockModalProps) {
|
||
const [pin, setPin] = React.useState('');
|
||
|
||
React.useEffect(() => {
|
||
if (open) {
|
||
setPin('');
|
||
}
|
||
}, [open]);
|
||
|
||
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||
event.preventDefault();
|
||
await onSubmit(pin);
|
||
}
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={() => undefined}>
|
||
<DialogContent
|
||
className="relative [&>button]:hidden"
|
||
onPointerDownOutside={(event) => event.preventDefault()}
|
||
onEscapeKeyDown={(event) => event.preventDefault()}
|
||
>
|
||
{onLogout ? (
|
||
<button
|
||
type="button"
|
||
onClick={onLogout}
|
||
disabled={isSubmitting}
|
||
title="Выйти из аккаунта"
|
||
aria-label="Выйти из аккаунта"
|
||
className="absolute left-5 top-5 flex h-9 w-9 items-center justify-center rounded-full text-[#6b6f7b] transition hover:bg-[#f4f5f8] hover:text-[#111] disabled:opacity-50"
|
||
>
|
||
<DoorOpen className="h-4 w-4" />
|
||
</button>
|
||
) : null}
|
||
|
||
<DialogHeader>
|
||
<div className="mx-auto mb-2 flex h-14 w-14 items-center justify-center rounded-full bg-[#f4f5f8]">
|
||
<KeyRound className="h-7 w-7 text-[#111]" />
|
||
</div>
|
||
<DialogTitle className="text-center">Введите PIN-код</DialogTitle>
|
||
<p className="text-center text-sm text-[#6b6f7b]">
|
||
Сессия заблокирована из-за бездействия. Подтвердите PIN, чтобы продолжить работу.
|
||
</p>
|
||
</DialogHeader>
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
<PinInput
|
||
autoFocus
|
||
className="h-[58px] text-center text-lg tracking-[0.4em]"
|
||
placeholder="PIN"
|
||
value={pin}
|
||
onChange={setPin}
|
||
required
|
||
minLength={4}
|
||
maxLength={6}
|
||
/>
|
||
{error ? <p className="text-center text-sm text-red-600">{error}</p> : null}
|
||
<Button type="submit" size="lg" className="w-full rounded-[18px]" disabled={isSubmitting || !isPinInputComplete(pin)}>
|
||
{isSubmitting ? 'Проверяем...' : 'Разблокировать'}
|
||
</Button>
|
||
</form>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|