Merged PR 672: Update cookies manager functions and added in Gov Gateway

Related work items: #5255, #6936, #6937, #6938

.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/govgateway.js

@@ -0,0 +1,191 @@
+import axios from "axios";
+import { hashAPIPath } from "./";
+
+const configEndpoint = process.env.GG_PROVIDER_CONFIG_ENDPOINT;
+const ggClientID = process.env.GG_ClIENT_ID;
+const ggClientSecret = process.env.GG_CLIENT_SECRET;
+const WEBAPI_URL =
+    process.env.RELAY_ROOT ||
+    "https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/";
+
+export const getProviderConfig = () => {
+    return axios
+        .get(configEndpoint)
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("error :", error.response);
+            // return error;
+        });
+};
+
+export const getGGToken = (tokenURL, authCode, redirectUri) => {
+    const tokenBody =
+        "grant_type=authorization_code" +
+        "&code=" +
+        authCode +
+        "&redirect_uri=" +
+        redirectUri;
+
+    const basicAuthBase64 = (ggClientID + ":" + ggClientSecret).toString();
+    //console.log("base64 " + Base64.encode(basicAuthBase64));
+
+    const tokenConfig = {
+        headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+            "Authorization": "Basic " + Base64.encode(basicAuthBase64),
+        },
+    };
+
+    return axios
+        .post(tokenURL, tokenBody, tokenConfig)
+        .then((res) => res.data)
+        .catch((error) => {
+            // if (error.response) {
+            //     console.log(error.response.data);
+            //     console.log(error.response.status);
+            //     console.log(error.response.headers);
+            // }
+            return error.response;
+        });
+};
+
+export const getUserInfo = (userInfoURL, authToken) => {
+    const tokenConfig = {
+        headers: {
+            "Authorization": "Bearer " + authToken,
+        },
+    };
+
+    return axios
+        .get(userInfoURL, tokenConfig)
+        .then((res) => res)
+        .catch((error) => {
+            //console.log(`Error: ${err?.response?.data}`);
+            //return error;
+        });
+};
+
+export const getPortalLogin = (emailAddress, token) => {
+    var queryUrl =
+        "contacts?$filter=emailaddress1 eq '" +
+        emailAddress +
+        "'&$count=true&$select=emailaddress1,contactid,pinswg_custom_password,yomifullname,firstname,lastname";
+    return axios
+        .get(WEBAPI_URL + queryUrl + hashAPIPath(queryUrl), azureHeaders(token))
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thiserror", error);
+        });
+};
+
+const azureHeaders = (access_token) => {
+    return {
+        headers: {
+            "OData-MaxVersion": "4.0",
+            "OData-Version": "4.0",
+            "Accept": "application/json;odata.metadata=none",
+            "Prefer": 'odata.include-annotations="*",return=representation',
+            "Content-Type": "application/json",
+            "Authorization": "Bearer " + access_token,
+        },
+    };
+};
+
+var Base64 = {
+    _keyStr:
+        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
+    encode: function (e) {
+        var t = "";
+        var n, r, i, s, o, u, a;
+        var f = 0;
+        e = Base64._utf8_encode(e);
+        while (f < e.length) {
+            n = e.charCodeAt(f++);
+            r = e.charCodeAt(f++);
+            i = e.charCodeAt(f++);
+            s = n >> 2;
+            o = ((n & 3) << 4) | (r >> 4);
+            u = ((r & 15) << 2) | (i >> 6);
+            a = i & 63;
+            if (isNaN(r)) {
+                u = a = 64;
+            } else if (isNaN(i)) {
+                a = 64;
+            }
+            t =
+                t +
+                this._keyStr.charAt(s) +
+                this._keyStr.charAt(o) +
+                this._keyStr.charAt(u) +
+                this._keyStr.charAt(a);
+        }
+        return t;
+    },
+    decode: function (e) {
+        var t = "";
+        var n, r, i;
+        var s, o, u, a;
+        var f = 0;
+        //e = e.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+        while (f < e.length) {
+            s = this._keyStr.indexOf(e.charAt(f++));
+            o = this._keyStr.indexOf(e.charAt(f++));
+            u = this._keyStr.indexOf(e.charAt(f++));
+            a = this._keyStr.indexOf(e.charAt(f++));
+            n = (s << 2) | (o >> 4);
+            r = ((o & 15) << 4) | (u >> 2);
+            i = ((u & 3) << 6) | a;
+            t = t + String.fromCharCode(n);
+            if (u != 64) {
+                t = t + String.fromCharCode(r);
+            }
+            if (a != 64) {
+                t = t + String.fromCharCode(i);
+            }
+        }
+        t = Base64._utf8_decode(t);
+        return t;
+    },
+    _utf8_encode: function (e) {
+        e = e.replace(/\r\n/g, "\n");
+        var t = "";
+        for (var n = 0; n < e.length; n++) {
+            var r = e.charCodeAt(n);
+            if (r < 128) {
+                t += String.fromCharCode(r);
+            } else if (r > 127 && r < 2048) {
+                t += String.fromCharCode((r >> 6) | 192);
+                t += String.fromCharCode((r & 63) | 128);
+            } else {
+                t += String.fromCharCode((r >> 12) | 224);
+                t += String.fromCharCode(((r >> 6) & 63) | 128);
+                t += String.fromCharCode((r & 63) | 128);
+            }
+        }
+        return t;
+    },
+    _utf8_decode: function (e) {
+        var t = "";
+        var n = 0;
+        var r = (c1 = c2 = 0);
+        while (n < e.length) {
+            r = e.charCodeAt(n);
+            if (r < 128) {
+                t += String.fromCharCode(r);
+                n++;
+            } else if (r > 191 && r < 224) {
+                c2 = e.charCodeAt(n + 1);
+                t += String.fromCharCode(((r & 31) << 6) | (c2 & 63));
+                n += 2;
+            } else {
+                c2 = e.charCodeAt(n + 1);
+                c3 = e.charCodeAt(n + 2);
+                t += String.fromCharCode(
+                    ((r & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)
+                );
+                n += 3;
+            }
+        }
+        return t;
+    },
+};

actions/index.js

@@ -94,7 +94,7 @@ const azureHeadersPaged = (access_token) => {
     };
 };
 
-const hashAPIPath = (queryPath) => {
+export const hashAPIPath = (queryPath) => {
     var hashPath =
         queryPath.indexOf("/api/proxy/") == -1
             ? queryPath
@@ -111,6 +111,20 @@ 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/personaldetails.js

@@ -82,10 +82,11 @@ let PersonalDetails = (props) => {
     let errorsobj = {};
 
     const required = (value) => (value ? undefined : "Is required");
+    const emailRegex =
+        /(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
+
     const email = (value) =>
-        value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+        value && !emailRegex.test(value) ? "Invalid email address" : undefined;
-            ? "Invalid email address"
-            : undefined;
     const phoneNumber = (value) =>
         value &&
         !/^(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?(?:\(?0\)?[\s-]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-]?\d{4,5})|(?:\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3}))|(?:\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4})|(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}))(?:[\s-]?(?:x|ext\.?|\#)\d{3,4})?$/i.test(

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

@@ -161,13 +161,25 @@ let Login = (props) => {
             : "";
     }, [cookies.pinsUser, router]);
 
+    const govGatwayLoginRedirect = () => {
+        router.replace(
+            props.govGateway.config.authorization_endpoint +
+                "?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>
+                </h3>{" "}
+                {/* <form onSubmit={handleSubmit(onHandleSubmit)}>
                     {validLoginID == false && (
                         <div className="govuk-error-message govuk-form-group--error">
                             Incorrect username or password
@@ -210,22 +222,23 @@ 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>
+                </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
@@ -249,7 +262,7 @@ let Login = (props) => {
                     </p>
                 </div>
             </div>
-            </form>
+
             {/* <LoadingOverlay
                 active={showSpinnerState}
                 spinner
@@ -271,6 +284,7 @@ const mapStateToProps = (state) => {
         watchedCases: state.watchedCases,
         myRepresentations: state.myRepresentations,
         awaitingSubmission: state.awaitingSubmission,
+        govGateway: state.govGateway,
     };
 };
 

components/myportal.js

@@ -11,13 +11,55 @@ 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;
 
+    const [showModal, setShowModal] = useState(false);
+
+    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>
@@ -27,7 +69,11 @@ const MyPortal = (props) => {
                                     ? "/assets/images/planning-casework-cy.svg"
                                     : "/assets/images/planning-casework-en.svg"
                             }
-                        alt={router.locale == "cy" ? "Fy mhorth" : "My Portal"}
+                            alt={
+                                router.locale == "cy"
+                                    ? "Fy mhorth"
+                                    : "My Portal"
+                            }
                         />
                     </h1>
 
@@ -82,6 +128,22 @@ const MyPortal = (props) => {
                     </div>
                 </div>
             </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/search/advancedsearch.js

@@ -9,6 +9,14 @@ import data from "../../data/collections.json";
 import LoadingOverlay from "react-loading-overlay";
 import transLookup from "../../data/lookuptranslations.json";
 
+const required = (errorMsg) => (value) =>
+    value || typeof value === "number" ? undefined : errorMsg;
+
+export const minLength = (errorMsg) => (value) =>
+    value && value.length < 4
+        ? errorMsg //`Must be ${min} characters or more`
+        : undefined;
+
 let AdvancedSearch = (props) => {
     let { t } = useTranslation();
 
@@ -37,6 +45,53 @@ let AdvancedSearch = (props) => {
         ? [{}]
         : props.LPAData.LPAData.value;
 
+    const RenderTextfield = ({
+        id,
+        className,
+        rows,
+        datafieldname,
+        name,
+        label,
+        input,
+        hint1,
+        hint2,
+        hint3,
+        meta: { touched, error },
+        ...custom
+    }) => {
+        return (
+            <>
+                <div className="govuk-form-group">
+                    <div id="basicSearch-hint" className="govuk-hint ">
+                        <label className="govuk-label" htmlFor="caseRef">
+                            {t("search:casereference-label")}
+                        </label>
+                    </div>
+
+                    <div>
+                        <input
+                            {...input}
+                            className={className}
+                            name={name}
+                            id={id}
+                        />
+                        {touched && error && (
+                            <span
+                                id={id + "-error"}
+                                className="govuk-error-message govuk-form-group--error"
+                            >
+                                <span className="govuk-visually-hidden">
+                                    Error:
+                                </span>{" "}
+                                {error}
+                            </span>
+                        )}
+                    </div>
+                </div>
+            </>
+        );
+    };
+
     const RenderLPAList = ({
         name,
         id,
@@ -216,8 +271,6 @@ let AdvancedSearch = (props) => {
         );
     };
 
-    const required = (value) => (value ? undefined : "Required");
-
     // const [showSpinnerState, setShowSpinnerState] = useState(false);
 
     // let spinnerState = () => {
@@ -275,27 +328,31 @@ let AdvancedSearch = (props) => {
                                                 {t("search:search-title-label")}
                                             </h1>
                                         </legend>
-                                        <div className="govuk-form-group">
-                                            <label
-                                                className="govuk-label"
-                                                htmlFor="caseRef"
-                                            >
-                                                {t(
-                                                    "search:casereference-label"
-                                                )}
-                                            </label>
 
                                         <Field
-                                                name="caseRef"
+                                            validate={[
-                                                id="caseRef"
+                                                minLength(
-                                                component="input"
+                                                    t(
+                                                        "myportal:searchcases-validation-minlength"
+                                                    )
+                                                ),
+                                            ]}
                                             className="govuk-input govuk-!-width-two-thirds"
-                                                label={t(
+                                            component={RenderTextfield}
-                                                    "search:casereference-label"
+                                            id="caseRef"
+                                            name="caseRef"
+                                            type="text"
+                                            aria-describedby="caseRef-hint"
+                                            hint1={t(
+                                                "myportal:searchcases-card-search-hint"
+                                            )}
+                                            hint2={t(
+                                                "myportal:searchcases-card-search-example-label-1"
+                                            )}
+                                            hint3={t(
+                                                "myportal:searchcases-card-search-example-label-2"
                                             )}
-                                                errormsg="Appeal type is required"
                                         />
-                                        </div>
 
                                         <Field
                                             name="appealTypes"

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;

i18n.js

@@ -9,14 +9,14 @@ module.exports = {
         },
     ],
     "pages": {
-        "*": ["common", "newappeal"],
+        "*": ["common", "newappeal", "search"],
         "/": ["common", "home"],
         "/myportal": ["myportal"],
         "/myportal/viewall": ["search"],
         "/myportal/advancedsearch": ["search"],
         "/myportal/searchresults": ["search"],
         "/myportal/case": ["case"],
-        "/advancedsearch": ["search"],
+        "/advancedsearch": ["search", "myportal"],
         "/advancedsearchresults": ["search"],
         "/searchresults": ["search"],
         "/viewall": ["search"],

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 lpaData = await getLPA();
             //             console.log("appeal types", appealTypeData);
             //             console.log("lpa typeswwwww", lpaData);
             //             store.dispatch(setAppealType(appealTypeData));
             //             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,16 +13,68 @@ 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 { parseCookies } from "nookies";
+import CryptoJS from "crypto-js";
+import HmacSHA256 from "crypto-js/hmac-sha256";
+
+import {
+    getProviderConfig,
+    getGGToken,
+    getUserInfo,
+    getPortalLogin,
+} from "../actions/govgateway";
+import { getToken } from "../actions";
+import { getGovGatewayConfig } from "../store/govgateway/action";
+import {
+    setLoggedInUserId,
+    setAccountDetails,
+} from "../store/accountDetails/action";
+import { parseCookies, setCookie, destroyCookie } from "nookies";
+
+const WORDKEY = process.env.NEXT_PUBLIC_HASHKEY;
 
 const Home = (props) => {
-    const { footerLinks, pages, showLogin } = props;
+    const {
+        footerLinks,
+        pages,
+        showLogin,
+        loggedInUserId,
+        hasGGCode,
+        loginEmailStr,
+        loggedInUserEmail,
+    } = props;
     let { t, lang } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
 
+    let now = new Date();
+    let expDate = new Date(now);
+    expDate.setDate(now.getDate() + 1);
+
+    console.log("hashed email str", loginEmailStr);
+    _.isEmpty(loggedInUserId) != false && !hasGGCode
+        ? console.log("no log in no ggcode")
+        : _.has(loggedInUserId, "value")
+        ? _.isEmpty(loggedInUserId.value)
+            ? router.replace({
+                  pathname:
+                      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>
             <Head>
@@ -77,8 +129,21 @@ const Home = (props) => {
                 <CookieBanner />
                 <Header courseName="Appeals Casework Portal" />
                 <div className="govuk-width-container">
+                    {hasGGCode ? (
+                        <>
+                            <h1>Logging in</h1>
+                            <h2>Please wait...</h2>
+                        </>
+                    ) : (
+                        <>
                             <ServiceBanner />
-                    <Main pages={pages} showLogin={showLogin} />
+                            <Main
+                                pages={pages}
+                                showLogin={showLogin}
+                                loggedInUserId={loggedInUserId}
+                            />
+                        </>
+                    )}
                 </div>
                 <Footer footerLinks={footerLinks} />
             </div>
@@ -90,13 +155,78 @@ export const getServerSideProps = wrapper.getServerSideProps(
     (store) => async (ctx) => {
         const { query, req, res } = ctx;
 
+        var relayToken = await getToken();
+        relayToken = relayToken.access_token;
+
+        console.log("gg code:", query.code);
+
         const showLoginCheck = process.env.SHOWLOGIN || false;
 
-        console.log("Show login module: ", showLoginCheck);
+        const hasLoginCode = typeof query.code != "undefined";
+        let providerConfig = await getProviderConfig();
+
+        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(
+                providerConfig.token_endpoint,
+                query.code,
+                process.env.GG_REDIRECT_URI
+            );
+
+            _.has(ggToken, "access_token")
+                ? ((ggUserInfo = await getUserInfo(
+                      providerConfig.userinfo_endpoint,
+                      ggToken.access_token
+                  )),
+                  (loginEmailStr = hashString(ggUserInfo.data.email)),
+                  (portalUserObj = await getPortalLogin(
+                      ggUserInfo.data.email,
+                      relayToken
+                  )),
+                  console.log("loggin user stuff: ", portalUserObj),
+                  store.dispatch(setAccountDetails(portalUserObj)))
+                : console.log(
+                      ggToken.status + " " + ggToken.data.error_description
+                  );
+        }
 
         return {
-            props: { showLogin: showLoginCheck },
+            props: {
+                showLogin: showLoginCheck,
+                hasGGCode: hasLoginCode,
+                loggedInUserId: portalUserObj,
+                loggedInUserEmail: loginEmailStr,
+            },
         };
     }
 );
-export default Home; //connect(mapStateToProps)(Home);
+
+const mapStateToProps = (state) => {
+    return {
+        currentView: state.currentView,
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        form: state.form,
+        myCases: state.myCases,
+        watchedCases: state.watchedCases,
+        myRepresentations: state.myRepresentations,
+        awaitingSubmission: state.awaitingSubmission,
+        govGateway: state.govGateway,
+    };
+};
+export default connect(mapStateToProps)(Home);

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

store/govgateway/action.js

@@ -0,0 +1,10 @@
+export const govGatweayActionTypes = {
+    GETPROVIDERCONFIG: "GETPROVIDERCONFIG",
+};
+
+export const getGovGatewayConfig = (config) => (dispatch) => {
+    return dispatch({
+        type: govGatweayActionTypes.GETPROVIDERCONFIG,
+        config: config,
+    });
+};

store/govgateway/reducer.js

@@ -0,0 +1,17 @@
+import { govGatweayActionTypes } from "./action";
+
+const govGatewayConfigInitialState = {
+    config: {},
+};
+
+export default function reducer(state = govGatewayConfigInitialState, action) {
+    switch (action.type) {
+        case govGatweayActionTypes.GETPROVIDERCONFIG:
+            return {
+                ...state,
+                config: action.config,
+            };
+        default:
+            return state;
+    }
+}

store/store.js

@@ -17,6 +17,7 @@ import awaitingSubmission from "./awaitingSubmission/reducer";
 import myCases from "./myCases/reducer";
 import myRepresentations from "./myRepresentations/reducer";
 import watchedCases from "./watchedCases/reducer";
+import govGateway from "./govgateway/reducer";
 
 //COMBINING ALL REDUCERS
 const appReducer = combineReducers({
@@ -31,6 +32,7 @@ const appReducer = combineReducers({
     myCases,
     myRepresentations,
     watchedCases,
+    govGateway,
     form: formReducer,
 });
 
@@ -117,6 +119,7 @@ const makeStore = ({ isServer }) => {
                 "myCases",
                 "myRepresentations",
                 "watchedCases",
+                "govGateway",
                 "form",
             ],
             version: 1,

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);
+}