From deec4563b1e36b01f745c3a21ad1385884afda63 Mon Sep 17 00:00:00 2001
From: JoshLarouche <joshua.t.larouche@gmail.com>
Date: Wed, 14 Jun 2023 14:39:46 -0700
Subject: [PATCH] feat: added login buttons to login redirect page

---
 app/components/Layout/Navigation.tsx | 17 ++++++++++----
 app/components/Session/LoginForm.tsx | 35 ++++++++++++++++++++++++----
 app/pages/index.tsx                  |  1 +
 3 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/app/components/Layout/Navigation.tsx b/app/components/Layout/Navigation.tsx
index 3d1f651c1a..83d24dbf09 100644
--- a/app/components/Layout/Navigation.tsx
+++ b/app/components/Layout/Navigation.tsx
@@ -32,19 +32,28 @@ const Navigation: React.FC<Props> = ({
   const showExternalOperatorsLogin =
     useShowGrowthbookFeature("external-operators");
 
+  const router = useRouter();
+
   let rightSide = isLoggedIn ? (
     <>
       {userProfileComponent}
       <LogoutForm />
     </>
+  ) : router.pathname === "/" ? (
+    isLoggedIn
   ) : (
-    <>
-      {userProfileComponent}
+    <div
+      id="login-buttons"
+      style={{
+        display: "flex",
+        "flex-direction": "row",
+        gap: "1.25em",
+      }}
+    >
       <LoginForm />
       {showExternalOperatorsLogin && <LoginForm isExternal={true} />}
-    </>
+    </div>
   );
-  const router = useRouter();
 
   const unauthorizedIdir = title === "Access required";
 
diff --git a/app/components/Session/LoginForm.tsx b/app/components/Session/LoginForm.tsx
index 8cea2f6672..b61f4dc060 100644
--- a/app/components/Session/LoginForm.tsx
+++ b/app/components/Session/LoginForm.tsx
@@ -20,15 +20,42 @@ const LoginForm: React.FC<Props> = ({ isExternal }) => {
 
   return (
     <>
-      <form action={loginURI} method="post">
-        {isExternal ? (
-          <Button type="submit" variant="secondary">
+      <form id="login-buttons" action={loginURI} method="post">
+        {isExternal && router.pathname.includes("login-redirect") ? (
+          <Button
+            className="loginButton externalUser"
+            type="submit"
+            variant="secondary-inverse"
+          >
             External User Login
           </Button>
+        ) : isExternal ? (
+          <Button
+            className="loginButton externalUser"
+            type="submit"
+            variant="secondary"
+          >
+            External User Login
+          </Button>
+        ) : router.pathname.includes("login-redirect") ? (
+          <Button
+            className="loginButton"
+            type="submit"
+            variant="secondary-inverse"
+          >
+            Administrator Login
+          </Button>
         ) : (
-          <Button type="submit">Administrator Login</Button>
+          <Button className="loginButton" type="submit">
+            Administrator Login
+          </Button>
         )}
       </form>
+      <style jsx>{`
+        #login-buttons {
+          margin: 0px;
+        }
+      `}</style>
     </>
   );
 };
diff --git a/app/pages/index.tsx b/app/pages/index.tsx
index 442e1d4fe8..edbcc5d59f 100644
--- a/app/pages/index.tsx
+++ b/app/pages/index.tsx
@@ -64,6 +64,7 @@ function Index({ preloadedQuery }: RelayProps<{}, pagesQuery>) {
             display: flex;
             justify-content: center;
             flex-direction: column;
+            gap: 1em;
           }
         `}
       </style>