diff --git a/frontend/src/components/icons/local-auth.tsx b/frontend/src/components/icons/local-auth.tsx new file mode 100644 index 000000000..d17391bde --- /dev/null +++ b/frontend/src/components/icons/local-auth.tsx @@ -0,0 +1,22 @@ +import type { SVGProps } from "react"; + +export function LocalAuthIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/frontend/src/components/quick-actions/quick-actions.tsx b/frontend/src/components/quick-actions/quick-actions.tsx index 1287ec6b4..c141f6160 100644 --- a/frontend/src/components/quick-actions/quick-actions.tsx +++ b/frontend/src/components/quick-actions/quick-actions.tsx @@ -25,6 +25,8 @@ import { Palette, Settings, Sun, + UserRoundKey, + X, } from "lucide-react"; import { useTranslation } from "react-i18next"; import { useLocation } from "react-router"; @@ -37,20 +39,26 @@ import { useMutation } from "@tanstack/react-query"; import axios from "axios"; import { toast } from "sonner"; import { useEffect } from "react"; +import { GoogleIcon } from "../icons/google"; +import { GithubIcon } from "../icons/github"; +import { TailscaleIcon } from "../icons/tailscale"; +import { MicrosoftIcon } from "../icons/microsoft"; +import { PocketIDIcon } from "../icons/pocket-id"; +import { OAuthIcon } from "../icons/oauth"; +import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; -function Avatar({ initial }: { initial: string }) { - return ( - - - - {initial} - - - ); -} +const iconStyles = "size-4"; + +const iconMap: Record = { + google: , + github: , + tailscale: , + microsoft: , + pocketid: , +}; export const QuickActions = () => { - const { auth } = useUserContext(); + const { auth, oauth, tailscale } = useUserContext(); const { theme, setTheme } = useTheme(); const { t } = useTranslation(); const { search } = useLocation(); @@ -64,6 +72,49 @@ export const QuickActions = () => { const screenParams = useScreenParams(searchParams); const compiledParams = recompileScreenParams(screenParams); + const [isOpen, setIsOpen] = useState(false); + + const providerDetails = ((): + | { name: string; icon: React.ReactNode } + | undefined => { + if (!auth.authenticated) { + return undefined; + } + + if (auth.providerId === "local" || auth.providerId === "ldap") { + return { + name: t( + auth.providerId === "ldap" + ? "quickActionsProviderLDAP" + : "quickActionsProviderLocal", + ), + icon: ( + + ), + }; + } + + if (oauth.active) { + return { + name: t("quickActionsProviderOAuth", { provider: oauth.displayName }), + icon: iconMap[auth.providerId] || , + }; + } + + if (auth.providerId === "tailscale") { + return { + name: `Tailscale (${tailscale.nodeName})`, + icon: , + }; + } + + return undefined; + })(); + const logoutMutation = useMutation({ mutationFn: () => axios.post("/api/user/logout"), mutationKey: ["logout"], @@ -107,17 +158,29 @@ export const QuickActions = () => { ] as const; return ( - + setIsOpen(open)} open={isOpen}> @@ -126,19 +189,22 @@ export const QuickActions = () => { {auth.authenticated && ( <> -
- {initial} -
-
+ + + {providerDetails!.icon} + + {providerDetails!.name} + +
{auth.name} - + {auth.email}
@@ -197,7 +263,7 @@ export const QuickActions = () => { onSelect={() => logoutMutation.mutate()} className="text-destructive" > - + {t("quickActionsLogout")} diff --git a/frontend/src/lib/i18n/locales/en-US.json b/frontend/src/lib/i18n/locales/en-US.json index dbe05c1a9..9eb3dc701 100644 --- a/frontend/src/lib/i18n/locales/en-US.json +++ b/frontend/src/lib/i18n/locales/en-US.json @@ -99,5 +99,8 @@ "quickActionsThemeDark": "Dark", "quickActionsThemeSystem": "System", "quickActionsLogout": "Logout", - "quickActionsTitle": "Quick Actions" + "quickActionsTitle": "Quick Actions", + "quickActionsProviderLocal": "Local", + "quickActionsProviderLDAP": "LDAP", + "quickActionsProviderOAuth": "{{provider}} OAuth" } diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json index dbe05c1a9..9eb3dc701 100644 --- a/frontend/src/lib/i18n/locales/en.json +++ b/frontend/src/lib/i18n/locales/en.json @@ -99,5 +99,8 @@ "quickActionsThemeDark": "Dark", "quickActionsThemeSystem": "System", "quickActionsLogout": "Logout", - "quickActionsTitle": "Quick Actions" + "quickActionsTitle": "Quick Actions", + "quickActionsProviderLocal": "Local", + "quickActionsProviderLDAP": "LDAP", + "quickActionsProviderOAuth": "{{provider}} OAuth" } diff --git a/frontend/src/pages/logout-page.tsx b/frontend/src/pages/logout-page.tsx index 71911c5bf..d1a734b99 100644 --- a/frontend/src/pages/logout-page.tsx +++ b/frontend/src/pages/logout-page.tsx @@ -137,7 +137,7 @@ function LogoutLayout({ children, logoutMutation }: LogoutLayoutProps) {