Uploaded image for project: 'OpenAM'
  1. OpenAM
  2. OPENAM-14229

custom AuthorizeTemplate under theme not used

    XMLWordPrintable

    Details

    • Bug
    • Status: Closed
    • Major
    • Resolution: Fixed
    • 6.0.0, 6.0.0.1, 6.0.0.2, 6.0.0.3, 6.0.0.4, 6.0.0.5, 6.5.0, 6.0.0.6, 6.5.0.1
    • 7.0.0, 6.5.3
    • XUI
    • Rank:
      1|hzwyrr:
    • No
    • Yes
    • No
    • Yes and I used the same an in the description

      Description

      Bug description

      Using a new Themed template and customizing AuthorizeTemplate.html for this new theme does not work and the default AuthorizeTemplate.html is always used.

      How to reproduce the issue

      1. Say use a dark theme
      2. Set the dark theme path to "dark/" (uncomment)
      3. copy the template and partials from the default
      4. Customize AuthorizeTemplate.html with some value like CUSTOM
      5. For the default AuthorizeTemplate.html (at the js/resource/templates/user/AuthorizeTemplate.html) with a some html tag with "DEFAULT" so to know
      it is not customized. (ie using default)

      Expected behaviour
      i) OAuth2 Authorize screen customizable
      ii) Extra helpers like {{#exists}} should be usable in these templates.
      
      Current behaviour
      Authorize screen always use default theme. Also no workaround to use the extra helpers like {{#exists}} works as those is also not loaded as also any partials that may be defined.
      

      Work around

      There is two possible workarounds probably which is to modify main-authorize.js. but these will need to be loaded as themed

      • LoginBaseTemplate
      • FooterTemplate
      • LoginHeaderTemplate
      • AuthorizeTemplate

      and passed to be used. (not shown here)

      workaround#1.

      Customize the main-authorize.js to load the themed template and then use the themed ones. The theme loading code can be found from UIUtils.js (which returns a promise) so you can load all the themedTemplates and use them instead.

      Illustration only:

      const loadTemplates = (theme, templates) => {
          return Promise.all(templates.map((template) => loadThemedTemplate(theme, template)));
      }
      ..... 
      // Somewhere inside the getTheme()).then( (theme) => {
              .....
              const templates = ["common/LoginBaseTemplate", "common/FooterTemplate",
                  "common/LoginHeaderTemplate", "user/AuthorizeTemplate"];
              loadTemplates(theme, templates).then((
                  [LoginBaseTemplate, FooterTemplate, LoginHeaderTemplate,
                      AuthorizeTemplate]) => {
                   $("#wrapper").html(LoginBaseTemplate(data));
                   $("#footer").html(FooterTemplate(data));
                   $("#loginBaseLogo").html(LoginHeaderTemplate(data));
      ....
      
      Workaround #2: Also customize it a little but edit all the customization in the default templates.

      (Probably the simplest workaround)

      diff --git a/openam-ui/openam-ui-ria/src/js/main-authorize.js
      --- a/openam-ui/openam-ui-ria/src/js/main-authorize.js
      +++ b/openam-ui/openam-ui-ria/src/js/main-authorize.js
      @@ -30,8 +30,6 @@ import LoginBaseTemplate from "templates/common/LoginBaseTempl
       import LoginHeaderTemplate from "templates/common/LoginHeaderTemplate";
       import prependPublicPath from "webpack/prependPublicPath";
       
      +import UIUtils from "org/forgerock/commons/ui/common/util/UIUtils"; // eslint-disable-line no-unused-vars
      
       const data = window.pageData || {};
       const KEY_CODE_ENTER = 13;
       const KEY_CODE_SPACE = 32;
      

      So that you can get the Extract Helper tags like

      {{#exists realm "/test"}}
          -- Things in /test realm
      {{else}}
         --  Not in /test realm
      {{/exists}}
      

      Code analysis

      The main-authorize.js imports the Default template and has no mechanism for the themed ones.

      Also it seems that there is ALSO a defect in that the extract Handlebar helpers is NO longer loaded too and so things like #exists var value..../exists cannot be used to customize the templates (compared to the others).

      Similar issues for unrelated stuff includes main-503.js and main-device.js

        Attachments

        1. comparison.png
          comparison.png
          74 kB
        2. screenshot-1.png
          screenshot-1.png
          40 kB
        3. screenshot-2.png
          screenshot-2.png
          58 kB

          Issue Links

            Activity

              People

              chee-weng.chea C-Weng C
              chee-weng.chea C-Weng C
              Votes:
              2 Vote for this issue
              Watchers:
              7 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved: