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;