XNSim/XNSimHtml/components/auth-component.js

class AuthComponent extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.render();
        this.setupEventListeners();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                    height: 100vh;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #f5f7fa;
                }
                .container {
                    width: 90%;
                    max-width: 1200px;
                    min-height: 600px;
                    background: white;
                    border-radius: 20px;
                    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                    display: flex;
                    overflow: hidden;
                }
                .content {
                    flex: 1;
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    padding: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                }
                .welcome-section {
                    text-align: center;
                }
                .welcome-section h1 {
                    font-size: 3.5rem;
                    margin-bottom: 2rem;
                    font-weight: 700;
                    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
                }
                .welcome-text {
                    font-size: 1.2rem;
                    line-height: 1.8;
                    opacity: 0.9;
                }
                .auth-container {
                    width: 500px;
                    background: white;
                    padding: 40px;
                    display: flex;
                    flex-direction: column;
                }
                .form-toggle {
                    display: flex;
                    margin-bottom: 30px;
                    border-radius: 8px;
                    overflow: hidden;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                }
                .toggle-btn {
                    flex: 1;
                    padding: 15px;
                    border: none;
                    background: #f0f0f0;
                    cursor: pointer;
                    font-size: 1rem;
                    font-weight: 500;
                    transition: all 0.3s ease;
                }
                .toggle-btn.active {
                    background: #667eea;
                    color: white;
                }
                .form-panel {
                    display: none;
                    animation: fadeIn 0.3s ease;
                    margin-top: 10px;
                }
                @keyframes fadeIn {
                    from { opacity: 0; transform: translateY(10px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                .form-panel.active {
                    display: block;
                }
                .form-group {
                    margin-bottom: 20px;
                }
                .form-row {
                    display: flex;
                    gap: 20px;
                    margin-bottom: 20px;
                }
                .form-row .form-group {
                    flex: 1;
                    margin-bottom: 0;
                }
                label {
                    display: block;
                    margin-bottom: 8px;
                    color: #555;
                    font-weight: 500;
                }
                input {
                    width: 100%;
                    padding: 12px 15px;
                    border: 2px solid #eee;
                    border-radius: 8px;
                    font-size: 1rem;
                    transition: all 0.3s ease;
                }
                input:focus {
                    border-color: #667eea;
                    outline: none;
                    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
                }
                .password-input {
                    position: relative;
                    display: flex;
                    align-items: center;
                }
                .password-input input {
                    padding-right: 40px;
                }
                .toggle-password {
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    background: none;
                    border: none;
                    padding: 5px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: opacity 0.3s ease;
                }
                .toggle-password:hover {
                    opacity: 0.7;
                }
                .toggle-password:focus {
                    outline: none;
                }
                .visibility-icon {
                    width: 20px;
                    height: 20px;
                    object-fit: contain;
                }
                .remember-me {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    margin-bottom: 20px;
                }
                .remember-me input {
                    width: auto;
                }
                .submit-btn {
                    width: 100%;
                    padding: 15px;
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    border: none;
                    border-radius: 8px;
                    color: white;
                    font-size: 1rem;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.3s ease;
                }
                .submit-btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
                }
                .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;
                }
                @media (max-width: 1024px) {
                    .container {
                        flex-direction: column;
                        min-height: auto;
                        margin: 20px;
                    }
                    .content {
                        padding: 40px;
                    }
                    .auth-container {
                        width: 100%;
                    }
                }
                @media (max-width: 480px) {
                    .container {
                        margin: 0;
                        border-radius: 0;
                    }
                    .auth-container {
                        padding: 20px;
                    }
                    .welcome-section h1 {
                        font-size: 2.5rem;
                    }
                    .form-row {
                        flex-direction: column;
                        gap: 15px;
                    }
                }
            </style>
            <div class="container">
                <div class="content">
                    <div class="welcome-section">
                        <h1>XNSim</h1>
                        <div class="welcome-text">
                            <p>欢迎使用XNSim仿真平台</p>
                            <p>高效、专业的仿真解决方案</p>
                        </div>
                    </div>
                </div>
                <div class="auth-container">
                    <div class="form-toggle">
                        <button id="loginToggle" class="toggle-btn active">登录</button>
                        <button id="registerToggle" class="toggle-btn">注册</button>
                    </div>
                    
                    <div id="loginForm" class="form-panel active">
                        <form id="loginFormElement">
                            <div class="form-group">
                                <label for="loginUsername">用户名</label>
                                <input type="text" id="loginUsername" name="username" placeholder="请输入用户名" required>
                            </div>
                            <div class="form-group">
                                <label for="loginPassword">密码</label>
                                <div class="password-input">
                                    <input type="password" id="loginPassword" name="password" placeholder="请输入密码" required>
                                    <button type="button" class="toggle-password">
                                        <img src="assets/icons/png/invisiable_b.png" alt="显示/隐藏密码" class="visibility-icon">
                                    </button>
                                </div>
                            </div>
                            <div class="form-group remember-me">
                                <input type="checkbox" id="remember" name="remember">
                                <label for="remember">记住我</label>
                            </div>
                            <button type="submit" class="submit-btn">登录</button>
                        </form>
                    </div>

                    <div id="registerForm" class="form-panel">
                        <form id="registerFormElement">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="regUsername">用户名 *</label>
                                    <input type="text" id="regUsername" name="username" placeholder="请输入用户名" required>
                                </div>
                                <div class="form-group">
                                    <label for="fullName">姓名（选填）</label>
                                    <input type="text" id="fullName" name="fullName" placeholder="请输入姓名">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="regPassword">密码 *</label>
                                    <div class="password-input">
                                        <input type="password" id="regPassword" name="password" placeholder="请输入密码" required>
                                        <button type="button" class="toggle-password">
                                            <img src="assets/icons/png/invisiable_b.png" alt="显示/隐藏密码" class="visibility-icon">
                                        </button>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="regConfirmPassword">确认密码 *</label>
                                    <div class="password-input">
                                        <input type="password" id="regConfirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
                                        <button type="button" class="toggle-password">
                                            <img src="assets/icons/png/invisiable_b.png" alt="显示/隐藏密码" class="visibility-icon">
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="phone">电话（选填）</label>
                                    <input type="tel" id="phone" name="phone" placeholder="请输入电话号码">
                                </div>
                                <div class="form-group">
                                    <label for="email">邮箱（选填）</label>
                                    <input type="email" id="email" name="email" placeholder="请输入邮箱">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="department">部门（选填）</label>
                                    <input type="text" id="department" name="department" placeholder="请输入所属部门">
                                </div>
                                <div class="form-group">
                                    <label for="position">职位（选填）</label>
                                    <input type="text" id="position" name="position" placeholder="请输入职位">
                                </div>
                            </div>
                            <button type="submit" class="submit-btn">注册</button>
                        </form>
                    </div>
                </div>
            </div>
        `;
    }

    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
            }));
        });
    }

    reset() {
        // 重置表单
        const loginForm = this.shadowRoot.getElementById('loginFormElement');
        const registerForm = this.shadowRoot.getElementById('registerFormElement');
        if (loginForm) loginForm.reset();
        if (registerForm) registerForm.reset();

        // 切换到登录表单
        const loginToggle = this.shadowRoot.getElementById('loginToggle');
        const registerToggle = this.shadowRoot.getElementById('registerToggle');
        const loginFormPanel = this.shadowRoot.getElementById('loginForm');
        const registerFormPanel = this.shadowRoot.getElementById('registerForm');

        if (loginToggle && registerToggle && loginFormPanel && registerFormPanel) {
            loginToggle.classList.add('active');
            registerToggle.classList.remove('active');
            loginFormPanel.classList.add('active');
            registerFormPanel.classList.remove('active');
        }
    }
}

customElements.define('auth-component', AuthComponent);