Within the <head> portion of the page, add the following JavaScript to enable dynamic display of the Duo image and hiding of the button once credentials are entered.

Add:

<script type="text/javascript">
function picture(){
 
var pic = "/lm_auth_proxy?LMimage=PhoneApprove.png"
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
document.getElementById('bigpic').style.display='block';
}
</script>
<script>
function hidebutton(button){
button.style.visibility = "hidden";
}

Edit Username

Replace:

<form action="/lm_auth_proxy?LMLogon" method="post" id="logonForm" autocomplete="off" onSubmit="return save_usernames_dfa(this.dusername, this.username, this.pubpriv);">
With:
<form action="/lm_auth_proxy?LMLogon" method="post" id="logonForm" autocomplete="off" onSubmit="return save_usernames_dfa(this.dusername, this.dusername, this.pubpriv);">

Remove remotecredsid

Remove the following section because there is no need for separate remote credentials:

<tr id="remotecredsid">
<td class="nowrap"><label for="remotecreds"><b>Remote Credentials</b></label></td>
</tr>

Replace dpasscodeid

Replace :

<tr id="dpasscodeid">
<td class="nowrap"><label for="dpasscode">Passcode:</label></td>
<td class="txtpad">
<input class="txt" id="dpasscode" type="password" name="dpasscode" autocomplete=off required maxlength=128 />
</td>
</tr>

With :

<tr id="dpasscodeid"><td class="txtpad">
<input class="txt" id="dpasscode" value="XXX" type="hidden" name="dpasscode" autocomplete=off required maxlength=128 />
</td>
</tr>

Remove interncredsid

Remove the second username field:

<tr id="interncredsid">
<td class="nowrap"><label for="interncreds"><b>Internal Credentials</b></label></td>
</tr>

Remove Displaying of the Internal Username

Remove displaying of the internal username because we will reuse a single username.

Replace:

<tr id="userid">
<td class="nowrap"><label for="username">Internal Username:</label></td>
<td class="txtpad">
<input class="txt" id="username" name="username" type="text"/>
</td>
</tr>

With:

<tr id="userid"><td class="txtpad">
<input class="txt" id="username" name="username" type="text"/>
</td>
</tr>

This field is not being used. The first username is used for both RADIUS and LDAP authentication.

Update the Internal Password Field

Update the internal password field to simply call it password.

Replace:

<tr id="passid">
<td class="nowrap"><label for="password">Internal Password:</label></td>
<td class="txtpad">
<input class="txt" id="password" type="password" name="password" autocomplete=off required maxlength=128 />
</td>
</tr>

With:

<tr id="passid">
<td class="nowrap"><label for="password">Password:</label></td>
<td class="txtpad">
<input class="txt" id="password" type="password" name="password" autocomplete=off required maxlength=128 />
</td>
</tr>

Replace the Final Row

Replace :

<tr>
<td class="nowrap">&nbsp;</td>
<td class="txtpad">
<input type="submit" value="Log On" name="submit" />
</td>
</tr>

With :

<tr>
<td class="nowrap">&nbsp;</td>
<td class="txtpad">
<input type="submit" value="Log On" onclick="hidebutton(this);picture();" name="submit" />
</td>
</tr>
<tr id="interncredsid">
<td class="nowrap" align="center">
<label for="interncreds"><b><img        max-width:45px; max-height:45px;        id="bigpic" src="bigpic"></tr>

Example of the Updated File

A complete example of an updated file is as follows:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; CHARSET=utf-8">
<title>Kemp Login Screen</title>
<meta content="NOINDEX, NOFOLLOW" name="Robots">
<link rel="shortcut icon" href="/lm_auth_proxy?LMimage=favicon.ico" type="image/x-icon">
<link href="/lm_auth_proxy?LMimage=kmgstyle.css" type="text/css" rel="stylesheet">
<style type="text/css">
body
{
font-family:Tahoma,Arial,Helvetica;
font-size:70%;
}
input, button
{
font-family:Tahoma,Arial,Helvetica;
}
.mid
{
font-size:70%;
}
input, button, label, table
{
font-size:100%;
}
</style>
<script>
var xx_msg10 = "Login Failed - The security service has blocked your request. Please contact your System Administrator.<br><br>";
var xx_msg11 = "Login Failed - Please make sure that both your remote and internal credentials are correct, and then try again.<br><br>";
</script>
<script type="text/javascript" src="/lm_auth_proxy?LMimage=lm_sso.js"></script>
<script type="text/javascript">
function picture(){
var pic = "/lm_auth_proxy?LMimage=PhoneApprove.png"
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
document.getElementById('bigpic').style.display='block';
}
 
</script>
<script>
function hidebutton(button){
button.style.visibility = "hidden";
}
</script>
</head>
<body><noscript>
<div id="dvErr">
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="/lm_auth_proxy?LMimage=kmgerror.gif"><td></tr>
</table>
</div>
</noscript>
<form action="/lm_auth_proxy?LMLogon" method="post" id="logonForm" autocomplete="off" onSubmit="return save_usernames_dfa(this.dusername, this.dusername, this.pubpriv);">
<input type="hidden" id="curl" name="curl" value="">
<input type="hidden" id="curlid" name="curlid" value="">
<input type="hidden" id="curlmode" name="curlmode" value="0">
<table align="center" id="tblMain" cellpadding=0 cellspacing=0>
<tr>
<td colspan=3>
<table cellspacing=0 cellpadding=0 class="tblLgn">
<tr><td><img src="/lm_auth_proxy?LMimage=esptop.gif"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="mdLft">&nbsp;</td>
<td id="mdMid">
<table class="mid">
<tbody>
<tr>
<td class="align">
<table cellpadding="0" cellspacing="0">
<tr><td id="ssomsg"></td></tr>
</table>
</td>
</tr>
<tr id="reset_pass"><td class="align">
<table cellpadding="0" cellspacing="0">
<tr><td>
<span><span><span><span><span><span id="reset_msg">&nbsp;</span>&nbsp;
<a id="reset_link" href="#">Click Here</a>
</td></tr>
</table>
</td>
</tr>
<tr>
<td class="align">
<table cellpadding="0" cellspacing="0">
<tr><td class="wrng" id="badmsg"></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<colgroup>
<col class="nowrap">
<col class="w100">
<col>
<tbody>
<tr id="nopub"><td class="nowrap">
<input type=radio id=pubr name="pubpriv" value=0 checked="checked">
</td><td class="align"><label for="pubr">This is a public or shared computer</label></td>
</tr>
<tr id="nopub1"><td class="nowrap">
<input type=radio id=pubp name="pubpriv" value=1>
</td><td class="align"><label for="pubp">This is a private computer</label></td>
</tr>
<tr id="duserid">
<td class="nowrap"><label for="dusername">Username:</label></td>
<td class="txtpad">
<input class="txt" id="dusername" name="dusername" type="text"/>
</td>
</tr>
<tr id="dpasscodeid"><td class="txtpad">
<input class="txt" id="dpasscode" value="XXX" type="hidden" name="dpasscode" autocomplete=off maxlength=128 />
</td>
</tr>
 
<tr id="userid"><td class="nowrap"><label for="username">Ignore Username:</label></td>
<td class="txtpad">
<input class="txt" id="username" name="username" type="text"/>
</td>
</tr>
<tr id="passid">
<td class="nowrap"><label for="password">Password:</label></td>
<td class="txtpad">
<input class="txt" id="password" type="password" name="password" autocomplete=off required maxlength=128 />
</td>
</tr>
 
<tr>
<td class="nowrap">&nbsp;</td>
<td class="txtpad">
<input type="submit" value="Log On" onclick="hidebutton(this);picture();" name="submit" />
</td>
</tr>
<tr id="interncredsid">
<td class="nowrap" align="center">
<label for="interncreds"><b>
<img src="/lm_auth_proxy?LMimage=wally.png" id="bigpic" max-width:45px max-height:45px /></b></label></td>
</tr>
 
 
 
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="g-recaptcha" id=captchabox><table class="mid tblConn">
<tr>
<td class="tdConn"></tr>
<tr>
<td></tr>
</table>
</td>
<td id="mdRt">&nbsp;</td>
</tr>
<tr>
<td colspan=3>
<table cellspacing=0 cellpadding=0 class="tblLgn">
<tr>
<td><img src="/lm_auth_proxy?LMimage=espbottom.gif"></tr></table>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
 
 
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; CHARSET=utf-8">
<title>Kemp Login Screen</title>
<meta content="NOINDEX, NOFOLLOW" name="Robots">
<link rel="shortcut icon" href="/lm_auth_proxy?LMimage=favicon.ico" type="image/x-icon">
<link href="/lm_auth_proxy?LMimage=kmgstyle.css" type="text/css" rel="stylesheet">
<style type="text/css">
body
{
font-family:Tahoma,Arial,Helvetica;
font-size:70%;
}
input, button
{
font-family:Tahoma,Arial,Helvetica;
}
 
.mid
{
font-size:70%;
}
 
input, button, label, table
{
font-size:100%;
}
 
</style>
<script>
var xx_msg10 = "Login Failed - The security service has blocked your request. Please contact your System Administrator.<br><br>";
var xx_msg11 = "Login Failed - Please make sure that both your remote and internal credentials are correct, and then try again.<br><br>";
</script>
 
 
 
<script type="text/javascript">
 
function picture(){
 
var pic = "/lm_auth_proxy?LMimage=PhoneApprove.png"
 
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
 
document.getElementById('bigpic').style.display='block';
 
}
 
</script>
 
<script>
 
function hidebutton(button){
 
button.style.visibility = "hidden";
 
}
 
</script>
 
 
 
 
 
<script type="text/javascript" src="/lm_auth_proxy?LMimage=lm_sso.js"></script>
</head>
<body><noscript>
<div id="dvErr">
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="/lm_auth_proxy?LMimage=kmgerror.gif"><td></tr>
</table>
</div>
</noscript>
<form action="/lm_auth_proxy?LMLogon" method="post" id="logonForm" autocomplete="off" onSubmit="return save_usernames_dfa(this.dusername, this.dusername, this.pubpriv);">
<input type="hidden" id="curl" name="curl" value="">
<input type="hidden" id="curlid" name="curlid" value="">
<input type="hidden" id="curlmode" name="curlmode" value="0">
<table align="center" id="tblMain" cellpadding=0 cellspacing=0>
<tr>
<td colspan=3>
<table cellspacing=0 cellpadding=0 class="tblLgn">
<tr><td><img src="/lm_auth_proxy?LMimage=esptop.gif"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="mdLft">&nbsp;</td>
<td id="mdMid">
<table class="mid">
<tbody>
<tr>
<td class="align">
<table cellpadding="0" cellspacing="0">
<tr><td id="ssomsg"></td></tr>
</table>
</td>
</tr>
<tr id="reset_pass"><td class="align">
<table cellpadding="0" cellspacing="0">
<tr><td>
<span> 
<span><span><span><span> 
<span id="reset_msg">&nbsp;</span>&nbsp;
<a id="reset_link" href="#">Click Here</a>
</td></tr>
</table>
</td>
</tr>
<tr>
<td class="align">
<table cellpadding="0" cellspacing="0">
<tr><td class="wrng" id="badmsg"></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<colgroup>
<col class="nowrap">
<col class="w100">
<col>
<tbody>
<tr id="nopub"><td class="nowrap">
<input type=radio id=pubr name="pubpriv" value=0 checked="checked">
</td><td class="align"><label for="pubr">This is a public or shared computer</label></td>
</tr>
<tr id="nopub1"><td class="nowrap">
<input type=radio id=pubp name="pubpriv" value=1>
</td><td class="align"><label for="pubp">This is a private computer</label></td>
</tr>
 
 
 
 
<tr id="duserid">
<td class="nowrap"><label for="dusername">Username:</label></td>
<td class="txtpad">
<input class="txt" id="dusername" name="dusername" type="text"/>
</td>
</tr>
 
<tr id="dpasscodeid"><td class="txtpad">
<input class="txt" id="dpasscode" value="XXX" type="hidden" name="dpasscode" autocomplete=off required maxlength=128 />
</td>
</tr>
 
 
 
 
 
<tr id="userid"><td class="txtpad">
<input class="txt" id="username" name="username" type="text"/>
</td>
</tr>
<tr id="passid">
<td class="nowrap"><label for="password">Password:</label></td>
<td class="txtpad">
<input class="txt" id="password" type="password" name="password" autocomplete=off required maxlength=128 />
</td>
</tr>
 
<tr>
<td class="nowrap">&nbsp;</td>
<td class="txtpad">
<input type="submit" value="Log On" onclick="hidebutton(this);picture();" name="submit" />
</td>
</tr>
<tr id="interncredsid">
<td class="nowrap" align="center"><label for="interncreds"><b><img max-width:45px; max-height:45px; id="bigpic" src="bigpic"></tr>
 
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="g-recaptcha" id=captchabox><table class="mid tblConn">
<tr>
<td class="tdConn"></tr>
<tr>
<td></tr>
</table>
</td>
<td id="mdRt">&nbsp;</td>
</tr>
<tr>
<td colspan=3>
<table cellspacing=0 cellpadding=0 class="tblLgn">
<tr>
<td><img src="/lm_auth_proxy?LMimage=espbottom.gif"></tr></table>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>