)<[^<]*)*<\/script>/gi, '');
avatarEl.innerHTML = cleanSvg
}
if (!isMe) {
div.onclick = () => togglePrivateChat(user.clientId, safeUserName)
}
return div
}
// Setup the 'more' button menu
// 设置"更多"按钮菜单
export function setupMoreBtnMenu() {
const btn = $id('more-btn');
const menu = $id('more-menu');
if (!btn || !menu) return;
let animating = false;
// Open the menu
// 打开菜单
function openMenu() {
menu.style.display = 'block';
menu.classList.remove('close');
// 强制触发重绘，然后添加打开动画
menu.offsetHeight; // 强制重绘
menu.classList.add('open');
}
// Close the menu
// 关闭菜单
function closeMenu() {
if (animating) return;
animating = true;
menu.classList.remove('open');
menu.classList.add('close');
setTimeout(() => {
if (menu.classList.contains('close')) menu.style.display = 'none';
animating = false;
}, 300);
}
btn.onclick = function(e) {
e.stopPropagation();
if (menu.classList.contains('open')) {
closeMenu();
} else {
openMenu();
}
};
menu.onclick = function(e) {
if (e.target.classList.contains('more-menu-item')) {
const action = e.target.dataset.action;
executeMenuAction(action, closeMenu);
}
};
document.addEventListener('click', function hideMenu(ev) {
if (!menu.contains(ev.target) && ev.target !== btn) {
closeMenu();
}
});
menu.addEventListener('animationend', function(e) {
animating = false;
});
menu.addEventListener('transitionend', function(e) {
animating = false;
});
}
// Prevent space and special character input
// 禁止输入空格和特殊字符
export function preventSpaceInput(input) {
if (!input) return;
input.addEventListener('keydown', function(e) {
if (e.key === ' ' || (/[\u0000-\u007f]/.test(e.key) && /[\p{P}\p{S}]/u.test(e.key) && e.key !== "'")) {
e.preventDefault()
}
});
input.addEventListener('input', function(e) {
input.value = input.value.replace(/[\s\p{P}\p{S}]/gu, function(match) {
return match === "'" ? "'" : ''
})
})
}
// Login form submit handler
// 登录表单提交处理函数
export function loginFormHandler(modal) {
return function(e) {
e.preventDefault();
let userName, roomName, password, btn, roomInput, warnTip;
if (modal) {
userName = document.getElementById('userName-modal').value.trim();
roomName = document.getElementById('roomName-modal').value.trim();
password = document.getElementById('password-modal').value.trim();
btn = modal.querySelector('.login-btn');
roomInput = document.getElementById('roomName-modal')
} else {
userName = document.getElementById('userName').value.trim();
roomName = document.getElementById('roomName').value.trim();
password = document.getElementById('password').value.trim();
btn = document.querySelector('#login-form .login-btn');
roomInput = document.getElementById('roomName')
}
const exists = roomsData.some(rd => rd.roomName && rd.roomName.toLowerCase() === roomName.toLowerCase());
if (roomInput) {
roomInput.style.border = '';
roomInput.style.background = '';
if (roomInput._warnTip) {
roomInput.parentNode.removeChild(roomInput._warnTip);
roomInput._warnTip = null
}
}
if (exists) {
if (roomInput) {
roomInput.style.border = '1.5px solid #e74c3c';
roomInput.style.background = '#fff6f6';
warnTip = document.createElement('div');
warnTip.style.color = '#e74c3c';
warnTip.style.fontSize = '13px';
warnTip.style.marginTop = '4px';
warnTip.textContent = t('ui.node_exists', 'Node already exists');
roomInput.parentNode.appendChild(warnTip);
roomInput._warnTip = warnTip;
roomInput.focus()
} if (btn) {
btn.disabled = false;
btn.innerText = t('ui.enter', 'ENTER')
}
return
} if (btn) {
btn.disabled = true;
btn.innerText = t('ui.connecting', 'Connecting...')
}
window.joinRoom(userName, roomName, password, modal, function(success) {
if (!success && btn) {
btn.disabled = false;
btn.innerText = 'ENTER'
}
})
}
}
// 生成登录表单HTML
// Generate login form HTML
export function generateLoginForm(isModal = false) {
const idPrefix = isModal ? '-modal' : '';
return `
`;
}
export function openLoginModal() {
const modal = document.createElement('div');
modal.className = 'login-modal';
modal.innerHTML = `${t('ui.enter_node', 'Enter a Node')}
`;
document.body.appendChild(modal);
modal.querySelector('.login-modal-close').onclick = () => modal.remove();
preventSpaceInput(modal.querySelector('#userName-modal'));
preventSpaceInput(modal.querySelector('#roomName-modal'));
preventSpaceInput(modal.querySelector('#password-modal')); const form = modal.querySelector('#login-form-modal');
form.addEventListener('submit', loginFormHandler(modal));
autofillRoomPwd('-modal')
}
// Setup member list tabs
// 设置成员列表标签页
export function setupTabs() {
const tabs = document.getElementById("member-tabs").children;
for (let i = 0; i < tabs.length; i++) {
tabs[i].onclick = function() {
for (let j = 0; j < tabs.length; j++) tabs[j].classList.remove("active");
this.classList.add("active")
}
}
}
// Autofill room and password from URL
// 从 URL 自动填充房间和密码
export function autofillRoomPwd(formPrefix = '') {
const params = new URLSearchParams(window.location.search);
// Check for new encrypted format first
const encryptedRoom = params.get('r');
const encryptedPwd = params.get('p');
// Check for old plaintext format (for backward compatibility)
const plaintextRoom = params.get('node');
const plaintextPwd = params.get('pwd');
let roomValue = '';
let pwdValue = '';
let isPlaintext = false;
if (encryptedRoom) {
// New encrypted format
roomValue = simpleDecrypt(decodeURIComponent(encryptedRoom));
if (encryptedPwd) {
pwdValue = simpleDecrypt(decodeURIComponent(encryptedPwd));
}
} else if (plaintextRoom) {
// Old plaintext format - show security warning
roomValue = decodeURIComponent(plaintextRoom);
if (plaintextPwd) {
pwdValue = decodeURIComponent(plaintextPwd);
}
isPlaintext = true;
// Show security warning for plaintext URLs
if (window.addSystemMsg) {
window.addSystemMsg(t('system.security_warning', '⚠️ This link uses an old format. Room data is not encrypted.'), true);
}
}
// Fill in the form fields
if (roomValue) {
const roomInput = document.getElementById(formPrefix + 'roomName');
if (roomInput) {
roomInput.value = roomValue;
roomInput.readOnly = true;
roomInput.style.background = isPlaintext ? '#fff9e6' : '#f5f5f5'; // Yellow tint for plaintext
}
// Always lock password field when coming from a share link
const pwdInput = document.getElementById(formPrefix + 'password');
if (pwdInput) {
pwdInput.value = pwdValue; // Will be empty string if no password
pwdInput.readOnly = true;
pwdInput.style.background = isPlaintext ? '#fff9e6' : '#f5f5f5'; // Yellow tint for plaintext
// Add visual indicator for no password and keep label floating
if (!pwdValue) {
pwdInput.placeholder = 'No password required';
// Add a space to make the input appear "filled" so the label stays floating
pwdInput.value = ' ';
// Make the text invisible but keep the label floating behavior
pwdInput.style.color = 'transparent';
}
}
}
// Clear URL parameters for security
if (roomValue || pwdValue) {
window.history.replaceState({}, '', location.pathname);
}
}
// 初始化登录表单
// Initialize login form
export function initLoginForm() {
const loginFormContainer = document.getElementById('login-form');
if (loginFormContainer && loginFormContainer.children.length === 0) {
// 只有当登录表单为空时才初始化
// Only initialize if login form is empty
loginFormContainer.innerHTML = generateLoginForm(false);
}
// 为登录页面添加class，用于手机适配
// Add class to login page for mobile adaptation
document.body.classList.add('login-page');
}
// Listen for language change events to refresh UI
// 监听语言变更事件刷新UI
window.addEventListener('languageChange', () => {
// Refresh main header and user list
renderMainHeader();
renderUserList(false);
// Refresh chat input placeholder
updateChatInputStyle();
});
// Listen for regenerate login form event
// 监听重新生成登录表单事件
window.addEventListener('regenerateLoginForm', () => {
const loginFormContainer = document.getElementById('login-form');
if (loginFormContainer) {
loginFormContainer.innerHTML = generateLoginForm(false);
}
});
// 初始化翻转卡片功能
// Initialize flip card functionality
export function initFlipCard() {
const flipCard = document.getElementById('flip-card');
const helpBtn = document.getElementById('help-btn');
const backBtn = document.getElementById('back-btn');
if (!flipCard || !helpBtn || !backBtn) return;
const flipCardInner = flipCard.querySelector('.flip-card-inner');
if (!flipCardInner) return;
// 翻转状态
let isFlipped = false;
// 简单的翻转函数
function toggleFlip() {
isFlipped = !isFlipped;
if (isFlipped) {
flipCardInner.classList.add('flipped');
} else {
flipCardInner.classList.remove('flipped');
}
}
// 帮助按钮点击事件
helpBtn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
toggleFlip();
});
// 返回按钮点击事件
backBtn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
toggleFlip();
});
}