Theme Node

Dynamically theme the ForgeRock out-of-the-box login UI on the fly. An authentication node for ForgeRock's Identity Platform 6.5.2 and above. This node allows you to customize the look and feel of any authentication or registration flow and optionally change the default Log In button's text. A number of beautifully styled themes are included to bring color to your flows. You also have the option to fully customize an existing theme and create your own themes.

Project Readme

Theme Node

Dynamically theme the ForgeRock out-of-the-box login UI on the fly.

Artwork by Linh Nguyen

An authentication node for ForgeRock's Identity Platform 6.5.2 and above. This node allows you to customize the look and feel of any authentication or registration flow and optionally change the default Log In button's text. A number of beautifully styled themes by Linh Nguyen are included to bring color to your flows. You also have the option to fully customize an existing theme and create your own themes.

Download a release build fom the release tab or clone this repository to build your own release. Copy the .jar file from your download location or the ./target directory (if you built it yourself) into the ../web-container/webapps/openam/WEB-INF/lib directory where AM is deployed. Restart the web container to pick up the new node. The node will then appear in the authentication trees components palette.

Related Nodes

Usage

Use this node to esily theme your registration and login flows. Need a different set of colors, a different logo, a different footer, or a different button text? This will get you there in a few simple steps. A few professionally styled themes are selectable from a drop-down list but you can also knock yourself out and create your own custom theme using CSS or pointedly override specific aspects of a pre-configured or custom theme. Want the second factor screen in orange red? Easily done.

A sample flow could look like this:

ScreenShot of a sample tree

Page 1 Page 2 Page 3 Profile Page
Fresh Orange
Fresh Orange - Page 1 Fresh Orange - Page 2 Fresh Orange - Page 3 Fresh Orange - Profile
Soothing Blue
Soothing Blue - Page 1 Soothing Blue - Page 2 Soothing Blue - Page 3 Soothing Blue - Profile
Harmonious Red
Harmonious Red - Page 1 Harmonious Red - Page 2 Harmonious Red - Page 3 Harmonious Red - Profile
Trustworthy Green
Trustworthy Green - Page 1 Trustworthy Green - Page 2 Trustworthy Green - Page 3 Trustworthy Green - Profile
Confident Blue Dark
Confident Blue Dark - Page 1 Confident Blue Dark - Page 2 Confident Blue Dark - Page 3 Confident Blue Dark - Profile
Dependable Orange Dark
Dependable Orange Dark - Page 1 Dependable Orange Dark - Page 2 Dependable Orange Dark - Page 3 Dependable Orange Dark - Profile

Settings

Theme Node Settings
Theme Configuration Select the theme configuration to use. The list contains both global and realm-specific configurations.

If the list is empty, go to Configure > Global Services > Theme Service and create global theme configurations or go to Services > Add Service and create realm theme configurations.

Global configurations are accessible from all realms, realm configurations only within the realm.

Overwrite Login Button Enable this option to change the text of the LOG IN button.
Button Text Specify localized texts to overwrite the LOG IN button with.
Theme Service Settings
Global Attributes
Enable Enable this service to apply theme configuration to your registration and authentication trees. Disable to render the installed theme. Use this setting as an on/off switch for all Theme Nodes configured to use Theme Configurations from this service.
Secondary Configurations
Theme Select a theme. Choose None to leave the currently active theme. Select Custom to create your own theme using CSS by configuring the values for Custom Theme and Custom Theme Declarations.
Replace Logo Select this option to replace the logo.
Logo Properties Specify any number of properties defining the new logo's <img> tag. At a minimum you must supply a src key and a value pointing to your new logo. If you do not provide a src key entry, the existing logo is removed but not replaced. You can reference transient/shared state variables anywhere in your values using the {{variable}} notation.

Sample ForgeRock logos to use:

  • Color: https://www.forgerock.com/img/ForgeRock_Vert_Color_Logo_RGB_R_med.svg
  • White: https://www.forgerock.com/img/ForgeRock_Vert_WHT_Logo_RGB_R_med.svg
  • Overwrite Footer Enable this option to change the footer text.
    Footer Text Specify localized texts to overwrite the footer button with. You can reference transient/shared state variables anywhere in your text using the {{variable}} notation.
    Custom Theme Specify the name of the custom theme to use. For this setting to take effect you must:

    1) select Custom from the Theme Configuration drop-down list.
    2) Create a theme definition by adding a unique name as the key and valid CSS declarations as the value in the Custom Theme Definitions list.
    3) Identify the custom theme you want to use by name in this field.

    Custom Theme Definitions Specify any number of themes. The key holds a unique name and the value a valid block of CSS declarations making up the theme. You can reference transient/shared state variables anywhere in your style declaration using the {{variable}} notation.
    Customize Theme Enable this option to customize the theme.
    Theme Customizations Specify any number of properties. The key holds a CSS Selector expression and the value an inline style declaration. You can reference transient/shared state variables anywhere in your style declaration using the {{variable}} notation.
    Node Settings
    Node Config
    Service Settings
    Service Config 1 Service Config 2
    Service Config 3

    Building Authentication Nodes

    The code in this repository has binary dependencies that live in the ForgeRock maven repository. Maven can be configured to authenticate to this repository by following the following ForgeRock Knowledge Base Article.

    The code described herein is provided on an "as is" basis, without warranty of any kind, to the fullest extent permitted by law. ForgeRock does not warrant or guarantee the individual success developers may have in implementing the sample code on their development platforms or in production configurations.

    ForgeRock does not warrant, guarantee or make any representations regarding the use, results of use, accuracy, timeliness or completeness of any data or information relating to the sample code. ForgeRock disclaims all warranties, expressed or implied, and in particular, disclaims all warranties of merchantability, and warranties related to the code, or any service or software related thereto.

    ForgeRock shall not be liable for any direct, indirect or consequential damages or costs of any type arising out of any action taken by you or others related to the sample code.

    Project Information
    Unsupported
    Unverified
    openam
    authentication
    authTreeNode
    volker.scheuber
    here
    here