From c4ce460627ff84db50b183a8ba74338ab3b2edbb Mon Sep 17 00:00:00 2001 From: rdbsolutions Date: Tue, 21 Dec 2021 14:22:50 +0000 Subject: [PATCH] inactivy tyling and time out time --- components/homepage/login.js | 48 ++++++++++++++++++++++++++ components/myportal.js | 27 +++++++-------- components/timeoutmodal.js | 26 ++++++-------- locales/en/common.json | 2 +- styles/sass/welshgov/_application.scss | 21 ++++++++--- 5 files changed, 90 insertions(+), 34 deletions(-) diff --git a/components/homepage/login.js b/components/homepage/login.js index 274256ec..d15571d5 100644 --- a/components/homepage/login.js +++ b/components/homepage/login.js @@ -207,6 +207,54 @@ let Login = (props) => {

{t("home:login-card-title")}

{" "} + {/*
+ {validLoginID == false && ( +
+ Incorrect username or password +
+ )} + + + + +
+ +
+ */}

{ const { locale } = router; const [showModal, setShowModal] = useState(false); + const inactiveTimeOut = 120; // in seconds + const reminderTimeout = 30; // in seconds let idleTimer = null; let logoutTimer = null; - let shareState = () => { - showShareState == true - ? setShowShareState(false) - : setShowShareState(true); - }; - - const onIdle = () => { + let onIdle = () => { togglePopup(); logoutTimer = setTimeout(() => { handleLogout(); - }, 1000 * 5 * 1); // 5 seconds + }, 1000 * reminderTimeout * 1); }; - const togglePopup = () => { + let togglePopup = () => { showModal == true ? setShowModal(false) : setShowModal(true); }; - const handleStayLoggedIn = () => { + let handleStayLoggedIn = () => { if (logoutTimer) { - clearTimeout(this.logoutTimer); + clearTimeout(logoutTimer); logoutTimer = null; } idleTimer.reset(); @@ -53,6 +49,7 @@ const MyPortal = (props) => { }; const handleLogout = () => { + console.log("////////////", "\n", "logout", "\n", "//////////"); destroyCookie({}, "pinsUser"), window.localStorage.clear(), router.replace(props.ggLogout); @@ -127,21 +124,23 @@ const MyPortal = (props) => {

- {/* { idleTimer = ref; }} element={document} stopOnIdle={true} + onActive={console.log(" bbis active", idleTimer)} onIdle={onIdle} - timeout={1000 * 600 * 1} // 10 seconds + timeout={1000 * inactiveTimeOut * 1} /> */} + /> ); }; diff --git a/components/timeoutmodal.js b/components/timeoutmodal.js index 59b210d6..4b60749f 100644 --- a/components/timeoutmodal.js +++ b/components/timeoutmodal.js @@ -1,22 +1,18 @@ import React from "react"; +import { useState, useEffect } from "react"; + +const TimeoutModal = (props) => { + const { showModal, handleStayLoggedIn, remainingCountdown } = props; -const TimeoutModal = ({ showModal, togglePopup, handleStayLoggedIn }) => { return ( -
-
+
+
-

- {" "} - timeout - Your session is about to expire in 5 seconds - due to inactivity. You will be redirected to the login - page. -

+

+ Your session is about to expire in {remainingCountdown}{" "} + seconds due to inactivity. You will be redirected to the + login page. +