ADFS : Adding "Change Password" to the default login page

I used Server 2016 TP4 for this but you can use any version of ADFS from 2012 R2 upwards.

I gave an overview here but this is the actual code sample.

This is based on #AzureAD Mailbag: Self-Service Password Reset.

The PowerShell commands are:

New-ADFSWebTheme -Name ADFSChangePassword -SourceName default

Name                    : ADFSChangePassword
IsBuiltinTheme          : False
StyleSheet              : {[, System.Byte[]]}
RTLStyleSheet           : {42, 32, 123, 13...}
OnLoadScript            :
Logo                    : {}
Illustration            : {[, System.Byte[]]}
AdditionalFileResources : {[/adfs/portal/script/onload.js, System.Byte[]], [/adfs/portal/images/idp/localsts.png, System.Byte[]], [/adfs/portal/images/i
                          [/adfs/portal/images/idp/otherorganizations.png, System.Byte[]]}
 
Export-ADFSWebTheme -Name ADFSChangePassword -DirectoryPath C:\Work

Onload.js will now be in c:\work\script\onload.js

Modify onload.js at this point as below.

Set-AdfsWebTheme -TargetName ADFSChangePassword -AdditionalFileResource @{Uri=’/adfs/portal/script/onload.js';path=”c:\work\script\onload.js”}

Set-AdfsWebConfig -ActiveThemeName ADFSChangePassword

Modify onload.js by adding the following at the end: 

// Add "Change Password" link

var formsAuthArea = document.getElementById("formsAuthenticationArea");

if (formsAuthArea) {

    // Create the hyperlink

    var pwdResetLink = document.createElement('a');

    var linkText = document.createTextNode("Change your password");

    pwdResetLink.appendChild(linkText);

    pwdResetLink.title = "Change your password";

    pwdResetLink.href = "https://my-adfs/adfs/portal/updatepassword/";

    document.body.appendChild(pwdResetLink);

    // Append to the authArea

    var authArea = document.getElementById("authArea");
   
    authArea.appendChild(pwdResetLink);
}

Then run the last two PowerShell commands.

The login screen will now look like:

Clicking the link leads to:

Enjoy!