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 = () => {
+    let onIdle = () => {
-        showShareState == true
-            ? setShowShareState(false)
-            : setShowShareState(true);
-    };
-
-    const 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 className={showModal == false ? "modal fade" : "modal fade show"}>
-            <div
+            <div backdrop="static" className="modal-dialog">
-                isOpen={showModal}
-                toggle={togglePopup}
-                keyboard={false}
-                backdrop="static"
-                className="modal-dialog"
-            >
                 <div className="modal-content">
-                    <h1>
+                    <h3>
-                        {" "}
+                        Your session is about to expire in {remainingCountdown}{" "}
-                        timeout - Your session is about to expire in 5 seconds
+                        seconds due to inactivity. You will be redirected to the
-                        due to inactivity. You will be redirected to the login
+                        login page.
-                        page.
+                    </h3>
-                    </h1>
                     <button
                         className="govuk-button"
                         onClick={handleStayLoggedIn}

locales/en/common.json

@@ -4,7 +4,7 @@
   "gov-wales-link": "https://www.gov.wales",
   "gov-wales-label": "GOV.WALES",
   "service-description": "This service is being developed to support online appeals and applications.",
-  "service-name": "Casework",
+  "service-name": "Planning Casework",
   "service-home-url": "https://planningcasework.service.gov.wales",
   "service-name-breadcrumb": "Home",
   "new-service-beta": "This is a new service",

styles/sass/welshgov/_application.scss

@@ -1720,6 +1720,10 @@ ul#sharePageLinks.active {
     height: 100%;
     overflow: hidden;
     outline: 0;
+    top: 30%;
+    @media screen and (min-width: 768px) {
+        top: 35%;
+    }
 }
 
 fade {
@@ -1751,23 +1755,30 @@ fade {
 
 .modal-dialog {
     position: relative;
-    width: auto;
+    width: 80%;
-    margin: 0.5rem;
+    margin: auto 1rem;
     pointer-events: none;
+    z-index: 1050;
+    @media screen and (min-width: 768px) {
+        width: auto;
+    }
 }
 
 @media (min-width: 576px) {
     .modal-dialog {
         max-width: 500px;
-        margin: 1.75rem auto;
+        margin: 0 auto;
     }
 }
+
+.modal.fade.show {
+    display: block;
+}
 .modal.show .modal-dialog {
     transform: none;
 }
 .modal.fade .modal-dialog {
     transition: transform 0.3s ease-out;
-    transform: translate(0, -50px);
 }
 
 .modal-content {
@@ -1781,6 +1792,8 @@ fade {
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 0.3rem;
     outline: 0;
+    padding: 20px;
+    align-items: flex-end;
 }
 
 .modal-footer {