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

		<link rel="stylesheet" href="/admin/assets/css/main.css">
		<link rel="stylesheet" href="/_prebuilt/_settings.css">
		<script src="/admin/assets/js/lib/jquery2.2.3.min.js"></script>
		<link href='/admin/assets/fonts/lato.css' rel='stylesheet' type='text/css'>

		<script type="text/javascript">
			$( document ).ready(function() {
				$('.login_form').submit(function (e) {

					// store login card for later use
					var login_card = $('.login-card')

					$.getJSON('/admin_api/trollhunter', $('.login_form').serialize(), function (res) {
						if (res.success) {
							// just reload if login successful
							location.reload()
						} else {

							// add failed and wiggle classes
							login_card.addClass('login-failed wiggle')

							// listen to wiggle animation change and remove wiggle class so it can be added again
							login_card.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
								login_card.removeClass('wiggle')
							})

						}
					})

					e.preventDefault()
				})
			})
		</script>

	</head>
	<body>

		<div class="full-background"></div>
		<div class="card login-card">
			
			<div class="card-body">

				<div>
					<h2>Access restricted</h2>
					<div class="wedge-2x"></div>
				</div>

				<form class="login_form" action="http://google.com" method="GET">
					<div class="form-row">
						<label class="login-textfield-label">
							<input id="pswrdinput" class="passphrase_input" type="password" name="pswrd" placeholder="passphrase" autocomplete=off>
							<span>Passphrase</span>
						</label>
					</div>
					<div class="form-row">
						<div class="wedge-2x"></div>
						<button class="btn passphrase_button" type="submit">Submit</button>
					</div>
					<div class="clearfix"></div>
				</form>
			</div>
		</div>

	</body>
</html>