From ae1f4b6da4357167e087ca05d5134f250ac09192 Mon Sep 17 00:00:00 2001
From: casperiv0 <53900565+casperiv0@users.noreply.github.com>
Date: Sat, 19 Aug 2023 08:45:09 +0200
Subject: [PATCH] feat: allow logout on pending page

---
 apps/client/src/components/shared/nav/Nav.tsx | 99 ++++++++++---------
 .../shared/nav/dropdowns/AccountDropdown.tsx  | 14 ++-
 apps/client/src/pages/auth/pending.tsx        | 13 ++-
 3 files changed, 73 insertions(+), 53 deletions(-)

diff --git a/apps/client/src/components/shared/nav/Nav.tsx b/apps/client/src/components/shared/nav/Nav.tsx
index 34776470f..6d8472762 100644
--- a/apps/client/src/components/shared/nav/Nav.tsx
+++ b/apps/client/src/components/shared/nav/Nav.tsx
@@ -21,9 +21,10 @@ import { AdminLink } from "./dropdowns/admin-link";
 
 interface Props {
   maxWidth?: string;
+  isAccountPending?: boolean;
 }
 
-export function Nav({ maxWidth }: Props) {
+export function Nav({ maxWidth, isAccountPending }: Props) {
   const [menuOpen, setMenuOpen] = React.useState(false);
 
   const { user, cad } = useAuth();
@@ -89,56 +90,58 @@ export function Nav({ maxWidth }: Props) {
               </a>
             </h1>
 
-            <div
-              role="list"
-              className={classNames(
-                "nav:flex",
-                menuOpen
-                  ? "grid place-content-center fixed top-[3.6rem] left-0 bg-white dark:bg-tertiary w-screen space-y-2 py-3 animate-enter"
-                  : "hidden nav:flex-row space-x-1 items-center",
-              )}
-            >
-              <CitizenDropdown />
-
-              {hasPermissions([Permissions.ViewTowCalls, Permissions.ManageTowCalls]) && TOW ? (
-                <TowDropdown />
-              ) : null}
-
-              {hasPermissions(defaultPermissions.defaultLeoPermissions) ? (
-                <OfficerDropdown />
-              ) : null}
-
-              {hasPermissions([Permissions.EmsFd]) ? <EmsFdDropdown /> : null}
-
-              {hasPermissions([Permissions.LiveMap, Permissions.Dispatch]) ? (
-                <DispatchDropdown />
-              ) : null}
-
-              {user && COURTHOUSE ? (
-                <Link
-                  role="listitem"
-                  href="/courthouse"
-                  className={classNames(
-                    "p-1 nav:px-2 text-gray-700 dark:text-gray-200 transition duration-300",
-                    isActive("/courthouse") && "font-semibold",
-                  )}
-                >
-                  {t("courthouse")}
-                </Link>
-              ) : null}
-
-              {hasPermissions([
-                ...defaultPermissions.allDefaultAdminPermissions,
-                ...defaultPermissions.defaultCourthousePermissions,
-                Permissions.ManageAwardsAndQualifications,
-              ]) ? (
-                <AdminLink />
-              ) : null}
-            </div>
+            {isAccountPending ? null : (
+              <div
+                role="list"
+                className={classNames(
+                  "nav:flex",
+                  menuOpen
+                    ? "grid place-content-center fixed top-[3.6rem] left-0 bg-white dark:bg-tertiary w-screen space-y-2 py-3 animate-enter"
+                    : "hidden nav:flex-row space-x-1 items-center",
+                )}
+              >
+                <CitizenDropdown />
+
+                {hasPermissions([Permissions.ViewTowCalls, Permissions.ManageTowCalls]) && TOW ? (
+                  <TowDropdown />
+                ) : null}
+
+                {hasPermissions(defaultPermissions.defaultLeoPermissions) ? (
+                  <OfficerDropdown />
+                ) : null}
+
+                {hasPermissions([Permissions.EmsFd]) ? <EmsFdDropdown /> : null}
+
+                {hasPermissions([Permissions.LiveMap, Permissions.Dispatch]) ? (
+                  <DispatchDropdown />
+                ) : null}
+
+                {user && COURTHOUSE ? (
+                  <Link
+                    role="listitem"
+                    href="/courthouse"
+                    className={classNames(
+                      "p-1 nav:px-2 text-gray-700 dark:text-gray-200 transition duration-300",
+                      isActive("/courthouse") && "font-semibold",
+                    )}
+                  >
+                    {t("courthouse")}
+                  </Link>
+                ) : null}
+
+                {hasPermissions([
+                  ...defaultPermissions.allDefaultAdminPermissions,
+                  ...defaultPermissions.defaultCourthousePermissions,
+                  Permissions.ManageAwardsAndQualifications,
+                ]) ? (
+                  <AdminLink />
+                ) : null}
+              </div>
+            )}
           </div>
 
           <div>
-            <AccountDropdown />
+            <AccountDropdown isAccountPending={isAccountPending} />
           </div>
         </div>
       </div>
diff --git a/apps/client/src/components/shared/nav/dropdowns/AccountDropdown.tsx b/apps/client/src/components/shared/nav/dropdowns/AccountDropdown.tsx
index 9ceb506e2..1488ee7bf 100644
--- a/apps/client/src/components/shared/nav/dropdowns/AccountDropdown.tsx
+++ b/apps/client/src/components/shared/nav/dropdowns/AccountDropdown.tsx
@@ -21,7 +21,11 @@ const ChangelogModal = dynamic(async () => (await import("../changelog-modal")).
   ssr: false,
 });
 
-export function AccountDropdown() {
+interface AccountDropdownProps {
+  isAccountPending?: boolean;
+}
+
+export function AccountDropdown(props: AccountDropdownProps) {
   const [isOpen, setOpen] = React.useState(false);
 
   const { user, setUser, cad } = useAuth();
@@ -55,8 +59,12 @@ export function AccountDropdown() {
         </DropdownMenuTrigger>
 
         <DropdownMenuContent className="mt-2.5" side="left">
-          <DropdownMenuLinkItem href="/account">{t("account")}</DropdownMenuLinkItem>
-          <hr className="my-2 mx-2 border-t border-secondary dark:border-quinary" />
+          {props.isAccountPending ? null : (
+            <>
+              <DropdownMenuLinkItem href="/account">{t("account")}</DropdownMenuLinkItem>
+              <hr className="my-2 mx-2 border-t border-secondary dark:border-quinary" />
+            </>
+          )}
           <DropdownMenuItem onClick={handleLogout}>{t("logout")}</DropdownMenuItem>
           <hr className="my-2 mx-2 border-t border-secondary dark:border-quinary" />
 
diff --git a/apps/client/src/pages/auth/pending.tsx b/apps/client/src/pages/auth/pending.tsx
index f3d9fe564..be5335c3e 100644
--- a/apps/client/src/pages/auth/pending.tsx
+++ b/apps/client/src/pages/auth/pending.tsx
@@ -13,6 +13,7 @@ import { useFeatureEnabled } from "hooks/useFeatureEnabled";
 import { Discord, Steam } from "react-bootstrap-icons";
 import { getAPIUrl } from "@snailycad/utils/api-url";
 import { useRouter } from "next/router";
+import { Nav } from "components/shared/nav/Nav";
 
 export default function AccountPendingPage() {
   const { user, cad } = useAuth();
@@ -21,8 +22,14 @@ export default function AccountPendingPage() {
   const t = useTranslations("Auth");
   const { DISCORD_AUTH, STEAM_OAUTH } = useFeatureEnabled();
 
-  if (user?.rank !== Rank.OWNER && user?.whitelistStatus !== WhitelistStatus.PENDING) {
-    return <main className="flex justify-center pt-20">This account is not pending access.</main>;
+  const isAccountPending =
+    user?.rank !== Rank.OWNER && user?.whitelistStatus === WhitelistStatus.PENDING;
+  if (!isAccountPending) {
+    return (
+      <main className="flex justify-center pt-20 dark:text-white">
+        This account is not pending access.
+      </main>
+    );
   }
 
   const rawSuccessMessage = router.query.success as string | undefined;
@@ -52,6 +59,8 @@ export default function AccountPendingPage() {
 
   return (
     <>
+      <Nav isAccountPending={isAccountPending} />
+
       <Title renderLayoutTitle={false}>{t("accountPending")}</Title>
 
       <main className="flex flex-col items-center justify-center pt-20">