From a000c70243c8b8847c448743f4c6a1a69ba5a9fe Mon Sep 17 00:00:00 2001 From: rdbsolutions Date: Mon, 7 Oct 2024 15:37:19 +0100 Subject: [PATCH] updated logout modal message and added to reps --- components/timeout/index copy.js | 73 ++++++++++++++ components/timeout/index.js | 127 ++++++++++++++++--------- components/timeout/timeoutmodal.js | 7 +- locales/cy/common.json | 4 +- locales/en/common.json | 4 +- package.json | 2 +- pages/myportal/addresssearch.js | 2 + pages/myportal/addresssearchresults.js | 2 + pages/myportal/case/[ticketnumber].js | 2 + pages/myportal/case/id/[incident].js | 2 + pages/myportal/representation.js | 2 + pages/newappeal/aboutyou.js | 2 + 12 files changed, 182 insertions(+), 47 deletions(-) create mode 100644 components/timeout/index copy.js diff --git a/components/timeout/index copy.js b/components/timeout/index copy.js new file mode 100644 index 00000000..05475c36 --- /dev/null +++ b/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; + }} + element={document} + stopOnIdle={true} + //onActive={console.log(" bbis active", idleTimer)} + onIdle={onIdle} + timeout={1000 * inactiveTimeOut * 1} + /> + + + ); +}; + +export default TimeOut; diff --git a/components/timeout/index.js b/components/timeout/index.js index 05475c36..b810a8b6 100644 --- a/components/timeout/index.js +++ b/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; + {/*

React Idle Timer

+

Confirm Prompt

+
+

Current State: {state}

+ {timeTillPrompt > 0 && ( + <> +

+ {timeTillPrompt} {seconds} until prompt +

+

+ {timeTillPrompt / 60} {minutes} until prompt +

+ + )} */} + +
- + > +
+
+

+ {t("common:login-modal-message", { + remaining: remaining, + })} +

+ +
+
+
+
); }; diff --git a/components/timeout/timeoutmodal.js b/components/timeout/timeoutmodal.js index 3943ca55..f9230f2d 100644 --- a/components/timeout/timeoutmodal.js +++ b/components/timeout/timeoutmodal.js @@ -4,7 +4,12 @@ const TimeoutModal = (props) => { const { showModal, handleStayLoggedIn, remainingCountdown } = props; return ( -
+
{/*
*/}
diff --git a/locales/cy/common.json b/locales/cy/common.json index c1ce7b86..2407a17f 100644 --- a/locales/cy/common.json +++ b/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" } \ No newline at end of file diff --git a/locales/en/common.json b/locales/en/common.json index 9d1389e0..e0c77271 100644 --- a/locales/en/common.json +++ b/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 " } \ No newline at end of file diff --git a/package.json b/package.json index a97f5ceb..71bbce3e 100644 --- a/package.json +++ b/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", diff --git a/pages/myportal/addresssearch.js b/pages/myportal/addresssearch.js index a303a284..a649a7d5 100644 --- a/pages/myportal/addresssearch.js +++ b/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) => { )}
+
); diff --git a/pages/myportal/addresssearchresults.js b/pages/myportal/addresssearchresults.js index 411e9070..6a95c69b 100644 --- a/pages/myportal/addresssearchresults.js +++ b/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) => { />
+
); diff --git a/pages/myportal/case/[ticketnumber].js b/pages/myportal/case/[ticketnumber].js index 22a50db3..5b644cad 100644 --- a/pages/myportal/case/[ticketnumber].js +++ b/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 } /> + ); diff --git a/pages/myportal/case/id/[incident].js b/pages/myportal/case/id/[incident].js index 3df056ae..4511c288 100644 --- a/pages/myportal/case/id/[incident].js +++ b/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 } /> + ); diff --git a/pages/myportal/representation.js b/pages/myportal/representation.js index 8673e52a..8fa95a87 100644 --- a/pages/myportal/representation.js +++ b/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) => { />