UI customization for Per User Authentication Matching login page

Problem

Currently there is no out of the box functionality to change the login page UI text for Per User Authentication Matching.

Per User Authentication Matching: https://ubisecuredev.atlassian.net/wiki/spaces/KNB/pages/5704155041

Symptoms

The below highlighted text is required to be changed as per customer requirements:

Solution

The text changes/customization can be performed by adding following code snippet in per-user-authentication-matching.js

Example:

Code Snippet:

var _buttons = document. getElementsByClassName( 'button' );
	var _logintext = document. getElementById('logintext');
	var _logintitle = document.getElementById('logintitle');
	var _usernamelabel = document. querySelector("label[for='username']");
	var _currenturl = window.location.href;
	var _currentlocale = _currenturl.slice(-2);

	if (_currentlocale == "en") {
		for (var i = 0, len = _buttons.length; i<len;++i) {
			if (_buttons[i].value == "Sign in") {
				_buttons[i].value = "Continue";
				break;	
			}
		}		
		_logintext.textContent = "Enter your email address";
		_logintitle.textContent = "Sign In";
		_usernamelabel.textContent = "";
	}

Screenshot: