<!DOCTYPE html>
<html>
	<head>
		<title>Welcome!</title>

		<!-- Meta tag Keywords -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta charset="UTF-8" />
		<meta
			name="description"
			content="Student Assignment Submission System"
		/>
		<meta
			name="author"
			content="Abhishek Joshi, Shabarish Ramaswamy, Aakriti Sharma, Shlok Naik"
		/>

		<!-- Chrome, Firefox OS and Opera -->
		<meta name="theme-color" content="#000" />
		<!-- Windows Phone -->
		<meta name="msapplication-navbutton-color" content="#000" />
		<!-- iOS Safari -->
		<meta name="apple-mobile-web-app-status-bar-style" content="#000" />

		<!-- //Meta tag Keywords -->

		<!-- Bootstrap -->
		<!-- CSS only -->
		<link
			rel="stylesheet"
			href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
			integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
			crossorigin="anonymous"
		/>

		<!-- JS, Popper.js, and jQuery -->
		<script
			src="https://code.jquery.com/jquery-3.5.1.min.js"
			integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
			crossorigin="anonymous"
		></script>
		<script
			src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
			integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
			crossorigin="anonymous"
		></script>
		<script
			src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
			integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
			crossorigin="anonymous"
		></script>

		<!-- CSS -->
		<link rel="stylesheet" href="css/style.css" />

		<!-- FontAwesome -->
		<link
			rel="stylesheet"
			href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
			integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
			crossorigin="anonymous"
		/>

		<script type="text/javascript">
			function sendreq() {
				document.getElementById('incorrect').style.display = 'none';
				document
					.getElementById('login-sub')
					.setAttribute('disabled', '');
				email = $('#email').val();
				pass = $('#password').val();
				if (email.length == 0 && pass.length == 0) {
					return;
				}

				var ser = {};

				ser['username'] = email;
				ser['password'] = pass;

				$.ajax({
					url: '/login',
					type: 'POST',
					data: ser,
					success: function (res) {
						if (res.message == 'Done') {
							window.location.href = '/dashboard';
						} else {
							document.getElementById('incorrect').style.display =
								'block';
							document
								.getElementById('login-sub')
								.removeAttribute('disabled');
						}
					},
					error: function (res) {
						document.getElementById('incorrect').style.display =
							'block';
						document
							.getElementById('login-sub')
							.removeAttribute('disabled');
					}
				});
			}
		</script>
	</head>
	<body>
		<div class="login-body position-fixed w-100 text-center">
			<div class="login-whole">
				<div class="login-extra mx-auto p-3">
					<h1 class="login-logo text-primary font-weight-bolder">
						Assign <span class="text-danger">Tree!</span>
					</h1>
					<p class="mb-0 login-tagline">
						Platform for Easy Assignment Submission.
					</p>
				</div>

				<div class="login-region text-center mx-auto p-3">
					<form
						action="javascript void(0)"
						id="login-form"
						onsubmit="return false;"
					>
						<input
							type="email"
							class="login-inp w-100 mb-3 p-3"
							placeholder="Enter your Email"
							name="email"
							id="email"
							required=""
						/>
						<input
							type="password"
							class="login-inp w-100 mb-2 p-3"
							placeholder="Enter Password"
							name="password"
							id="password"
							required=""
						/>
						<small
							class="text-danger"
							id="incorrect"
							style="display: none"
							>Incorrect username or password.</small
						>
						<button
							id="login-sub"
							class="btn btn-primary w-100 p-2 font-weight-bold login-submit mt-2"
							type="submit"
						>
							Log In
						</button>
					</form>

					<hr />

					<a
						class="btn btn-success w-100 p-2 font-weight-bold"
						href="/signup"
						type="submit"
						>Create New Account</a
					>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			document.getElementById('login-form').onsubmit = function () {
				sendreq();
				return false;
			};
		</script>
	</body>
</html>
