This topic has 7 replies, 4 voices, and was last updated 4 years, 10 months ago by 
-
Posts
-
With the classic UI one can simply completely rebrand the login page by altering Login.jsp.
We want to continue using the XUI but want to completely rebrand (new layout, CSS, etc) it with WET 4.0 (Web Experience Toolkit) for the Government of Canada.
While I understand the XUI is built differently – what is the main page or place to start completely rebranding the UI?
–Nikolaos
Hi, you can implement your own implementation of UI by using REST api, which is behind XUI implementation by OpenAM. While you are able to handle json/authenticate response and build your login stage by callbacks returned from response. You can completely use your own solution.
Thanks for that information but I don’t want to build a completely different UI to XUI.
I want to simply completely alter the L&F of the existing XUI… more than just changing colors here and there (e.g. switching to a dark them or replacing a logo). I need to completely change the layout of the page.
It appears the XUI is built on html fragments from what I read so perhaps this is pretty easy and I just need to find the main Login container page. Does anyone know where that is offhand?
You can do that by altering the css. You didn’t specify the version you are using, but the latest version even has a dedicated document about how to customize the XUI, please refer to the AM-5.1-Ui-Customization-Guide
The AM-5.1-Ui-Customization-Guide is almost identical to the docs in 13.5 and moreover has a section entitled “Customizing XUI Layout” that basically indicates how to update a component (a password field to have an <hr>) and leverage a new theme.
Unfortunately this isn’t “customizing XUI layout” but rather tweaking HTML and CSS. From what I am seeing I don’t think the XUI can be easily completely rebranded (beyond just CSS and images) without making some major changes and I wouldn’t mind doing it if I only knew what the root login page was under the XUI.
Does anyone know the root HTML page the XUI uses for the login page?
Hi Nikolaos
If I understand the way XUI works correctly, there is no root HTML document used as the login page. When the XUI is hit, a Javascript application is sent to the browser, and JSON representing the page and page elements are used by the JS app to generate the HTML on the client side, which is then rendered by the browser. That’s why the URI to the login page is a fragment pointing to a ‘location’ in the client-side app, e.g. /openam/XUI#login rather than a URI to a page. The XUI JS client app then uses the documented REST interface to communicate with OpenAM, not HTML forms, or any proprietary method.
The ForgeRock engineers who designed the XUI would know better than I, but I think a complete re-working of the XUI is going to be rather difficult and error-prone, beyond the change of theme capability built in to XUI. I know you said you didn’t want to build an alternative UI driving OpenAM by REST, but it honestly may be less work to do that.
Andy
So there is an “index.html” page under the XUI folder. The only issue is that page is used for not just the Auth Module UI but also for the OpenAM Admin console.
In the end I re-branded that HTML and got what I needed for about 80%. When logging in to OpenAM Admin console the rebranding did not come up (most likely as the dirs are relative) but worse yet I had some SVGs that appeared oversized so I extended the the XUI common components Footer.js to configure a JS function and timeout to execute on page load and if it was not an Auth Module UI page to disable the CSS display of the broken branding.
Not the easiest thing to do but works well.
You must be logged in to reply to this topic.
