439 lines
18 KiB
JavaScript
439 lines
18 KiB
JavaScript
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
|
|
}));
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define('auth-component', AuthComponent);
|