174 lines
7.3 KiB
HTML
174 lines
7.3 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}登录 - 软件授权管理系统{% endblock %}
|
||
|
||
{% block login_content %}
|
||
<div class="text-center mb-4">
|
||
<h4>软件授权管理系统</h4>
|
||
<p class="text-muted">请登录您的管理员账号</p>
|
||
</div>
|
||
|
||
<form id="login-form" method="POST">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||
<div class="mb-3">
|
||
<label for="username" class="form-label">用户名</label>
|
||
<div class="input-group">
|
||
<span class="input-group-text">
|
||
<i class="fas fa-user"></i>
|
||
</span>
|
||
<input type="text" class="form-control" id="username" name="username" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="password" class="form-label">密码</label>
|
||
<div class="input-group">
|
||
<span class="input-group-text">
|
||
<i class="fas fa-lock"></i>
|
||
</span>
|
||
<input type="password" class="form-control" id="password" name="password" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3 form-check">
|
||
<input type="checkbox" class="form-check-input" id="remember" name="remember">
|
||
<label class="form-check-label" for="remember">
|
||
记住我
|
||
</label>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary w-100" id="login-btn">
|
||
<i class="fas fa-sign-in-alt me-2"></i>
|
||
<span id="login-btn-text">登录</span>
|
||
</button>
|
||
</form>
|
||
|
||
<div class="text-center mt-3">
|
||
<small class="text-muted">
|
||
默认账号: admin / admin123
|
||
</small>
|
||
</div>
|
||
|
||
<script>
|
||
// 自动聚焦到用户名输入框
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const usernameInput = document.getElementById('username');
|
||
if (usernameInput) {
|
||
usernameInput.focus();
|
||
}
|
||
});
|
||
|
||
// 登录表单提交处理
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const loginForm = document.getElementById('login-form');
|
||
if (loginForm) {
|
||
loginForm.addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
|
||
const loginBtn = document.getElementById('login-btn');
|
||
const loginBtnText = document.getElementById('login-btn-text');
|
||
const username = document.getElementById('username').value.trim();
|
||
const password = document.getElementById('password').value;
|
||
const remember = document.getElementById('remember').checked;
|
||
|
||
// 基础验证
|
||
if (!username || !password) {
|
||
showNotification('请填写用户名和密码', 'warning');
|
||
return;
|
||
}
|
||
|
||
// 显示加载状态
|
||
if (loginBtn) loginBtn.disabled = true;
|
||
if (loginBtnText) loginBtnText.textContent = '登录中...';
|
||
|
||
try {
|
||
// 尝试使用Web表单登录（传统Flask登录）
|
||
const formData = new FormData();
|
||
formData.append('username', username);
|
||
formData.append('password', password);
|
||
formData.append('remember', remember);
|
||
|
||
// 获取CSRF令牌
|
||
try {
|
||
const csrfTokenInput = document.querySelector('input[name="csrf_token"]');
|
||
if (csrfTokenInput) {
|
||
formData.append('csrf_token', csrfTokenInput.value);
|
||
}
|
||
} catch (e) {
|
||
console.error('获取CSRF令牌失败:', e);
|
||
}
|
||
|
||
const response = await fetch('/login', {
|
||
method: 'POST',
|
||
body: formData,
|
||
credentials: 'same-origin' // 重要：发送cookies
|
||
});
|
||
|
||
// 检查响应状态码
|
||
if (response.status === 200) {
|
||
// 检查是否真正登录成功（重定向到dashboard）
|
||
if (response.url && response.url.includes('/dashboard')) {
|
||
// 登录成功，重定向到dashboard
|
||
window.location.href = '/dashboard';
|
||
} else {
|
||
// 尝试解析响应内容
|
||
const responseData = await response.text();
|
||
|
||
// 检查是否包含Flask flash消息
|
||
if (responseData.includes('用户名或密码错误')) {
|
||
showNotification('用户名或密码错误，请重试', 'error');
|
||
} else if (responseData.includes('请输入用户名和密码')) {
|
||
showNotification('请输入用户名和密码', 'warning');
|
||
} else {
|
||
// 检查响应内容中是否包含成功信息
|
||
if (responseData.includes('dashboard') || responseData.includes('仪表板')) {
|
||
// 登录成功
|
||
window.location.href = '/dashboard';
|
||
} else {
|
||
// 尝试解析为JSON
|
||
try {
|
||
const jsonData = JSON.parse(responseData);
|
||
if (jsonData.success) {
|
||
window.location.href = jsonData.redirect || '/dashboard';
|
||
} else {
|
||
showNotification(jsonData.message || '登录失败，请检查用户名和密码', 'error');
|
||
}
|
||
} catch (e) {
|
||
// 如果无法解析为JSON，显示通用错误消息
|
||
showNotification('登录失败，请检查用户名和密码', 'error');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} else if (response.status === 400) {
|
||
// CSRF错误或其他客户端错误
|
||
const errorData = await response.text();
|
||
if (errorData.includes('CSRF')) {
|
||
showNotification('CSRF令牌验证失败，请刷新页面后重试', 'error');
|
||
} else {
|
||
showNotification('请求参数错误，请刷新页面后重试', 'error');
|
||
}
|
||
} else if (response.status === 401) {
|
||
// 认证失败
|
||
showNotification('用户名或密码错误，请重试', 'error');
|
||
} else if (response.status >= 500) {
|
||
// 服务器错误
|
||
showNotification('服务器内部错误，请稍后重试', 'error');
|
||
} else {
|
||
// 其他错误
|
||
showNotification('登录失败，请检查用户名和密码', 'error');
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('登录请求失败:', error);
|
||
showNotification('网络错误，请检查网络连接后重试', 'error');
|
||
} finally {
|
||
// 恢复按钮状态
|
||
if (loginBtn) loginBtn.disabled = false;
|
||
if (loginBtnText) loginBtnText.textContent = '登录';
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
{% endblock %} |