This is a companion component with pfe-navigation, it creates an account dropdown with appropriate content based on a user's roles and permissions.
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
- Using the userData setter: Provide the JSON object from the JWT to the setter. Make a reference to the DOM object and set
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.
The userData
method expects an object that at minimum should have:
{
"realm_access": {
"roles": []
},
"REDHAT_LOGIN": "wesruv@wakka-wakka.com",
"lastName": "Ruvalcaba",
"account_number": "123456",
"preferred_username": "wesruv@wakka-wakka.com",
"firstName": "Wes",
"email": "wesruv@wakka-wakka.com",
"username": "wesruv@wakka-wakka.com"
}
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 it-user-request@redhat.com 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.
-
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.
-
avatar-url
: Provided by the component, used bypfe-navigation
-
full-name
: Provided by the component, used bypfe-navigation
-
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
thepfe-navigation
element
-
Is meant to be used inside of pfe-navigation as optional functionality.
For any questions or help, file an issue contact the CPFED group.
`npm start`
`npm run test`
`npm run build`
From the PFElements root directory, run:
`npm run demo`
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.