Merge pull request #193 from companieshouse/feature/IDVA3-2554-404-sc…

…reen

IDVA3-2554 Create 'Page not found' 404 error screen

locales/cy/page-not-found.json

@@ -0,0 +1,7 @@
+{
+  "404_main_title": "404_main_title: To be translated",
+  "404_check_typed_address": "404_check_typed_address: To be translated",
+  "404_check_pasted_address": "404_check_pasted_address: To be translated",
+  "404_arrived_via_bad_url_1": "404_arrived_via_bad_link: To be translated",
+  "404_arrived_via_bad_url_2": "404_arrived_via_bad_link: To be translated"
+}

locales/en/page-not-found.json

@@ -0,0 +1,7 @@
+{
+  "404_main_title": "Page not found",
+  "404_check_typed_address": "If you typed the web address, check it is correct.",
+  "404_check_pasted_address": "If you pasted the web address, check you copied the entire address.",
+  "404_arrived_via_bad_url_1": "Contact us",
+  "404_arrived_via_bad_url_2": "if you need to speak to someone about providing identity verification details for a person with significant control."
+}

src/app.ts

@@ -9,6 +9,7 @@ import routerDispatch from "./routerDispatch";
 import { isLive } from "./middleware/serviceLive";
 import { csrfProtectionMiddleware } from "./middleware/csrf";
 import csrfErrorHandler from "./middleware/csrfError";
+import { pageNotFound } from "./middleware/pageNotFound";
 import { internalServerError } from "./middleware/internalServerError";
 
 const app = express();
@@ -73,6 +74,9 @@ app.enable("trust proxy");
 // channel all requests through router dispatch
 routerDispatch(app);
 
+// 404 - page not found error
+app.use(pageNotFound);
+
 // 500 - internal server error
 app.use(internalServerError);
 

src/constants.ts

@@ -41,6 +41,7 @@ export const Urls = {
     NAME_MISMATCH: `${urlWithTransactionIdAndSubmissionId}/individual/psc-why-this-name`,
     INDIVIDUAL_STATEMENT: `${urlWithTransactionIdAndSubmissionId}/individual/psc-statement`,
     INTERNAL_SERVER_ERROR: "/internal-server-error",
+    PAGE_NOT_FOUND: "/page-not-found",
     PSC_VERIFIED: `${urlWithTransactionIdAndSubmissionId}/psc-verified`,
     STOP_SCREEN: "/stop/:stopType",
     STOP_SCREEN_SUBMISSION: `${urlWithTransactionIdAndSubmissionId}/stop/:stopType`

src/middleware/pageNotFound.ts

@@ -0,0 +1,13 @@
+
+import { HttpStatusCode } from "axios";
+import { Request, Response } from "express";
+import PageNotFoundHandler from "../routers/handlers/error/pageNotFoundHandler";
+
+export const pageNotFound = (req: Request, res: Response) => {
+
+    const handler = new PageNotFoundHandler();
+    handler.executeGet(req, res).then((viewModel) => {
+        const { templatePath, viewData } = viewModel;
+        res.status(HttpStatusCode.NotFound).render(templatePath, viewData);
+    });
+};

src/routerDispatch.ts

@@ -1,11 +1,10 @@
 // Do Router dispatch here, i.e. map incoming routes to appropriate router
-import { Application, Request, Response, Router } from "express";
+import { Application, Router } from "express";
 import { Urls, servicePathPrefix } from "./constants";
 import { CompanyNumberRouter, ConfirmCompanyRouter, HealthCheckRouter, IndividualPscListRouter, IndividualStatementRouter, NameMismatchRouter, NewSubmissionRouter, PersonalCodeRouter, PscVerifiedRouter, StartRouter, StopScreenRouter } from "./routers/utils";
 import { authenticate } from "./middleware/authentication";
 import { fetchVerification } from "./middleware/fetchVerification";
 import { fetchCompany } from "./middleware/fetchCompany";
-import { HttpStatusCode } from "axios";
 
 const routerDispatch = (app: Application) => {
 
@@ -26,10 +25,6 @@ const routerDispatch = (app: Application) => {
     router.use(Urls.PSC_VERIFIED, authenticate, fetchVerification, fetchCompany, PscVerifiedRouter);
     router.use(Urls.STOP_SCREEN, authenticate, StopScreenRouter);
     router.use(Urls.STOP_SCREEN_SUBMISSION, authenticate, StopScreenRouter);
-
-    router.use("*", (req: Request, res: Response) => {
-        res.status(HttpStatusCode.NotFound).render("partials/error_400");
-    });
 };
 
 export default routerDispatch;

src/routers/handlers/error/pageNotFoundHandler.ts

@@ -0,0 +1,42 @@
+import { Request, Response } from "express";
+import { Urls } from "../../../constants";
+import { logger } from "../../../lib/logger";
+import { getLocaleInfo, getLocalesService, selectLang } from "../../../utils/localise";
+import { BaseViewData, GenericHandler, ViewModel } from "../generic";
+import { env } from "../../../config";
+
+interface PageNotFoundViewData extends BaseViewData {
+  extraData?: string[];
+}
+
+export default class PageNotFoundHandler extends GenericHandler<PageNotFoundViewData> {
+
+    public static templatePath = "router_views/error/page-not-found";
+
+    public async getViewData (req: Request, res: Response): Promise<PageNotFoundViewData> {
+        const baseViewData = await super.getViewData(req, res);
+        // adding language functionality
+        const lang = selectLang(req.query.lang);
+        const locales = getLocalesService();
+
+        return {
+            ...baseViewData,
+            ...getLocaleInfo(locales, lang),
+            isSignedIn: false,
+            currentUrl: req.url,
+            backURL: null,
+            templateName: Urls.PAGE_NOT_FOUND,
+            extraData: [env.CONTACT_US_LINK]
+        };
+    }
+
+    public async executeGet (req: Request, res: Response): Promise<ViewModel<PageNotFoundViewData>> {
+        logger.info(`${PageNotFoundHandler.name} - ${this.executeGet.name}: called to serve 404 error page`);
+
+        // ...process request here and return data for the view
+        return {
+            templatePath: PageNotFoundHandler.templatePath,
+            viewData: await this.getViewData(req, res)
+        };
+    }
+}

src/views/router_views/error/page-not-found.njk

@@ -0,0 +1,13 @@
+
+{% extends "layouts/default.njk" %}
+
+{% set title = i18n.404_main_title %}
+
+{% block main_content %}
+    <h1 class="govuk-heading-l">{{ title }}</h1>
+    <p class="govuk-body">{{ i18n.404_check_typed_address }}</p>
+    <p class="govuk-body">{{ i18n.404_check_pasted_address }}</p>
+    <p class="govuk-body">
+        <a href="{{ extraData[0] }}">{{ i18n.404_arrived_via_bad_url_1 }}</a> {{ i18n.404_arrived_via_bad_url_2 }}
+    </p>
+{% endblock %}