<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
	<style>
		html, body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			opacity: 1;
			margin: 0;
			background-color: #000;
			transition: opacity 2s, background-color 2s, background-position 2s;
			transition-timing-function: ease-in;
		}

		body {
			background: linear-gradient(transparent, SlateGray);
			background-color: #ffffff;
			font-family: 'sans-serif';
			font-size: 24px;
		}

		html.session_starting {
			opacity: 0;
		}

		.session_starting body {
			opacity: 0;
			background-color: rgba(0, 0, 0, 0);
			background-position-y: -100%;
		}

		.container {
			width: 100%;
			height: 100%;
			display: -webkit-flex;
			display: flex;
			-webkit-flex-direction: column;
			flex-direction: column;
		}

		.topBox, .inputBox, .messageBox {
			width: 100%;
			height: 33.33%;
			text-align: center;
		}

		.inputBox {
			position: relative;
		}

		.wrapper {
			height: 85px;
			width: 350px;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}

		.topBox {
			text-align: right;
			padding: 15px;
			box-sizing: border-box;
		}

		.messageBox {
			text-align: center;
			visibility: hidden;
		}

		input#entry {
			outline: none;
			background: rgba(0, 0, 0, 0.05);
			box-shadow: none;
			box-sizing: border-box;
			line-height: normal;
			transition: .3s ease;
			border: none !important;
			padding: 14px 4% !important;
			font-size: 16px;
			color: #666;
			background-color: #fff;
			width: 100%;
			font-weight: 400;
			border-radius: 3px !important;
		}

		input#entry:focus {
			background: rgba(0, 0, 0, 0.1);
			color: rgba(0, 0, 0, 0.75);
		}

		input#entry:focus::placeholder {
			color: rgba(255, 255, 255, 0.3);
		}
	</style>
</head>

<body id="body">
<div class="container">
	<div class="topBox">
		<img onclick="javascript:lightdm.shutdown();" src="power_button.png"/>
	</div>
	<div class="inputBox">
		<div class="wrapper">
			<div id="prompt"></div>
			<form action="javascript:handle_input();">
				<input id="entry" />
			</form>
		</div>
	</div>
	<div class="messageBox" id="messages"></div>
</div>
<script>
	/*********************************************************/
	/*               Callbacks for the greeter               */
	/*********************************************************/

	/**
	 * show_prompt callback.
	 */
	window.show_prompt = function(text, type) {
		// type is either "text" or "password"
		let prompt = document.getElementById("prompt"),
			entry = document.getElementById("entry");

		entry.placeholder = text.charAt(0).toUpperCase() + text.slice(1, -1);

		// clear entry
		entry.value = "";
		entry.type = type;
	};

	/**
	 * show_message callback.
	 */
	window.show_message = function(text, type) {
		if (0 === text.length) {
			return;
		}
		let messages = document.getElementById('messages');
		messages.style.visibility = "visible";
		// type is either "info" or "error"
		if (type == 'error') {
			text = `<p style="color:red;">${text}</p>`;
		}
		messages.innerHTML = `${messages.innerHTML}${text}`;
	};

	/**
	 * authentication_complete callback.
	 */
	window.authentication_complete = function() {
		if (lightdm.is_authenticated) {
			// Start default session
			// let body = document.getElementById('body');
			let session = lightdm.default_session
			document.documentElement.addEventListener('transitionend', () => {lightdm.start_session(session)});
			document.documentElement.className = 'session_starting';
		} else {
			show_message("Authentication Failed", "error");
			setTimeout(start_authentication, 2000);
		}
	};

	/**
	 * autologin_timer_expired callback.
	 */
	function autologin_timer_expired(username) {
		/* Stub.  Does nothing. */
	}

	/*******************************************************************/
	/*                Functions local to this theme                    */
	/*******************************************************************/

	/**
	 * clear_messages
	 */
	function clear_messages() {
		let messages = document.getElementById("messages");
		messages.innerHTML = "";
		messages.style.visibility = "hidden";
	}

	/**
	 * Kickoff the authentication process
	 */
	window.start_authentication = function() {
		clear_messages();
		// start without providing "user" to make the greeter prompt for "user"
		lightdm.authenticate("");
	};

	/**
	 * handle the input from the entry field.
	 */
	window.handle_input = function() {
		let entry = document.getElementById("entry");
		lightdm.respond(entry.value);
	};

	window.addEventListener("GreeterReady", () => {
		lightdm.show_message.connect(show_message)
		lightdm.show_prompt.connect(show_prompt)
		lightdm.authentication_complete.connect(authentication_complete)
		lightdm.autologin_timer_expired.connect(autologin_timer_expired)

		start_authentication()
	});

</script>
<!--<script src="../_vendor/js/mock.js"></script>-->
</body>
</html>