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

- Conditional rendering of username in Navigation.tsx. - New custom react hook, useLoggedInUser. - Passed through additional properties such as loggedInUserName and loggedInUserID Signed-off-by: Nkeiruka <nkeiruka.whenu@canonical.com>
canonical · Jun 4, 2024 · 5198029 · 5198029
1 parent 302c08f
commit 5198029
Show file tree

Hide file tree

Showing 3 changed files with 74 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, loggedInUserID, 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,29 @@ const Navigation: FC = () => {
                     },
                   )}
                 >
+                  {isAuthenticated && (
+                    <li className="p-side-navigation__item">
+                      <div
+                        className="p-side-navigation__link"
+                        title={`${loggedInUserName} (${loggedInUserID})`}
+                      >
+                        {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 +482,7 @@ const Navigation: FC = () => {
                       <Icon
                         className="p-side-navigation__icon"
                         name="information"
-                      />{" "}
+                      />
                       Documentation
                     </a>
                   </li>
@@ -490,7 +497,7 @@ const Navigation: FC = () => {
                       <Icon
                         className="is-light p-side-navigation__icon"
                         name="share"
-                      />{" "}
+                      />
                       Discussion
                     </a>
                   </li>
@@ -505,10 +512,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 p-side-logout"
+                          name="export"
+                        />
+                        Log out
+                      </a>
+                    </li>
+                  )}
                 </ul>
               </div>
             </div>

diff --git a/src/context/useLoggedInUser.tsx 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
@@ -145,6 +145,10 @@
   }
 }
 
+.p-side-logout {
+  rotate: 90deg;
+}
+
 .accordion-nav-menu {
   align-items: center;
   display: flex;