+15
-2
@@ -49,6 +49,10 @@ body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:1
|
||||
.field-input{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:9px;color:var(--text);font-size:13.5px;font-family:var(--font);outline:none;transition:border .15s,box-shadow .15s;background:#fff}
|
||||
.field-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
|
||||
.field-input::placeholder{color:var(--text4)}
|
||||
/* Show/hide password (eye) button */
|
||||
.pw-wrap{position:relative}.pw-wrap .field-input{padding-right:42px}
|
||||
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;background:transparent;cursor:pointer;color:var(--text4);display:flex;align-items:center;justify-content:center;border-radius:6px}
|
||||
.pw-eye:hover{color:var(--blue);background:rgba(37,99,235,.08)}
|
||||
.login-row2{display:flex;align-items:center;justify-content:flex-end;margin:-8px 0 18px}
|
||||
.forgot-link{font-size:12px;font-weight:600;color:var(--blue);background:none;border:none;cursor:pointer;font-family:var(--font);padding:0}
|
||||
.forgot-link:hover{color:var(--blue2);text-decoration:underline}
|
||||
@@ -304,7 +308,8 @@ function buildLogin(){
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="field-label">Password</label>
|
||||
<input class="field-input" id="l-pass" type="password" placeholder="Enter password" autocomplete="current-password"/>
|
||||
<div class="pw-wrap"><input class="field-input" id="l-pass" type="password" placeholder="Enter password" autocomplete="current-password"/>
|
||||
<button type="button" class="pw-eye" id="l-eye" title="Show password" aria-label="Show password"></button></div>
|
||||
</div>
|
||||
<div class="login-row2"><button type="button" class="forgot-link" id="l-forgot">Forgot password?</button></div>
|
||||
<button class="btn-login" id="l-btn">Sign In</button>
|
||||
@@ -401,6 +406,14 @@ function buildLogin(){
|
||||
};
|
||||
wrap.querySelector('#l-btn').onclick=go;
|
||||
wrap.querySelector('#l-pass').addEventListener('keydown',e=>{if(e.key==='Enter')go();});
|
||||
// Eye button: toggle password visibility (keeps focus/cursor in the field).
|
||||
(()=>{const pw=wrap.querySelector('#l-pass'),eye=wrap.querySelector('#l-eye');if(!pw||!eye)return;
|
||||
const EYE='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>';
|
||||
const OFF='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 19c-6.5 0-10-7-10-7a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c6.5 0 10 7 10 7a18.5 18.5 0 0 1-2.16 3.19"/><path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"/><line x1="2" y1="2" x2="22" y2="22"/></svg>';
|
||||
eye.innerHTML=EYE;
|
||||
eye.addEventListener('mousedown',e=>e.preventDefault());
|
||||
eye.addEventListener('click',()=>{const show=pw.type==='password';pw.type=show?'text':'password';eye.innerHTML=show?OFF:EYE;
|
||||
eye.title=show?'Hide password':'Show password';eye.setAttribute('aria-label',eye.title);pw.focus();});})();
|
||||
wrap.querySelector('#l-forgot').onclick=openForgot;
|
||||
wrap.querySelector('#fp-overlay').onclick=e=>{if(e.target.id==='fp-overlay')closeForgot();};
|
||||
wrap.querySelector('#l-user').focus();
|
||||
@@ -689,6 +702,6 @@ async function loadPendingCounts(root){
|
||||
if(window._injectLucide)window._injectLucide();
|
||||
})();
|
||||
</script>
|
||||
<script src="/sidebar.js?v=25"></script>
|
||||
<script src="/sidebar.js?v=31"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user