From 9360ed3f6468940ccfe0ad3e10992b458ba81da4 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 17 Jun 2021 11:11:28 -0400
Subject: [PATCH] 403 Page for API Only User (#1102)

* Typescript files
---
 frontend/pages/ApiOnlyUser/ApiOnlyUser.tsx | 43 ++++++++++++++++++++
 frontend/pages/ApiOnlyUser/_styles.scss    | 47 ++++++++++++++++++++++
 frontend/pages/ApiOnlyUser/index.ts        |  1 +
 frontend/router/index.jsx                  |  2 +
 frontend/router/paths.ts                   |  1 +
 5 files changed, 94 insertions(+)
 create mode 100644 frontend/pages/ApiOnlyUser/ApiOnlyUser.tsx
 create mode 100644 frontend/pages/ApiOnlyUser/_styles.scss
 create mode 100644 frontend/pages/ApiOnlyUser/index.ts

diff --git a/frontend/pages/ApiOnlyUser/ApiOnlyUser.tsx b/frontend/pages/ApiOnlyUser/ApiOnlyUser.tsx
new file mode 100644
index 0000000000..f26f1eca6a
--- /dev/null
+++ b/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;
diff --git a/frontend/pages/ApiOnlyUser/_styles.scss b/frontend/pages/ApiOnlyUser/_styles.scss
new file mode 100644
index 0000000000..768e3afb0c
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/frontend/pages/ApiOnlyUser/index.ts b/frontend/pages/ApiOnlyUser/index.ts
new file mode 100644
index 0000000000..3cecf40479
--- /dev/null
+++ b/frontend/pages/ApiOnlyUser/index.ts
@@ -0,0 +1 @@
+export { default } from "./ApiOnlyUser";
diff --git a/frontend/router/index.jsx b/frontend/router/index.jsx
index 94f4a48d03..2ea2ae0512 100644
--- a/frontend/router/index.jsx
+++ b/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} />
diff --git a/frontend/router/paths.ts b/frontend/router/paths.ts
index 0e51ef6daf..df94d7e8f9 100644
--- a/frontend/router/paths.ts
+++ b/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`,