HOFF 591 Added 401 error page for Unauthorised

- Added html content in 401.html page to display 401 Unauthorised error message
- Added 401 text in errors.json file.
- Wrote unit test to ensure unauthorised error page pass.
- Modify the previous status code assigned to 401 which was used for session timeout replaced with 408 status code

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

@@ -11,6 +11,11 @@
     "title": "Page not found",
     "description": "This page does not exist"
   },
+  "401": {
+    "title": "Unauthorised",
+    "description": "Unauthorise user",
+    "paragraph": "You do not have access to this page."
+  },
   "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/401.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

@@ -10,7 +10,7 @@ const getContent = (err, translate) => {
   const content = {};
 
   if (err.code === 'SESSION_TIMEOUT') {
-    err.status = 401;
+    err.status = 408;
     err.template = 'session-timeout';
     err.title = (translate && translate('errors.session.title'));
     err.message = (translate && translate('errors.session.message'));
@@ -24,6 +24,14 @@ const getContent = (err, translate) => {
     content.title = (translate && translate('errors.cookies-required.title'));
     content.message = (translate && translate('errors.cookies-required.message'));
   }
+  if (err.code === 'UNAUTHORISED') {
+    err.status = 401;
+    err.template = '401';
+    err.title = (translate && translate('errors.403.title'));
+    err.message = (translate && translate('errors.403.description'));
+    content.title = (translate && translate('errors.401.title'));
+    content.message = (translate && translate('errors.401.description'));
+  }
 
   if (err.code === 'DDOS_RATE_LIMIT') {
     err.status = 429;

test/middleware/errors.spec.js

@@ -76,7 +76,7 @@ describe('errors', () => {
         res.render.onCall(0).yields('error', html);
       });
 
-      it('renders the `error` template with `401` status', () => {
+      it('renders the `error` template with `408` status', () => {
         res.render = sinon.stub();
         res.render.onCall(0).yields('error', html);
 
@@ -93,7 +93,7 @@ describe('errors', () => {
 
         middleware(err, req, res, next);
 
-        res.status.should.have.been.calledWith(401);
+        res.status.should.have.been.calledWith(408);
         res.render.should.have.been.calledWith('session-timeout', sinon.match(locals));
         res.render.should.have.been.calledWith('error', sinon.match(locals));
       });
@@ -117,6 +117,24 @@ describe('errors', () => {
         res.render.should.have.been.calledWith('error', sinon.match(locals));
       });
 
+      it('renders the `error` template with `401` status', () => {
+        const err = {
+          code: 'UNAUTHORISED'
+        };
+
+        const locals = {
+          content: {message: 'errors.401.description', title: 'errors.401.title'},
+          error: err,
+          showStack: false,
+          startLink: '/'
+        };
+
+        middleware(err, req, res, next);
+        res.status.should.have.been.calledWith(401);
+        res.render.should.have.been.calledWith('401', 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'
@@ -137,7 +155,7 @@ describe('errors', () => {
     });
 
     describe('when specific templates are available', () => {
-      it('renders the `session-timeout` template with `401` status for session timeouts', () => {
+      it('renders the `session-timeout` template with `408` status for session timeouts', () => {
         res.render.withArgs('session-timeout').yields(null, html);
 
         const err = {
@@ -153,7 +171,7 @@ describe('errors', () => {
 
         middleware(err, req, res, next);
 
-        res.status.should.have.been.calledWith(401);
+        res.status.should.have.been.calledWith(408);
         res.render.should.have.been.calledWith('session-timeout', sinon.match(locals));
         res.send.should.have.been.calledWith(html);
       });
@@ -171,14 +189,29 @@ describe('errors', () => {
           showStack: false,
           startLink: '/'
         };
-
         middleware(err, req, res, next);
-
         res.status.should.have.been.calledWith(403);
         res.render.should.have.been.calledWith('cookie-error', sinon.match(locals));
         res.send.should.have.been.calledWith(html);
       });
+      it('renders the `401` template with `401` status for unauthorised', () => {
+        res.render.withArgs('401').yields(null, html);
 
+        const err = {
+          code: 'UNAUTHORISED'
+        };
+
+        const locals = {
+          content: {message: 'errors.401.description', title: 'errors.401.title'},
+          error: err,
+          showStack: false,
+          startLink: '/'
+        };
+        middleware(err, req, res, next);
+        res.status.should.have.been.calledWith(401);
+        res.render.should.have.been.calledWith('401', 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);