Merge pull request #63 from trade-tariff/FPO-326-400-500-pages

FPO-326 add 404 and 500 page

src/app.ts

@@ -95,14 +95,15 @@ app.use(function (err: any, req: Request, res: Response, _next: NextFunction) {
   res.locals.message = err.message
   res.locals.error = req.app.get('env') === 'development' ? err : {}
 
-  const statusCode: number = err.statusCode ?? 500
-
+  const statusCode: number = err.statusCode
   res.status(statusCode)
-
-  res.json({
-    message: err.message,
-    error: req.app.get('env') === 'development' ? err : {}
-  })
+  switch (statusCode) {
+    case 404:
+      res.render('404')
+      break
+    default:
+      res.render('500')
+  }
 })
 
 app.listen(port, () => {

views/404.njk

@@ -0,0 +1,16 @@
+{% extends "layout.njk" %}
+{% set mainClasses = "govuk-main-wrapper--l" %}
+{% block title %}Page not found{% endblock %}
+{% block content %}
+     <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+        <h1 class="govuk-heading-l">Page not found</h1>
+        <p class="govuk-body">
+          If you typed the web address, check it is correct.
+        </p>
+        <p class="govuk-body">
+          If you pasted the web address, check you copied the entire address.
+        </p>
+    </div>
+  </div>
+{% endblock %}

views/500.njk

@@ -0,0 +1,11 @@
+{% extends "layout.njk" %}
+{% set mainClasses = "govuk-main-wrapper--l" %}
+{% block title %}Sorry, there is a problem with the service{% endblock %}
+{% block content %}
+     <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
+      <p class="govuk-body">Try again later.</p>
+    </div>
+  </div>
+{% endblock %}