class AuthComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
this.setupEventListeners();
}
render() {
this.shadowRoot.innerHTML = `
XNSim
欢迎使用XNSim仿真平台
高效、专业的仿真解决方案
`;
}
setupEventListeners() {
const loginToggle = this.shadowRoot.getElementById('loginToggle');
const registerToggle = this.shadowRoot.getElementById('registerToggle');
const loginForm = this.shadowRoot.getElementById('loginForm');
const registerForm = this.shadowRoot.getElementById('registerForm');
const loginFormElement = this.shadowRoot.getElementById('loginFormElement');
const registerFormElement = this.shadowRoot.getElementById('registerFormElement');
const togglePasswordButtons = this.shadowRoot.querySelectorAll('.toggle-password');
// 创建Toast提示函数
const showToast = (message) => {
const toast = document.createElement('div');
toast.className = 'toast';
toast.textContent = message;
this.shadowRoot.appendChild(toast);
setTimeout(() => toast.classList.add('show'), 10);
setTimeout(() => {
toast.classList.remove('show');
setTimeout(() => toast.remove(), 300);
}, 2000);
};
// 切换表单显示
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');
});
// 密码显示/隐藏
togglePasswordButtons.forEach(button => {
button.addEventListener('click', () => {
const input = button.parentElement.querySelector('input');
const icon = button.querySelector('img');
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';
}
});
});
// 表单提交
loginFormElement.addEventListener('submit', (e) => {
e.preventDefault();
const username = this.shadowRoot.getElementById('loginUsername').value;
const password = this.shadowRoot.getElementById('loginPassword').value;
const remember = this.shadowRoot.getElementById('remember').checked;
if (!username || !password) {
showToast('请输入用户名和密码');
return;
}
this.dispatchEvent(new CustomEvent('login', {
detail: { username, password, remember },
bubbles: true,
composed: true
}));
});
registerFormElement.addEventListener('submit', (e) => {
e.preventDefault();
const username = this.shadowRoot.getElementById('regUsername').value;
const password = this.shadowRoot.getElementById('regPassword').value;
const confirmPassword = this.shadowRoot.getElementById('regConfirmPassword').value;
if (!username || !password) {
showToast('用户名和密码为必填项');
return;
}
if (password !== confirmPassword) {
showToast('两次输入的密码不一致');
return;
}
const userInfo = {
full_name: this.shadowRoot.getElementById('fullName').value.trim() || '',
phone: this.shadowRoot.getElementById('phone').value.trim() || '',
email: this.shadowRoot.getElementById('email').value.trim() || '',
department: this.shadowRoot.getElementById('department').value.trim() || '',
position: this.shadowRoot.getElementById('position').value.trim() || '',
access_level: 1
};
this.dispatchEvent(new CustomEvent('register', {
detail: { username, password, userInfo },
bubbles: true,
composed: true
}));
});
}
}
customElements.define('auth-component', AuthComponent);