From a120bec14f1c4cb381c3c0600700e0b2c71957da Mon Sep 17 00:00:00 2001
From: Warren <warren@momentry.ddns.net>
Date: Sat, 16 May 2026 21:57:47 +0800
Subject: [PATCH] feat: Add password visibility toggle with eye icon to
 AdminLoginModal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhanced features:
1. Enter key submission (strengthened):
   - onkeypress=handleAdminKeyPress(event) on password input
   - Cross-browser support: e.key==='Enter' || e.keyCode===13
   - Calls submitAdminLogin() on Enter press

2. Password visibility toggle (NEW):
   - Eye icon (👁) button positioned inside password input
   - Click 👁 → shows password (type='text') + icon changes to 🙈
   - Click 🙈 → hides password (type='password') + icon changes to 👁
   - New function: toggleAdminPassword()
   - Absolute positioning: right:8px, top:50%, transform:translateY(-50%)

UI improvements:
- Password input wrapped in relative-positioned div
- Toggle button uses existing .mb-password-toggle class
- Clear password type on modal reopen (always starts as 'password')
- Better UX: keyboard + visual feedback

Files changed:
- src/page.html: +15 lines (toggle function + UI structure)

User workflow:
1. Open Settings → password modal
2. Type password OR click 👁 to see password
3. Press Enter OR click Login button
4. Both methods work seamlessly

Status: Features complete, server running
---
 src/page.html | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/page.html b/src/page.html
index 94dd215..c613edb 100644
--- a/src/page.html
+++ b/src/page.html
@@ -197,18 +197,35 @@ function showAdminLoginModal(){
         m.id='mb-admin-modal';
         m.innerHTML='<button class=mb-admin-close onclick=this.parentElement.classList.remove("active")>✕</button>'+
         '<div class=mb-admin-title>Admin Authentication Required</div>'+
+        '<div style="position:relative">'+
         '<input class=mb-admin-input type=password id=admin-password placeholder="Enter admin password" onkeypress=handleAdminKeyPress(event)>'+
+        '<button class=mb-password-toggle style="position:absolute;right:8px;top:50%;transform:translateY(-50%)" onclick=toggleAdminPassword()>👁</button>'+
+        '</div>'+
         '<button class=mb-admin-btn onclick=submitAdminLogin()>Login</button>'+
         '<div class=mb-admin-error id=admin-error></div>';
         document.body.appendChild(m);
     }
     
     document.getElementById('admin-password').value='';
+    document.getElementById('admin-password').type='password';
     document.getElementById('admin-error').textContent='';
     m.classList.add('active');
     document.getElementById('admin-password').focus();
 }
 
+function toggleAdminPassword(){
+    var pwdInput=document.getElementById('admin-password');
+    var toggleBtn=pwdInput.parentElement.querySelector('.mb-password-toggle');
+    
+    if(pwdInput.type==='password'){
+        pwdInput.type='text';
+        toggleBtn.textContent='🙈';
+    }else{
+        pwdInput.type='password';
+        toggleBtn.textContent='👁';
+    }
+}
+
 function handleAdminKeyPress(e){
     if(e.key==='Enter'||e.keyCode===13){
         submitAdminLogin();