inactivy tyling and time out time
This commit is contained in:
@@ -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
|
||||
|
||||
+13
-14
@@ -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}
|
||||
/> */}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
+11
-15
@@ -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}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
margin: 0.5rem;
|
||||
width: 80%;
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user