(VADC-1439): add link to access denied page

src/components/AccessDenied.jsx

@@ -1,9 +1,23 @@
 import React from 'react';
+import Button from '@gen3/ui-component/dist/components/Button';
 import './NotFound.less';
 import { userAccessToSite } from '../configs';
+import { logoutAPI } from '../actions';
+import './AccessDenied.less';
+import { components } from '../params';
 
 class AccessDenied extends React.Component {
   render() {
+    let customImage = 'gene';
+    let displaySideBoxImages = true;
+    if (components.login && components.login.image !== undefined) {
+      if (components.login.image !== '') {
+        customImage = components.login.image;
+      } else {
+        displaySideBoxImages = false;
+      }
+    }
+    const customImageStyle = { backgroundImage: `url(/src/img/icons/${customImage}.svg)` };
     const convertEmailsToLink = (str) => {
       // can only handle one email address
       // eslint-disable-next-line
@@ -15,8 +29,28 @@ class AccessDenied extends React.Component {
       return (<React.Fragment>{str}</React.Fragment>);
     };
     return (
-      <div className='error-placeholder__error-msg'>
-        <h1>{userAccessToSite.noAccessMessage ? convertEmailsToLink(userAccessToSite.noAccessMessage) : 'Access to this site requires special permission.'}</h1>
+      <div className='access-denied'>
+        {
+          (displaySideBoxImages)
+            ? <div className='access-denied__side-box access-denied__side-box--left' style={customImageStyle} />
+            : null
+        }
+        <div className='access-denied__central-content'>
+          <h1 className='h1_heading'>Access Denied</h1>
+          <p>{userAccessToSite.noAccessMessage ? convertEmailsToLink(userAccessToSite.noAccessMessage) : 'Access to this site requires special permission.'}</p>
+          <Button
+            className='logoutBtn'
+            onClick={logoutAPI()}
+            buttonType='primary'
+            label='Logout and Return to Homepage'
+            to='#'
+          />
+        </div>
+        {
+          (displaySideBoxImages)
+            ? <div className='access-denied__side-box access-denied__side-box--left' style={customImageStyle} />
+            : null
+        }
       </div>
     );
   }

src/components/AccessDenied.less

@@ -0,0 +1,44 @@
+.access-denied {
+  display: flex;
+  justify-content: space-around;
+  height: 100%;
+}
+@media screen and (max-width: 820px) {
+  .access-denied {
+    justify-content: center;
+  }
+}
+
+.access-denied__side-box {
+  width: 200px;
+  min-height: ~"calc(100vh - 221px)";
+  background-size: 200px;
+}
+
+.access-denied__central-content {
+  text-align: center;
+  flex-basis: 50%;
+  color: #000000;
+  align-self: center;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.logoutBtn {
+  margin: 40px;
+}
+
+@media screen and (max-width: 820px) {
+  .access-denied__central-content {
+    padding: 40px 10px;
+  }
+  .access-denied__side-box {
+    display: none;
+  }
+}
+
+.h1_heading {
+  text-transform: uppercase;
+}