<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MySQL MCP Server Pro - 登录</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <!-- 添加 crypto-js 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <style>
        :root {
            --primary-color: #2196F3;
            --primary-dark: #1976D2;
            --text-primary: #212121;
            --text-secondary: #757575;
            --background: #f5f5f5;
            --surface: #FFFFFF;
            --error: #F44336;
            --success: #4CAF50;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--background);
            color: var(--text-primary);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 登录表单样式 */
        .login-container {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }

        .header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .title {
            font-size: 1.5rem;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .author {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
            font-weight: 500;
        }

        input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.95rem;
        }

        input:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .submit-button {
            width: 100%;
            padding: 0.75rem;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
        }

        .submit-button:hover {
            background: var(--primary-dark);
        }

        .error-message {
            color: var(--error);
            margin-top: 1rem;
            text-align: center;
            display: none;
        }

        /* Token展示界面样式 */
        .token-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--background);
            padding: 1.5rem;
        }

        .token-content {
            max-width: 900px;
            margin: 0 auto;
        }

        .token-header {
            margin-bottom: 1rem;
            text-align: center;
        }

        .token-header h1 {
            font-size: 1.25rem;
            margin-bottom: 0.25rem;
        }

        .token-header .subtitle {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        .token-section {
            background: white;
            padding: 1.25rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 0.75rem;
        }

        .token-section h2 {
            font-size: 1rem;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .token-value {
            font-family: 'Monaco', 'Consolas', monospace;
            word-break: break-all;
            background: var(--background);
            padding: 0.75rem;
            border-radius: 6px;
            border: 1px solid #ddd;
            font-size: 0.85rem;
            margin-bottom: 0.5rem;
            line-height: 1.3;
        }

        .token-info {
            margin: 0.5rem 0;
            color: var(--text-secondary);
            font-size: 0.85rem;
        }

        .token-info p {
            margin: 0.25rem 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .copy-button {
            background: var(--success);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.85rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .copy-button:hover {
            opacity: 0.9;
        }

        .code-block {
            background: #1E1E1E;
            color: #E0E0E0;
            padding: 0.75rem;
            border-radius: 6px;
            overflow-x: auto;
            font-family: 'Monaco', 'Consolas', monospace;
            font-size: 0.8rem;
            line-height: 1.3;
            margin: 0.5rem 0;
        }

        .github-card {
            text-align: center;
            padding: 0.75rem;
            background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
            color: white;
            border-radius: 6px;
            margin-top: 0.5rem;
            font-size: 0.85rem;
        }

        .github-card a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }

        .github-card a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- 登录表单 -->
    <div class="login-container">
        <div class="header">
            <h1 class="title">MySQL MCP Server Pro</h1>
            <div class="author">by wenb1n</div>
        </div>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit" class="submit-button">登录</button>
        </form>
        <div id="errorMessage" class="error-message"></div>
    </div>

    <!-- Token展示界面 -->
    <div id="tokenContainer" class="token-container">
        <div class="token-content">
            <div class="token-header">
                <h1>MySQL MCP Server Pro</h1>
                <div class="subtitle">by wenb1n</div>
            </div>

            <div class="token-section">
                <h2>🔑 访问令牌 (Access Token)</h2>
                <div id="tokenValue" class="token-value"></div>
                <div class="token-info">
                    <p>⏰ 过期时间：<span id="expireTime"></span></p>
                </div>
                <button id="copyButton" class="copy-button">📋 复制Token</button>
            </div>

            <div class="token-section">
                <h2>🔄 刷新令牌 (Refresh Token)</h2>
                <div id="refreshTokenValue" class="token-value"></div>
                <div class="token-info">
                    <p>使用刷新令牌获取新的访问令牌:</p>
                </div>
                <div class="code-block">
                    <pre id="refreshTokenExample">curl -X POST http://localhost:3000/mcp/auth/login \
  -H "Content-Type: application/json" \
  -d '{
    "grant_type": "refresh_token",
    "refresh_token": "your-refresh-token",
    "client_id": "mysql-mcp-client",
    "client_secret": "mysql-mcp-secret"
  }'</pre>
                </div>
            </div>

            <div class="github-card">
                <a href="https://github.com/wenb1n-dev/mysql_mcp_server_pro" target="_blank">
                    ⭐️ 如果觉得好用，请帮忙点个 Star 支持一下！
                </a>
            </div>
        </div>
    </div>

    <script>
        // 生成随机盐值
        function generateSalt(length = 16) {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let salt = '';
            for (let i = 0; i < length; i++) {
                salt += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            return salt;
        }

        // 加密密码
        function encryptPassword(password, salt, timestamp) {
            // 第一次哈希：密码 + 盐
            const firstHash = CryptoJS.SHA256(password + salt).toString();
            // 第二次哈希：第一次哈希结果 + 时间戳
            const finalHash = CryptoJS.SHA256(firstHash + timestamp).toString();
            return finalHash;
        }

        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            try {
                // 生成安全参数
                const salt = generateSalt();
                const timestamp = Date.now().toString();
                const encryptedPassword = encryptPassword(password, salt, timestamp);
                
                const response = await fetch('/mcp/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-Timestamp': timestamp,  // 添加时间戳头
                        'X-Salt': salt,           // 添加盐值头
                    },
                    body: JSON.stringify({
                        grant_type: 'password',
                        username: username,
                        password: encryptedPassword,  // 发送加密后的密码
                        client_id: 'mysql-mcp-client',
                        client_secret: 'mysql-mcp-secret'
                    })
                });

                const data = await response.json();
                
                if (response.ok) {
                    // 显示token信息
                    const tokenContainer = document.getElementById('tokenContainer');
                    const tokenValue = document.getElementById('tokenValue');
                    const expireTime = document.getElementById('expireTime');
                    const refreshTokenValue = document.getElementById('refreshTokenValue');
                    
                    tokenValue.textContent = data.access_token;
                    expireTime.innerHTML = `
                        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
                            <div>🔑 访问令牌过期时间: ${data.expire_time}</div>
                            <div>🔄 刷新令牌过期时间: ${data.refresh_token_expire_time}</div>
                        </div>
                    `;
                    refreshTokenValue.textContent = data.refresh_token;
                    
                    // 更新示例代码中的刷新令牌
                    const example = document.getElementById('refreshTokenExample');
                    example.textContent = example.textContent.replace('your-refresh-token', data.refresh_token);
                    
                    tokenContainer.style.display = 'block';
                    document.querySelector('.login-container').style.display = 'none';
                } else {
                    const errorMessage = document.getElementById('errorMessage');
                    errorMessage.textContent = data.error_description || data.error || '登录失败';
                    errorMessage.style.display = 'block';
                }
            } catch (error) {
                const errorMessage = document.getElementById('errorMessage');
                errorMessage.textContent = '网络错误，请稍后重试';
                errorMessage.style.display = 'block';
            }
        });

        document.getElementById('copyButton').addEventListener('click', function() {
            const token = document.getElementById('tokenValue').textContent;
            if (token) {
                navigator.clipboard.writeText(token).then(() => {
                    this.textContent = '✓ 已复制';
                    setTimeout(() => {
                        this.innerHTML = '📋 复制Token';
                    }, 2000);
                }).catch(() => {
                    alert('复制失败，请手动复制');
                });
            }
        });
    </script>
</body>
</html> 