XNSim/XNSimHtml/script.js

204 lines
7.5 KiB
JavaScript
Raw Normal View History

2025-04-28 12:25:20 +08:00
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('注册请求失败,请稍后重试');
}
});
}
});