Merged PR 684: login error and mutlitlingual login flow

login error and mutlitlingual login flow

Related work items: #6972

components/header.js

@@ -30,6 +30,9 @@ const Header = (props) => {
         "/dnsdetails",
         "/404",
         "/account/register",
+        "/myportal/error",
+        "/accessibility",
+        "/details-about-cookies",
     ];
     const hasContactLink = [
         "/dns",

components/homepage/casesearch.js

@@ -92,7 +92,6 @@ let CaseSearch = (props) => {
                     ? "/canlyniadauchwilio"
                     : "/searchresults",
             query: { q: values.basicSearch.trim() },
-            shallow: true,
         });
     };
 

components/homepage/login.js

@@ -207,55 +207,6 @@ let Login = (props) => {
                 <h3 className="heading-small card-heading">
                     {t("home:login-card-title")}
                 </h3>{" "}
-                {/* <form onSubmit={handleSubmit(onHandleSubmit)}>
-                    {validLoginID == false && (
-                        <div className="govuk-error-message govuk-form-group--error">
-                            Incorrect username or password
-                        </div>
-                    )}
-                    <Field
-                        // validate={[
-                        //     required(
-                        //         t("home:casesearch-search-validation-required")
-                        //     ),
-                        //     minLength(
-                        //         t("home:casesearch-search-validation-minlength")
-                        //     ),
-                        // ]}
-                        className="govuk-input"
-                        component={RenderTextfield}
-                        id="loginUserID"
-                        name="loginUserID"
-                        type="text"
-                        aria-describedby="basicSearch-hint"
-                        hint1={t("home:login-card-id-label")}
-                        label={t("home:login-card-id-hint")}
-                    />
-
-                    <Field
-                        // validate={[
-                        //     required(
-                        //         t("home:casesearch-search-validation-required")
-                        //     ),
-                        //     minLength(
-                        //         t("home:casesearch-search-validation-minlength")
-                        //     ),
-                        // ]}
-                        className="govuk-input"
-                        component={RenderPasswordfield}
-                        id="loginUserPassword"
-                        name="loginUserPassword"
-                        type="password"
-                        label="Password"
-                    />
-
-                    <div className="govuk-form-group">
-                       
-                        <button type="submit" className="govuk-button">
-                            {t("home:login-card-button")}
-                        </button>
-                    </div>
-                </form> */}
                 <div className="govuk-form-group govuk-!-margin-top-4">
                     <p className="govuk-body-xs">
                         <a
@@ -264,7 +215,7 @@ let Login = (props) => {
                             }}
                             className="govuk-button withChevron govuk-button-cta"
                         >
-                            Log in via Government Gateway
+                            {t("home:login-via-gov-gateway-label")}
                         </a>
                     </p>
                     <p className="govuk-body-s">
