55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import {
|
|
selectExpiresInHours,
|
|
selectTimeUntilExpiration,
|
|
} from "@/app/redux/auth/selectors";
|
|
import { Alert, AlertTitle, Box, Typography } from "@mui/material";
|
|
|
|
export default function TokenExpirationInfo() {
|
|
const expiresInHours = useSelector(selectExpiresInHours);
|
|
const timeUntilExpiration = useSelector(selectTimeUntilExpiration);
|
|
const [showWarning, setShowWarning] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Show warning when token expires in less than 1 hour
|
|
if (expiresInHours > 0 && expiresInHours <= 1) {
|
|
setShowWarning(true);
|
|
} else {
|
|
setShowWarning(false);
|
|
}
|
|
}, [expiresInHours]);
|
|
|
|
if (expiresInHours <= 0) {
|
|
return null; // Don't show anything if not logged in or no token info
|
|
}
|
|
|
|
const formatTime = (seconds: number) => {
|
|
const hours = Math.floor(seconds / 3600);
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
|
|
if (hours > 0) {
|
|
return `${hours}h ${minutes}m`;
|
|
}
|
|
return `${minutes}m`;
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ mb: 2 }}>
|
|
{showWarning ? (
|
|
<Alert severity="warning" sx={{ mb: 2 }}>
|
|
<AlertTitle>Session Expiring Soon</AlertTitle>
|
|
Your session will expire in {formatTime(timeUntilExpiration)}. Please
|
|
save your work and log in again if needed.
|
|
</Alert>
|
|
) : (
|
|
<Typography variant="caption" color="text.secondary">
|
|
Session expires in {formatTime(timeUntilExpiration)}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|