70 lines
2.4 KiB
PHP
70 lines
2.4 KiB
PHP
<div class="login-container">
|
|
<div class="login-card">
|
|
<h1>🤖 AI Chat</h1>
|
|
<div id="loginError" class="alert alert-error" style="display:none;"></div>
|
|
<form id="loginForm">
|
|
<div class="form-group">
|
|
<label for="username">用户名</label>
|
|
<input type="text" id="username" name="username" required autocomplete="username" placeholder="请输入用户名">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">密码</label>
|
|
<input type="password" id="password" name="password" required autocomplete="current-password" placeholder="请输入密码">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-block" id="loginBtn">登录</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// 页面加载时检查是否已登录
|
|
(function() {
|
|
const token = localStorage.getItem('token');
|
|
if (token) {
|
|
window.location.href = '/chat.php';
|
|
}
|
|
})();
|
|
|
|
// 登录表单提交
|
|
document.getElementById('loginForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('loginBtn');
|
|
const errorEl = document.getElementById('loginError');
|
|
const username = document.getElementById('username').value.trim();
|
|
const password = document.getElementById('password').value;
|
|
|
|
if (!username || !password) {
|
|
errorEl.textContent = '请输入用户名和密码';
|
|
errorEl.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = '登录中...';
|
|
errorEl.style.display = 'none';
|
|
|
|
try {
|
|
const response = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
localStorage.setItem('token', data.data.token);
|
|
window.location.href = '/chat.php';
|
|
} else {
|
|
errorEl.textContent = data.message || '登录失败';
|
|
errorEl.style.display = 'block';
|
|
}
|
|
} catch (err) {
|
|
errorEl.textContent = '网络错误，请稍后重试';
|
|
errorEl.style.display = 'block';
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = '登录';
|
|
}
|
|
});
|
|
</script>
|