updated the cookies functionality

.env.local

@@ -60,5 +60,9 @@ I18N_DOMAIN = "cymru.local"
 GG_PROVIDER_CONFIG_ENDPOINT = "https://api.ete.access.service.gov.uk/.well-known/openid-configuration"
 GG_ClIENT_ID = 5vTukeSpN7d6uBV7YLb7A5wOctzzkZ
 GG_CLIENT_SECRET = z1PGLAKPxIhjMBegTdzX22AayIORc1GsCbMQZ6mieBn7zChjzzxup5lkIByEmsYS
-GG_REDIRECT_URI = "https://pp-planningcasework.service.gov.wales"
+GG_REDIRECT_URI = "http://localhost:3000"
+
+NEXT_PUBLIC_GG_ClIENT_ID = 5vTukeSpN7d6uBV7YLb7A5wOctzzkZ
+NEXT_PUBLIC_GG_REDIRECT_URI = "http://localhost:3000"
+
 

actions/index.js

@@ -111,6 +111,20 @@ export const hashAPIPath = (queryPath) => {
     return (hashPath.indexOf("?") > -1 ? "&hash=" : "?hash=") + hashlink;
 };
 
+export const hashString = (stringToHash) => {
+    console.log("string to hash", stringToHash);
+    let hashedStr = CryptoJS.AES.encrypt(stringToHash, "pedw");
+    console.log("hashed String", hashedStr.toString());
+    return hashedStr.toString();
+};
+
+export const dehashString = (stringToDeHash) => {
+    console.log("string to dehash", stringToDeHash);
+    let dehashedStr = CryptoJS.AES.decrypt(decodeURI(stringToDeHash), "pedw");
+    console.log("dehshed string:", dehashedStr.toString(CryptoJS.enc.Utf8));
+    return dehashedStr.toString(CryptoJS.enc.Utf8);
+};
+
 export const getBasicSearch = (token, searchString) => {
     //console.log("\n\n", token, searchString);
 

components/account/registerform.js

@@ -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)
 );

components/cookiemanager/index.js

@@ -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", "/"),
+        usageState == "revoked" && delete_cookie("_ga", "/"),
-            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(
+    // const [communicationsState, setCommunicationsState] = useState(
-        typeof cookieCheck.CookiePolicy == "undefined"
+    //     typeof cookieCheck.CookiePolicy == "undefined"
-            ? null
+    //         ? null
-            : cookieObj.communications
+    //         : 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":
+            // case "communications":
-                setCommunicationsState(value);
+            //     setCommunicationsState(value);
-                break;
+            //     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,
         },
     };

components/homepage/login.js

@@ -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">
-                <div className="card-body active">
+                <h3 className="heading-small card-heading">
-                    <h3 className="heading-small card-heading">
+                    {t("home:login-card-title")}
-                        {t("home:login-card-title")}
+                </h3>{" "}
-                    </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">
+                </form> */}
-                        <p className="govuk-body-s">
+                <div className="govuk-form-group govuk-!-margin-top-4">
-                            {t("home:login-card-register-label")}{" "}
+                    <p className="govuk-body-xs">
-                            <Link
+                        <a
-                                href={
+                            onClick={() => {
-                                    router.locale == "cy"
+                                govGatwayLoginRedirect();
-                                        ? "/cyfrif/cofrestr"
+                            }}
-                                        : "/account/register"
+                            className="govuk-button withChevron govuk-button-cta"
-                                }
+                        >
-                            >
+                            Log in via Government Gateway
-                                <a className="govuk-link--no-underline">
+                        </a>
-                                    {t("home:login-card-register-link")}
+                    </p>
-                                </a>
+                    <p className="govuk-body-s">
-                            </Link>
+                        {t("home:login-card-register-label")}{" "}
-                        </p>
+                        <Link
-                        <p className="govuk-body-s">
+                            href={
-                            <Link href="/">
+                                router.locale == "cy"
-                                <a className="govuk-link--no-underline">
+                                    ? "/cyfrif/cofrestr"
-                                    {t("home:login-card-forgotten-label")}{" "}
+                                    : "/account/register"
-                                </a>
+                            }
-                            </Link>
+                        >
-                        </p>
+                            <a className="govuk-link--no-underline">
-
+                                {t("home:login-card-register-link")}
-                        <p className="govuk-body-s">
-                            <a
-                                onClick={() => {
-                                    govGatwayLoginRedirect();
-                                }}
-                                className="govuk-link--no-underline"
-                            >
-                                Log in using Government Gateway
                             </a>
-                        </p>
+                        </Link>
-                    </div>
+                    </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

