From e42c5e1e4b36be4572c557190500adb0465d581d Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Mon, 13 Jul 2026 13:34:18 -0400
Subject: [PATCH] fix: toggle voir/cacher mot de passe + label 'Email or
 username'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 app/routers/auth.py | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/routers/auth.py b/app/routers/auth.py
index 2a55776..58b956d 100644
--- a/app/routers/auth.py
+++ b/app/routers/auth.py
@@ -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>