<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>短邮登录 - 超协体</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.login-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 30px;
padding: 40px 30px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
width: 100%;
max-width: 400px;
animation: slideUp 0.5s;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.logo {
text-align: center;
margin-bottom: 30px;
}
.logo-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
margin: 0 auto 15px;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
.logo-text {
font-size: 24px;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 5px;
}
.logo-subtitle {
font-size: 14px;
color: #999;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.form-input {
width: 100%;
padding: 15px;
border: 2px solid #eee;
border-radius: 15px;
font-size: 16px;
transition: all 0.3s;
background: white;
}
.form-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-input::placeholder {
color: #ccc;
}
.remember-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #666;
cursor: pointer;
}
.checkbox-label input {
cursor: pointer;
}
.forgot-link {
font-size: 14px;
color: #667eea;
text-decoration: none;
}
.login-btn {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 15px;
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.login-btn:active {
transform: scale(0.98);
}
.login-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.divider {
text-align: center;
margin: 25px 0;
color: #999;
position: relative;
}
.divider::before,
.divider::after {
content: '';
position: absolute;
top: 50%;
width: 40%;
height: 1px;
background: #eee;
}
.divider::before {
left: 0;
}
.divider::after {
right: 0;
}
.register-link {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #666;
}
.register-link a {
color: #667eea;
text-decoration: none;
font-weight: 600;
}
.error-message {
background: #fee;
color: #c33;
padding: 12px;
border-radius: 10px;
font-size: 14px;
margin-bottom: 20px;
display: none;
}
.error-message.show {
display: block;
animation: shake 0.3s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
.loading-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.6s linear infinite;
margin-right: 8px;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="login-container">
<div class="logo">
<div class="logo-icon">📬</div>
<div class="logo-text">短邮系统</div>
<div class="logo-subtitle">超协体移动端</div>
</div>
<div id="error-message" class="error-message"></div>
<form id="login-form" onsubmit="handleLogin(event)">
<div class="form-group">
<label class="form-label">邮箱</label>
<input
type="email"
class="form-input"
id="email"
placeholder="请输入邮箱"
required
>
</div>
<div class="form-group">
<label class="form-label">密码</label>
<input
type="password"
class="form-input"
id="password"
placeholder="请输入密码"
required
>
</div>
<div class="remember-row">
<label class="checkbox-label">
<input type="checkbox" id="remember">
记住我
</label>
<a href="#" class="forgot-link">忘记密码？</a>
</div>
<button type="submit" class="login-btn" id="login-btn">
登录
</button>
</form>
<div class="divider">或</div>
<div class="register-link">
还没有账号？ <a href="/register.html">立即注册</a>
</div>
</div>
<script>
// 检查是否已登录
function checkExistingAuth() {
const token = localStorage.getItem('token');
if (token) {
// 验证token是否有效
fetch('/api/projects', {
headers: { 'Authorization': `Bearer ${token}` }
})
.then(response => {
if (response.ok) {
// Token有效，直接跳转
window.location.href = '/shortmail-app.html';
} else {
// Token无效，清除
localStorage.removeItem('token');
localStorage.removeItem('user');
}
})
.catch(err => {
console.error('Token validation error:', err);
});
}
}
// 页面加载时检查
checkExistingAuth();
// 显示错误消息
function showError(message) {
const errorDiv = document.getElementById('error-message');
errorDiv.textContent = message;
errorDiv.classList.add('show');
setTimeout(() => {
errorDiv.classList.remove('show');
}, 5000);
}
// 处理登录
async function handleLogin(event) {
event.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const remember = document.getElementById('remember').checked;
const loginBtn = document.getElementById('login-btn');
// 显示加载状态
loginBtn.disabled = true;
loginBtn.innerHTML = '<span class="loading-spinner"></span>登录中...';
try {
const response = await fetch('/api/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ email, password })
});
const data = await response.json();
if (data.success) {
// 保存token和用户信息
localStorage.setItem('token', data.token);
localStorage.setItem('user', JSON.stringify(data.user));
if (remember) {
localStorage.setItem('remember', 'true');
}
// 跳转到应用页面
window.location.href = '/shortmail-app.html';
} else {
showError(data.message || '登录失败，请检查邮箱和密码');
loginBtn.disabled = false;
loginBtn.innerHTML = '登录';
}
} catch (error) {
console.error('Login error:', error);
showError('网络错误，请稍后重试');
loginBtn.disabled = false;
loginBtn.innerHTML = '登录';
}
}
// 快速填充（开发测试用）
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
document.getElementById('email').value = 'admin@supercoordination.com';
document.getElementById('password').value = 'admin123';
}
</script>
</body>
</html>