components/myportal.js

@@ -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 (
+    const [showModal, setShowModal] = useState(false);
-        <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>
 
-                <div className="serviceBanner_userDetails">
+    let idleTimer = null;
-                    <img
+    let logoutTimer = null;
-                        className="user_logo"
+
-                        src="/assets/images/user.svg"
+    let shareState = () => {
-                        alt={router.locale == "cy" ? "Defnyddiwr" : "User"}
+        showShareState == true
-                    />{" "}
+            ? setShowShareState(false)
-                    <div className="serviceBanner_userDetails_name">
+            : setShowShareState(true);
-                        {props.accountDetails.accountDetails.firstname}{" "}
+    };
-                        {props.accountDetails.accountDetails.lastname}
+
-                    </div>
+    const onIdle = () => {
-                    <div>
+        togglePopup();
-                        <Link
+        logoutTimer = setTimeout(() => {
-                            href={
+            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"
+                                    ? "/assets/images/planning-casework-cy.svg"
-                                    : "/logout"
+                                    : "/assets/images/planning-casework-en.svg"
                             }
-                        >
+                            alt={
-                            <a
+                                router.locale == "cy"
-                                onClick={() => {
+                                    ? "Fy mhorth"
-                                    destroyCookie({}, "pinsUser"),
+                                    : "My Portal"
-                                        window.localStorage.clear();
+                            }
-                                }}
+                        />
-                                className="govuk-header__link govuk-!-margin-right-3"
+                    </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
-                            </a>
+                                    onClick={() => {
-                        </Link>
+                                        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-row">
+                    <div className="govuk-grid-column-full">
-                <div className="govuk-grid-column-full">
+                        <div className="flex-container grid-row govuk-body ">
-                    <div className="flex-container grid-row govuk-body ">
+                            <MakeNewAppeal />
-                        <MakeNewAppeal />
+                            <MyCases myCases={props.myCases} />
-                        <MyCases myCases={props.myCases} />
+                            <SearchCases />
-                        <SearchCases />
+                            <AwaitingSubmission
-                        <AwaitingSubmission
+                                awaitingSubmission={props.awaitingSubmission}
-                            awaitingSubmission={props.awaitingSubmission}
+                            />
-                        />
+                            <MyRepresentations
-                        <MyRepresentations
+                                myRepresentations={props.myRepresentations}
-                            myRepresentations={props.myRepresentations}
+                            />
-                        />
+                            <WatchedCases watchedCases={props.watchedCases} />
-                        <WatchedCases watchedCases={props.watchedCases} />
+                        </div>
-                    </div>
+                        <div className="flex-container grid-row govuk-body ">
-                    <div className="flex-container grid-row govuk-body ">
+                            <YourAccount />
-                        <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}
+            /> */}
+        </>
     );
 };
 

components/myportal/topthree.js

@@ -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":
+                                        "incidentid": getIncidentId(
-                                            topThreeType != "watchedCases"
+                                            topThreeType,
-                                                ? topThreeType !=
+                                            showTopThreeArr[key]
-                                                  "myRepresentations"
+                                        ),
-                                                    ? showTopThreeArr[key]
-                                                          ._pinswg_case_value
-                                                    : showTopThreeArr[key][
-                                                          " _pinswg_watchedcase_value"
-                                                      ]
-                                                : showTopThreeArr[key][
-                                                      " _pinswg_watchedcase_value"
-                                                  ],
 
                                         "appealType":
                                             showTopThreeArr[key]

components/timeoutmodal.js

@@ -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;

locales/cy/cookies.json

@@ -3,6 +3,8 @@
   "cookie-title-heading": "Cwcis ar cynllunio gwaith achos",
   "cookie-not-saved-heading": "Nid yw eich dewisiadau cwcis wedi eu cadw eto",
   "cookie-not-saved-paragraph": "Mae y gwasanaeth gwaith achos cynllunio yn gosod cwcis pan fyddwch yn ymweld â'n gwefan. Gallwch newid y gosodiadau hyn i'ch dewis chi. Mae angen i chi gadw'r dudalen hon gyda'ch dewisiadau newydd.",
+  "cookie-saved-heading": "Cafodd eich dewisiadau cwcis eu cadw",
+  "cookie-saved-paragraph": "Mae y gwasanaeth gwaith achos cynllunio yn gosod cwcis pan fyddwch yn ymweld â'n gwefan. Gallwch newid y gosodiadau hyn i'ch dewis chi.",
   "cookie-intro-paragraph-1": "Ffeiliau sy'n cael eu cadw ar eich ffôn, tabled neu gyfrifiadur pan fyddwch yn ymweld â gwefan yw cwcis.",
   "cookie-intro-paragraph-2": "Rydym yn defnyddio cwcis i storio gwybodaeth ynghylch sut yr ydych yn defnyddio gwefan y gwasanaeth gwaith achos cynllunio, megis y tudalennau yr ydych yn ymweld â nhw. Nid yw'r cwcis hyn yn cael eu defnyddio i'ch adnabod chi'n bersonol.",
   "cookie-intro-paragraph-3": "Rydym yn defnyddio 4 cwci gwahanol. Gallwch ddewis pa fath o gwcis rydych yn hapus i ni eu defnyddio.",

locales/cy/myportal.json

@@ -30,5 +30,5 @@
     "norecords-cases": "Nid oes gennych unrhyw achosion",
     "norecords-representations": "Nid oes gennych unrhyw sylwadau",
     "norecords-watched-cases": "Nid ydych yn gwylio unrhyw achosion",
-    "norecords-awaiting-submission": "Nid oes gennych unrhyw gyflwyniadau sy'n aros"
+    "norecords-awaiting-submissions": "Nid oes gennych unrhyw gyflwyniadau sy'n aros"
 }

locales/en/cookies.json

@@ -3,6 +3,8 @@
   "cookie-title-heading": "Cookies on planning casework",
   "cookie-not-saved-heading": "Your cookie settings have not yet been saved",
   "cookie-not-saved-paragraph": "The planning casework service sets cookies when you visit  our website. You can choose to change these settings to your own preferences. You need to save this page with your new  choices.",
+  "cookie-saved-heading": "Your cookie settings were saved",
+  "cookie-saved-paragraph": "The planning casework service sets cookies when you visit  our website. You can choose to change these settings to your own preferences.",
   "cookie-intro-paragraph-1": "Cookies are files saved on your phone, tablet or  computer when you visit a website.",
   "cookie-intro-paragraph-2": "We use cookies to store information about how  you use the the planning casework service website, such as the pages  you visit. These cookies are not used to  identify you personally.",
   "cookie-intro-paragraph-3": "We use 4 types of cookie. You can choose which  cookies you're happy for us to use.",

locales/en/myportal.json

@@ -30,5 +30,5 @@
     "norecords-cases": "You have no cases",
     "norecords-representations": "You have no representations",
     "norecords-watched-cases": "You are not watching any cases",
-    "norecords-awaiting-submission": "You have no awaiting submissions"
+    "norecords-awaiting-submissions": "You have no awaiting submissions"
 }

