Indicate logged-in-user-email in Navigation bar.

- Conditional rendering of username in Navigation.tsx. - New custom react hook, useLoggedInUser. Signed-off-by: Nkeiruka <[email protected]>
canonical · May 29, 2024 · fdff7e2 · fdff7e2
1 parent 487ba59
commit fdff7e2
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 22 deletions.
diff --git 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, authMethod } = useLoggedInUser();
   const enablePermissions = enablePermissionsFeature();
   const [scroll, setScroll] = useState(false);
   const location = useLocation();
@@ -418,24 +420,6 @@ const Navigation: FC = () => {
                           Settings
                         </NavLink>
                       </li>
-                      {isOidc && (
-                        <li className="p-side-navigation__item">
-                          <a
-                            className="p-side-navigation__link"
-                            title="Log out"
-                            onClick={() => {
-                              logout();
-                              softToggleMenu();
-                            }}
-                          >
-                            <Icon
-                              className="is-light p-side-navigation__icon"
-                              name="power-off"
-                            />{" "}
-                            Log out
-                          </a>
-                        </li>
-                      )}
                     </>
                   )}
                   {!isAuthenticated && (
@@ -449,7 +433,7 @@ const Navigation: FC = () => {
                           <Icon
                             className="is-light p-side-navigation__icon"
                             name="profile"
-                          />{" "}
+                          />
                           Login
                         </NavLink>
                       </li>
@@ -464,6 +448,24 @@ const Navigation: FC = () => {
                     },
                   )}
                 >
+                  {isAuthenticated && <li className="p-side-navigation__item">
+                    <div className="p-side-navigation__link">
+                      {authMethod == "tls" ? (
+                        <Icon
+                          className="p-side-navigation__icon is-dark"
+                          name="lock-locked"
+                        />
+                      ) : authMethod == "oidc" ? (
+                        <Icon
+                          className="p-side-navigation__icon is-dark"
+                          name="profile"
+                        />
+                      ) : (
+                        <></>
+                      )}
+                      <div className="u-truncate">{loggedInUserName}</div>
+                    </div>
+                  </li>}
                   <li className="p-side-navigation__item">
                     <a
                       className="p-side-navigation__link"
@@ -475,7 +477,7 @@ const Navigation: FC = () => {
                       <Icon
                         className="p-side-navigation__icon"
                         name="information"
-                      />{" "}
+                      />
                       Documentation
                     </a>
                   </li>
@@ -490,7 +492,7 @@ const Navigation: FC = () => {
                       <Icon
                         className="is-light p-side-navigation__icon"
                         name="share"
-                      />{" "}
+                      />
                       Discussion
                     </a>
                   </li>
@@ -505,10 +507,28 @@ const Navigation: FC = () => {
                       <Icon
                         className="is-light p-side-navigation__icon"
                         name="code"
-                      />{" "}
+                      />
                       Report a bug
                     </a>
                   </li>
+                  {isOidc && (
+                    <li className="p-side-navigation__item">
+                      <a
+                        className="p-side-navigation__link"
+                        title="Log out"
+                        onClick={() => {
+                          logout();
+                          softToggleMenu();
+                        }}
+                      >
+                        <Icon
+                          className="is-light p-side-navigation__icon"
+                          name="power-off"
+                        />
+                        Log out
+                      </a>
+                    </li>
+                  )}
                 </ul>
               </div>
             </div>

diff --git a/src/context/useLoggedInUser.tsx b/src/context/useLoggedInUser.tsx
@@ -0,0 +1,22 @@
+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,
+    authMethod,
+  };
+};