Merged PR 1258: updated logout modal message and added to reps

updated logout modal message and added to reps

Related work items: #12454

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">

locales/cy/common.json

@@ -82,5 +82,7 @@
   "further-details-title": "Mae angen rhagor o fanylion",
   "further-details-header": "Ni allwch fewngofnodi ar hyn o bryd",
   "further-details-para-one": "Mae angen i PEDW gadarnhau ychydig mwy o wybodaeth amdanoch cyn y gallwch barhau.",
-  "further-details-para-two": "Ffoniwch 01234 567890 neu cysylltwch â ni ar "
+  "further-details-para-two": "Ffoniwch 01234 567890 neu cysylltwch â ni ar ",
+  "login-modal-message": "Mae eich sesiwn ar fin dod i ben mewn {{remaining}} eiliad oherwydd anweithgarwch. Byddwch yn cael eich ailgyfeirio i y dudalen mewngofnodi.",
+  "login-modal-button": "Arhoswch wedi mewngofnodi"
 }

locales/en/common.json

@@ -82,5 +82,7 @@
   "further-details-title": "Further details required",
   "further-details-header": "You can not be logged in at this time",
   "further-details-para-one": "PEDW needs to confirm a bit more informtion about you before you can continue.",
-  "further-details-para-two": "Please call 01234 567890 or contact us on "
+  "further-details-para-two": "Please call 01234 567890 or contact us on ",
+  "login-modal-message": "Your session is about to expire in {{remaining}} seconds due to inactivity. You will be redirected to the login page.",
+  "login-modal-button": "Stay logged in "
 }

package.json

@@ -71,7 +71,7 @@
         "react-datepicker": "4.24.0",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
-        "react-idle-timer": "4.6.4",
+        "react-idle-timer": "^5.7.2",
         "react-leaflet": "^4.2.1",
         "react-pdf": "^7.6.0",
         "react-pdf-html": "^1.1.18",

pages/myportal/addresssearch.js

@@ -11,6 +11,7 @@ import Footer from "../../components/footer";
 import Header from "../../components/header";
 import Search from "../../components/myportal/addresssearch";
 import ServiceBanner from "../../components/myportal/servicebanner";
+import TimeOut from "../../components/timeout";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -108,6 +109,7 @@ const Home = (props) => {
                     )}
                 </div>
                 <Footer footerLinks={footerLinks} ticketnumber={props} />
+                <TimeOut />
             </div>
         </div>
     );

pages/myportal/addresssearchresults.js

@@ -38,6 +38,7 @@ import {
 
 import { wrapper } from "../../store/store";
 import ServiceBanner from "../../components/myportal/servicebanner";
+import TimeOut from "../../components/timeout";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -131,6 +132,7 @@ const Home = (props) => {
                     />
                 </div>
                 <Footer footerLinks={footerLinks} ticketnumber={props} />
+                <TimeOut />
             </div>
         </div>
     );

pages/myportal/case/[ticketnumber].js

@@ -47,6 +47,7 @@ import {
     setWatchedCasesDetails,
 } from "../../../store/watchedCases/action";
 import ServiceBanner from "../../../components/myportal/servicebanner";
+import TimeOut from "../../../components/timeout";
 
 const CaseHome = (props) => {
     const { footerLinks, pages, setSearchResults, setSearchDetails } = props;
@@ -111,6 +112,7 @@ const CaseHome = (props) => {
                         props.currentView.caseReference.currentReference
                     }
                 />
+                <TimeOut />
             </div>
         </div>
     );

pages/myportal/case/id/[incident].js

@@ -19,6 +19,7 @@ import { setAccountDetails } from "../../../../store/accountDetails/action";
 import { setCurrentReference } from "../../../../store/currentView/action";
 import { setSearch } from "../../../../store/search/action";
 import { wrapper } from "../../../../store/store";
+import TimeOut from "../../../../components/timeout";
 
 const CaseHome = (props) => {
     const { footerLinks, pages } = props;
@@ -90,6 +91,7 @@ const CaseHome = (props) => {
                             .ticketnumber
                     }
                 />
+                <TimeOut />
             </div>
         </div>
     );

pages/myportal/representation.js

@@ -19,6 +19,7 @@ import {
 
 import NoSessionWarning from "../../components/nosession";
 import ServiceBanner from "../../components/myportal/servicebanner";
+import TimeOut from "../../components/timeout";
 
 const RepresentationF = (props) => {
     const { footerLinks, pages, accountDetails } = props;
@@ -162,6 +163,7 @@ const RepresentationF = (props) => {
                     />
                 </div>
                 <Footer footerLinks={footerLinks} ticketnumber={props} />
+                <TimeOut />
             </div>
         </div>
     );

pages/newappeal/aboutyou.js

@@ -9,6 +9,7 @@ import Footer from "../../components/footer";
 import Header from "../../components/header";
 import Aboutyou from "../../components/newappeal/aboutyou";
 import { wrapper } from "../../store/store";
+import TimeOut from "../../components/timeout";
 
 const AboutYou = (props) => {
     const { footerLinks, pages, formData } = props;
@@ -105,6 +106,7 @@ const AboutYou = (props) => {
                 </div>
 
                 <Footer footerLinks={footerLinks} ticketnumber={props} />
+                <TimeOut />
             </div>
         </div>
     );