hubian
cb4b7d5363
- 后台添加登录验证（Session + JWT双重验证） - JSON存储改为SQLite数据库，解决并发问题 - API密钥移至config.py，支持环境变量覆盖 - SECRET_KEY改为随机生成 - 新增管理员登录页面 - 修复README.md乱码 - 更新.gitignore忽略敏感配置
116 lines
5.1 KiB
HTML
116 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>技术论坛 - 后台登录</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
<style>
|
|
.gradient-bg { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
|
|
<div class="w-full max-w-md">
|
|
<div class="bg-white rounded-2xl shadow-lg p-8">
|
|
<div class="text-center mb-8">
|
|
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="ri-shield-keyhole-line text-3xl text-white"></i>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-gray-800">后台管理系统</h1>
|
|
<p class="text-gray-500 text-sm mt-2">请输入管理员账号登录</p>
|
|
</div>
|
|
|
|
<form id="loginForm" class="space-y-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
|
|
<div class="relative">
|
|
<i class="ri-user-line absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="text" id="username" name="username" required
|
|
class="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="请输入用户名">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
|
|
<div class="relative">
|
|
<i class="ri-lock-line absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="password" id="password" name="password" required
|
|
class="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="请输入密码">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="errorMsg" class="hidden text-red-500 text-sm text-center"></div>
|
|
|
|
<button type="submit" id="submitBtn"
|
|
class="w-full py-3 gradient-bg text-white rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center gap-2">
|
|
<i class="ri-login-circle-line"></i>
|
|
<span>登录</span>
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-6 text-center">
|
|
<a href="http://localhost:19004" target="_blank" class="text-sm text-gray-500 hover:text-blue-600">
|
|
<i class="ri-external-link-line"></i> 访问前台网站
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 检查是否已登录
|
|
async function checkAuth() {
|
|
try {
|
|
const res = await fetch('/api/check-auth');
|
|
const data = await res.json();
|
|
if (data.logged_in) {
|
|
window.location.href = '/';
|
|
}
|
|
} catch (e) {
|
|
// 未登录，继续显示登录页面
|
|
}
|
|
}
|
|
|
|
checkAuth();
|
|
|
|
// 登录表单提交
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
const errorEl = document.getElementById('errorMsg');
|
|
const btn = document.getElementById('submitBtn');
|
|
|
|
errorEl.classList.add('hidden');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="ri-loader-4-line animate-spin"></i> 登录中...';
|
|
|
|
try {
|
|
const res = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (data.success) {
|
|
window.location.href = '/';
|
|
} else {
|
|
errorEl.textContent = data.error || '登录失败';
|
|
errorEl.classList.remove('hidden');
|
|
}
|
|
} catch (e) {
|
|
errorEl.textContent = '网络错误，请稍后重试';
|
|
errorEl.classList.remove('hidden');
|
|
}
|
|
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="ri-login-circle-line"></i> <span>登录</span>';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |