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:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user