108 lines
3.0 KiB
JavaScript
108 lines
3.0 KiB
JavaScript
import useTranslation from "next-translate/useTranslation";
|
|
import { useRouter } from "next/router";
|
|
import { useState, useEffect } from "react";
|
|
import { useIdleTimer } from "react-idle-timer";
|
|
import TimeoutModal from "./timeoutmodal";
|
|
import { performPortalSignOut } from "../../lib/auth/sessionClient";
|
|
|
|
const TimeOut = (props) => {
|
|
let { t } = useTranslation();
|
|
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
const timeout = 1260_000;
|
|
const promptBeforeIdle = 60_000;
|
|
|
|
const [state, setState] = useState("Active");
|
|
const [remaining, setRemaining] = useState(timeout);
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const onIdle = () => {
|
|
setState("Idle");
|
|
performPortalSignOut(locale);
|
|
setOpen(false);
|
|
};
|
|
|
|
const onActive = () => {
|
|
setState("Active");
|
|
setOpen(false);
|
|
};
|
|
|
|
const onPrompt = () => {
|
|
setState("Prompted");
|
|
setOpen(true);
|
|
};
|
|
|
|
const { getRemainingTime, activate } = useIdleTimer({
|
|
onIdle,
|
|
onActive,
|
|
onPrompt,
|
|
timeout,
|
|
promptBeforeIdle,
|
|
throttle: 500
|
|
});
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setRemaining(Math.ceil(getRemainingTime() / 1000));
|
|
}, 500);
|
|
|
|
return () => {
|
|
clearInterval(interval);
|
|
};
|
|
});
|
|
|
|
const handleStillHere = () => {
|
|
activate();
|
|
};
|
|
|
|
const timeTillPrompt = Math.max(remaining - promptBeforeIdle / 1000, 0);
|
|
const seconds = timeTillPrompt > 1 ? "seconds" : "second";
|
|
const minutes = timeTillPrompt / 60 > 1 ? "minutes" : "minute";
|
|
|
|
return (
|
|
<>
|
|
{/* <h1>React Idle Timer</h1>
|
|
<h2>Confirm Prompt</h2>
|
|
<br />
|
|
<p>Current State: {state}</p>
|
|
{timeTillPrompt > 0 && (
|
|
<>
|
|
<p>
|
|
{timeTillPrompt} {seconds} until prompt
|
|
</p>
|
|
<p>
|
|
{timeTillPrompt / 60} {minutes} until prompt
|
|
</p>
|
|
</>
|
|
)} */}
|
|
|
|
<div
|
|
className={open ? "modal fade show" : "modal fade"}
|
|
style={{
|
|
display: open ? "flex" : "none"
|
|
}}
|
|
>
|
|
<div className="modal-dialog">
|
|
<div className="modal-content">
|
|
<h3>
|
|
{t("common:login-modal-message", {
|
|
remaining: remaining
|
|
})}
|
|
</h3>
|
|
<button
|
|
className="govuk-button"
|
|
onClick={handleStillHere}
|
|
>
|
|
{t("common:login-modal-button")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="modal-backdrop fade show"></div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TimeOut;
|