package.json

@@ -41,6 +41,7 @@
     "react-datepicker": "^4.1.1",
     "react-dom": "17.0.2",
     "react-dropzone": "^11.3.4",
+    "react-idle-timer": "^4.6.4",
     "react-loading-overlay": "^1.0.1",
     "react-redux": "^7.2.4",
     "react-xml-parser": "^1.1.8",

pages/_document.js

@@ -13,7 +13,7 @@ class MyDocument extends Document {
         let hasBasicAuth =
             typeof process.env.BASIC_AUTH_CREDENTIALS != "undefined";
 
-        console.log(hasBasicAuth);
+        console.log("hasbasicAuth:", hasBasicAuth);
 
         if (ctx.req && ctx.res) {
             hasBasicAuth &&

pages/account/register.js

@@ -17,9 +17,10 @@ import jsonpath from "jsonpath";
 import { reduxForm, formValueSelector } from "redux-form";
 
 import RegisterForm from "../../components/account/registerform";
+import { dehashString, hashAPIPath } from "../../actions";
 
 const Home = (props) => {
-    const { footerLinks, formData } = props;
+    const { footerLinks, formData, loggedInUserEmail } = props;
     let { t, lang } = useTranslation();
 
     const router = useRouter();
@@ -97,6 +98,9 @@ const Home = (props) => {
                                             setAccountCreatedComplete={
                                                 setAccountCreatedComplete
                                             }
+                                            loggedInUserEmail={
+                                                loggedInUserEmail
+                                            }
                                         />
                                     </div>
                                     {registerFormComplete != true ||
@@ -151,17 +155,31 @@ const Home = (props) => {
     );
 };
 
-// export const getServerSideProps = wrapper.getServerSideProps(
+export const getServerSideProps = wrapper.getServerSideProps(
-//     (store) =>
+    (store) =>
-//         async ({ query, req, res }) => {
+        async ({ query, req, res }) => {
-//             const appealTypeData = await getAppealsTypes();
+            //             const appealTypeData = await getAppealsTypes();
-//             const lpaData = await getLPA();
+            //             const lpaData = await getLPA();
-//             console.log("appeal types", appealTypeData);
+            //             console.log("appeal types", appealTypeData);
-//             console.log("lpa typeswwwww", lpaData);
+            //             console.log("lpa typeswwwww", lpaData);
-//             store.dispatch(setAppealType(appealTypeData));
+            //             store.dispatch(setAppealType(appealTypeData));
-//             store.dispatch(setLPA(lpaData));
+            //             store.dispatch(setLPA(lpaData));
-//         }
+
-// );
+            let hasRegistrationEmail = typeof query.id != "undefined";
+            let loginEmailStr = "";
+
+            if (hasRegistrationEmail == true) {
+                loginEmailStr = dehashString(query.id);
+
+                console.log(loginEmailStr);
+            }
+            return {
+                props: {
+                    loggedInUserEmail: loginEmailStr,
+                },
+            };
+        }
+);
 
 const mapStateToProps = (state) => {
     return {

pages/index.js

@@ -13,7 +13,9 @@ import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../store/store";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import { getIncidents } from "../actions";
+import { getIncidents, hashString } from "../actions";
+import CryptoJS from "crypto-js";
+import HmacSHA256 from "crypto-js/hmac-sha256";
 
 import {
     getProviderConfig,
@@ -29,8 +31,18 @@ import {
 } from "../store/accountDetails/action";
 import { parseCookies, setCookie, destroyCookie } from "nookies";
 
+const WORDKEY = process.env.NEXT_PUBLIC_HASHKEY;
+
 const Home = (props) => {
-    const { footerLinks, pages, showLogin, loggedInUserId } = props;
+    const {
+        footerLinks,
+        pages,
+        showLogin,
+        loggedInUserId,
+        hasGGCode,
+        loginEmailStr,
+        loggedInUserEmail,
+    } = props;
     let { t, lang } = useTranslation();
 
     const router = useRouter();
@@ -40,15 +52,28 @@ const Home = (props) => {
     let expDate = new Date(now);
     expDate.setDate(now.getDate() + 1);
 
-    _.isEmpty(loggedInUserId) == false &&
+    console.log("hashed email str", loginEmailStr);
-        (setCookie(null, "pinsUser", loggedInUserId.value[0].contactid, {
+    _.isEmpty(loggedInUserId) != false && !hasGGCode
-            path: "/",
+        ? console.log("no log in no ggcode")
-            expires: expDate,
+        : _.has(loggedInUserId, "value")
-        }),
+        ? _.isEmpty(loggedInUserId.value)
-        router.replace({
+            ? router.replace({
-            pathname: router.locale == "cy" ? "/fymhorth" : "/myportal",
+                  pathname:
-            shallow: true,
+                      router.locale == "cy"
-        }));
+                          ? "/account/register"
+                          : "/account/register",
+                  query: {
+                      id: encodeURI(loggedInUserEmail),
+                  },
+              })
+            : (setCookie(null, "pinsUser", loggedInUserId.value[0].contactid, {
+                  path: "/",
+                  expires: expDate,
+              }),
+              router.replace({
+                  pathname: router.locale == "cy" ? "/fymhorth" : "/myportal",
+              }))
+        : console.log("no value in user id");
 
     return (
         <div>
@@ -104,12 +129,21 @@ const Home = (props) => {
                 <CookieBanner />
                 <Header courseName="Appeals Casework Portal" />
                 <div className="govuk-width-container">
-                    <ServiceBanner />
+                    {hasGGCode ? (
-                    <Main
+                        <>
-                        pages={pages}
+                            <h1>Logging in</h1>
-                        showLogin={showLogin}
+                            <h2>Please wait...</h2>
-                        loggedInUserId={loggedInUserId}
+                        </>
-                    />
+                    ) : (
+                        <>
+                            <ServiceBanner />
+                            <Main
+                                pages={pages}
+                                showLogin={showLogin}
+                                loggedInUserId={loggedInUserId}
+                            />
+                        </>
+                    )}
                 </div>
                 <Footer footerLinks={footerLinks} />
             </div>
@@ -124,19 +158,26 @@ export const getServerSideProps = wrapper.getServerSideProps(
         var relayToken = await getToken();
         relayToken = relayToken.access_token;
 
-        console.log(query.code);
+        console.log("gg code:", query.code);
 
         const showLoginCheck = process.env.SHOWLOGIN || false;
 
         const hasLoginCode = typeof query.code != "undefined";
         let providerConfig = await getProviderConfig();
 
-        console.log(providerConfig.token_endpoint);
+        console.log(
+            "endpoint: ",
+            providerConfig.token_endpoint,
+            "\n",
+            "hasloginCode:",
+            hasLoginCode
+        );
 
         store.dispatch(getGovGatewayConfig(providerConfig));
 
         let ggUserInfo = {};
         let portalUserObj = {};
+        let loginEmailStr = "";
 
         if (hasLoginCode == true) {
             const ggToken = await getGGToken(
@@ -150,11 +191,12 @@ export const getServerSideProps = wrapper.getServerSideProps(
                       providerConfig.userinfo_endpoint,
                       ggToken.access_token
                   )),
+                  (loginEmailStr = hashString(ggUserInfo.data.email)),
                   (portalUserObj = await getPortalLogin(
                       ggUserInfo.data.email,
                       relayToken
                   )),
-                  console.log(portalUserObj, ggUserInfo),
+                  console.log("loggin user stuff: ", portalUserObj),
                   store.dispatch(setAccountDetails(portalUserObj)))
                 : console.log(
                       ggToken.status + " " + ggToken.data.error_description
@@ -162,7 +204,12 @@ export const getServerSideProps = wrapper.getServerSideProps(
         }
 
         return {
-            props: { showLogin: showLoginCheck, loggedInUserId: portalUserObj },
+            props: {
+                showLogin: showLoginCheck,
+                hasGGCode: hasLoginCode,
+                loggedInUserId: portalUserObj,
+                loggedInUserEmail: loginEmailStr,
+            },
         };
     }
 );

pages/myportal/case.js

@@ -85,20 +85,20 @@ const Home = (props) => {
     );
 };
 
-export const getServerSideProps = wrapper.getServerSideProps(
+// export const getServerSideProps = wrapper.getServerSideProps(
-    (store) => async (ctx) => {
+//     (store) => async (ctx) => {
-        const { query, req, res } = ctx;
+//         const { query, req, res } = ctx;
 
-        const showRepresentationsCheck =
+//         const showRepresentationsCheck =
-            process.env.SHOWREPRESENTATIONS || false;
+//             process.env.SHOWREPRESENTATIONS || false;
 
-        console.log("Show representation module: ", showRepresentationsCheck);
+//         console.log("Show representation module: ", showRepresentationsCheck);
 
-        return {
+//         return {
-            props: { showRepresentations: showRepresentationsCheck },
+//             props: { showRepresentations: showRepresentationsCheck },
-        };
+//         };
-    }
+//     }
-);
+// );
 
 const mapStateToProps = (state) => {
     //console.log(state);

styles/sass/welshgov/_application.scss

@@ -1491,6 +1491,11 @@ ul#sharePageLinks.active {
 .paragraph--type--call-out-message {
     border-left-color: $blue;
     background-color: $lightgrey_light;
+
+    &.call-out-type-positive-alert-message {
+        background: #cdf7d4;
+        border-left: 10px solid #019e1e;
+    }
 }
 
 #cookies-js form {
@@ -1701,3 +1706,107 @@ ul#sharePageLinks.active {
         background-color: $white;
     }
 }
+
+// modal timeout
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1060;
+    display: none;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    outline: 0;
+}
+
+fade {
+    transition: opacity 0.15s linear;
+}
+
+.modal-open .modal {
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1040;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000;
+}
+
+.modal-backdrop.fade {
+    opacity: 0;
+}
+
+.modal-backdrop.show {
+    opacity: 0.5;
+}
+
+.modal-dialog {
+    position: relative;
+    width: auto;
+    margin: 0.5rem;
+    pointer-events: none;
+}
+
+@media (min-width: 576px) {
+    .modal-dialog {
+        max-width: 500px;
+        margin: 1.75rem auto;
+    }
+}
+.modal.show .modal-dialog {
+    transform: none;
+}
+.modal.fade .modal-dialog {
+    transition: transform 0.3s ease-out;
+    transform: translate(0, -50px);
+}
+
+.modal-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    pointer-events: auto;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.3rem;
+    outline: 0;
+}
+
+.modal-footer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0.75rem;
+    border-top: 1px solid #dee2e6;
+    border-bottom-right-radius: calc(0.3rem - 1px);
+    border-bottom-left-radius: calc(0.3rem - 1px);
+}
+
+.modal-body {
+    position: relative;
+    flex: 1 1 auto;
+    padding: 1rem;
+}
+
+.modal-header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1rem;
+    border-bottom: 1px solid #dee2e6;
+    border-top-left-radius: calc(0.3rem - 1px);
+    border-top-right-radius: calc(0.3rem - 1px);
+}