204 lines
7.5 KiB
JavaScript
204 lines
7.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
||
// 获取DOM元素
|
||
const loginForm = document.getElementById('loginForm');
|
||
const registerForm = document.getElementById('registerForm');
|
||
const loginToggle = document.getElementById('loginToggle');
|
||
const registerToggle = document.getElementById('registerToggle');
|
||
|
||
// 处理密码可见性切换
|
||
document.querySelectorAll('.toggle-password').forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const input = this.previousElementSibling;
|
||
const icon = this.querySelector('.visibility-icon');
|
||
|
||
// 切换密码可见性
|
||
if (input.type === 'password') {
|
||
input.type = 'text';
|
||
icon.src = 'assets/icons/png/visiable_b.png';
|
||
} else {
|
||
input.type = 'password';
|
||
icon.src = 'assets/icons/png/invisiable_b.png';
|
||
}
|
||
});
|
||
});
|
||
|
||
// 创建Toast提示函数
|
||
function showToast(message) {
|
||
const toast = document.createElement('div');
|
||
toast.className = 'toast';
|
||
toast.textContent = message;
|
||
document.body.appendChild(toast);
|
||
|
||
setTimeout(() => toast.classList.add('show'), 10);
|
||
|
||
setTimeout(() => {
|
||
toast.classList.remove('show');
|
||
setTimeout(() => toast.remove(), 300);
|
||
}, 2000);
|
||
}
|
||
|
||
// 添加Toast样式
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
.toast {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
z-index: 10000;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
.toast.show {
|
||
opacity: 1;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
// 处理表单切换
|
||
if (loginToggle && registerToggle) {
|
||
loginToggle.addEventListener('click', () => {
|
||
loginToggle.classList.add('active');
|
||
registerToggle.classList.remove('active');
|
||
loginForm.classList.add('active');
|
||
registerForm.classList.remove('active');
|
||
});
|
||
|
||
registerToggle.addEventListener('click', () => {
|
||
registerToggle.classList.add('active');
|
||
loginToggle.classList.remove('active');
|
||
registerForm.classList.add('active');
|
||
loginForm.classList.remove('active');
|
||
});
|
||
}
|
||
|
||
// 处理登录表单提交
|
||
if (loginForm) {
|
||
loginForm.querySelector('form').addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
|
||
const username = document.getElementById('loginUsername').value;
|
||
const password = document.getElementById('loginPassword').value;
|
||
const remember = document.getElementById('remember').checked;
|
||
|
||
if (!username || !password) {
|
||
showToast('请输入用户名和密码');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/api/login', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
username,
|
||
password,
|
||
remember
|
||
})
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
localStorage.setItem('userInfo', JSON.stringify(data.user));
|
||
showToast(`欢迎回来,${data.user.username}!`);
|
||
setTimeout(() => {
|
||
window.location.href = 'main.html';
|
||
}, 1000);
|
||
} else {
|
||
showToast(data.message || '登录失败,请检查用户名和密码');
|
||
}
|
||
} catch (error) {
|
||
console.error('登录请求错误:', error);
|
||
showToast('登录请求失败,请稍后再试');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 处理注册表单提交
|
||
if (registerForm) {
|
||
registerForm.querySelector('form').addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
|
||
const username = document.getElementById('regUsername').value;
|
||
const password = document.getElementById('regPassword').value;
|
||
const confirmPassword = document.getElementById('regConfirmPassword').value;
|
||
|
||
if (!username || !password) {
|
||
showToast('用户名和密码为必填项');
|
||
return;
|
||
}
|
||
|
||
if (password !== confirmPassword) {
|
||
showToast('两次输入的密码不一致');
|
||
return;
|
||
}
|
||
|
||
const userInfo = {
|
||
full_name: document.getElementById('fullName').value.trim() || '',
|
||
phone: document.getElementById('phone').value.trim() || '',
|
||
email: document.getElementById('email').value.trim() || '',
|
||
department: document.getElementById('department').value.trim() || '',
|
||
position: document.getElementById('position').value.trim() || '',
|
||
access_level: 1
|
||
};
|
||
|
||
try {
|
||
const response = await fetch('/api/register', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
username,
|
||
password,
|
||
userInfo
|
||
})
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
showToast('注册成功!请登录');
|
||
loginToggle.click();
|
||
e.target.reset();
|
||
} else {
|
||
let errorMessage;
|
||
switch (data.userId) {
|
||
case -1:
|
||
errorMessage = '注册失败:系统错误';
|
||
break;
|
||
case -2:
|
||
errorMessage = '注册失败:用户名已存在';
|
||
break;
|
||
case -3:
|
||
errorMessage = '注册失败:无效的用户信息格式';
|
||
break;
|
||
case -4:
|
||
errorMessage = '注册失败:用户名不能为空';
|
||
break;
|
||
case -5:
|
||
errorMessage = '注册失败:密码不能为空';
|
||
break;
|
||
case -6:
|
||
errorMessage = '注册失败:无效的权限级别';
|
||
break;
|
||
default:
|
||
errorMessage = data.message || '注册失败,请稍后重试';
|
||
}
|
||
showToast(errorMessage);
|
||
}
|
||
} catch (error) {
|
||
console.error('注册请求失败:', error);
|
||
showToast('注册请求失败,请稍后重试');
|
||
}
|
||
});
|
||
}
|
||
});
|