[WD-10833] - Indicate logged-in-user-email

[Kxiru]

Done

• Created a custom react hook, useLoggedInUser, which returns the logged in username.
• Created a custom react hook, useIdentities to return details about the identities associated with LXD. Also used React QueryKeys and useQuery.
• Created a new tab in the navigation bar that conditionally renders text based on the connection type.

Pending Design Draft

QA

1. Run the LXD-UI:
   • On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @mas-who or @edlerd for access.
   • With a local copy of this branch, run as described here.
2. Perform the following QA steps:
   • Upon running LXD through a TLS connection, you should see "lxd-ui.crt" next to a lock icon, in the navigation bar.
   • Upon running LXD through an OIDC connection, you should see your username in the navigation bar. If you do not have an associated username, you should see your email address, which will likely be truncated depending on length.

Screenshots (updated)

• Authenticated using a Certificate:

• Authenticated using OIDC:

• Authenticated using OIDC- Inspect element used to replace username with email address (For users with no username) and show truncation:

[webteam-app]

Demo

Jenkins

demos.haus

[piperdeck]

Hi @Kxiru, could you please post screenshots of the QA steps? I wasn't able to stand up a testing lxd instance in order to test the OIDC behaviour, but I'd really like to review this for you.

[Kxiru]

Hi @Kxiru, could you please post screenshots of the QA steps? I wasn't able to stand up a testing lxd instance in order to test the OIDC behaviour, but I'd really like to review this for you.

I've added updated screenshots to the PR description for you.

[piperdeck]

LGTM