fix: toggle voir/cacher mot de passe + label 'Email or username'
FlowDeck CI / test (push) Failing after 3s
FlowDeck CI / docker (push) Has been skipped

- Bouton 👁/🙈 dans le champ password (login + register)
- Label changé de 'Email' à 'Email or username' (les users créés via admin ont un login, pas forcément un email)
- Type email → type text pour accepter les usernames
This commit is contained in:
2026-07-13 13:34:18 -04:00
parent e01e410d43
commit e42c5e1e4b
+13 -3
View File
@@ -27,7 +27,10 @@ body{background:#191919;color:#fff;font-family:-apple-system,BlinkMacSystemFont,
.login-box p{color:rgba(255,255,255,.5);font-size:14px;margin-bottom:24px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-bottom:6px;}
.form-group input{width:100%;padding:10px 12px;background:#2A2A2A;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-size:14px;outline:none;}
.form-group input{width:100%;padding:10px 36px 10px 12px;background:#2A2A2A;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-size:14px;outline:none;}
.pw-wrapper{position:relative;}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:16px;padding:4px;line-height:1;}
.pw-toggle:hover{color:rgba(255,255,255,.8);}
.form-group input:focus{border-color:#2383E2;box-shadow:0 0 0 1px #2383E2;}
.btn{width:100%;padding:12px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;margin-top:8px;}
.btn-primary{background:#2383E2;color:#fff;}
@@ -55,8 +58,14 @@ body{background:#191919;color:#fff;font-family:-apple-system,BlinkMacSystemFont,
<div id="error-msg" class="error"></div>
<div id="success-msg" class="success"></div>
<form id="login-form" onsubmit="handleLogin(event)">
<div class="form-group"><label>Email</label><input type="email" id="email" required></div>
<div class="form-group"><label>Password</label><input type="password" id="password" required minlength="6"></div>
<div class="form-group"><label>Email or username</label><input type="text" id="email" required autocomplete="username"></div>
<div class="form-group">
<label>Password</label>
<div class="pw-wrapper">
<input type="password" id="password" required minlength="6" autocomplete="current-password">
<button type="button" class="pw-toggle" onclick="togglePassword()" title="Show password">👁</button>
</div>
</div>
<div class="form-group" id="name-group" style="display:none"><label>Name</label><input type="text" id="name"></div>
<button type="submit" class="btn btn-primary" id="submit-btn">Login</button>
</form>
@@ -68,6 +77,7 @@ body{background:#191919;color:#fff;font-family:-apple-system,BlinkMacSystemFont,
<script>
let mode='login';
function switchTab(t){mode=t;document.querySelectorAll('.tab').forEach(el=>el.classList.remove('active'));document.getElementById('tab-'+t).classList.add('active');document.getElementById('name-group').style.display=t==='register'?'block':'none';document.getElementById('submit-btn').textContent=t==='register'?'Register':'Login';document.getElementById('error-msg').style.display='none';document.getElementById('success-msg').style.display='none';}
function togglePassword(){var pw=document.getElementById('password');var btn=pw.parentElement.querySelector('.pw-toggle');if(pw.type==='password'){pw.type='text';btn.textContent='🙈';}else{pw.type='password';btn.textContent='👁';}}
async function handleLogin(e){e.preventDefault();const email=document.getElementById('email').value;const password=document.getElementById('password').value;const name=document.getElementById('name').value;const url=mode==='register'?'/auth/register':'/auth/local-login';const body={email,password};if(mode==='register')body.name=name;try{const r=await fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});const d=await r.json();if(!r.ok){document.getElementById('error-msg').textContent=d.error||'Error';document.getElementById('error-msg').style.display='block';return;}if(d.status==='ok'){window.location='/';}}catch(err){document.getElementById('error-msg').textContent='Network error';document.getElementById('error-msg').style.display='block';}}
</script>
</body>