67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { AlertTriangle } from 'lucide-react';
|
|
|
|
interface SessionWarningProps {
|
|
open: boolean;
|
|
countdownSeconds: number;
|
|
onExtend: () => void;
|
|
onLogout: () => void;
|
|
}
|
|
|
|
/**
|
|
* Warning dialog shown before automatic session timeout.
|
|
* Gives the user an opportunity to extend their session.
|
|
*/
|
|
export function SessionWarning({
|
|
open,
|
|
countdownSeconds,
|
|
onExtend,
|
|
onLogout,
|
|
}: SessionWarningProps) {
|
|
const minutes = Math.floor(countdownSeconds / 60);
|
|
const seconds = countdownSeconds % 60;
|
|
const timeDisplay = `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={() => {}}>
|
|
<DialogContent className="sm:max-w-md" onInteractOutside={(e) => e.preventDefault()}>
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<AlertTriangle className="h-5 w-5 text-amber-500" />
|
|
Session Expiring Soon
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
Your session will expire in{' '}
|
|
<span className="font-mono font-semibold text-foreground">
|
|
{timeDisplay}
|
|
</span>{' '}
|
|
due to inactivity.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="py-2 text-sm text-muted-foreground">
|
|
If you do not extend your session, you will be logged out automatically
|
|
and any unsaved work may be lost.
|
|
</div>
|
|
|
|
<DialogFooter className="flex-col gap-2 sm:flex-row sm:justify-end">
|
|
<Button variant="outline" onClick={onLogout}>
|
|
Log Out Now
|
|
</Button>
|
|
<Button onClick={onExtend} autoFocus>
|
|
Keep Me Signed In
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|