feat: add password visibility toggle functionality

Author: chenxuan520

static/online_mode.js

@@ -335,7 +335,10 @@ class OnlineModeManager {
                         </div>
                         <div class="form-group">
                             <label>密码:</label>
-                            <input type="password" id="loginPassword" class="login-input" placeholder="请输入密码" required>
+                            <div class="password-wrapper">
+                                <input type="password" id="loginPassword" class="login-input" placeholder="请输入密码" required>
+                                <button type="button" id="togglePassword" class="toggle-password"></button>
+                            </div>
                         </div>
                         <button type="submit" class="btn login-btn">登录</button>
                     </form>
@@ -367,6 +370,22 @@ class OnlineModeManager {
                 });
             }
 
+            // 新增：密码显示/隐藏切换功能
+            const togglePassword = document.getElementById('togglePassword');
+            const passwordInput = document.getElementById('loginPassword');
+
+            const eyeIconSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/><path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/></svg>`;
+            const eyeSlashIconSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/><path d="M5.525 7.646a2.5 2.5-0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/></svg>`;
+
+            if (togglePassword && passwordInput) {
+                togglePassword.innerHTML = eyeIconSVG; // 默认显示睁眼
+                togglePassword.addEventListener('click', () => {
+                    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+                    passwordInput.setAttribute('type', type);
+                    togglePassword.innerHTML = type === 'password' ? eyeIconSVG : eyeSlashIconSVG;
+                });
+            }
+
             document.getElementById('loginForm').addEventListener('submit', (e) => {
                 e.preventDefault();
                 this.handleLogin();

static/style.css

@@ -2861,4 +2861,42 @@ body.dark-mode .leaflet-tile {
     vertical-align: middle;
 }
 
+/* 密码输入框 “小眼睛” 样式 */
+.password-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.password-wrapper .login-input {
+    /* Make space for the icon */
+    padding-right: 40px !important;
+}
+
+.toggle-password {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    user-select: none; /* Prevent text selection */
+    background: transparent;
+    border: none;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+}
+
+.toggle-password:hover {
+    color: var(--text-primary);
+}
+
+.toggle-password svg {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+}
+