557 lines
23 KiB
JavaScript
557 lines
23 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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
.container {
|
|
width: 90%;
|
|
max-width: 1000px;
|
|
min-height: 600px;
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
|
|
display: flex;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.content {
|
|
flex: 1;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 60px 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.content::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(180deg); }
|
|
}
|
|
.welcome-section {
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.welcome-section h1 {
|
|
font-size: 4rem;
|
|
margin-bottom: 1.5rem;
|
|
font-weight: 800;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
letter-spacing: 2px;
|
|
}
|
|
.welcome-text {
|
|
font-size: 1.3rem;
|
|
line-height: 1.8;
|
|
opacity: 0.95;
|
|
font-weight: 300;
|
|
}
|
|
.welcome-text p {
|
|
margin: 0.5rem 0;
|
|
}
|
|
.auth-container {
|
|
width: 450px;
|
|
background: white;
|
|
padding: 50px 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
.form-toggle {
|
|
display: flex;
|
|
margin-bottom: 40px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
background: #f8f9fa;
|
|
padding: 4px;
|
|
}
|
|
.toggle-btn {
|
|
flex: 1;
|
|
padding: 16px 20px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
border-radius: 8px;
|
|
color: #6c757d;
|
|
}
|
|
.toggle-btn.active {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
|
}
|
|
.form-panel {
|
|
display: none;
|
|
animation: slideIn 0.4s ease;
|
|
margin-top: 10px;
|
|
}
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.form-panel.active {
|
|
display: block;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 25px;
|
|
width: 100%;
|
|
}
|
|
.form-row {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 25px;
|
|
width: 100%;
|
|
}
|
|
.form-row .form-group {
|
|
flex: 1;
|
|
margin-bottom: 0;
|
|
min-width: 0;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
color: #495057;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
padding: 15px 18px;
|
|
border: 2px solid #e9ecef;
|
|
border-radius: 12px;
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
background: #f8f9fa;
|
|
box-sizing: border-box;
|
|
height: 52px;
|
|
}
|
|
input:focus {
|
|
border-color: #667eea;
|
|
outline: none;
|
|
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
|
|
background: white;
|
|
}
|
|
.password-input {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
.password-input input {
|
|
padding-right: 50px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.toggle-password {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
border-radius: 6px;
|
|
z-index: 2;
|
|
}
|
|
.toggle-password:hover {
|
|
background: rgba(102, 126, 234, 0.1);
|
|
}
|
|
.toggle-password:focus {
|
|
outline: none;
|
|
}
|
|
.visibility-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
object-fit: contain;
|
|
opacity: 0.6;
|
|
}
|
|
.submit-btn {
|
|
width: 100%;
|
|
padding: 18px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border: none;
|
|
border-radius: 12px;
|
|
color: white;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
margin-top: 10px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.submit-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
.submit-btn:hover::before {
|
|
left: 100%;
|
|
}
|
|
.submit-btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
|
|
}
|
|
.submit-btn:active {
|
|
transform: translateY(-1px);
|
|
}
|
|
.toast {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
color: white;
|
|
padding: 15px 25px;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
z-index: 10000;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.toast.show {
|
|
opacity: 1;
|
|
}
|
|
.required-field::after {
|
|
content: ' *';
|
|
color: #dc3545;
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.container {
|
|
flex-direction: column;
|
|
min-height: auto;
|
|
margin: 20px;
|
|
max-width: 500px;
|
|
}
|
|
.content {
|
|
padding: 40px 30px;
|
|
}
|
|
.auth-container {
|
|
width: 100%;
|
|
padding: 40px 30px;
|
|
}
|
|
.welcome-section h1 {
|
|
font-size: 3rem;
|
|
}
|
|
.form-row {
|
|
gap: 15px;
|
|
}
|
|
}
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
margin: 0;
|
|
border-radius: 0;
|
|
min-height: 100vh;
|
|
}
|
|
.auth-container {
|
|
padding: 30px 20px;
|
|
}
|
|
.welcome-section h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
.form-row {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
.form-row .form-group {
|
|
flex: none;
|
|
width: 100%;
|
|
}
|
|
.form-toggle {
|
|
margin-bottom: 30px;
|
|
}
|
|
.toggle-btn {
|
|
padding: 14px 16px;
|
|
font-size: 1rem;
|
|
}
|
|
input {
|
|
height: 48px;
|
|
padding: 12px 16px;
|
|
}
|
|
.password-input input {
|
|
padding-right: 45px;
|
|
}
|
|
.toggle-password {
|
|
right: 12px;
|
|
padding: 6px;
|
|
}
|
|
.visibility-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
</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" class="required-field">用户名</label>
|
|
<input type="text" id="loginUsername" name="username" placeholder="请输入用户名" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="loginPassword" class="required-field">密码</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>
|
|
<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" class="required-field">用户名</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" class="required-field">密码</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" class="required-field">确认密码</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;
|
|
|
|
if (!username || !password) {
|
|
console.error('A03032001: 请输入用户名和密码');
|
|
showToast('请输入用户名和密码');
|
|
return;
|
|
}
|
|
|
|
this.dispatchEvent(new CustomEvent('login', {
|
|
detail: { username, password },
|
|
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) {
|
|
console.error('A03032002: 用户名和密码为必填项');
|
|
showToast('用户名和密码为必填项');
|
|
return;
|
|
}
|
|
|
|
if (password !== confirmPassword) {
|
|
console.error('A03032003: 两次输入的密码不一致');
|
|
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);
|