In the spirit of sharing more “not-so-evergreen” ADFS customizations, I wanted to share another customization request I got a while ago.
The case was very simple, they customer wanted to fit more end-user information in the login flow than the ADFS login page could fit without sending the user to another page.
Onload.js to the rescue again! This time we are using it to simply create an additional form where we present additional information when clicking on the help button.
My example looks like this:
Note that everything is in the JavaScript code, including the help page text. If preferred, that part could be loaded from another location.
Customize ADFS with help page (yes, I should move my content to GitHub)
// Author: Johan Dahlbom
// Blog: 365lab.net
// Twitter: @daltondhcp
// Get DOM elements and save as objects
var loginMessage = document.getElementById('loginMessage'),
loginArea = document.getElementById('loginArea'),
loginForm = document.getElementById('loginForm'),
userNameInput = document.getElementById('userNameInput'),
helpContent,
usernameLink,
passwordResetLink,
errorText = document.getElementById("errorText"),
introArea = document.getElementById("introduction"),
authArea = document.getElementById("authArea");
var showingHelper = false,
showingLoginform = false;
// CREATE CONTENT FUNCTIONS
function createHelpersForLoginForm() {
//Create the hyperlink to the help form
passwordResetLink = document.createElement('a');
var linkText = "Need help?";
passwordResetLink.appendChild(document.createTextNode(linkText));
passwordResetLink.title = linkText;
passwordResetLink.href = "#";
passwordResetLink.onclick = toggleHelpContent;
loginArea.appendChild(passwordResetLink);
}
function createHelpContent() {
if (!authArea) {
return;
}
helpContent = document.createElement("div");
helpContent.style.display = 'none';
helpContent.innerHTML = '\
<br><br>\
<h2><strong>What is my username?</strong></h2>\
<p>Your username is the same as your email address. Example: ann.andersson@365lab.net</p><br>\
<h2><strong>What is my password?</strong></h2>\
<p>This is a secret chosen by you. It would not be a secret if we told you. If you forgot your password, you can reset it <a href="https://passwordreset.microsoftonline.com/?whr=365lab.net" target="_blank">here</a><br><br>\
</p>\
<h2><strong>Support</strong></h2>\
<p>If you have any issues or questions, please contact our helpdesk at 555-GET-HELP or <a href="mailto:support@365lab.net">support@365lab.net</a><br><br><br></p>\
';
// Link for close help
var closeHelpContentLink = document.createElement('span');
closeHelpContentLink.innerHTML = "Back to the login form";
closeHelpContentLink.className = "submit";
closeHelpContentLink.onclick = toggleHelpContent;
// Duplicate it to have one before the content as well.
// Uncomment these lines if the help content grows.
// var closeHelpContentLinkUpper = closeHelpContentLink.cloneNode(true);
// closeHelpContentLinkUpper.onclick = toggleHelpContent;
// helpContent.insertBefore(closeHelpContentLinkUpper, helpContent.firstChild);
helpContent.appendChild(closeHelpContentLink);
authArea.appendChild(helpContent);
}
function updateUI() {
// Check for DOM errors
if (!loginForm || !helpContent) {
return;
}
if (showingHelper) {
openHelpContent();
} else {
closeHelpContent();
}
}
function toggleHelpContent() {
showingHelper = !showingHelper;
updateUI();
}
function openHelpContent() {
helpContent.style.display="block";
loginArea.style.display="none"
}
function closeHelpContent() {
helpContent.style.display="none";
loginArea.style.display="block"
}
// Create DOM elements
createHelpersForLoginForm();
createHelpContent();
updateUI();
As usual, you update onload.js with the Set-AdfsWebTheme cmdlet.
Hope this will be useful for some of you guys! If you have questions, ping me o twitter or email!
Thanks,
/Johan
Tailspintoys - 365lab.net 