<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Sign-In - LiteLib</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
		<link rel="stylesheet" href="/css/style.css">

		<!-- Favicon Information -->
		<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="194x194" href="/favicon/favicon-194x194.png">
		<link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-chrome-192x192.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
		<link rel="manifest" href="/favicon/site.webmanifest">
		<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#805a3f">
		<link rel="shortcut icon" href="/favicon/favicon.ico">
		<meta name="msapplication-TileColor" content="#ffffff">
		<meta name="msapplication-TileImage" content="/favicon/mstile-144x144.png">
		<meta name="msapplication-config" content="/favicon/browserconfig.xml">
		<meta name="theme-color" content="#ffffff">
	</head>
	<body>

		<div style="text-align:center;">
			<img src="/img/logo.png" alt="LiteLib" class="img-fluid" style="width: 100px; height: 100px;">
		</div>

		<h1 class="mt-5 mb-5" style="text-align:center;"><i class="bi bi-box-arrow-right"></i> Sign-In Page</h1>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
		<div class="container-sm">
			<form action="/login" method="post" id="loginForm">
				<label for="username" style="text-align: left; font-size: larger;">Username:</label>
				<input id="username" name="username" class="form-control form-control-lg mb-5" placeholder="Username" autocomplete="username" required>
				<label for="password" style="text-align: left; font-size: larger;">Password:</label>
				<input id="password" name="password" class="form-control form-control-lg mb-5" placeholder="Password" type="password" autocomplete="current-password" required>
				<a href="#" onclick="validateForm(event)" class="btn btn-primary btn-lg" style="text-align: center; display: block;"><i class="bi bi-box-arrow-right"></i> Sign In</a>
			</form>
		</div>

		<script>
			function validateForm(event) {
				event.preventDefault(); // Prevent the default action of the link click

				// Check if the required fields are filled
				var username = document.getElementById('username').value.trim();
				var password = document.getElementById('password').value.trim();

				if (username !== '' && password !== '') {
					document.getElementById('loginForm').submit();
				} else {
					// Notify user that required fields are empty
					alert('Please fill in all required fields.');
				}
			}

			// JavaScript to submit form on Enter key press
			document.getElementById('loginForm').addEventListener('keypress', function(event) {
				if (event.key === 'Enter') {
					event.preventDefault(); // Prevent the default action of the Enter key
					
					// Trigger the form submission
					document.getElementById('loginForm').submit();
            	}
			});
		</script>
	</body>
</html>
