<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ApplicGate Authentication Service</title>
<link href="AppGwOTPfiles/AppGwOTP.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="displayArea">
<div><img src="AppGwOTPfiles/login-visual.gif" alt="Keys"></div>
<div id="loginGeneralHeader">
Welcome to "ApplicGate Logon" !<br><br>
<noscript><h1 style="color:red;">Please enable JavaScript!<br><br>Logon will not work without JavaScript!</h1></noscript>
</div>
%ErrMsg%
<div id="loginField">
<div id="loginHeader">%loginHeader%</div><br>
<div id="loginBody">
<form method="post" action="/logon_">
<!--EStart-->
<input onchange="myHide('E')" type="radio" name="Mode" id="email" value="Email" %checked%><label for="email">Email</label><br>
<!--EEnd-->
<!--SStart-->
<input onchange="myHide('S')" type="radio" name="Mode" id="sms" value="SMS" %checked%><label for="sms">SMS</label><br>
<!--SEnd-->
<!--FStart-->
<input onchange="myHide('F')" type="radio" name="Mode" id="fido2" value="FIDO2" %checked%><label for="fido2">FIDO2</label><br>
<!--FEnd-->
<!--AStart-->
<input onchange="myHide('A')" type="radio" name="Mode" id="auth" value="Authenticator" %checked%><label for="auth">Authenticator </label><span id="CodeLabel" hidden> Code: </span>
<input type="text" id="Code" name="Code" value="" size="8" maxlength="6" hidden autocomplete="off"><br>
<!--AEnd-->
<!--RStart-->
<input onchange="myHide('R')" type="radio" name="Mode" id="radius" value="RADIUS" %checked%><label for="radius">RADIUS</label><br>
<!--REnd-->
<!--OStart-->
<input onchange="myHide('O')" type="radio" name="Mode" id="oauth2" value="OAuth2" %checked%><label for="oauth2">OAuth 2.0</label><label for="Oauth2Prov" id="OAuth2Label" hidden> Provider: </label>
<select id="Oauth2Prov" name="Oauth2Prov" hidden>
<!-- <option value="MS">Microsoft</option> -->
%OAuthProv%
</select><br>
<label id="sel_acc" for="select_account" title="Interrupts single sign-on providing account selection experience." hidden><u>Ask for account during sign-on:</u></label>
<input type="checkbox" id="select_account" name="selacc" hidden>
<!--OEnd-->
<!--UserStart-->
<br>
<label for="username" id="userLabel">Username (user@domain):</label><br>
<input type="text" name="username" id="username" value="" size="30" required autocomplete="on">
<br><br>
<label for="PIN" id="PINLabel">Security ID (5 characters):</label><br>
<input type="password" name="PIN" id="PIN" value="" size="6" maxlength="5" required>
<!--UserEnd-->
<br><br>
<input type="submit" value="Submit">
</form>
<br>
For further information please<br>
ask the system administrator or click <a href='AppGwOTPfiles/otphelp.htm' target='_blank'><b>here</b></a>.
</div>
<br>
</div>
<div id="legal"><hr>ApplicGate Network Security e.U. (C) 2022</div>
<br>
</div>
<script>
function myHide(option) {
//<!--UserStart-->
document.getElementById("userLabel").removeAttribute("hidden");
document.getElementById("userLabel").innerHTML = "Username (user@domain):";
document.getElementById("username").removeAttribute("hidden");
document.getElementById("username").setAttribute("required", "");
document.getElementById("PINLabel").removeAttribute("hidden");
document.getElementById("PINLabel").innerHTML = "Security ID (5 characters):";
document.getElementById("PIN").removeAttribute("hidden");
document.getElementById("PIN").setAttribute("required", "");
document.getElementById("PIN").setAttribute("size", 6);
document.getElementById("PIN").setAttribute("maxlength", 5);
//<!--UserEnd-->
//<!--AStart-->
document.getElementById("CodeLabel").setAttribute("hidden", "");
document.getElementById("Code").setAttribute("hidden", "");
//<!--AEnd-->
//<!--OStart-->
document.getElementById("OAuth2Label").setAttribute("hidden", "");
document.getElementById("Oauth2Prov").setAttribute("hidden", "");
document.getElementById("sel_acc").setAttribute("hidden", "");
document.getElementById("select_account").setAttribute("hidden", "");
//<!--OEnd-->
//<!--AStart-->
if (option == 'A') {
document.getElementById("CodeLabel").removeAttribute("hidden");
document.getElementById("Code").removeAttribute("hidden");
document.getElementById("Code").focus();
}
//<!--AEnd-->
//<!--RStart-->
if (option == "R") {
document.getElementById("userLabel").innerHTML = "Username:";
document.getElementById("PINLabel").innerHTML = "Password:";
document.getElementById("PIN").setAttribute("size", 30);
document.getElementById("PIN").removeAttribute("maxlength");
}
//<!--REnd-->
//<!--OStart-->
if (option == "O") {
document.getElementById("OAuth2Label").removeAttribute("hidden");
document.getElementById("Oauth2Prov").removeAttribute("hidden");
document.getElementById("sel_acc").removeAttribute("hidden");
document.getElementById("select_account").removeAttribute("hidden");
document.getElementById("Oauth2Prov").focus();
//<!--UserStart-->
document.getElementById("userLabel").setAttribute("hidden", "");
document.getElementById("username").removeAttribute("required");
document.getElementById("username").setAttribute("hidden", "");
document.getElementById("PINLabel").setAttribute("hidden", "");
document.getElementById("PIN").removeAttribute("required");
document.getElementById("PIN").setAttribute("hidden", "");
//<!--UserEnd-->
//<!--AStart-->
document.getElementById("CodeLabel").setAttribute("hidden", "");
document.getElementById("Code").setAttribute("hidden", "");
//<!--AEnd-->
}
//<!--OEnd-->
}
myHide('%FirstOption%');
</script>
</body>
</html>