@@ -291,6 +242,66 @@ let Login = (props) => {
                             {t("home:login-card-forgotten-label")}{" "}
                         </a>
                     </p>
+                    <hr className="govuk-!-margin-bottom-4" />
+                    <p className="govuk-body-s">
+                        {t("home:login-comingsoon-temp-2")}
+                    </p>
+                    <ul>
+                        <li>
+                            <a
+                                className="govuk-link--no-underline"
+                                target="_blank"
+                                href={t("home:login-comingsoon-forms-link-1")}
+                                rel="noreferrer"
+                            >
+                                {t("home:login-comingsoon-forms-label-1")}
+                            </a>
+                        </li>
+                        <li>
+                            {" "}
+                            <a
+                                className="govuk-link--no-underline"
+                                target="_blank"
+                                href={t("home:login-comingsoon-forms-link-2")}
+                                rel="noreferrer"
+                            >
+                                {t("home:login-comingsoon-forms-label-2")}
+                            </a>
+                        </li>
+                        <li>
+                            {" "}
+                            <a
+                                className="govuk-link--no-underline"
+                                target="_blank"
+                                href={t("home:login-comingsoon-forms-link-3")}
+                                rel="noreferrer"
+                            >
+                                {t("home:login-comingsoon-forms-label-3")}
+                            </a>
+                        </li>
+                        <li>
+                            {" "}
+                            <a
+                                className="govuk-link--no-underline"
+                                target="_blank"
+                                href={t("home:login-comingsoon-forms-link-4")}
+                                rel="noreferrer"
+                            >
+                                {t("home:login-comingsoon-forms-label-4")}
+                            </a>
+                        </li>
+                    </ul>
+                    <br />
+
+                    <p className="govuk-body-s">
+                        {t("home:login-comingsoon-email-link-label")}{" "}
+                        <a
+                            href={"mailto:" + t("home:login-contact-email")}
+                            className="govuk-link--no-underline"
+                        >
+                            {t("home:login-contact-email")}
+                        </a>
+                    </p>
                 </div>
             </div>
 

i18n.js

@@ -22,6 +22,7 @@ module.exports = {
         "/viewall": ["search"],
         "/case": ["case"],
         "/myportal/representation": ["case"],
+        "/myportal/error": ["myportal", "common"],
         "/newappeal": ["newappeal"],
         "/newappeal/*": ["newappeal"],
         "/newappeal/selectappeal": ["newappeal"],

locales/cy/home.json

@@ -21,6 +21,7 @@
     "login-card-register-link": "Gofrestru",
     "login-card-forgotten-label": "Rwyf wedi anghofio fy nghyfrinair",
     "login-card-forgotten-link": "Cliciwch yma",
+    "login-via-gov-gateway-label": "Mewngofnodi trwy Borth y Llywodraeth",
     "casesearch-card-title": "Chwilio apeliadau a Datblygiadau o Arwyddocâd Cenedlaethol",
     "casesearch-card-search-hint": "Defnyddiwch gyfeimod yr achos neu deitl DAC i chwilio. Bydd cyfeirnod yr achos yn debyg i un o'r canlynol:",
     "casesearch-card-search-example-label-1": "APP-A12345-A-21-1234567",
@@ -37,5 +38,7 @@
     "inspectorate-card-alt-text": "Yr Arolygiaeth Gynllunio",
     "dns-card-title": "Gweld yr holl Ddatblygiadau o Arwyddocâd Cenedlaethol",
     "dns-card-paragraph": "Mae Datblygiad o Arwyddocâd Cenedlaethol yn fath o gais cynllunio ar gyfer prosiect seilwaith mawr o bwysigrwydd cenedlaethol.",
-    "dns-card-button": "Gweld pob cais"
+    "dns-card-button": "Gweld pob cais",
+    "logging-in-heading": "Mewngofnodi",
+    "logging-in-paragraph": "Arhoswch os gwelwch yn dda..."
 }

locales/en/home.json

@@ -21,6 +21,7 @@
     "login-card-register-link": "Register",
     "login-card-forgotten-label": "I have forgotten my password",
     "login-card-forgotten-link": "Click here",
+    "login-via-gov-gateway-label": "Log in via Government Gateway",
     "casesearch-card-title": "Search appeals and Developments of National Significance",
     "casesearch-card-search-hint": "Use the case reference or DNS title to search. Case reference will be similar to one of the following:",
     "casesearch-card-search-example-label-1": "APP-A12345-A-21-1234567",
@@ -37,5 +38,7 @@
     "inspectorate-card-alt-text": "The Planning Inspectorate",
     "dns-card-title": "View all Developments of National Significance ",
     "dns-card-paragraph": "A Development of National Significance is a type of planning application for a large infrastructure project of national importance.",
-    "dns-card-button": "View all applications"
+    "dns-card-button": "View all applications",
+    "logging-in-heading": "Logging in",
+    "logging-in-paragraph": "Please wait..."
 }

pages/index.js

@@ -42,6 +42,7 @@ const Home = (props) => {
         hasGGCode,
         loginEmailStr,
         loggedInUserEmail,
+        ggLocale,
     } = props;
     let { t, lang } = useTranslation();
 
@@ -71,7 +72,10 @@ const Home = (props) => {
                   expires: expDate,
               }),
               router.replace({
-                  pathname: router.locale == "cy" ? "/fymhorth" : "/myportal",
+                  pathname:
+                      router.locale == "cy" || ggLocale == "cy"
+                          ? "/cy/fymhorth"
+                          : "/myportal",
               }))
         : console.log("no value in user id");
 
