<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OTP Validation</title>

    <link rel="stylesheet" href="/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

			#splash-content {
			  max-width: 380px;
			  padding: 15px 35px 45px;
			  margin: auto;
			  background-color: #fafafa;
			  border: 1px solid rgba(0,0,0,0.1);
			}

			#brand-logo {
				height: 40px;
				margin-bottom: 6px;
				margin-right: 6px;
			}
		
			#bkey-logo {
				height: 30px;
				margin-bottom: 6px;
				margin-right: 6px;
			}
			#error {
				/*color:#BB2222; */
				color:#cc0000;
			}
			#info {
				/*color:#33AA33;*/
				color:#009900;
			}
			#warning {
				/*color:#887700;*/
				color:#ff6600;
				 
			}
		</style>

    <!--[if lt IE 9]>
      <script src="/html5shiv.min.js"></script>
      <script src="/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

		<div id="splash-wrapper">
			<form id="splash-content" method="POST" action="/gotp/validationCheck" accept-charset="UTF-8">
	  		<input type="hidden" name="t_id" value="be73e600-db33-4de2-a0c7-9f532b7b1b29">
			 <input type="hidden" name="idpCode" value="">
			 <input type="hidden" name="relayState" value="">
				<h3>
	  <img id="brand-logo" alt="Belgian Rail" src="/logo-nmbs-sncb.png">B-Key Validation<img id="brand-logo" alt="B-Key" src="/img/bkey.png">
				</h3>
	  			<div id="error"></div>
				<div id="warning"></div>
				<div id="info"></div>
				<hr />

				<div class="form-group required">
					<label for="userName">Gebruikersnaam / Utilisateur Windows</label>
					<input class="form-control" placeholder="EXI999" type="text" name="userName"><span class="validation-error"></span>
				</div>

				<div class="form-group required">
					<label for="password">Wachtwoord / Mot de passe Windows </label>
					<input class="form-control" type="password" name="password"><span class="validation-error" ></span>
				</div>
				<div class="form-group required">
	  <label for="OTP">B-Key Code (6 cijfers/chiffres)</label>
					<input class="form-control" type="password" name="OTP"><span class="validation-error" ></span>
				</div>
				<input class="form-control" type="hidden" name="authType" value="GOTP-INT">
				<div class="buttons">
					<button type="submit" id="btn-login" class="btn btn-lg btn-primary btn-block" disabled="">Valideren / Valider</button>
				</div>
			</form>
		</div>
	<script src="/jquery-3.1.0.min.js"  crossorigin="anonymous"></script>
    <script>
function a(){b.val().length>0&&c.val().length>0&&d.val().length==6?e.removeAttr("disabled"):e.attr("disabled","")}var b=$("input[name=userName]"),c=$("input[name=password]"),d=$("input[name=OTP]"),e=$("button#btn-login");b.on("input",a),c.on("input",a),d.on("input",a);
    </script>
 </body>
</html>