403 Page, routing for tier permissions (#920)

* 403 page, svg, routing
* Reroute basic tier pages if no permission to access

assets/images/403.svg

@@ -0,0 +1,47 @@
+<svg width="1280" height="454" viewBox="0 0 1280 454" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="-5" width="1285" height="406" fill="url(#paint0_linear)"/>
+<circle cx="188.5" cy="414.5" r="91.5" fill="#E6EDEF"/>
+<circle cx="111.5" cy="391.5" r="72.5" fill="#E6EDEF"/>
+<circle cx="197.5" cy="455.5" r="85.5" fill="#E6EDEF"/>
+<circle cx="1230.5" cy="364.5" r="109.5" fill="#E6EDEF"/>
+<circle cx="1279.5" cy="399.5" r="94.5" fill="#E6EDEF"/>
+<circle cx="1086.5" cy="428.5" r="43.5" fill="#E6EDEF"/>
+<circle cx="1085.5" cy="406.5" r="77.5" fill="#E6EDEF"/>
+<circle cx="988.5" cy="433.5" r="62.5" fill="#E6EDEF"/>
+<circle cx="20.5" cy="388.5" r="91.5" fill="#F2F7F9"/>
+<circle cx="111.5" cy="368.5" r="72.5" fill="#F2F7F9"/>
+<circle cx="188.5" cy="438.5" r="85.5" fill="#F2F7F9"/>
+<circle cx="396.5" cy="431.5" r="72.5" fill="#F2F7F9"/>
+<circle cx="712.5" cy="433.5" r="72.5" fill="#F2F7F9"/>
+<circle cx="903.5" cy="430.5" r="72.5" fill="#F2F7F9"/>
+<circle cx="1142.5" cy="393.5" r="109.5" fill="#F2F7F9"/>
+<circle cx="1158.5" cy="425.5" r="72.5" fill="#F2F7F9"/>
+<circle cx="1279.5" cy="376.5" r="94.5" fill="#F2F7F9"/>
+<circle cx="1086.5" cy="405.5" r="43.5" fill="#F2F7F9"/>
+<circle cx="296" cy="408" r="52" fill="#F2F7F9"/>
+<circle cx="609.5" cy="443.5" r="62.5" fill="#F2F7F9"/>
+<circle cx="1018.5" cy="411.5" r="77.5" fill="#F2F7F9"/>
+<circle cx="812.5" cy="441.5" r="62.5" fill="#F2F7F9"/>
+<circle cx="20.5" cy="474.5" r="91.5" fill="white"/>
+<circle cx="188.5" cy="464.5" r="85.5" fill="white"/>
+<circle cx="97.5" cy="443.5" r="72.5" fill="white"/>
+<circle cx="356.5" cy="424.5" r="72.5" fill="white"/>
+<circle cx="501.5" cy="426.5" r="72.5" fill="white"/>
+<circle cx="677.5" cy="426.5" r="72.5" fill="white"/>
+<circle cx="853.5" cy="414.5" r="72.5" fill="white"/>
+<circle cx="1050.5" cy="451.5" r="109.5" fill="white"/>
+<circle cx="1158.5" cy="421.5" r="72.5" fill="white"/>
+<circle cx="1279.5" cy="462.5" r="94.5" fill="white"/>
+<circle cx="438.5" cy="392.5" r="43.5" fill="white"/>
+<circle cx="257.5" cy="410.5" r="43.5" fill="white"/>
+<circle cx="591.5" cy="420.5" r="62.5" fill="white"/>
+<circle cx="935.5" cy="410.5" r="62.5" fill="white"/>
+<circle cx="762.5" cy="415.5" r="62.5" fill="white"/>
+<rect y="436" width="1285" height="70" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear" x1="637.5" y1="0" x2="669.104" y2="582.618" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1F1D42"/>
+<stop offset="1" stop-color="#00FFF0"/>
+</linearGradient>
+</defs>
+</svg>

frontend/components/BasicTierRoutes/BasicTierRoutes.tsx

@@ -18,7 +18,7 @@ interface IRootState {
   };
 }
 
-const { HOME } = paths;
+const { FLEET_403 } = paths;
 
 const BasicTierRoutes = (props: IBasicTierRoutes) => {
   const { children } = props;
@@ -33,8 +33,7 @@ const BasicTierRoutes = (props: IBasicTierRoutes) => {
   }
 
   if (!permissionUtils.isBasicTier(config)) {
-    dispatch(push(HOME));
+    dispatch(push(FLEET_403));
-    dispatch(renderFlash("error", "You do not have permissions for that page"));
     return null;
   }
   return <>{children}</>;

frontend/pages/Fleet403/Fleet403.jsx

@@ -0,0 +1,40 @@
+import React, { Component } from "react";
+import { Link } from "react-router";
+
+import PATHS from "router/paths";
+
+import fleetLogoText from "../../../assets/images/fleet-logo-text-white.svg";
+import backgroundImg from "../../../assets/images/403.svg";
+
+const baseClass = "fleet-403";
+
+class Fleet403 extends Component {
+  render() {
+    return (
+      <div className={baseClass}>
+        <header className="primary-header">
+          <Link to={PATHS.HOME}>
+            <img
+              className="primary-header__logo"
+              src={fleetLogoText}
+              alt="Fleet logo"
+            />
+          </Link>
+        </header>
+        <img
+          src={backgroundImg}
+          alt="403 background"
+          className="background-image"
+        />
+        <main>
+          <h1>
+            <span>Access denied.</span>
+          </h1>
+          <p>You do not have permissions to access that page.</p>
+        </main>
+      </div>
+    );
+  }
+}
+
+export default Fleet403;

frontend/pages/Fleet403/_styles.scss

@@ -0,0 +1,54 @@
+.fleet-403 {
+  p {
+    color: #333;
+    font-style: $regular;
+  }
+
+  a {
+    color: $core-vibrant-blue;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .primary-header {
+    position: absolute;
+    top: 0;
+    height: 90px;
+    width: 100%;
+
+    &__logo {
+      height: 48px;
+      width: 174px;
+      position: absolute;
+      top: 25px;
+      left: 40px;
+    }
+  }
+
+  .background-image {
+    width: 100%;
+  }
+
+  main {
+    text-align: center;
+
+    > h1 {
+      display: inline;
+      font-size: 32px;
+      max-width: 479px;
+      color: $core-fleet-black;
+
+      span {
+        font-weight: $bold;
+      }
+    }
+
+    > h2 {
+      font-size: 36px;
+      margin: 13px 0 $pad-xlarge;
+    }
+  }
+}

frontend/pages/Fleet403/index.js

@@ -0,0 +1 @@
+export { default } from "./Fleet403";

frontend/router/index.jsx

@@ -35,6 +35,7 @@ import PackComposerPage from "pages/packs/PackComposerPage";
 import QueryPage from "pages/queries/QueryPage";
 import QueryPageWrapper from "components/queries/QueryPageWrapper";
 import RegistrationPage from "pages/RegistrationPage";
+import Fleet403 from "pages/Fleet403";
 import Fleet404 from "pages/Fleet404";
 import Fleet500 from "pages/Fleet500";
 import UserSettingsPage from "pages/UserSettingsPage";
@@ -110,6 +111,7 @@ const routes = (
       </Route>
       <Route path="/500" component={Fleet500} />
       <Route path="/404" component={Fleet404} />
+      <Route path="/403" component={Fleet403} />
       <Route path="*" component={Fleet404} />
     </Router>
   </Provider>

frontend/router/paths.ts

@@ -19,6 +19,7 @@ export default {
   },
   FORGOT_PASSWORD: `${URL_PREFIX}/login/forgot`,
   HOME: `${URL_PREFIX}/`,
+  FLEET_403: `${URL_PREFIX}/403`,
   FLEET_500: `${URL_PREFIX}/500`,
   LOGIN: `${URL_PREFIX}/login`,
   LOGOUT: `${URL_PREFIX}/logout`,