1644 login redirect functionality

app/components/Layout/Navigation.tsx

@@ -5,6 +5,9 @@ import LogoutForm from "components/Session/LogoutForm";
 import SubHeader from "./SubHeader";
 import { useRouter } from "next/router";
 
+import LoginForm from "components/Session/LoginForm";
+import useShowGrowthbookFeature from "lib/growthbookWrapper";
+
 interface Props {
   isLoggedIn?: boolean;
   alwaysShowSubheader?: boolean;
@@ -24,15 +27,38 @@ const Navigation: React.FC<Props> = ({
   title = "CleanBC Industry Fund",
   userProfileComponent,
   links,
+  hideLoginButton,
 }) => {
-  let rightSide = isLoggedIn && (
-    <>
-      {userProfileComponent}
-      <LogoutForm />
-    </>
-  );
+  // Growthbook - external-operators
+  const showExternalOperatorsLogin =
+    useShowGrowthbookFeature("external-operators");
+
   const router = useRouter();
 
+  let rightSide = null;
+
+  if (isLoggedIn) {
+    rightSide = (
+      <>
+        {userProfileComponent}
+        <LogoutForm />
+      </>
+    );
+  } else if (!hideLoginButton) {
+    rightSide = router.pathname !== "/" && (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          gap: "1.25em",
+        }}
+      >
+        <LoginForm />
+        {showExternalOperatorsLogin && <LoginForm isExternal={true} />}
+      </div>
+    );
+  }
+
   const unauthorizedIdir = title === "Access required";
 
   return (
@@ -46,7 +72,9 @@ const Navigation: React.FC<Props> = ({
             */}
             <a
               href={
-                router.pathname.includes("/cif-external")
+                !isLoggedIn
+                  ? "/"
+                  : router.pathname.includes("/cif-external")
                   ? "/cif-external"
                   : "/cif"
               }

app/components/Session/LoginForm.tsx

@@ -9,26 +9,36 @@ interface Props {
 
 const LoginForm: React.FC<Props> = ({ isExternal }) => {
   const router = useRouter();
-  let loginURI = isExternal
-    ? `/login?redirectTo=${getExternalUserLandingPageRoute().pathname}`
-    : "/login";
+  let loginURI = "/login";
 
   if (router.query.redirectTo)
     loginURI += `?redirectTo=${encodeURIComponent(
       router.query.redirectTo as string
     )}`;
+  else if (isExternal)
+    loginURI += `?redirectTo=${encodeURIComponent(
+      getExternalUserLandingPageRoute().pathname as string
+    )}`;
 
   return (
     <>
-      <form action={loginURI} method="post">
-        {isExternal ? (
-          <Button type="submit" variant="secondary">
-            External User Login
-          </Button>
-        ) : (
-          <Button type="submit">Administrator Login</Button>
-        )}
+      <form id="login-buttons" action={loginURI} method="post">
+        <Button
+          type="submit"
+          variant={
+            router.pathname.includes("login-redirect")
+              ? "secondary-inverse"
+              : isExternal && "secondary"
+          }
+        >
+          {isExternal ? "External User Login" : "Administrator Login"}
+        </Button>
       </form>
+      <style jsx>{`
+        #login-buttons {
+          margin: 0px;
+        }
+      `}</style>
     </>
   );
 };

app/pages/index.tsx

@@ -64,6 +64,7 @@ function Index({ preloadedQuery }: RelayProps<{}, pagesQuery>) {
             display: flex;
             justify-content: center;
             flex-direction: column;
+            gap: 1em;
           }
         `}
       </style>

app/tests/unit/components/Layout/ExternalLayout.test.tsx

@@ -46,7 +46,7 @@ describe("The DefaultLayout component", () => {
   beforeEach(() => {
     componentTestingHelper.reinit();
     jest.spyOn(require("next/router"), "useRouter").mockImplementation(() => {
-      return { pathname: "/cif-external" };
+      return { pathname: "/cif-external", query: testQuery };
     });
   });
 

app/tests/unit/components/Layout/Navigation.test.tsx

@@ -2,6 +2,7 @@ import Navigation from "components/Layout/Navigation";
 import { render, screen } from "@testing-library/react";
 import { mocked } from "jest-mock";
 import { useRouter } from "next/router";
+import userEvent from "@testing-library/user-event";
 
 const links = [
   {
@@ -13,6 +14,16 @@ const links = [
   },
 ];
 
+const linksHomepage = [
+  {
+    name: "Homepage",
+    href: {
+      pathname: "/",
+    },
+    highlightOn: ["/(.*)"],
+  },
+];
+
 jest.mock("next/router", () => ({
   useRouter: jest.fn(),
 }));
@@ -47,4 +58,27 @@ describe("The Navigation Component", () => {
     expect(screen.getByText("Home")).toBeVisible();
     expect(screen.getByText("Projects")).toBeVisible();
   });
+
+  it("should not render the login buttons if the user is logged in", () => {
+    render(<Navigation isLoggedIn={true} links={links} />);
+
+    expect(screen.queryByText("Administrator Login")).toBeNull();
+    expect(screen.queryByText("External User Login")).toBeNull();
+  });
+
+  it("should not render the login buttons if the user is logged out but on the homepage", () => {
+    render(<Navigation isLoggedIn={false} links={linksHomepage} />);
+
+    expect(screen.queryByText("Administrator Login")).toBeNull();
+    expect(screen.queryByText("External User Login")).toBeNull();
+  });
+
+  it("redirects to the homepage when the user clicks the CleanBC logo", () => {
+    render(<Navigation isLoggedIn={false} links={links} />);
+
+    userEvent.click(
+      screen.getByAltText(/logo for Province of British Columbia CleanBC/i)
+    );
+    expect(window.location.pathname).toEqual("/");
+  });
 });

app/tests/unit/pages/login-redirect.test.tsx

@@ -1,14 +1,33 @@
-/**
- * @jest-environment node
- */
-
 import { getUserGroups } from "server/helpers/userGroupAuthentication";
-import { withRelayOptions } from "pages/login-redirect";
+import loginRedirect, { withRelayOptions } from "pages/login-redirect";
 import { mocked } from "jest-mock";
+import { screen } from "@testing-library/react";
+import PageTestingHelper from "tests/helpers/pageTestingHelper";
+import compiledLoginRedirectQuery, {
+  loginRedirectQuery,
+} from "__generated__/loginRedirectQuery.graphql";
 jest.mock("server/helpers/userGroupAuthentication");
 jest.mock("lib/relay/server");
 
+const defaultMockResolver = {
+  Query() {
+    return {
+      session: null,
+    };
+  },
+};
+
+const pageTestingHelper = new PageTestingHelper<loginRedirectQuery>({
+  pageComponent: loginRedirect,
+  compiledQuery: compiledLoginRedirectQuery,
+  defaultQueryResolver: defaultMockResolver,
+});
+
 describe("The login-redirect page", () => {
+  beforeEach(() => {
+    pageTestingHelper.reinit();
+  });
+
   it("redirects a logged in cif_admin to the requested route", async () => {
     mocked(getUserGroups).mockReturnValue(["cif_admin"]);
     const ctx = {
@@ -42,4 +61,13 @@ describe("The login-redirect page", () => {
       redirect: { destination: "/" },
     });
   });
+
+  it("renders the login buttons for a logged out user", () => {
+    pageTestingHelper.setMockRouterValues({ pathname: "/cif/projects" });
+    pageTestingHelper.loadQuery();
+    pageTestingHelper.renderPage();
+
+    expect(screen.getByText(/Administrator Login/i)).toBeVisible();
+    expect(screen.getByText(/External User Login/i)).toBeVisible();
+  });
 });