robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login error and mutlitlingual login flow

Browse Source
This commit is contained in:
robbond
2021-12-14 10:31:47 +00:00
parent 83080d2652
commit a5774534e3
9 changed files with 198 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/header.js
+3
View File
@@ -30,6 +30,9 @@ const Header = (props) => {
"/dnsdetails",
"/404",
"/account/register",
"/myportal/error",
"/accessibility",
"/details-about-cookies",
];
const hasContactLink = [
"/dns",
components/homepage/casesearch.js
-1
View File
@@ -92,7 +92,6 @@ let CaseSearch = (props) => {
? "/canlyniadauchwilio"
: "/searchresults",
query: { q: values.basicSearch.trim() },
shallow: true,
});
};
components/homepage/login.js
+61 -50
View File
@@ -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
+1
View File
@@ -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
+4 -1
View File
@@ -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
+4 -1
View File
@@ -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
+41 -14
View File
@@ -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>
<h2>Please wait...</h2>
<h1>
{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 {
props: {
showLogin: showLoginCheck,
hasGGCode: hasLoginCode,
loggedInUserId: portalUserObj,
loggedInUserEmail: loginEmailStr,
GG_REDIRECT_URI: process.env.GG_REDIRECT_URI,
GG_CLIENT_ID: process.env.GG_CLIENT_ID,
},
};
if (ggToken.status == 400) {
return {
redirect: {
destination: "/myportal/error",
permanent: false,
},
};
} 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
+50
View File
@@ -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
+34 -23
View File
@@ -205,30 +205,41 @@ export const getServerSideProps = wrapper.getServerSideProps(
_.has(accountDetails, "errorCode") != false
);
const [
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),
]);
if (_.has(accountDetails, "errorCode") != false) {
return {
redirect: {
destination: "/myportal/error",
permanent: false,
},
};
} else {
const [
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(setLoggedInUserId(loggedInUser));
store.dispatch(setMyCases(myCases));
store.dispatch(setMyCasesDetails(myCasesDetails));
store.dispatch(setMyRepresentations(myRepresentations));
store.dispatch(setMyRepresentationsDetails(myRepresentationsDetails));
store.dispatch(setWatchedCases(watchedCases));
store.dispatch(setWatchedCasesDetails(watchedCasesDetails));
store.dispatch(setAwaitingSubmission(awaitingSubmission));
// store.dispatch(
// setAwaitingSubmissionDetails(awaitingSubmissionDetails)
// );
store.dispatch(setAccountDetails(accountDetails));
store.dispatch(setLoggedInUserId(loggedInUser));
store.dispatch(setMyCases(myCases));
store.dispatch(setMyCasesDetails(myCasesDetails));
store.dispatch(setMyRepresentations(myRepresentations));
store.dispatch(
setMyRepresentationsDetails(myRepresentationsDetails)
);
store.dispatch(setWatchedCases(watchedCases));
store.dispatch(setWatchedCasesDetails(watchedCasesDetails));
store.dispatch(setAwaitingSubmission(awaitingSubmission));
// store.dispatch(
// setAwaitingSubmissionDetails(awaitingSubmissionDetails)
// );
}
}
);