<html>
<head runat="server">
	<title>OmniDB</title>

	<link rel="shortcut icon" type="image/x-icon" href="{{url_folder}}/static/OmniDB_app/images/favicon.ico" />

	<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/css/login.css?v2.17.0.0"/>
</head>
<body>
	<div id="div_form">
		<div class="loginWrap">
			<div id="div_time">
				<div class="logo">
					{% include 'OmniDB_app/animated_assets/animated_logo_omnidb.svg' %}
				</div>
				<div class="version">
					<small>v{{ omnidb_short_version }}</small>
				</div>
			</div>

			<div class="loginWrap-body">
				<div id="userBox" class="inputWrap">
					<label id="user_title">user</label>
					<input id="txt_user" type="text" placeholder="user" onfocus="this.parentElement.classList.add('isActive')" onblur="this.parentElement.classList.remove('isActive')" onkeydown="if (event.keyCode == 13) signIn();">
				</div>
				<div id="pwdBox" class="inputWrap">
					<label id="pwd_title">pwd</label>
					<input id="txt_pwd" type="password" placeholder="password" onfocus="this.parentElement.classList.add('isActive')" onblur="this.parentElement.classList.remove('isActive')" onkeydown="if (event.keyCode == 13) signIn();">
				</div>
				<button onclick="signIn()">Sign in</button>
			</div>
		</div>
	</div>

<div id="div_error" class="isModal">
		<div class="modal_background_dark">
				<div class ="white_box" style="width: 90%; height: 90%; left: 5%; top: 5%; transform: translate(0px, -50%); -webkit-transform: translate(0px, -50%);">
						<a class="bt_close" onclick="hideError()">x</a>
						<div id="div_error_msg" style="height:100%; width:100%; margin-top:20px; text-align: center;"></div>
				</div>
		</div>
</div>

<div id="div_alert" class="isModal">
		<div class="modal_background_dark">
				<div class ="white_box" style="width: 30%; left: 35%; top: 40%;">
						<div id="div_alert_content" style="height:100%; width:100%;"></div>
				</div>
		</div>
</div>

<div class="div_loading"><button id="bt_cancel_ajax" onclick="cancelAjax()">Cancel</button></div>

<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/jquery-1.11.2.min.js"   ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/NotificationControl.js" ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/AjaxControl.js"         ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/WebSocketControl.js"    ></script>
<script type="text/javascript">
	var v_url_folder = '{{ url_folder }}'
	$(function () {

		checkSessionMessage();

	});

	function signIn() {

		document.getElementById("txt_user").blur();
		document.getElementById("txt_pwd").blur();

		var v_user_name = document.getElementById('txt_user').value;
		var v_pwd = document.getElementById('txt_pwd').value;

		execAjax('/sign_in/',
			JSON.stringify({"p_username": v_user_name, "p_pwd": v_pwd}),
			function(p_return) {

				if (p_return.v_data>=0) {
					window.open(v_url_folder + "/workspace", '_self');
				}
				else if (p_return.v_data==-2) {
					showAlert('Invalid authentication token, use omnidb-server to support multiple users.');
				}
				else
					showAlert('Invalid username or password.');

			},
			null,
			'box'
		);
	}

</script>

</body>
</html>
{% csrf_token %}
