The Loginapp UI adds IAM-related attributes to the HTML body
tag in order to make customizing easier.
Example: HTML body tag with IAM-specific attributes
<body id="iamAuthPassword" data-iam-flow-id="demo" data-iam-step-id="pwcheck" data-iam-domain="authentication" >
- In particular, the following attributes are added:
data-iam-flow-id
: The ID of the current IAM flow.data-iam-step-id
: The ID of the current IAM flow step.data-iam-domain
: The affected domain in the Loginapp.- The attribute assumes one of the following values (more values may have been added):
authentication
registration
protected.self-service
public-self-service
error
The attributes may, for example, be used to change the color of the header depending on flow ID and step ID by adapting _custom-styles.scss
as follows:
// Change background color when flow ID equals 'demo' [data-iam-flow-id='demo'] { .iam-card-header { background-color: red; } } // Change background color when step ID equals 'example' [data-iam-step-id='example'] { .iam-card-header { background-color: green; } } // Change background color when flow ID equals 'demo' and step ID equals 'example' [data-iam-flow-id='demo'][data-iam-step-id='example'] { .iam-card-header { background-color: blue; } } // Change background color for all pages in the authentication domain [data-iam-domain='authentication'] { .iam-card-header { background-color: gray; } }
For more information on how to add flow ID and step ID to the Loginapp Design Kit's navigation menu, see SDK navigation menu configuration.