Login works
This commit is contained in:
Ebenezer
175
有维项目/login.html
175
有维项目/login.html
@@ -401,17 +401,17 @@
|
||||
</div>
|
||||
|
||||
<div class="login-form-container">
|
||||
<h2>欢迎回来</h2>
|
||||
<p class="subtitle">登录您的有维商学账户</p>
|
||||
|
||||
<form onsubmit="handleLogin(event)">
|
||||
<h2 id="formTitle">欢迎回来</h2>
|
||||
<p class="subtitle" id="formSubtitle">登录您的有维商学账户</p>
|
||||
|
||||
<form id="loginForm" onsubmit="handleLogin(event)">
|
||||
<div class="form-group">
|
||||
<label>手机号/邮箱</label>
|
||||
<input type="text" id="loginUsername" placeholder="请输入手机号或邮箱">
|
||||
<label>邮箱</label>
|
||||
<input type="email" id="loginEmail" placeholder="请输入邮箱" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码</label>
|
||||
<input type="password" id="loginPassword" placeholder="请输入密码">
|
||||
<input type="password" id="loginPassword" placeholder="请输入密码" required>
|
||||
</div>
|
||||
<div class="form-options">
|
||||
<label class="remember-me">
|
||||
@@ -422,6 +422,22 @@
|
||||
</div>
|
||||
<button type="submit" class="login-btn">登 录</button>
|
||||
</form>
|
||||
|
||||
<form id="registerForm" onsubmit="handleRegister(event)" style="display: none;">
|
||||
<div class="form-group">
|
||||
<label>邮箱</label>
|
||||
<input type="email" id="registerEmail" placeholder="请输入邮箱" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码</label>
|
||||
<input type="password" id="registerPassword" placeholder="请输入密码（至少6位）" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>确认密码</label>
|
||||
<input type="password" id="registerConfirmPassword" placeholder="请再次输入密码" required>
|
||||
</div>
|
||||
<button type="submit" class="login-btn">注 册</button>
|
||||
</form>
|
||||
|
||||
<div class="divider"><span>或使用以下方式登录</span></div>
|
||||
|
||||
@@ -430,49 +446,140 @@
|
||||
<button class="social-btn">📱 手机验证码</button>
|
||||
</div>
|
||||
|
||||
<p class="register-link">
|
||||
还没有账户？<a href="#">立即注册</a>
|
||||
<p class="register-link" id="switchToRegisterText">
|
||||
还没有账户？<a href="#" onclick="switchToRegister(event)">立即注册</a>
|
||||
</p>
|
||||
<p class="register-link" id="switchToLoginText" style="display: none;">
|
||||
已有账户？<a href="#" onclick="switchToLogin(event)">返回登录</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = 'http://localhost:3010/api';
|
||||
|
||||
// 页面加载时检查是否已登录
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const savedUser = localStorage.getItem('currentUser');
|
||||
const savedUser = localStorage.getItem('currentUser') || sessionStorage.getItem('currentUser');
|
||||
if (savedUser) {
|
||||
// 已登录，直接跳转到首页
|
||||
window.location.href = 'index.html';
|
||||
}
|
||||
});
|
||||
|
||||
// 登录处理
|
||||
function handleLogin(event) {
|
||||
|
||||
function switchToRegister(event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
document.getElementById('formTitle').textContent = '创建账户';
|
||||
document.getElementById('formSubtitle').textContent = '仅需邮箱和密码即可注册';
|
||||
document.getElementById('loginForm').style.display = 'none';
|
||||
document.getElementById('registerForm').style.display = 'block';
|
||||
document.getElementById('switchToRegisterText').style.display = 'none';
|
||||
document.getElementById('switchToLoginText').style.display = 'block';
|
||||
}
|
||||
|
||||
function switchToLogin(event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
document.getElementById('formTitle').textContent = '欢迎回来';
|
||||
document.getElementById('formSubtitle').textContent = '登录您的有维商学账户';
|
||||
document.getElementById('loginForm').style.display = 'block';
|
||||
document.getElementById('registerForm').style.display = 'none';
|
||||
document.getElementById('switchToRegisterText').style.display = 'block';
|
||||
document.getElementById('switchToLoginText').style.display = 'none';
|
||||
}
|
||||
|
||||
function showLoading(isLoading, text) {
|
||||
const loadingNode = document.getElementById('loginLoading');
|
||||
const textNode = document.querySelector('#loginLoading .loading-text');
|
||||
if (text) {
|
||||
textNode.textContent = text;
|
||||
}
|
||||
loadingNode.classList.toggle('active', isLoading);
|
||||
}
|
||||
|
||||
async function handleRegister(event) {
|
||||
event.preventDefault();
|
||||
const username = document.getElementById('loginUsername').value.trim();
|
||||
const email = document.getElementById('registerEmail').value.trim();
|
||||
const password = document.getElementById('registerPassword').value.trim();
|
||||
const confirmPassword = document.getElementById('registerConfirmPassword').value.trim();
|
||||
|
||||
if (!email || !password || !confirmPassword) {
|
||||
alert('请填写邮箱、密码和确认密码');
|
||||
return;
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
alert('两次输入的密码不一致');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading(true, '正在注册，请稍候...');
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/register`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password, confirmPassword })
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(result.message || '注册失败');
|
||||
}
|
||||
|
||||
alert('注册成功，请登录');
|
||||
document.getElementById('loginEmail').value = email;
|
||||
document.getElementById('registerPassword').value = '';
|
||||
document.getElementById('registerConfirmPassword').value = '';
|
||||
switchToLogin();
|
||||
} catch (error) {
|
||||
alert(error.message || '注册失败，请稍后重试');
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 登录处理
|
||||
async function handleLogin(event) {
|
||||
event.preventDefault();
|
||||
const email = document.getElementById('loginEmail').value.trim();
|
||||
const password = document.getElementById('loginPassword').value.trim();
|
||||
const rememberMe = document.getElementById('rememberMe').checked;
|
||||
|
||||
if (username && password) {
|
||||
// 显示加载动画
|
||||
document.getElementById('loginLoading').classList.add('active');
|
||||
|
||||
// 任意账号密码都可登录，模拟登录延迟
|
||||
setTimeout(() => {
|
||||
// 保存登录状态
|
||||
if (rememberMe) {
|
||||
localStorage.setItem('currentUser', username);
|
||||
} else {
|
||||
sessionStorage.setItem('currentUser', username);
|
||||
}
|
||||
|
||||
document.getElementById('loginLoading').classList.remove('active');
|
||||
// 跳转到首页
|
||||
window.location.href = 'index.html';
|
||||
}, 1500);
|
||||
} else {
|
||||
alert('请输入账号和密码');
|
||||
|
||||
if (!email || !password) {
|
||||
alert('请输入邮箱和密码');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading(true, '正在登录，请稍候...');
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password })
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(result.message || '登录失败');
|
||||
}
|
||||
|
||||
const userEmail = result?.user?.email || email;
|
||||
if (rememberMe) {
|
||||
localStorage.setItem('currentUser', userEmail);
|
||||
sessionStorage.removeItem('currentUser');
|
||||
} else {
|
||||
sessionStorage.setItem('currentUser', userEmail);
|
||||
localStorage.removeItem('currentUser');
|
||||
}
|
||||
|
||||
window.location.href = 'index.html';
|
||||
} catch (error) {
|
||||
alert(error.message || '登录失败，请稍后重试');
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user