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.id='mb-admin-modal';
|
||||||
m.innerHTML='<button class=mb-admin-close onclick=this.parentElement.classList.remove("active")>✕</button>'+
|
m.innerHTML='<button class=mb-admin-close onclick=this.parentElement.classList.remove("active")>✕</button>'+
|
||||||
'<div class=mb-admin-title>Admin Authentication Required</div>'+
|
'<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)>'+
|
'<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>'+
|
'<button class=mb-admin-btn onclick=submitAdminLogin()>Login</button>'+
|
||||||
'<div class=mb-admin-error id=admin-error></div>';
|
'<div class=mb-admin-error id=admin-error></div>';
|
||||||
document.body.appendChild(m);
|
document.body.appendChild(m);
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('admin-password').value='';
|
document.getElementById('admin-password').value='';
|
||||||
|
document.getElementById('admin-password').type='password';
|
||||||
document.getElementById('admin-error').textContent='';
|
document.getElementById('admin-error').textContent='';
|
||||||
m.classList.add('active');
|
m.classList.add('active');
|
||||||
document.getElementById('admin-password').focus();
|
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){
|
function handleAdminKeyPress(e){
|
||||||
if(e.key==='Enter'||e.keyCode===13){
|
if(e.key==='Enter'||e.keyCode===13){
|
||||||
submitAdminLogin();
|
submitAdminLogin();
|
||||||
|
|||||||
Reference in New Issue
Block a user