updated the cookies functionality
This commit is contained in:
@@ -23,6 +23,7 @@ const RenderTextfield = ({
|
||||
input,
|
||||
type,
|
||||
errorMsg,
|
||||
disabled,
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
@@ -39,6 +40,7 @@ const RenderTextfield = ({
|
||||
name={name}
|
||||
id={id}
|
||||
type={type}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{touched && error && (
|
||||
<span
|
||||
@@ -69,6 +71,8 @@ const RegisterForm = (props) => {
|
||||
value,
|
||||
setRegisterFormComplete,
|
||||
setAccountCreatedComplete,
|
||||
loggedInUserEmail,
|
||||
emailaddress1,
|
||||
} = props;
|
||||
let { t, lang } = useTranslation();
|
||||
|
||||
@@ -135,7 +139,8 @@ const RegisterForm = (props) => {
|
||||
<h2 className="govuk-fieldset__heading">
|
||||
{t(
|
||||
"account:register-new-account-sub-heading-1"
|
||||
)}
|
||||
)}{" "}
|
||||
{loggedInUserEmail}
|
||||
</h2>
|
||||
</legend>
|
||||
<Field
|
||||
@@ -176,6 +181,7 @@ const RegisterForm = (props) => {
|
||||
label={t(
|
||||
"account:register-new-account-email-address-label"
|
||||
)}
|
||||
disabled
|
||||
/>
|
||||
<Field
|
||||
name="telephone1"
|
||||
@@ -327,13 +333,16 @@ const RegisterForm = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const mapStateToProps = (state, props) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
//form: state.form,
|
||||
initialValues: {
|
||||
emailaddress1: props.loggedInUserEmail,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@@ -353,6 +362,7 @@ export default connect(
|
||||
)(
|
||||
reduxForm({
|
||||
form: "accountRegisterForm",
|
||||
enableReinitialize: true,
|
||||
destroyOnUnmount: false,
|
||||
})(RegisterForm)
|
||||
);
|
||||
|
||||
@@ -20,7 +20,7 @@ const CookieManagementMain = (props) => {
|
||||
Object.assign(values, {
|
||||
"essential": "accepted",
|
||||
"usage": usageState,
|
||||
"communications": communicationsState,
|
||||
// "communications": communicationsState,
|
||||
"settings": settingsState,
|
||||
});
|
||||
|
||||
@@ -42,14 +42,15 @@ const CookieManagementMain = (props) => {
|
||||
";expires=Thu, 01 Jan 1970 00:00:01 GMT";
|
||||
}
|
||||
|
||||
usageState == "revoked" && delete_cookie("CookiePolicy", "/"),
|
||||
delete_cookie("_ga", "/"),
|
||||
usageState == "revoked" && delete_cookie("_ga", "/"),
|
||||
delete_cookie("_gid", "/");
|
||||
|
||||
cookie.set("planning_casework", true, {
|
||||
expires: expDate,
|
||||
path: "/",
|
||||
});
|
||||
|
||||
setSavedState(true);
|
||||
};
|
||||
|
||||
let cookieCheck = parseCookies();
|
||||
@@ -59,14 +60,16 @@ const CookieManagementMain = (props) => {
|
||||
? {}
|
||||
: JSON.parse(cookieCheck.CookiePolicy);
|
||||
|
||||
const [savedState, setSavedState] = useState(false);
|
||||
|
||||
const [usageState, setUsageState] = useState(
|
||||
typeof cookieCheck.CookiePolicy == "undefined" ? null : cookieObj.usage
|
||||
);
|
||||
const [communicationsState, setCommunicationsState] = useState(
|
||||
typeof cookieCheck.CookiePolicy == "undefined"
|
||||
? null
|
||||
: cookieObj.communications
|
||||
);
|
||||
// const [communicationsState, setCommunicationsState] = useState(
|
||||
// typeof cookieCheck.CookiePolicy == "undefined"
|
||||
// ? null
|
||||
// : cookieObj.communications
|
||||
// );
|
||||
const [settingsState, setSettingsState] = useState(
|
||||
typeof cookieCheck.CookiePolicy == "undefined"
|
||||
? null
|
||||
@@ -78,9 +81,9 @@ const CookieManagementMain = (props) => {
|
||||
case "usage":
|
||||
setUsageState(value);
|
||||
break;
|
||||
case "communications":
|
||||
setCommunicationsState(value);
|
||||
break;
|
||||
// case "communications":
|
||||
// setCommunicationsState(value);
|
||||
// break;
|
||||
case "settings":
|
||||
setSettingsState(value);
|
||||
break;
|
||||
@@ -102,6 +105,22 @@ const CookieManagementMain = (props) => {
|
||||
{t("cookies:cookie-title-heading")}
|
||||
</h1>
|
||||
<hr className="govuk-section-break govuk-section-break--visible" />
|
||||
|
||||
{savedState && (
|
||||
<div
|
||||
id="cookieSettingsMessageSuccess"
|
||||
className="govuk-inset-text paragraph--type--call-out-message call-out-type-positive-alert-message"
|
||||
>
|
||||
<h2 className="govuk-heading-l">
|
||||
<strong>
|
||||
{t("cookies:cookie-saved-heading")}
|
||||
</strong>
|
||||
</h2>
|
||||
<p className="govuk-body">
|
||||
{t("cookies:cookie-saved-paragraph")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{typeof cookieCheck.CookiePolicy == "undefined" ? (
|
||||
<>
|
||||
<div className="govuk-inset-text paragraph--type--call-out-message">
|
||||
@@ -455,7 +474,7 @@ const mapStateToProps = (state) => {
|
||||
return {
|
||||
initialValues: {
|
||||
usage: state.accountDetails.cookieObj.usage,
|
||||
communications: state.accountDetails.cookieObj.communications,
|
||||
//communications: state.accountDetails.cookieObj.communications,
|
||||
settings: state.accountDetails.cookieObj.settings,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -164,18 +164,22 @@ let Login = (props) => {
|
||||
const govGatwayLoginRedirect = () => {
|
||||
router.replace(
|
||||
props.govGateway.config.authorization_endpoint +
|
||||
"?response_type=code&scope=openid&client_id=5vTukeSpN7d6uBV7YLb7A5wOctzzkZ&redirect_uri=https://pp-planningcasework.service.gov.wales&ui_locales=" +
|
||||
"?response_type=code&scope=openid&client_id=" +
|
||||
process.env.NEXT_PUBLIC_GG_ClIENT_ID +
|
||||
"&redirect_uri=" +
|
||||
process.env.NEXT_PUBLIC_GG_REDIRECT_URI +
|
||||
"&ui_locales=" +
|
||||
(router.locale == "cy" ? "cy" : "en-GB")
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card" id="login-card">
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
<div className="card-body active">
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("home:login-card-title")}
|
||||
</h3>
|
||||
<div className="card-body active">
|
||||
<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
|
||||
@@ -218,57 +222,47 @@ let Login = (props) => {
|
||||
/>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
{/* <Link
|
||||
href={
|
||||
router.locale == "cy"
|
||||
? "/fymhorth"
|
||||
: "/myportal"
|
||||
}
|
||||
>
|
||||
<a className="govuk-button">
|
||||
{t("home:login-card-button")}
|
||||
</a>
|
||||
</Link> */}
|
||||
|
||||
<button type="submit" className="govuk-button">
|
||||
{t("home:login-card-button")}
|
||||
</button>
|
||||
</div>
|
||||
<div className="govuk-form-group govuk-!-margin-top-4">
|
||||
<p className="govuk-body-s">
|
||||
{t("home:login-card-register-label")}{" "}
|
||||
<Link
|
||||
href={
|
||||
router.locale == "cy"
|
||||
? "/cyfrif/cofrestr"
|
||||
: "/account/register"
|
||||
}
|
||||
>
|
||||
<a className="govuk-link--no-underline">
|
||||
{t("home:login-card-register-link")}
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
<p className="govuk-body-s">
|
||||
<Link href="/">
|
||||
<a className="govuk-link--no-underline">
|
||||
{t("home:login-card-forgotten-label")}{" "}
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<p className="govuk-body-s">
|
||||
<a
|
||||
onClick={() => {
|
||||
govGatwayLoginRedirect();
|
||||
}}
|
||||
className="govuk-link--no-underline"
|
||||
>
|
||||
Log in using Government Gateway
|
||||
</form> */}
|
||||
<div className="govuk-form-group govuk-!-margin-top-4">
|
||||
<p className="govuk-body-xs">
|
||||
<a
|
||||
onClick={() => {
|
||||
govGatwayLoginRedirect();
|
||||
}}
|
||||
className="govuk-button withChevron govuk-button-cta"
|
||||
>
|
||||
Log in via Government Gateway
|
||||
</a>
|
||||
</p>
|
||||
<p className="govuk-body-s">
|
||||
{t("home:login-card-register-label")}{" "}
|
||||
<Link
|
||||
href={
|
||||
router.locale == "cy"
|
||||
? "/cyfrif/cofrestr"
|
||||
: "/account/register"
|
||||
}
|
||||
>
|
||||
<a className="govuk-link--no-underline">
|
||||
{t("home:login-card-register-link")}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</p>
|
||||
<p className="govuk-body-s">
|
||||
<Link href="/">
|
||||
<a className="govuk-link--no-underline">
|
||||
{t("home:login-card-forgotten-label")}{" "}
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* <LoadingOverlay
|
||||
active={showSpinnerState}
|
||||
spinner
|
||||
|
||||
+119
-57
@@ -11,77 +11,139 @@ import WatchedCases from "./myportal/watchedcases";
|
||||
import YourAccount from "./myportal/youraccount";
|
||||
import { parseCookies, setCookie, destroyCookie } from "nookies";
|
||||
|
||||
import IdleTimer from "react-idle-timer";
|
||||
import TimeoutModal from "../components/timeoutmodal";
|
||||
import { useState } from "react";
|
||||
|
||||
const MyPortal = (props) => {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<main className="" id="main-content" role="main">
|
||||
<div className="servicebanner myportal govuk-!-margin-bottom-4">
|
||||
<h1>
|
||||
<img
|
||||
src={
|
||||
router.locale == "cy"
|
||||
? "/assets/images/planning-casework-cy.svg"
|
||||
: "/assets/images/planning-casework-en.svg"
|
||||
}
|
||||
alt={router.locale == "cy" ? "Fy mhorth" : "My Portal"}
|
||||
/>
|
||||
</h1>
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
<div className="serviceBanner_userDetails">
|
||||
<img
|
||||
className="user_logo"
|
||||
src="/assets/images/user.svg"
|
||||
alt={router.locale == "cy" ? "Defnyddiwr" : "User"}
|
||||
/>{" "}
|
||||
<div className="serviceBanner_userDetails_name">
|
||||
{props.accountDetails.accountDetails.firstname}{" "}
|
||||
{props.accountDetails.accountDetails.lastname}
|
||||
</div>
|
||||
<div>
|
||||
<Link
|
||||
href={
|
||||
let idleTimer = null;
|
||||
let logoutTimer = null;
|
||||
|
||||
let shareState = () => {
|
||||
showShareState == true
|
||||
? setShowShareState(false)
|
||||
: setShowShareState(true);
|
||||
};
|
||||
|
||||
const onIdle = () => {
|
||||
togglePopup();
|
||||
logoutTimer = setTimeout(() => {
|
||||
handleLogout();
|
||||
}, 1000 * 5 * 1); // 5 seconds
|
||||
};
|
||||
|
||||
const togglePopup = () => {
|
||||
showModal == true ? setShowModal(false) : setShowModal(true);
|
||||
};
|
||||
|
||||
const handleStayLoggedIn = () => {
|
||||
if (logoutTimer) {
|
||||
clearTimeout(this.logoutTimer);
|
||||
logoutTimer = null;
|
||||
}
|
||||
idleTimer.reset();
|
||||
togglePopup();
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
destroyCookie({}, "pinsUser"),
|
||||
window.localStorage.clear(),
|
||||
router.replace("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className="" id="main-content" role="main">
|
||||
<div className="servicebanner myportal govuk-!-margin-bottom-4">
|
||||
<h1>
|
||||
<img
|
||||
src={
|
||||
router.locale == "cy"
|
||||
? "/allgofnodi"
|
||||
: "/logout"
|
||||
? "/assets/images/planning-casework-cy.svg"
|
||||
: "/assets/images/planning-casework-en.svg"
|
||||
}
|
||||
>
|
||||
<a
|
||||
onClick={() => {
|
||||
destroyCookie({}, "pinsUser"),
|
||||
window.localStorage.clear();
|
||||
}}
|
||||
className="govuk-header__link govuk-!-margin-right-3"
|
||||
alt={
|
||||
router.locale == "cy"
|
||||
? "Fy mhorth"
|
||||
: "My Portal"
|
||||
}
|
||||
/>
|
||||
</h1>
|
||||
|
||||
<div className="serviceBanner_userDetails">
|
||||
<img
|
||||
className="user_logo"
|
||||
src="/assets/images/user.svg"
|
||||
alt={router.locale == "cy" ? "Defnyddiwr" : "User"}
|
||||
/>{" "}
|
||||
<div className="serviceBanner_userDetails_name">
|
||||
{props.accountDetails.accountDetails.firstname}{" "}
|
||||
{props.accountDetails.accountDetails.lastname}
|
||||
</div>
|
||||
<div>
|
||||
<Link
|
||||
href={
|
||||
router.locale == "cy"
|
||||
? "/allgofnodi"
|
||||
: "/logout"
|
||||
}
|
||||
>
|
||||
{t("common:signout-label")}
|
||||
</a>
|
||||
</Link>
|
||||
<a
|
||||
onClick={() => {
|
||||
destroyCookie({}, "pinsUser"),
|
||||
window.localStorage.clear();
|
||||
}}
|
||||
className="govuk-header__link govuk-!-margin-right-3"
|
||||
>
|
||||
{t("common:signout-label")}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="flex-container grid-row govuk-body ">
|
||||
<MakeNewAppeal />
|
||||
<MyCases myCases={props.myCases} />
|
||||
<SearchCases />
|
||||
<AwaitingSubmission
|
||||
awaitingSubmission={props.awaitingSubmission}
|
||||
/>
|
||||
<MyRepresentations
|
||||
myRepresentations={props.myRepresentations}
|
||||
/>
|
||||
<WatchedCases watchedCases={props.watchedCases} />
|
||||
</div>
|
||||
<div className="flex-container grid-row govuk-body ">
|
||||
<YourAccount />
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="flex-container grid-row govuk-body ">
|
||||
<MakeNewAppeal />
|
||||
<MyCases myCases={props.myCases} />
|
||||
<SearchCases />
|
||||
<AwaitingSubmission
|
||||
awaitingSubmission={props.awaitingSubmission}
|
||||
/>
|
||||
<MyRepresentations
|
||||
myRepresentations={props.myRepresentations}
|
||||
/>
|
||||
<WatchedCases watchedCases={props.watchedCases} />
|
||||
</div>
|
||||
<div className="flex-container grid-row govuk-body ">
|
||||
<YourAccount />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
{/* <IdleTimer
|
||||
ref={(ref) => {
|
||||
idleTimer = ref;
|
||||
}}
|
||||
element={document}
|
||||
stopOnIdle={true}
|
||||
onIdle={onIdle}
|
||||
timeout={1000 * 600 * 1} // 10 seconds
|
||||
/>
|
||||
|
||||
<TimeoutModal
|
||||
showModal={showModal}
|
||||
togglePopup={togglePopup}
|
||||
handleStayLoggedIn={handleStayLoggedIn}
|
||||
/> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -89,6 +89,24 @@ const TopThree = (props) => {
|
||||
return Promise.all(detailsArr);
|
||||
};
|
||||
|
||||
const getIncidentId = (topThreeType, objArr) => {
|
||||
switch (topThreeType) {
|
||||
case "myCases":
|
||||
return objArr.incidentid;
|
||||
break;
|
||||
case "watchedCases":
|
||||
return objArr._pinswg_watchedcase_value;
|
||||
break;
|
||||
case "myRepresentations":
|
||||
return objArr.ticketnumber;
|
||||
break;
|
||||
case "awaitingSubmission":
|
||||
break;
|
||||
default:
|
||||
// code block
|
||||
}
|
||||
};
|
||||
|
||||
let topThreeOnlyArr = showTopThreeArr.slice(0, 3);
|
||||
Object.keys(topThreeOnlyArr).map((key, index) => {
|
||||
topthreeRow.push(
|
||||
@@ -126,18 +144,10 @@ const TopThree = (props) => {
|
||||
],
|
||||
"currentType": topThreeType,
|
||||
|
||||
"incidentid":
|
||||
topThreeType != "watchedCases"
|
||||
? topThreeType !=
|
||||
"myRepresentations"
|
||||
? showTopThreeArr[key]
|
||||
._pinswg_case_value
|
||||
: showTopThreeArr[key][
|
||||
" _pinswg_watchedcase_value"
|
||||
]
|
||||
: showTopThreeArr[key][
|
||||
" _pinswg_watchedcase_value"
|
||||
],
|
||||
"incidentid": getIncidentId(
|
||||
topThreeType,
|
||||
showTopThreeArr[key]
|
||||
),
|
||||
|
||||
"appealType":
|
||||
showTopThreeArr[key]
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
import React from "react";
|
||||
|
||||
const TimeoutModal = ({ showModal, togglePopup, handleStayLoggedIn }) => {
|
||||
return (
|
||||
<div className="modal">
|
||||
<div
|
||||
isOpen={showModal}
|
||||
toggle={togglePopup}
|
||||
keyboard={false}
|
||||
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>
|
||||
<button
|
||||
className="govuk-button"
|
||||
onClick={handleStayLoggedIn}
|
||||
>
|
||||
Stay Logged In
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-backdrop fade show"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimeoutModal;
|
||||
Reference in New Issue
Block a user