In previous post I showed to you how to modify UAG portal page. In this post I’ll discuss how to create a custom looking UAG Logon and Logoff pages. UAG Logon and Logoff pages are controlled by the code in InternalSite folder. As with UAG Portal page we want to minimize changes to any original files and make changes to the UI via UAG CustomUpdate functionality. With UAG Portal we could do this 100% and control the portal without any changes to the original files, unfortunately with UAG Logon and Logoff pages I could not make all changes via CustomUpdate mechanism. It appears to me that development of Logon/Logoff pages was done in multiple phases by including additional functionality via calls to other scripts (inc calls). Some of the graphic files are hardcoded to be called from these additional scripts and duplication of the same graphic files in the CustomUpdate folders doesn’t do any good.
If someone with a bit better knowledge into this topic reads this post and indeed can provide a solution to update UAG Logon/Logoff pages via CustomUpdate only then please let me know how to do this and I’ll update this post.
There are nine graphic files that must be replaced in its original folder to have unique UAG Logon/Logoff pages UI. Thankfully all other changes still can be done via CustomUpdate mechanism. Before replacing original graphic files I would first back them up to another location and make another local copy with a different name. You never know how future service packs will affects the UI design and upgrade process.
On the other hand, to modify UAG Logon/Logoff pages we have to touch only two files: TEMPLATES.CSS and EN-US.XML. Much easier than Portal UI, which was controlled by multiple configuration files.
UAG Logon and Logoff pages have actually multiple views. Let’s review one by one each screen in its default UI and the target UI. First we start with the default logon page:
After making changes to UAG, our custom Logon page will have the following UI:
After user is authenticated into UAG portal and clicks on the “Credential Management” link, he will be presented with the following pop-up screen:
Which will look very different after we make changes:
When authenticated user decides to change password he is presented with this default UI:
Which we want to look like this in our custom UI:
When user logs off from the UAG portal, the default UI is like this:
Which we will change to look like this:
When user provides wrong credentials, he will see this UI:
Which we will make to look like this:
And finally, when user exceeds the allowed number of failed logons, he will see this UI:
Which we will make look like this:
Modifying Languages File
As with UAG Portal, pretty much all visible text in UI is controlled via Languages file. Let’s make changes to this file and see where it will get us with UI modification.
Make the following changes to the default EN-US.XML file:
- Modify text in ID1 to the desired text shown at the bottom of the logon screen.
- ID2 – remove all text. This is Title text and we will provide Title via graphic file.
- ID3 – remove all text. This is a Thank you note shown on the logoff screen.
- ID4 – remove all text. This is text shown on the logon page in the middle of the screen (first line).
- ID5 – remove all text. This is text shown on the logon page in the middle of the screen (second line).
- Do search and replace for “MS Forefront Unified Access Gateway” with “Contoso Application Gateway”
- ID169 – Add custom language after “Change Password.” This text is shown on the password change screen for an authenticated user.
- ID181 – Provide text with URL to reset password. This text is displayed after first unsuccessful logon.
- ID356: – Provide text with URL to reset password. This text is displayed after user exceeds allowed number of unsuccessful logons.
After making changes to the EN-US.XML file, copy it to the InternalSite\Languages\CustomUpdate folder. Refresh the browser on the client and will see our changes, as shown in the series of the following screenshots.
Modifying Templates.css File and Providing Custom Graphic Files to CustomUpdate
Next step is to make all visual UI changes, which are controlled via graphic files and TEMPLATE.CSS configuration file.
Make changes highlighted in red to the template.css file. Leave all other sections as is. Copy this file to the CustomUpdate folder. Changes are highlighted in red color.
/* BACKGROUND:url(“/InternalSite/images/customupdate/headerbottomleft.gif”);*/ /* Comment it out */
BACKGROUND-COLOR: #333333; /* Change from d0d4da */
FONT: 9pt Arial;
Copy custom UI graphic files to the CustomUpdate folder. Now refresh UI and you’ll see the following UI, for each screen respectively.
As you can see, Templates.css provided a lot of changes to the UI, but we still have some leftover graphics from the default UI. If you remember, at the beginning of this post I mentioned that there are nine graphic files, which are hardcoded in some scripts called by the UAG logon code. These are those files. The only way I could figure out how to get our custom UI without modifying actual UAG code, is by replacing these nine files in its original location with our own graphic files. Make sure to backup original files in a safe place, just in case. The following is a list of graphic files and little map used for UAG Logon/Logoff screen:
So finally, after replacing these files in its original folder (InternalSite\Images), we will get desired UAG Logon/Logoff UI: