feat: added login buttons to login redirect page

bcgov · Jun 29, 2023 · deec456 · deec456
1 parent 8a7da2a
commit deec456
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git 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
@@ -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
@@ -64,6 +64,7 @@ function Index({ preloadedQuery }: RelayProps<{}, pagesQuery>) {
             display: flex;
             justify-content: center;
             flex-direction: column;
+            gap: 1em;
           }
         `}
       </style>