inactivy tyling and time out time

components/homepage/login.js

@@ -207,6 +207,54 @@ let Login = (props) => {
                 <h3 className="heading-small card-heading">
                     {t("home:login-card-title")}
                 </h3>{" "}
+                {/* <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    {validLoginID == false && (
+                        <div className="govuk-error-message govuk-form-group--error">
+                            Incorrect username or password
+                        </div>
+                    )}
+                    <Field
+                        // validate={[
+                        //     required(
+                        //         t("home:casesearch-search-validation-required")
+                        //     ),
+                        //     minLength(
+                        //         t("home:casesearch-search-validation-minlength")
+                        //     ),
+                        // ]}
+                        className="govuk-input"
+                        component={RenderTextfield}
+                        id="loginUserID"
+                        name="loginUserID"
+                        type="text"
+                        aria-describedby="basicSearch-hint"
+                        hint1={t("home:login-card-id-label")}
+                        label={t("home:login-card-id-hint")}
+                    />
+
+                    <Field
+                        // validate={[
+                        //     required(
+                        //         t("home:casesearch-search-validation-required")
+                        //     ),
+                        //     minLength(
+                        //         t("home:casesearch-search-validation-minlength")
+                        //     ),
+                        // ]}
+                        className="govuk-input"
+                        component={RenderPasswordfield}
+                        id="loginUserPassword"
+                        name="loginUserPassword"
+                        type="password"
+                        label="Password"
+                    />
+
+                    <div className="govuk-form-group">
+                        <button type="submit" className="govuk-button">
+                            {t("home:login-card-button")}
+                        </button>
+                    </div>
+                </form> */}
                 <div className="govuk-form-group govuk-!-margin-top-4">
                     <p className="govuk-body-xs">
                         <a

components/myportal.js

@@ -22,30 +22,26 @@ const MyPortal = (props) => {
     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) => {
                     </div>
                 </div>
             </main>
-            {/* <IdleTimer
+            <IdleTimer
                 ref={(ref) => {
                     idleTimer = ref;
                 }}
                 element={document}
                 stopOnIdle={true}
+                onActive={console.log(" bbis active", idleTimer)}
                 onIdle={onIdle}
-                timeout={1000 * 600 * 1} // 10 seconds
+                timeout={1000 * inactiveTimeOut * 1}
             />
 
             <TimeoutModal
+                remainingCountdown={reminderTimeout}
                 showModal={showModal}
                 togglePopup={togglePopup}
                 handleStayLoggedIn={handleStayLoggedIn}
-            /> */}
+            />
         </>
     );
 };

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 (
-        <div className="modal">
-            <div
-                isOpen={showModal}
-                toggle={togglePopup}
-                keyboard={false}
-                backdrop="static"
-                className="modal-dialog"
-            >
+        <div className={showModal == false ? "modal fade" : "modal fade show"}>
+            <div backdrop="static" className="modal-dialog">
                 <div className="modal-content">
-                    <h1>
-                        {" "}
-                        timeout - Your session is about to expire in 5 seconds
-                        due to inactivity. You will be redirected to the login
-                        page.
-                    </h1>
+                    <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}