<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - MCP Vulnerability Server</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.login-container {
max-width: 400px;
margin: 100px auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.logo {
text-align: center;
margin-bottom: 30px;
}
.logo h1 {
color: #0d6efd;
font-size: 24px;
}
.form-group {
margin-bottom: 20px;
}
.btn-login {
width: 100%;
}
.register-link {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="login-container">
<div class="logo">
<h1>MCP Vulnerability Server</h1>
</div>
<h2 class="text-center mb-4">Login</h2>
<form id="loginFormElement" class="space-y-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="email" name="email" required
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" id="password" name="password" required
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
</div>
<div class="flex items-center">
<input type="checkbox" id="rememberMe" name="rememberMe"
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<label for="rememberMe" class="ml-2 block text-sm text-gray-900">Remember me</label>
</div>
<button type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Login
</button>
</form>
<div class="register-link">
Don't have an account? <a href="/register-page">Register here</a>
</div>
</div>
</div>
<div id="registerModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3">
<h2 class="text-center mb-4">Register</h2>
<form id="registerForm" class="space-y-4">
<div>
<label for="registerEmail" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="registerEmail" name="email" required
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
</div>
<div>
<label for="registerPassword" class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" id="registerPassword" name="password" required
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
<div id="passwordErrors" class="mt-1 text-sm text-red-500"></div>
<div class="mt-1 text-sm text-gray-500">
Password must:
<ul class="list-disc list-inside">
<li>Be at least 8 characters long</li>
<li>Contain at least one uppercase letter</li>
<li>Contain at least one lowercase letter</li>
<li>Contain at least one number</li>
<li>Contain at least one special character (@$!%*?&)</li>
</ul>
</div>
</div>
<button type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Register
</button>
</form>
</div>
</div>
</div>
<script>
document.getElementById('loginFormElement').addEventListener('submit', async (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
try {
const response = await fetch('/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `username=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`,
});
const data = await response.json();
if (response.ok) {
// Store the token
localStorage.setItem('token', data.access_token);
// Redirect to dashboard or home page
window.location.href = '/dashboard';
} else {
alert(data.detail || 'Login failed. Please try again.');
}
} catch (error) {
alert('An error occurred. Please try again.');
console.error('Error:', error);
}
});
</script>
</body>
</html>
