重构登录表单，动态生成HTML并优化动画效果
This commit is contained in:
shuaiplus committed
1 parent
9abaaf4c92
commit
5fc5706c3a
4 files changed
+49
-28
No files matched your search
@@ -14,7 +14,7 @@
|
||||
display: inline-block;
|
||||
font-size: 1.1rem;
|
||||
color: #888;
|
||||
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
transition: 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
min-width: 5px;
|
||||
}
|
||||
|
||||
|
||||
+5
-21
@@ -9,23 +9,9 @@
|
||||
</head>
|
||||
<body> <div class="login-container" id="login-container">
|
||||
<h1>Enter a Node</h1>
|
||||
<form id="login-form"> <div class="input-group">
|
||||
<input id="userName" type="text" autocomplete="username" required minlength="1" maxlength="15" placeholder="">
|
||||
<label for="userName" class="floating-label">
|
||||
<span style="transition-delay:0ms">U</span><span style="transition-delay:50ms">s</span><span style="transition-delay:100ms">e</span><span style="transition-delay:150ms">r</span><span style="transition-delay:200ms">n</span><span style="transition-delay:250ms">a</span><span style="transition-delay:300ms">m</span><span style="transition-delay:350ms">e</span>
|
||||
</label>
|
||||
</div> <div class="input-group">
|
||||
<input id="roomName" type="text" required minlength="1" maxlength="15" placeholder="">
|
||||
<label for="roomName" class="floating-label">
|
||||
<span style="transition-delay:0ms">N</span><span style="transition-delay:50ms">o</span><span style="transition-delay:100ms">d</span><span style="transition-delay:150ms">e</span><span style="transition-delay:200ms"> </span><span style="transition-delay:250ms">N</span><span style="transition-delay:300ms">a</span><span style="transition-delay:350ms">m</span><span style="transition-delay:400ms">e</span>
|
||||
</label>
|
||||
</div> <div class="input-group">
|
||||
<input id="password" type="password" autocomplete="current-password" minlength="1" maxlength="15" placeholder="">
|
||||
<label for="password" class="floating-label">
|
||||
<span style="transition-delay:0ms">N</span><span style="transition-delay:50ms">o</span><span style="transition-delay:100ms">d</span><span style="transition-delay:150ms">e</span><span style="transition-delay:200ms"> </span><span style="transition-delay:250ms">P</span><span style="transition-delay:300ms">a</span><span style="transition-delay:350ms">s</span><span style="transition-delay:400ms">s</span><span style="transition-delay:450ms">w</span><span style="transition-delay:500ms">o</span><span style="transition-delay:550ms">r</span><span style="transition-delay:600ms">d</span><span style="transition-delay:650ms"> </span><span style="transition-delay:700ms" class="optional">(optional)</span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="login-btn">ENTER</button>
|
||||
<form id="login-form">
|
||||
<!-- 登录表单内容将由JavaScript动态生成 -->
|
||||
<!-- Login form content will be dynamically generated by JavaScript -->
|
||||
</form>
|
||||
</div>
|
||||
<div class="container" id="chat-container" style="display:none;">
|
||||
@@ -87,9 +73,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightbar-tabs tabs" id="member-tabs"> </div>
|
||||
<div class="members" id="member-list"> </div>
|
||||
</div> </div>
|
||||
<script type="module" src="./js/main.js"></script>
|
||||
<div class="rightbar-tabs tabs" id="member-tabs"> </div> <div class="members" id="member-list"> </div>
|
||||
</div> </div> <script type="module" src="./js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+7
-3
@@ -50,15 +50,16 @@ import {
|
||||
|
||||
// 从 ui.js 中导入 UI 界面相关的功能
|
||||
// Import user interface functions from ui.js
|
||||
import {
|
||||
renderUserList, // 渲染用户列表 / Render user list
|
||||
import { renderUserList, // 渲染用户列表 / Render user list
|
||||
renderMainHeader, // 渲染主标题栏 / Render main header
|
||||
setupMoreBtnMenu, // 设置更多按钮的下拉菜单 / Setup "more" button menu
|
||||
preventSpaceInput, // 防止输入空格 / Prevent space input in form fields
|
||||
loginFormHandler, // 登录表单提交处理器 / Login form handler
|
||||
openLoginModal, // 打开登录窗口 / Open login modal
|
||||
setupTabs, // 设置页面标签切换 / Setup tab switching
|
||||
autofillRoomPwd // 自动填充房间密码 / Autofill room password
|
||||
autofillRoomPwd, // 自动填充房间密码 / Autofill room password
|
||||
generateLoginForm, // 生成登录表单HTML / Generate login form HTML
|
||||
initLoginForm // 初始化登录表单 / Initialize login form
|
||||
} from './ui.js';
|
||||
|
||||
// 设置全局配置参数
|
||||
@@ -78,6 +79,9 @@ window.setupEmojiPicker = setupEmojiPicker;
|
||||
// 当 DOM 内容加载完成后执行初始化逻辑
|
||||
// Run initialization logic when the DOM content is fully loaded
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
// 初始化登录表单 / Initialize login form
|
||||
initLoginForm();
|
||||
|
||||
const loginForm = $id('login-form'); // 登录表单 / Login form
|
||||
|
||||
if (loginForm) {
|
||||
|
||||
+36
-3
@@ -294,12 +294,36 @@ export function loginFormHandler(modal) {
|
||||
}
|
||||
}
|
||||
|
||||
// Open the login modal dialog
|
||||
// 打开登录弹窗
|
||||
// 生成登录表单HTML
|
||||
// Generate login form HTML
|
||||
export function generateLoginForm(isModal = false) {
|
||||
const idPrefix = isModal ? '-modal' : '';
|
||||
return `
|
||||
<div class="input-group">
|
||||
<input id="userName${idPrefix}" type="text" autocomplete="username" required minlength="1" maxlength="15" placeholder="">
|
||||
<label for="userName${idPrefix}" class="floating-label">
|
||||
<span style="transition-delay:0ms">U</span><span style="transition-delay:40ms">s</span><span style="transition-delay:80ms">e</span><span style="transition-delay:120ms">r</span><span style="transition-delay:160ms">n</span><span style="transition-delay:200ms">a</span><span style="transition-delay:240ms">m</span><span style="transition-delay:280ms">e</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input id="roomName${idPrefix}" type="text" required minlength="1" maxlength="15" placeholder="">
|
||||
<label for="roomName${idPrefix}" class="floating-label">
|
||||
<span style="transition-delay:0ms">N</span><span style="transition-delay:40ms">o</span><span style="transition-delay:80ms">d</span><span style="transition-delay:120ms">e</span><span style="transition-delay:160ms"> </span><span style="transition-delay:200ms">N</span><span style="transition-delay:240ms">a</span><span style="transition-delay:280ms">m</span><span style="transition-delay:320ms">e</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input id="password${idPrefix}" type="password" autocomplete="${isModal ? 'off' : 'current-password'}" minlength="1" maxlength="15" placeholder="">
|
||||
<label for="password${idPrefix}" class="floating-label">
|
||||
<span style="transition-delay:0ms">N</span><span style="transition-delay:40ms">o</span><span style="transition-delay:80ms">d</span><span style="transition-delay:120ms">e</span><span style="transition-delay:160ms"> </span><span style="transition-delay:200ms">P</span><span style="transition-delay:240ms">a</span><span style="transition-delay:280ms">s</span><span style="transition-delay:320ms">s</span><span style="transition-delay:360ms">w</span><span style="transition-delay:400ms">o</span><span style="transition-delay:440ms">r</span><span style="transition-delay:480ms">d</span><span style="transition-delay:520ms"> </span><span style="transition-delay:560ms" class="optional">(optional)</span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="login-btn">ENTER</button>
|
||||
`;
|
||||
}
|
||||
export function openLoginModal() {
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'login-modal';
|
||||
modal.innerHTML = `<div class="login-modal-bg"></div><div class="login-modal-card"><button class="login-modal-close login-modal-close-abs">×</button><h1>Enter a Node</h1><form id="login-form-modal"><div class="input-group"><label for="userName-modal">Username</label><input id="userName-modal"type="text"autocomplete="username"required minlength="1"maxlength="15"></div><div class="input-group"><label for="roomName-modal">Node Name</label><input id="roomName-modal"type="text"required minlength="1"maxlength="15"></div><div class="input-group"><label for="password-modal">Node Password<span class="optional">(optional)</span></label><input id="password-modal"type="password"autocomplete="off"minlength="1"maxlength="15"></div><button type="submit"class="login-btn">ENTER</button></form></div>`;
|
||||
modal.innerHTML = `<div class="login-modal-bg"></div><div class="login-modal-card"><button class="login-modal-close login-modal-close-abs">×</button><h1>Enter a Node</h1><form id="login-form-modal">${generateLoginForm(true)}</form></div>`;
|
||||
document.body.appendChild(modal);
|
||||
modal.querySelector('.login-modal-close').onclick = () => modal.remove();
|
||||
preventSpaceInput(modal.querySelector('#userName-modal'));
|
||||
@@ -347,4 +371,13 @@ export function autofillRoomPwd(formPrefix = '') {
|
||||
if (room || pwd) {
|
||||
window.history.replaceState({}, '', location.pathname)
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化登录表单
|
||||
// Initialize login form
|
||||
export function initLoginForm() {
|
||||
const loginFormContainer = document.getElementById('login-form');
|
||||
if (loginFormContainer) {
|
||||
loginFormContainer.innerHTML = generateLoginForm(false);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user