Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 37x 37x 37x 37x 138x 138x 138x 375x 375x 375x 138x 138x 138x 70x 70x 70x 138x 94x 24x 19x 19x 5x 5x 1x 1x 1x 1x 1x 1x 4x 4x 94x 1x 1x 1x 1x 138x 8x 8x 8x 8x | import { useEffect, useState, useRef } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { useUiStore } from './uiStore'
import { useAuthStore } from '@/features/auth/authStore'
import { Button } from '@/components/ui/button'
const WARNING_BEFORE = 5 * 60 * 1000
const CHECK_INTERVAL = 1000
export function SessionTimeoutModal() {
const navigate = useNavigate()
const location = useLocation()
const sessionTimeoutAt = useUiStore((s) => s.sessionTimeoutAt)
const setSessionTimeoutAt = useUiStore((s) => s.setSessionTimeoutAt)
const clearAuth = useAuthStore((s) => s.clearAuth)
const [remaining, setRemaining] = useState<number | null>(null)
const channelRef = useRef<BroadcastChannel | null>(null)
useEffect(() => {
channelRef.current = new BroadcastChannel('session-timeout')
channelRef.current.onmessage = (event) => {
if (event.data.type === 'extend') {
setSessionTimeoutAt(event.data.timeoutAt)
}
if (event.data.type === 'logout') {
clearAuth()
navigate('/login', { replace: true })
}
}
return () => channelRef.current?.close()
}, [setSessionTimeoutAt, clearAuth, navigate])
useEffect(() => {
const interval = setInterval(() => {
if (!sessionTimeoutAt) {
setRemaining(null)
return
}
const diff = sessionTimeoutAt - Date.now()
if (diff <= 0) {
sessionStorage.setItem('returnUrl', location.pathname + location.search)
clearAuth()
navigate('/login', { replace: true })
channelRef.current?.postMessage({ type: 'logout' })
clearInterval(interval)
return
}
if (diff <= WARNING_BEFORE) {
setRemaining(diff)
} else {
setRemaining(null)
}
}, CHECK_INTERVAL)
returnE () => clearInterval(interval)
}, [sessionTimeoutAt, clearAuth, navigate, location])
function extendSession() {
const newTimeout = Date.now() + 30 * 60 * 1000
setSessionTimeoutAt(newTimeout)
setRemaining(null)
channelRef.current?.postMessage({ type: 'extend', timeoutAt: newTimeout })
}
if (remaining === null || remaining > WARNING_BEFORE) return null
const seconds = Math.ceil(remaining / 1000)
const minutes = Math.floor(seconds / 60)
const secs = seconds % 60
return (
<div
role="dialog"
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
>
<div className="w-80 rounded-lg border border-border bg-card p-6 shadow-lg">
<h2 className="mb-2 text-lg font-semibold">Session Timeout</h2>
<p className="mb-4 text-sm text-muted-foreground">
Your session will expire in {minutes}:{secs.toString().padStart(2, '0')}
</p>
<div className="mb-4 h-2 w-full overflow-hidden rounded-full bg-muted">
<div
className="h-full rounded-full bg-primary transition-all duration-1000"
style={{
width: `${(remaining / WARNING_BEFORE) * 100}%`,
}}
/>
</div>
<Button className="w-full" onClick={extendSession}>
Stay logged in
</Button>
</div>
</div>
)
}
|