95 lines
3.5 KiB
HTML
95 lines
3.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}登录 - 配置中心{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="card" style="max-width: 500px; margin: 0 auto; margin-top: 50px;">
|
|
<div class="card-header">
|
|
<h1 class="card-title">用户登录</h1>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="login-error" class="alert alert-danger" style="display: none;"></div>
|
|
<form id="loginForm">
|
|
<div class="form-group">
|
|
<label for="username" class="form-label">用户名</label>
|
|
<input type="text" id="username" name="username" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password" class="form-label">密码</label>
|
|
<input type="password" id="password" name="password" class="form-control" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" style="width: 100%;">登录</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.getElementById('loginForm').addEventListener('submit', async function(event) {
|
|
event.preventDefault();
|
|
|
|
// 直接从表单元素获取值
|
|
const usernameInput = document.getElementById('username');
|
|
const passwordInput = document.getElementById('password');
|
|
|
|
if (!usernameInput || !passwordInput) {
|
|
console.error('找不到用户名或密码输入框');
|
|
showMessage('登录表单错误', 'danger');
|
|
return;
|
|
}
|
|
|
|
const username = usernameInput.value.trim();
|
|
const password = passwordInput.value;
|
|
|
|
// 检查用户名和密码是否为空
|
|
if (!username || !password) {
|
|
const errorElement = document.getElementById('login-error');
|
|
errorElement.textContent = '用户名和密码不能为空';
|
|
errorElement.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
console.log('提交登录，用户名:', username); // 调试输出
|
|
|
|
try {
|
|
// 使用URLSearchParams直接构建表单数据
|
|
const formData = new URLSearchParams();
|
|
formData.append('username', username);
|
|
formData.append('password', password);
|
|
|
|
const response = await fetch('/api/auth/token', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: formData.toString(),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.detail || '登录失败');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// 保存令牌到本地存储
|
|
localStorage.setItem('access_token', data.access_token);
|
|
localStorage.setItem('username', data.username);
|
|
localStorage.setItem('role', data.role);
|
|
|
|
// 显示成功消息
|
|
showMessage('登录成功，正在跳转...', 'success');
|
|
|
|
// 重定向到首页
|
|
setTimeout(() => {
|
|
window.location.href = '/page';
|
|
}, 1000);
|
|
} catch (error) {
|
|
const errorElement = document.getElementById('login-error');
|
|
errorElement.textContent = error.message;
|
|
errorElement.style.display = 'block';
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |