403 Page for API Only User (#1102)

* Typescript files

frontend/pages/ApiOnlyUser/ApiOnlyUser.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import { push } from "react-router-redux";
+
+import Button from "components/buttons/Button";
+import paths from "router/paths";
+// @ts-ignore
+import fleetLogoText from "../../../assets/images/fleet-logo-text-white.svg";
+
+const baseClass = "api-only-user";
+
+const ApiOnlyUser = (): JSX.Element | null => {
+  const dispatch = useDispatch();
+  const { LOGIN } = paths;
+  const handleClick = (event: any) => dispatch(push(LOGIN));
+
+  return (
+    <div className="api-only-user">
+      <img alt="Fleet" src={fleetLogoText} className={`${baseClass}__logo`} />
+      <div className={`${baseClass}__wrap`}>
+        <div className={`${baseClass}__lead-wrapper`}>
+          <p className={`${baseClass}__lead-text`}>
+            You attempted to access Fleet with an API only user.
+          </p>
+          <p className={`${baseClass}__sub-lead-text`}>
+            This user doesn&apos;t have access to the Fleet UI.
+          </p>
+        </div>
+        <div className="login-button-wrap">
+          <Button
+            onClick={handleClick}
+            variant="brand"
+            className={`${baseClass}__login-button`}
+          >
+            Back to login
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ApiOnlyUser;

frontend/pages/ApiOnlyUser/_styles.scss

@@ -0,0 +1,47 @@
+.api-only-user {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+  min-height: 100vh;
+  background: $gradients-dark-gradient-vertical;
+
+  &__wrap {
+    background-color: $core-white;
+    border-radius: 10px;
+    width: 436px;
+    padding: $pad-xxlarge;
+    margin-top: $pad-xxlarge;
+  }
+
+  &__logo {
+    width: 120px;
+    margin: $small auto;
+  }
+
+  &__lead-wrapper {
+    border-radius: $border-radius;
+    box-sizing: border-box;
+  }
+
+  &__lead-text {
+    font-size: $small;
+    font-weight: $bold;
+    margin: 0 0 6px;
+    text-align: center;
+  }
+
+  &__sub-lead-text {
+    font-size: $x-small;
+    font-weight: $regular;
+    text-align: center;
+    margin-top: $pad-medium;
+  }
+
+  .login-button-wrap {
+    display: flex;
+    justify-content: center;
+    margin-top: $pad-large;
+  }
+}

frontend/pages/ApiOnlyUser/index.ts

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

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 ApiOnlyUser from "pages/ApiOnlyUser";
 import Fleet403 from "pages/Fleet403";
 import Fleet404 from "pages/Fleet404";
 import Fleet500 from "pages/Fleet500";
@@ -109,6 +110,7 @@ const routes = (
           </Route>
         </Route>
       </Route>
+      <Route path="/apionlyuser" component={ApiOnlyUser} />
       <Route path="/500" component={Fleet500} />
       <Route path="/404" component={Fleet404} />
       <Route path="/403" component={Fleet403} />

frontend/router/paths.ts

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