Red Hat Account Dropdown Component

This is a companion component with pfe-navigation, it creates an account dropdown with appropriate content based on a user's roles and permissions.

Usage

This component should be a direct child of pfe-navigation, and should have the attribute slot="account"

<rh-account-dropdown slot="account"></rh-account-dropdown>

If it should be in logged out state:

• login-link should be set to a valid login URL

If it should be in a logged in state:

• logout-link should be set to a valid logout URL
• The component should be provided the information from the JWT via one of these methods:
  • Using the userData setter: Provide the JSON object from the JWT to the setter. Make a reference to the DOM object and set .userData, e.g.:

    document.querySelector("rh-account-dropdown").userData =
      howeverYouGetTheJWT("make it so");

  • @todo via chapeaux and keycloack.js

Tip: Don't add the login-link attribute until the auth state of the user is known, this will prevent a login link from flashing while the user's status is being figured out.

UserData Object

The userData method expects an object that at minimum should have:

{
  "realm_access": {
    "roles": []
  },
  "REDHAT_LOGIN": "[email protected]",
  "lastName": "Ruvalcaba",
  "account_number": "123456",
  "preferred_username": "[email protected]",
  "firstName": "Wes",
  "email": "[email protected]",
  "username": "[email protected]"
}

A note about JWT Claims

You may find that your JWT does not have these exact properties, for example instead of firstName you have given_name, or you do not have the last name in your token at all. This is because the claims available on the JWT varies per client.

Please take a moment to read the Supported JWT Claims documented by the external SSO team.

Start a request with the External SSO team by using the email [email protected] which will open a help.redhat.com support ticket. Request for the missing claims to be added. When you can use a supported claim instead of a legacy claim, please do so.

For example, I can send the user data object:

{
  "realm_access": {
    "roles": []
  },
  "REDHAT_LOGIN": myJwt.preferred_username,
  "lastName": myJwt.family_name,
  "account_number": myJwt.organization.id,
  "preferred_username": myJwt.preferred_username,
  "firstName": myJwt.given_name
  "email": myJwt.email
  "username": myJwt.preferred_username
}

realm_access.roles is checked for two roles:

• admin:org:all
• portal_manage_subscriptions

If the user has these roles they should be present in the array, if not they can be left out.

Attributes

Author controlled attributes:

• login-link: Link to login user, required for anonymous users non-keycloack implementations will be put directly into an <a> tag.
• logout-link: Link to logout user, required for logged in users non-keycloack implementations will be put directly into an <a> tag.
• env: Tells the component what environment the links in the dropdown should point to, options are 'dev', 'qa', 'stage', and '' for prod.

Component controlled attributes

• avatar-url: Provided by the component, used by pfe-navigation
• full-name: Provided by the component, used by pfe-navigation

Events

• rh-account-dropdown:ready: Fires when component is ready to receive userData
• pfe-shadow-dom-event: Fires when an element is clicked inside of a dropdown in the shadow root. This is for analytics to properly categorize and report the event. event.detail has:
  • target Element clicked
  • parent the pfe-navigation element

Dependencies

Is meant to be used inside of pfe-navigation as optional functionality.

Support

For any questions or help, file an issue contact the CPFED group.

Dev

`npm start`

Test

`npm run test`

Build

`npm run build`

Demo

From the PFElements root directory, run:

`npm run demo`

Code style

Navigation-account (and all PFElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.