diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 3b304dea0..118d6705a 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -14,6 +14,7 @@ import NavAccordion, { AccordionNavMenu } from "./NavAccordion"; import useEventListener from "@use-it/event-listener"; import { enablePermissionsFeature } from "util/permissions"; import { Location, useLocation } from "react-router-dom"; +import { useLoggedInUser } from "context/useLoggedInUser"; const isSmallScreen = () => isWidthBelow(620); @@ -41,6 +42,7 @@ const Navigation: FC = () => { project && !isLoading ? project.name : "default", ); const { hasCustomVolumeIso } = useSupportedFeatures(); + const { loggedInUserName, loggedInUserID, authMethod } = useLoggedInUser(); const enablePermissions = enablePermissionsFeature(); const [scroll, setScroll] = useState(false); const location = useLocation(); @@ -418,24 +420,6 @@ const Navigation: FC = () => { Settings - {isOidc && ( -
  • - { - logout(); - softToggleMenu(); - }} - > - {" "} - Log out - -
  • - )} )} {!isAuthenticated && ( @@ -449,7 +433,7 @@ const Navigation: FC = () => { {" "} + /> Login @@ -464,6 +448,29 @@ const Navigation: FC = () => { }, )} > + {isAuthenticated && ( +
  • +
    + {authMethod == "tls" ? ( + + ) : authMethod == "oidc" ? ( + + ) : ( + <> + )} +
    {loggedInUserName}
    +
    +
  • + )}
  • { {" "} + /> Documentation
  • @@ -490,7 +497,7 @@ const Navigation: FC = () => { {" "} + /> Discussion @@ -505,10 +512,28 @@ const Navigation: FC = () => { {" "} + /> Report a bug + {isOidc && ( +
  • + { + logout(); + softToggleMenu(); + }} + > + + Log out + +
  • + )} diff --git a/src/context/useLoggedInUser.tsx b/src/context/useLoggedInUser.tsx new file mode 100644 index 000000000..6ed50d174 --- /dev/null +++ b/src/context/useLoggedInUser.tsx @@ -0,0 +1,23 @@ +import { useQuery } from "@tanstack/react-query"; +import { useSettings } from "./useSettings"; +import { fetchIdentity } from "api/auth-identities"; +import { queryKeys } from "util/queryKeys"; + +export const useLoggedInUser = () => { + const { data: settings } = useSettings(); + + const id = settings?.auth_user_name || ""; + const authMethod = settings?.auth_user_method || ""; + + const { data: identity } = useQuery({ + queryKey: [queryKeys.identities, id], + queryFn: () => fetchIdentity(id, authMethod), + enabled: !!id && !!authMethod, + }); + + return { + loggedInUserName: identity?.name, + loggedInUserID: id, + authMethod, + }; +}; diff --git a/src/sass/_pattern_navigation.scss b/src/sass/_pattern_navigation.scss index 7f1469a0c..fd6d5093f 100644 --- a/src/sass/_pattern_navigation.scss +++ b/src/sass/_pattern_navigation.scss @@ -145,6 +145,10 @@ } } +.p-side-logout { + rotate: 90deg; +} + .accordion-nav-menu { align-items: center; display: flex;