mcp-quiz-server
Version:
🧠AI-Powered Quiz Management via Model Context Protocol (MCP) - Create, manage, and take quizzes directly from VS Code, Claude, and other AI agents.
137 lines (126 loc) • 6.25 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - MCP Quiz Server</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</head>
<body class="bg-gray-50">
<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8" x-data="loginForm()">
<div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
Sign in to your account
</h2>
<p class="mt-2 text-center text-sm text-gray-600">
Or
<a href="/auth/register.html" class="font-medium text-blue-600 hover:text-blue-500">
create a new account
</a>
</p>
</div>
<form class="mt-8 space-y-6" @submit.prevent="login()">
<div class="rounded-md shadow-sm -space-y-px">
<div>
<label for="username" class="sr-only">Username or Email</label>
<input
id="username"
name="username"
type="text"
required
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Username or email"
x-model="form.username"
>
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input
id="password"
name="password"
type="password"
required
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Password"
x-model="form.password"
>
</div>
</div>
<div x-show="error" class="text-red-600 text-sm text-center" x-text="error"></div>
<div>
<button
type="submit"
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
:disabled="loading"
>
<span x-show="!loading">Sign in</span>
<span x-show="loading" class="flex items-center">
<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
Signing in...
</span>
</button>
</div>
<div class="text-center">
<p class="text-sm text-gray-600">
Test accounts:
</p>
<div class="mt-2 space-y-1 text-xs text-gray-500">
<p><strong>Admin:</strong> admin / admin123</p>
<p><strong>Teacher:</strong> teacher / teacher123</p>
<p><strong>Student:</strong> student / student123</p>
</div>
</div>
</form>
</div>
</div>
<script>
function loginForm() {
return {
form: {
username: '',
password: ''
},
loading: false,
error: '',
async login() {
this.loading = true;
this.error = '';
try {
const response = await fetch('/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.form.username,
password: this.form.password,
clientInfo: {
ipAddress: '127.0.0.1',
userAgent: navigator.userAgent,
protocol: 'http'
}
})
});
const data = await response.json();
if (data.success) {
// Store token in cookie for dashboard access
document.cookie = `auth_token=${data.data.tokens.accessToken}; path=/; max-age=900`; // 15 minutes
// Redirect to dashboard
window.location.href = '/dashboard';
} else {
this.error = data.error?.message || 'Login failed';
}
} catch (error) {
this.error = 'Network error. Please try again.';
console.error('Login error:', error);
} finally {
this.loading = false;
}
}
}
}
</script>
</body>
</html>