HOF 592 Added 403 Error page (Forbidden)

- Added html content in 403.html page to display 403 forbidden error message
- Added 403 text in errors.json file.
- Wrote unit test to unsure error page pass.
- Modify the previous status code assigned to 403

frontend/template-partials/translations/src/en/errors.json

@@ -11,6 +11,11 @@
     "title": "Page not found",
     "description": "This page does not exist"
   },
+  "403": {
+    "title": "Page is Forbidden",
+    "description": "This page is Forbidden",
+    "paragraph": "This page is Forbidden"
+  },
   "cookies-required": {
     "title": "Cookies are required to use this service",
     "message": "Cookies are required in order to use this service.<br /><br /> Please <a href=\"http://www.aboutcookies.org/how-to-control-cookies/\" rel=\"external\">enable cookies</a> and try again. Find out <a href=\"/cookies\">how to we use cookies</a>."

frontend/template-partials/views/403.html

@@ -0,0 +1,18 @@
+{{<layout}}
+  {{$header}}
+    {{title}}
+  {{/header}}
+  {{$content}}
+      <div class="govuk-width-container">
+        <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
+          <div class="govuk-grid-row">
+            <div class="govuk-grid-column-two-thirds">
+              <h1 class="govuk-heading-l">{{title}}</h1>
+              <p class="govuk-body">{{paragraph}}</p>
+            </div>
+          </div>
+        </main>
+      </div>
+    <a href="/" class="button" role="button">{{#t}}buttons.start-again{{/t}}</a>
+  {{/content}}
+{{/layout}}

middleware/errors.js

@@ -17,14 +17,21 @@ const getContent = (err, translate) => {
     content.title = (translate && translate('errors.session.title'));
     content.message = (translate && translate('errors.session.message'));
   }
-
+  
   if (err.code === 'NO_COOKIES') {
-    err.status = 403;
+    err.status = 432;
     err.template = 'cookie-error';
     content.title = (translate && translate('errors.cookies-required.title'));
     content.message = (translate && translate('errors.cookies-required.message'));
   }
-
+  if (err.code === 'FORBIDDEN') {
+    err.status = 403;
+    err.template = '403';
+    err.title = (translate && translate('errors.403.title'));
+    err.message = (translate && translate('errors.403.description'));
+    content.title = (translate && translate('errors.403.title'));
+    content.message = (translate && translate('errors.403.description'));
+  }
   if (err.code === 'DDOS_RATE_LIMIT') {
     err.status = 429;
     err.template = 'rate-limit-error';

test/middleware/errors.spec.js

@@ -98,7 +98,7 @@ describe('errors', () => {
         res.render.should.have.been.calledWith('error', sinon.match(locals));
       });
 
-      it('renders the `error` template with `403` status', () => {
+      it('renders the `error` template with `432` status', () => {
         const err = {
           code: 'NO_COOKIES'
         };
@@ -112,11 +112,30 @@ describe('errors', () => {
 
         middleware(err, req, res, next);
 
-        res.status.should.have.been.calledWith(403);
+        res.status.should.have.been.calledWith(432);
         res.render.should.have.been.calledWith('cookie-error', sinon.match(locals));
         res.render.should.have.been.calledWith('error', sinon.match(locals));
       });
 
+      it('renders the `error` template with `403` status', () => {
+        const err = {
+          code: 'FORBIDDEN'
+        };
+
+        const locals = {
+          content: {message: 'errors.403.description', title: 'errors.403.title'},
+          error: err,
+          showStack: false,
+          startLink: '/'
+        };
+
+        middleware(err, req, res, next);
+
+        res.status.should.have.been.calledWith(403);
+        res.render.should.have.been.calledWith('403', sinon.match(locals));
+        res.render.should.have.been.calledWith('error', sinon.match(locals));
+      });
+
       it('renders the `error` template with `500` status', () => {
         const err = {
           code: 'UNKNOWN'
@@ -158,7 +177,7 @@ describe('errors', () => {
         res.send.should.have.been.calledWith(html);
       });
 
-      it('renders the `cookie-error` template with `403` status for cookie errors', () => {
+      it('renders the `cookie-error` template with `432` status for cookie errors', () => {
         res.render.withArgs('cookie-error').yields(null, html);
 
         const err = {
@@ -174,10 +193,28 @@ describe('errors', () => {
 
         middleware(err, req, res, next);
 
-        res.status.should.have.been.calledWith(403);
+        res.status.should.have.been.calledWith(432);
         res.render.should.have.been.calledWith('cookie-error', sinon.match(locals));
         res.send.should.have.been.calledWith(html);
       });
+      it('renders the `403` template with `403` status for forbidden', () => {
+        res.render.withArgs('403').yields(null, html);
+
+        const err = {
+          code: 'FORBIDDEN'
+        };
+
+        const locals = {
+          content: {message: 'errors.403.description', title: 'errors.403.title'},
+          error: err,
+          showStack: false,
+          startLink: '/'
+        };
+        middleware(err, req, res, next);
+        res.status.should.have.been.calledWith(403);
+        res.render.should.have.been.calledWith('403', sinon.match(locals));
+        res.send.should.have.been.calledWith(html);
+      });
 
       it('renders the `error` template with `500` status for unknown errors', () => {
         res.render.withArgs('error').yields(null, html);