AuthenticatedRoutes conditionally reroutes api_only user (#1123)

* Renders CTA Back to login page if user.api_only
* Edge cases: Redirects to log in for !user and redirect to home for !user.api_only

frontend/components/AuthenticatedRoutes/AuthenticatedRoutes.jsx

@@ -20,7 +20,11 @@ export class AuthenticatedRoutes extends Component {
 
   componentWillMount() {
     const { loading, user } = this.props;
-    const { redirectToLogin, redirectToPasswordReset } = this;
+    const {
+      redirectToLogin,
+      redirectToPasswordReset,
+      redirectToApiUserOnly,
+    } = this;
 
     if (!loading && !user) {
       return redirectToLogin();
@@ -30,6 +34,10 @@ export class AuthenticatedRoutes extends Component {
       return redirectToPasswordReset();
     }
 
+    if (user && user.api_only) {
+      return redirectToApiUserOnly();
+    }
+
     return false;
   }
 
@@ -37,7 +45,11 @@ export class AuthenticatedRoutes extends Component {
     if (isEqual(this.props, nextProps)) return false;
 
     const { loading, user } = nextProps;
-    const { redirectToLogin, redirectToPasswordReset } = this;
+    const {
+      redirectToLogin,
+      redirectToPasswordReset,
+      redirectToApiUserOnly,
+    } = this;
 
     if (!loading && !user) {
       return redirectToLogin();
@@ -47,6 +59,10 @@ export class AuthenticatedRoutes extends Component {
       return redirectToPasswordReset();
     }
 
+    if (user && user.api_only) {
+      return redirectToApiUserOnly();
+    }
+
     return false;
   }
 
@@ -65,6 +81,13 @@ export class AuthenticatedRoutes extends Component {
     return dispatch(push(RESET_PASSWORD));
   };
 
+  redirectToApiUserOnly = () => {
+    const { dispatch } = this.props;
+    const { API_ONLY_USER } = paths;
+
+    return dispatch(push(API_ONLY_USER));
+  };
+
   render() {
     const { children, user } = this.props;
 

frontend/pages/ApiOnlyUser/ApiOnlyUser.tsx

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { push } from "react-router-redux";
-
+// @ts-ignore
+import { fetchCurrentUser, logoutUser } from "redux/nodes/auth/actions";
 import Button from "components/buttons/Button";
 import paths from "router/paths";
 // @ts-ignore
@@ -9,13 +10,23 @@ import fleetLogoText from "../../../assets/images/fleet-logo-text-white.svg";
 
 const baseClass = "api-only-user";
 
-const ApiOnlyUser = (): JSX.Element | null => {
+const ApiOnlyUser = (): JSX.Element => {
   const dispatch = useDispatch();
-  const { LOGIN } = paths;
-  const handleClick = (event: any) => dispatch(push(LOGIN));
+  const { LOGIN, HOME } = paths;
+  const handleClick = (event: any) => dispatch(logoutUser());
+
+  useEffect(() => {
+    dispatch(fetchCurrentUser()).then((user: any) => {
+      if (!user) {
+        dispatch(push(LOGIN));
+      } else if (user && !user.payload.user.api_only) {
+        dispatch(push(HOME));
+      }
+    });
+  }, []);
 
   return (
-    <div className="api-only-user">
+    <div className={baseClass}>
       <img alt="Fleet" src={fleetLogoText} className={`${baseClass}__logo`} />
       <div className={`${baseClass}__wrap`}>
         <div className={`${baseClass}__lead-wrapper`}>