Only render auth method icon when it is available (#3258)

LAION-AI · May 29, 2023 · 36e28e0 · 36e28e0
1 parent 9fbebb4
commit 36e28e0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/website/src/components/UserDisplayNameCell.tsx b/website/src/components/UserDisplayNameCell.tsx
@@ -1,6 +1,6 @@
 import { Flex, Link, Tooltip } from "@chakra-ui/react";
 import { Discord, Google } from "@icons-pack/react-simple-icons";
-import { Mail } from "lucide-react";
+import { Bot, Mail } from "lucide-react";
 import NextLink from "next/link";
 import { useHasAnyRole } from "src/hooks/auth/useHasAnyRole";
 import { ROUTES } from "src/lib/routes";
@@ -12,6 +12,7 @@ const AUTH_METHOD_TO_ICON: Record<AuthMethod, JSX.Element> = {
   local: <Mail size="20" />,
   discord: <Discord size="20" />,
   google: <Google size="20" />,
+  system: <Bot size="20" />,
 };
 
 export const UserDisplayNameCell = ({
@@ -35,7 +36,9 @@ export const UserDisplayNameCell = ({
           <Link as={NextLink} href={ROUTES.ADMIN_USER_DETAIL(userId)} style={{ overflow: "hidden" }}>
             {displayName}
           </Link>
-          <Tooltip label={`Signed in with ${authMethod}`}>{AUTH_METHOD_TO_ICON[authMethod]}</Tooltip>
+          {AUTH_METHOD_TO_ICON[authMethod] && (
+            <Tooltip label={`Signed in with ${authMethod}`}>{AUTH_METHOD_TO_ICON[authMethod]}</Tooltip>
+          )}
         </>
       ) : (
         <div style={{ overflow: "hidden" }}>{displayName}</div>

diff --git a/website/src/types/Providers.ts b/website/src/types/Providers.ts
@@ -1 +1 @@
-export type AuthMethod = "local" | "discord" | "google";
+export type AuthMethod = "local" | "discord" | "google" | "system";