updated logout modal message and added to reps

components/timeout/index copy.js

@@ -0,0 +1,73 @@
+import { signOut } from "next-auth/react";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { destroyCookie } from "nookies";
+import { useState } from "react";
+import IdleTimer from "react-idle-timer";
+import TimeoutModal from "./timeoutmodal";
+
+const TimeOut = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const [showModal, setShowModal] = useState(false);
+    const inactiveTimeOut = 1200; // in seconds
+    const reminderTimeout = 60; // in seconds
+
+    let idleTimer = null;
+    let logoutTimer = null;
+
+    let onIdle = () => {
+        togglePopup();
+        logoutTimer = setTimeout(() => {
+            handleLogout();
+        }, 1000 * reminderTimeout * 1);
+    };
+
+    let togglePopup = () => {
+        showModal == true ? setShowModal(false) : setShowModal(true);
+    };
+
+    let handleStayLoggedIn = () => {
+        if (logoutTimer) {
+            clearTimeout(logoutTimer);
+            logoutTimer = null;
+        }
+        idleTimer.reset();
+        togglePopup();
+    };
+
+    const handleLogout = () => {
+        console.info("////////////\n" + "logout" + "\n////////////");
+        window.localStorage.clear(),
+            destroyCookie(null, "next-auth.csrf-token", { path: "/" }),
+            destroyCookie(null, "next-auth.callback-url", { path: "/" }),
+            destroyCookie(null, "pedw_locale", { path: "/" }),
+            destroyCookie(null, "pinsUser", { path: "/" }),
+            signOut({ callbackUrl: "/logout" });
+    };
+
+    return (
+        <>
+            <IdleTimer
+                ref={(ref) => {
+                    idleTimer = ref;
+                }}
+                element={document}
+                stopOnIdle={true}
+                //onActive={console.log(" bbis active", idleTimer)}
+                onIdle={onIdle}
+                timeout={1000 * inactiveTimeOut * 1}
+            />
+            <TimeoutModal
+                remainingCountdown={reminderTimeout}
+                showModal={showModal}
+                togglePopup={togglePopup}
+                handleStayLoggedIn={handleStayLoggedIn}
+            />
+        </>
+    );
+};
+
+export default TimeOut;

components/timeout/index.js

@@ -2,8 +2,8 @@ import { signOut } from "next-auth/react";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { destroyCookie } from "nookies";
-import { useState } from "react";
-import IdleTimer from "react-idle-timer";
+import { useState, useEffect } from "react";
+import { useIdleTimer } from "react-idle-timer";
 import TimeoutModal from "./timeoutmodal";
 
 const TimeOut = (props) => {
@@ -11,34 +11,15 @@ const TimeOut = (props) => {
 
     const router = useRouter();
     const { locale } = router;
-    const [showModal, setShowModal] = useState(false);
-    const inactiveTimeOut = 1200; // in seconds
-    const reminderTimeout = 60; // in seconds
+    const timeout = 1260_000;
+    const promptBeforeIdle = 60_000;
 
-    let idleTimer = null;
-    let logoutTimer = null;
+    const [state, setState] = useState("Active");
+    const [remaining, setRemaining] = useState(timeout);
+    const [open, setOpen] = useState(false);
 
-    let onIdle = () => {
-        togglePopup();
-        logoutTimer = setTimeout(() => {
-            handleLogout();
-        }, 1000 * reminderTimeout * 1);
-    };
-
-    let togglePopup = () => {
-        showModal == true ? setShowModal(false) : setShowModal(true);
-    };
-
-    let handleStayLoggedIn = () => {
-        if (logoutTimer) {
-            clearTimeout(logoutTimer);
-            logoutTimer = null;
-        }
-        idleTimer.reset();
-        togglePopup();
-    };
-
-    const handleLogout = () => {
+    const onIdle = () => {
+        setState("Idle");
         console.info("////////////\n" + "logout" + "\n////////////");
         window.localStorage.clear(),
             destroyCookie(null, "next-auth.csrf-token", { path: "/" }),
@@ -46,26 +27,86 @@ const TimeOut = (props) => {
             destroyCookie(null, "pedw_locale", { path: "/" }),
             destroyCookie(null, "pinsUser", { path: "/" }),
             signOut({ callbackUrl: "/logout" });
+        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 (
         <>
-            <IdleTimer
-                ref={(ref) => {
-                    idleTimer = ref;
+            {/* <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",
                 }}
-                element={document}
-                stopOnIdle={true}
-                //onActive={console.log(" bbis active", idleTimer)}
-                onIdle={onIdle}
-                timeout={1000 * inactiveTimeOut * 1}
-            />
-            <TimeoutModal
-                remainingCountdown={reminderTimeout}
-                showModal={showModal}
-                togglePopup={togglePopup}
-                handleStayLoggedIn={handleStayLoggedIn}
-            />
+            >
+                <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>
         </>
     );
 };

components/timeout/timeoutmodal.js

@@ -4,7 +4,12 @@ const TimeoutModal = (props) => {
     const { showModal, handleStayLoggedIn, remainingCountdown } = props;
 
     return (
-        <div className={showModal == false ? "modal fade" : "modal fade show"}>
+        <div
+            className={showModal ? "modal fade show" : "modal fade"}
+            style={{
+                display: showModal ? "flex" : "none",
+            }}
+        >
             {/* <div backdrop="static" className="modal-dialog"> */}
             <div className="modal-dialog">
                 <div className="modal-content">