componentised timeout applied to logged in pages

components/timeout/index.js

@@ -0,0 +1,69 @@
+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.log("////////////", "\n", "logout", "\n", "//////////");
+        destroyCookie({}, "pinsUser"),
+            window.localStorage.clear(),
+            router.replace(props.ggLogout);
+    };
+
+    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/timeoutmodal.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { useState, useEffect } from "react";
+
+const TimeoutModal = (props) => {
+    const { showModal, handleStayLoggedIn, remainingCountdown } = props;
+
+    return (
+        <div className={showModal == false ? "modal fade" : "modal fade show"}>
+            <div backdrop="static" className="modal-dialog">
+                <div className="modal-content">
+                    <h3>
+                        Your session is about to expire in {remainingCountdown}{" "}
+                        seconds due to inactivity. You will be redirected to the
+                        login page.
+                    </h3>
+                    <button
+                        className="govuk-button"
+                        onClick={handleStayLoggedIn}
+                    >
+                        Stay Logged In
+                    </button>
+                </div>
+            </div>
+            <div className="modal-backdrop fade show"></div>
+        </div>
+    );
+};
+
+export default TimeoutModal;