<%- include('top') %>
<script type="text/javascript">

	// If we arrived from the OIDC callback with a token in the URL fragment,
	// store it and forward on before doing anything else.
	if(!app.auth.consumeTokenFragment()){
		// The reveal below touches an element further down this page, so wait
		// for the DOM — isLoggedIn can answer before the parser gets there.
		$(document).ready(function(){
			app.auth.isLoggedIn(function(error, isLoggedIn){
				if(isLoggedIn){
					app.auth.logInRedirect();
				}else{
					// Reveal the login card once we know the user is not logged in.
					document.getElementById('login-card-row').style.display = '';
				}
			});
		});
	}

</script>

<div id="login-card-row" class="row" style="display: none;">
	<div class="col-md-4">
		<div class="shadow-lg card">

			<div class="card-header text-center">
				<span class="card-icon float-start">
					<i class="fa-solid fa-lock"></i>
				</span>
				<span class="card-title">
					User Login
				</span>
				<span class="float-end">
					<i class="fa-solid fa-circle-minus"></i>
				</span>
			</div>






			<div class="card-header shadow actionMessage" style="display:none"></div>
			<div class="card-body">
				<form action="auth/login" onsubmit="formAJAX(this)" evalAJAX="
					app.auth.setToken(data.token);
					app.auth.logInRedirect();
				">
					<input type="hidden" name="redirect" value="<%= redirect %>">

					<div class="mb-3">
						<label></label>
						<div class="input-group">
							<span class="input-group-text" id="addon-wrapping"><i class="fa-solid fa-user-tie"></i></span>
							<input type="text" name="username" class="form-control" placeholder="jsmith" aria-label="Username" aria-describedby="addon-wrapping">
						</div>
					</div>
					<div class="mb-3">
						<div class="input-group">
							<span class="input-group-text" id="addon-wrapping"><i class="fa-solid fa-key"></i></span>
							<input type="password" name="password" class="form-control" placeholder="huunteR!23" aria-label="Username" aria-describedby="addon-wrapping">
						</div>
					</div>

<!-- 					<div class="group">
						<label class="control-label">User name</label>
						<div class="input-group mb-3 shadow">
						  <div class="input-group-prepend">
						    <span class="input-group-text" ><i class="fa-solid fa-user-tie"></i></span>
						  </div>
							<input type="text" name="username" class="input-control" placeholder="jsmith" />
						</div>
					</div>

					<div class="group">
						<label class="control-label">Password</label>
						<div class="input-group mb-3 shadow">
						  <div class="input-group-prepend">
						    <span class="input-group-text" ><i class="fa-solid fa-key"></i></span>
						  </div>
							<input type="password" name="password" class="input-control" placeholder="hunter123!"/>
						</div>
					</div> -->
					<hr />
					<button type="submit" class="btn btn-outline-dark"><i class="fa-solid fa-right-to-bracket"></i> Log in</button>
				</form>

				<hr />
				<div class="d-grid">
					<a href="/api/auth/oidc/start" class="btn btn-outline-primary">
						<i class="fa-solid fa-id-badge"></i> Log in with SSO
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
<%- include('bottom') %>
