<!DOCTYPE html>
<html>

<head>
	<title>Login Register App</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
	</script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="./css/main.css">

	<script type="text/javascript">
		$(document).ready(() => {

			$("#form").submit((event) => {
				event.preventDefault();

				$.ajax({
					type: 'POST',
					url: '/login',
					data: $('#form').serialize(),
					dataType: "json",
					success: (response) => {
						$('#form')[0].reset();

						document.getElementById("check").innerHTML = response.Success;
						//ADD THIS CODE
						setTimeout(() => {
							document.getElementById("check").innerHTML = "";
						}, 3000);
						if (response.Success == "Success!") {
							document.getElementById("aa").click();
						};
					},
					error: () => {
					}
				})
			});

		});
	</script>
</head>

<body>
	<div class="col-md-4 col-md-offset-4 form-card">
		<div>
			<p>Login</p>
		</div>
		<div class="form-group ">
			<form id="form" method="post">
				<input type="text" name="email" pattern="[-!#$%&'*+\/0-9=?ก-๙A-Z^_a-z`{|}~](\.?[-!#$%&'*+\/0-9=?ก-๙A-Z^_a-z`{|}~])*@[ก-๙a-zA-Z0-9](-*\.?[ก-๙a-zA-Z0-9])*\.[ก-๙a-zA-Z](-?[ก-๙a-zA-Z0-9])+$" placeholder="E-mail" required="" class="form-control"><br />
				<input type="password" name="password" placeholder="Password" required="" class="form-control"><br />
				<input type="submit" value="Login" class="btn btn-success">
			</form>
		</div>
		<div class="mssg bg-danger">
			<span id="check"></span>
		</div>
		<div id="LangTable"><a href="/profile" id="aa"></a>
		</div>
		<div><span>Do you forgot password? </span><a href="/forgetpass">click here</a>
		</div>
		<div id="LangTable"><span>Do you want to register a new Account? </span><a href="/">click here</a>
		</div>
	</div>
</body>

</html>