feat: Add password visibility toggle with eye icon to AdminLoginModal

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
This commit is contained in:
Warren
2026-05-16 21:57:47 +08:00
parent 2611874b14
commit a120bec14f

View File

@@ -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();