Changing the Loginapp UI appearance with the Design Kit
This article describes several options to customize the appearance of the Loginapp UI with the Loginapp Design Kit.
All customizations described here can be implemented by creating a new customizations build (with the CLI of the Loginapp Design Kit) and deploying this build to your productive IAM instance. For more information on the CLI of the Design Kit, see Using the Design Kit CLI.
Styling using Sass and CSS
You can customize the look and feel of the Loginapp UI using Sass or plain CSS. The relevant files needed for customization are located in $CUSTOM_DIRECTORY/src/sass/custom. This directory contains the following customization files:
_custom-variables.scss
The Loginapp Design Kit provides Sass variables to quickly customize the Loginapp UI. For a list of these variables, see below. To customize the Loginapp UI, copy the corresponding Sass variable from the list, add it to the_custom-variables.scssfile and adapt it as required.The following example illustrates how to use the
_custom-variables.scssfile for customizations of default Sass variables:- Example
// Example 1) change the primary color of the Loginapp (i.e., the color of the title bar):
$iam-primary-color: rgb(95 45 129); // Example 2) change the font:
$iam-font-family-base: 'TypoPRO Clear Sans', sans-serif; _custom-styles.scss
The Sass variables are an easy and quick way to get started with customizing the Loginapp UI. If more advanced customizations are required, add custom Sass or just plain CSS styles to the_custom-styles.scssfile.The following example illustrates how to use the
_custom-styles.scssfile for advanced customizations based on plain CSS:
List of available Sass variables
The list below contains all Sass variables supported by the Loginapp UI.
Use case 1 - Enabling the “Show Password” toggle
You can use the Loginapp Design Kit to enable the “Show Password” toggle. This toggle allows end-users to see their entered password in plaintext. The toggle itself is an eye icon visible on the right-hand side of the Password input field.
To enable the toggle, add the variable $iam-show-password-toggle to the _custom-variables.scss file and set it to true (the default is false):
$iam-show-password-toggle: true;
This feature is available as of release 8.4. To enable the feature in an older SDK setup, store the eye icons as svg files under $CUSTOM_DIRECTORY/src/assets/custom/img. Use the following file names:
eye-regular.svgeye-slash-regular.svg
Additionally, refer to the “old” src folder from a newer SDK setup (version 8.4 or higher).
Once you have deployed this change, the “Show Password” toggle is visible in the Password input field on the username/password login and password reset pages of your web application:
/<path-to-your-application>/password/<path-to-your-application>/password-only/<path-to-your-application>/password/change
The following screenshot shows an username/password login page with an enabled “Show Password” toggle:
Use case 2 - Referencing custom static files
Custom static files, like images or fonts, should be stored in the $CUSTOM_DIRECTORY/src/assets/custom directory. To reference the custom static files (also called assets) in the $CUSTOM_DIRECTORY/src/assets/custom directory, we recommend using the Sass function custom-asset.
For example, to refer to your custom logo image in the $CUSTOM_DIRECTORY/src/assets/custom directory, add the Sass variable $iam-logo-url to the _custom-variables.scss file and adapt it as follows (note that the specified path is relative to the $CUSTOM_DIRECTORY/src/assets/custom directory):
$iam-logo-url: custom-asset('img/your_logo_file_name.svg');Use case 3 - Changing the favicon
To change the favicon of the Loginapp UI, replace the default favicon.ico in the $CUSTOM_DIRECTORY/src/assets/custom/img directory with your custom favicon.
Use case 4 - Dropping all IAM styling
If your required look and feel differs a lot from the Airlock IAM default styles, you may want to drop all provided styling and start from scratch. The Loginapp Design Kit allows for this, by enabling the following option: $CUSTOM_DIRECTORY/src/sdk/config/custom.sdk.config.js
config.build = {
dropStyles: true
};As a consequence of dropping all standard styles, variables defined in the _custom-variables.scss file no longer have any effect. Instead, all Sass/CSS adjustments have to be done in the _custom-styles.scss file.