Simplify password eye to single grey icon, move forgot below sign-in, remove or divider

static/css/style.css

@@ -110,46 +110,26 @@ body::before {
   font-size: 0.9rem;
   margin-bottom: 1.75rem;
 }
-.auth-container .form-group:last-of-type { margin-bottom: 0.5rem; }
+.auth-container .form-group:last-of-type { margin-bottom: 1.75rem; }
+
+.auth-actions { margin-top: 1.75rem; }
 
-.password-row-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.4rem;
-}
-.password-row-meta label { margin-bottom: 0; }
 .forgot-link {
-  margin: 0;
+  text-align: center;
+  margin-top: 1rem;
+  margin-bottom: 0;
 }
 .forgot-link a {
   color: var(--text-dim);
-  font-size: 0.78rem;
+  font-size: 0.84rem;
   text-decoration: none;
   transition: color var(--transition);
-  font-weight: 400;
 }
-.forgot-link a:hover { color: var(--accent); text-decoration: underline; }
+.forgot-link a:hover { color: var(--accent); }
 
-.auth-actions { margin-top: 1.75rem; }
-.auth-divider {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin: 1.5rem 0;
-  color: var(--text-dim);
-  font-size: 0.78rem;
-}
-.auth-divider::before,
-.auth-divider::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: var(--border);
-}
 .toggle-auth {
   text-align: center;
-  margin-top: 0;
+  margin-top: 1.25rem;
   color: var(--text-muted);
   font-size: 0.88rem;
 }
@@ -160,7 +140,7 @@ body::before {
 }
 .toggle-auth a:hover { text-decoration: underline; }
 
-/* Forgot password page header */
+/* Forgot password page */
 .forgot-header-icon {
   width: 52px;
   height: 52px;
@@ -178,7 +158,7 @@ body::before {
   align-items: center;
   gap: 0.35rem;
   color: var(--text-dim);
-  font-size: 0.82rem;
+  font-size: 0.84rem;
   text-decoration: none;
   margin-top: 1.75rem;
   transition: color var(--transition);
@@ -195,32 +175,22 @@ body::before {
 }
 .password-toggle {
   position: absolute;
-  right: 1px;
-  top: 1px;
-  bottom: 1px;
-  width: 2.5rem;
-  background: transparent;
+  right: 0.65rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
   border: none;
-  border-left: 1px solid transparent;
-  border-radius: 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0;
   cursor: pointer;
-  color: var(--text-dim);
+  color: #64748b;
+  padding: 0.2rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: color var(--transition), background var(--transition), border-color var(--transition);
-}
-.password-toggle:hover {
-  color: var(--text);
-  background: var(--bg-hover);
-  border-left-color: var(--border);
-}
-.password-toggle.active {
-  color: var(--accent);
+  transition: color var(--transition);
+  line-height: 0;
 }
-.password-toggle svg.eye-closed { display: none; }
-.password-toggle.active svg.eye-open { display: none !important; }
-.password-toggle.active svg.eye-closed { display: block !important; }
+.password-toggle:hover { color: #94a3b8; }
+.password-toggle.active { color: #94a3b8; }
 
 /* ---- Cards ---- */
 .card {

static/js/app.js

@@ -94,9 +94,9 @@ document.querySelectorAll('.password-toggle').forEach((btn) => {
   btn.addEventListener('click', () => {
     const input = document.getElementById(btn.dataset.target);
     if (!input) return;
-    const isPassword = input.type === 'password';
-    input.type = isPassword ? 'text' : 'password';
-    btn.classList.toggle('active', isPassword);
+    const showing = input.type !== 'password';
+    input.type = showing ? 'password' : 'text';
+    btn.style.opacity = showing ? '' : '0.9';
   });
 });
 

templates/index.html

@@ -27,15 +27,11 @@
               <input type="email" id="login-email" required placeholder="you@example.com" />
             </div>
             <div class="form-group">
-              <div class="password-row-meta">
-                <label for="login-password">Password</label>
-                <span class="forgot-link"><a href="#" data-view="forgot">Forgot password?</a></span>
-              </div>
+              <label for="login-password">Password</label>
               <div class="input-password-wrap">
                 <input type="password" id="login-password" required placeholder="Enter your password" />
-                <button type="button" class="password-toggle" data-target="login-password" aria-label="Show password">
-                  <svg class="eye-open" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-                  <svg class="eye-closed" 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 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
+                <button type="button" class="password-toggle" data-target="login-password" aria-label="Toggle password visibility">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                 </button>
               </div>
             </div>
@@ -43,7 +39,7 @@
               <button type="submit" class="btn btn-primary btn-block">Sign in</button>
             </div>
           </form>
-          <div class="auth-divider">or</div>
+          <p class="forgot-link"><a href="#" data-view="forgot">Forgot your password?</a></p>
           <p class="toggle-auth">Don't have an account? <a href="#" data-view="register">Create one</a></p>
         </div>
       </div>
@@ -75,9 +71,8 @@
               <label for="register-password">Password</label>
               <div class="input-password-wrap">
                 <input type="password" id="register-password" required placeholder="Min. 6 characters" minlength="6" />
-                <button type="button" class="password-toggle" data-target="register-password" aria-label="Show password">
-                  <svg class="eye-open" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-                  <svg class="eye-closed" 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 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
+                <button type="button" class="password-toggle" data-target="register-password" aria-label="Toggle password visibility">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                 </button>
               </div>
             </div>
@@ -85,7 +80,6 @@
               <button type="submit" class="btn btn-primary btn-block">Create account</button>
             </div>
           </form>
-          <div class="auth-divider">or</div>
           <p class="toggle-auth">Already have an account? <a href="#" data-view="login">Sign in</a></p>
         </div>
       </div>
@@ -117,9 +111,8 @@
               <label for="forgot-password">New password</label>
               <div class="input-password-wrap">
                 <input type="password" id="forgot-password" required placeholder="Min. 6 characters" minlength="6" />
-                <button type="button" class="password-toggle" data-target="forgot-password" aria-label="Show password">
-                  <svg class="eye-open" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-                  <svg class="eye-closed" 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 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
+                <button type="button" class="password-toggle" data-target="forgot-password" aria-label="Toggle password visibility">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                 </button>
               </div>
             </div>
@@ -289,6 +282,6 @@
     </div>
   </div>
 
-  <script src="/static/js/app.js?v=7"></script>
+  <script src="/static/js/app.js?v=8"></script>
 </body>
 </html>