Steps to configure custom theme in RedHat Single Sign On

Below are steps to create custom theme from an existing theme shipped with Product like adding custom field to an existing login form and using JavaScript to process data in login form.

Here is the official documentation to create necessary artifications to create and load custom theme : https://docs.redhat.com/en/documentation/red_hat_single_sign-on/7.6/html/server_developer_guide/themes#creating_a_theme

In this repo, we have some sample files to create custom login theme. The changes in files are already done, but will walk through on the steps.

1. Checkout the repo and copy peru-login folder into themes folder

2. Create the resources/js/script.js file inside themes/login folder.

3. In theme.properties file, you mention the javascript file reference and the CSS used.

4. Copy an existing login.ftl file from other themes like base. Add below code after import element in the starting of document.

   • Add custom HTML code <h1>HELLO WORLD!</h1>

   • Refer to JavaScript <script type="text/javascript" src="resources/js/script.js"></script>

   • Add below code to modify the default login page to add new form input elements

          <div class="${properties.kcFormGroupClass!}">
               <label for="appId" class="${properties.kcLabelClass!}">${msg("appId")}</label>
     
               <input tabindex="3" id="appId" class="${properties.kcInputClass!}" name="appId" type="text" autocomplete="off"
                      aria-invalid="<#if messagesPerField.existsError('username','password','appId')>true</#if>"
               />
               <#if usernameHidden?? && messagesPerField.existsError('username','password','appId')>
                   <span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                           ${kcSanitize(messagesPerField.getFirstError('username','password','appId'))?no_esc}
                   </span>
               </#if>
           </div>
     

   • Call JavaScript function on form submit in login page. Add the following onclick="myFunction()" to form submit element.

5. Update your theme in Admin Console

   Log into the Admin Console to checkout your new theme
   Select your realm
   Click Realm Settings from the menu.
   Click on the Themes tab.
   For Login Theme select peru-login and click Save.
   

   

New Login Page looks like below with new field 'appId'

Once you click Sign In , JavaScript code is executed and login into admin console.