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 | 4x 11x 11x 11x 11x 11x 5x 5x 5x 5x 11x 11x 1x 11x 1x 11x | import React, { useCallback, useEffect, useState } from "react";
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { _userLogout } from "@/store/slices/auth/UserAuth";
import { logoutSession } from "@/authentication/session";
import { useAuth0 } from "@auth0/auth0-react";
import TimerCountdown from "@/utils/components/TimerCountdown";
const SessionDialog = ({ isIdle, setIsIdle, idleTime }) => {
const dispatch = useDispatch();
const navigate = useNavigate();
const { logout } = useAuth0();
const [totalSeconds, setTotalSeconds] = useState(30);
const handleLogout = useCallback(() => {
// BFF (Phase 4): revoke the refresh token + clear cookies server-side
// (fire-and-forget; client-side navigation does not cancel it).
logoutSession();
dispatch(_userLogout());
// Local logout via the Auth0 API (clears the local session, no hosted redirect); land on home in-app.
logout({ openUrl: false });
navigate("/");
}, [dispatch, logout, navigate]);
useEffect(() => {
if (totalSeconds === 0) {
handleLogout();
}
}, [totalSeconds, handleLogout]);
const extendSession = () => {
setIsIdle(false);
};
return (
<Dialog
open={isIdle}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
fullWidth
>
<DialogTitle id="alert-dialog-title">Warning</DialogTitle>
<DialogContent dividers>
<DialogContentText id="alert-dialog-description">
You are idle for {idleTime / 60} minute/s. This session will be close in
<TimerCountdown totalSeconds={totalSeconds} setTotalSeconds={setTotalSeconds} />
</DialogContentText>
</DialogContent>
<DialogActions sx={{ display: "flex", justifyContent: "space-between" }}>
<Button sx={{ width: "150px" }} variant="inherit" onClick={handleLogout}>
Logout
</Button>
<Button sx={{ width: "150px" }} variant="contained" color="primary" onClick={extendSession}>
Stay
</Button>
</DialogActions>
</Dialog>
);
};
export default SessionDialog;
|