@@ -131,13 +135,22 @@ const Home = (props) => {
                 <div className="govuk-width-container">
                     {hasGGCode ? (
                         <>
-                            <h1>Logging in</h1>
+                            <h1>
-                            <h2>Please wait...</h2>
+                                {ggLocale == "cy"
+                                    ? "Mewngofnodi"
+                                    : "Logging in"}
+                            </h1>
+                            <h2>
+                                {ggLocale == "cy"
+                                    ? "Arhoswch os gwelwch yn dda..."
+                                    : "Please wait..."}
+                            </h2>
                         </>
                     ) : (
                         <>
                             <ServiceBanner />
                             <Main
+                                ggLocale={ggLocale}
                                 pages={pages}
                                 showLogin={showLogin}
                                 loggedInUserId={loggedInUserId}
@@ -161,11 +174,14 @@ export const getServerSideProps = wrapper.getServerSideProps(
         relayToken = relayToken.access_token;
 
         console.log("gg code:", query.code);
+        console.log("gg local", query.ui_locales);
 
         const showLoginCheck = process.env.SHOWLOGIN || false;
 
         const hasLoginCode = typeof query.code != "undefined";
         let providerConfig = await getProviderConfig();
+        let ggLocale =
+            typeof query.ui_locales != "undefined" && query.ui_locales;
 
         console.log(
             "endpoint: ",
@@ -180,12 +196,13 @@ export const getServerSideProps = wrapper.getServerSideProps(
 
         store.dispatch(getGovGatewayConfig(providerConfig));
 
+        let ggToken = {};
         let ggUserInfo = {};
         let portalUserObj = {};
         let loginEmailStr = "";
 
         if (hasLoginCode == true) {
-            const ggToken = await getGGToken(
+            ggToken = await getGGToken(
                 providerConfig.token_endpoint,
                 query.code,
                 process.env.GG_REDIRECT_URI
@@ -208,16 +225,26 @@ export const getServerSideProps = wrapper.getServerSideProps(
                   );
         }
 
-        return {
+        if (ggToken.status == 400) {
-            props: {
+            return {
-                showLogin: showLoginCheck,
+                redirect: {
-                hasGGCode: hasLoginCode,
+                    destination: "/myportal/error",
-                loggedInUserId: portalUserObj,
+                    permanent: false,
-                loggedInUserEmail: loginEmailStr,
+                },
-                GG_REDIRECT_URI: process.env.GG_REDIRECT_URI,
+            };
-                GG_CLIENT_ID: process.env.GG_CLIENT_ID,
+        } else {
-            },
+            return {
-        };
+                props: {
+                    ggLocale: ggLocale,
+                    showLogin: showLoginCheck,
+                    hasGGCode: hasLoginCode,
+                    loggedInUserId: portalUserObj,
+                    loggedInUserEmail: loginEmailStr,
+                    GG_REDIRECT_URI: process.env.GG_REDIRECT_URI,
+                    GG_CLIENT_ID: process.env.GG_CLIENT_ID,
+                },
+            };
+        }
     }
 );
 

pages/myportal/error.js

@@ -0,0 +1,50 @@
+import Link from "next/link";
+import Head from "next/head";
+import Header from "../../components/header";
+import Banner from "../../components/banner";
+import CookieBanner from "../../components/cookieBanner";
+import useTranslation from "next-translate/useTranslation";
+import Footer from "../../components/footer";
+
+function Error({ statusCode }, props) {
+    let { t, lang } = useTranslation();
+    const { footerLinks, pages } = props;
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("myportal:page-title")} - {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container govuk-!-padding-bottom-9">
+                    <main className="govuk-main-wrapper govuk-!-padding-top-9 govuk-!-padding-bottom-9">
+                        <div className="govuk-grid-row">
+                            <div className="govuk-grid-column-two-thirds ">
+                                <h1>{t("common:error-page-title")}</h1>
+                                <p className="govuk-body">
+                                    A problem occured when trying to login
+                                </p>
+                                <Link href="/">
+                                    <a>{t("common:404-not-found-link")}</a>
+                                </Link>
+                            </div>
+                        </div>
+                    </main>
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+}
+
+Error.getInitialProps = ({ res, err }) => {
+    const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+    console.log(res, err);
+    return { statusCode };
+};
+
+export default Error;

pages/myportal/index.js

@@ -205,30 +205,41 @@ export const getServerSideProps = wrapper.getServerSideProps(
             _.has(accountDetails, "errorCode") != false
         );
 
-        const [
+        if (_.has(accountDetails, "errorCode") != false) {
-            myCasesDetails,
+            return {
-            myRepresentationsDetails,
+                redirect: {
-            watchedCasesDetails,
+                    destination: "/myportal/error",
-            // awaitingSubmissionDetails,
+                    permanent: false,
-        ] = await Promise.all([
+                },
-            await getDetails(token, myCases, "myCases"),
+            };
-            await getDetails(token, myRepresentations, "myRepresentations"),
+        } else {
-            await getDetails(token, watchedCases, "myWatchedCases"),
+            const [
-            //  await getDetails(awaitingSubmission),
+                myCasesDetails,
-        ]);
+                myRepresentationsDetails,
+                watchedCasesDetails,
+                // awaitingSubmissionDetails,
+            ] = await Promise.all([
+                await getDetails(token, myCases, "myCases"),
+                await getDetails(token, myRepresentations, "myRepresentations"),
+                await getDetails(token, watchedCases, "myWatchedCases"),
+                //  await getDetails(awaitingSubmission),
+            ]);
 
-        store.dispatch(setAccountDetails(accountDetails));
+            store.dispatch(setAccountDetails(accountDetails));
-        store.dispatch(setLoggedInUserId(loggedInUser));
+            store.dispatch(setLoggedInUserId(loggedInUser));
-        store.dispatch(setMyCases(myCases));
+            store.dispatch(setMyCases(myCases));
-        store.dispatch(setMyCasesDetails(myCasesDetails));
+            store.dispatch(setMyCasesDetails(myCasesDetails));
-        store.dispatch(setMyRepresentations(myRepresentations));
+            store.dispatch(setMyRepresentations(myRepresentations));
-        store.dispatch(setMyRepresentationsDetails(myRepresentationsDetails));
+            store.dispatch(
-        store.dispatch(setWatchedCases(watchedCases));
+                setMyRepresentationsDetails(myRepresentationsDetails)
-        store.dispatch(setWatchedCasesDetails(watchedCasesDetails));
+            );
-        store.dispatch(setAwaitingSubmission(awaitingSubmission));
+            store.dispatch(setWatchedCases(watchedCases));
-        // store.dispatch(
+            store.dispatch(setWatchedCasesDetails(watchedCasesDetails));
-        //     setAwaitingSubmissionDetails(awaitingSubmissionDetails)
+            store.dispatch(setAwaitingSubmission(awaitingSubmission));
-        // );
+            // store.dispatch(
+            //     setAwaitingSubmissionDetails(awaitingSubmissionDetails)
+            // );
+        }
     }
 );