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('注册请求失败,请稍后重试');
|
|||
|
}
|
|||
|
});
|
|||
|
}
|
|||
|
});
|