Add forgot password flow and password visibility toggle

app/main.py

@@ -121,6 +121,23 @@ def logout():
     return response
 
 
+class PasswordReset(BaseModel):
+    email: str
+    new_password: str
+
+
+@app.post("/api/auth/reset-password")
+def reset_password(data: PasswordReset, db: Session = Depends(get_db)):
+    if len(data.new_password) < 6:
+        raise HTTPException(status_code=400, detail="Password must be at least 6 characters")
+    user = get_user_by_email(db, data.email)
+    if not user:
+        raise HTTPException(status_code=404, detail="No account found with that email")
+    user.hashed_password = get_password_hash(data.new_password)
+    db.commit()
+    return {"ok": True, "message": "Password has been reset. You can now sign in."}
+
+
 @app.get("/api/me")
 def me(user: Optional[User] = Depends(get_current_user)):
     if not user:

static/css/style.css

@@ -124,6 +124,52 @@ body::before {
 }
 .toggle-auth a:hover { text-decoration: underline; }
 
+.forgot-link {
+  text-align: right;
+  margin-top: -0.5rem;
+  margin-bottom: 0.25rem;
+}
+.forgot-link a {
+  color: var(--text-dim);
+  font-size: 0.82rem;
+  text-decoration: none;
+  transition: color var(--transition);
+}
+.forgot-link a:hover { color: var(--accent); }
+
+/* ---- Password input with eye toggle ---- */
+.input-password-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.input-password-wrap input {
+  padding-right: 2.8rem;
+}
+.password-toggle {
+  position: absolute;
+  right: 0.6rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-dim);
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-xs);
+  transition: color var(--transition), background var(--transition);
+}
+.password-toggle:hover {
+  color: var(--accent);
+  background: rgba(45, 212, 191, 0.08);
+}
+.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; }
+
 /* ---- Cards ---- */
 .card {
   background: var(--bg-card);

static/js/app.js

@@ -75,12 +75,39 @@ document.getElementById('form-register')?.addEventListener('submit', async (e) =
   } catch (err) { showError('register-error', err.message); }
 });
 
+// ---- Forgot password ----
+document.getElementById('form-forgot')?.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  hideError('forgot-error');
+  hideError('forgot-success');
+  const email = document.getElementById('forgot-email').value.trim();
+  const new_password = document.getElementById('forgot-password').value;
+  try {
+    const data = await api('POST', '/api/auth/reset-password', { body: JSON.stringify({ email, new_password }) });
+    showSuccess('forgot-success', data.message || 'Password reset! You can now sign in.');
+    document.getElementById('form-forgot').reset();
+  } catch (err) { showError('forgot-error', err.message); }
+});
+
+// ---- Password visibility toggle ----
+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);
+  });
+});
+
 document.querySelectorAll('[data-view]').forEach((a) => {
   a.addEventListener('click', (e) => {
     e.preventDefault();
     showView(a.getAttribute('data-view'));
     hideError('login-error');
     hideError('register-error');
+    hideError('forgot-error');
+    hideError('forgot-success');
   });
 });
 

templates/index.html

@@ -28,10 +28,17 @@
             </div>
             <div class="form-group">
               <label for="login-password">Password</label>
-              <input type="password" id="login-password" required placeholder="Enter your password" />
+              <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>
+              </div>
             </div>
             <button type="submit" class="btn btn-primary btn-block">Sign in</button>
           </form>
+          <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>
@@ -61,7 +68,13 @@
             </div>
             <div class="form-group">
               <label for="register-password">Password</label>
-              <input type="password" id="register-password" required placeholder="Min. 6 characters" minlength="6" />
+              <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>
+              </div>
             </div>
             <button type="submit" class="btn btn-primary btn-block">Create account</button>
           </form>
@@ -70,6 +83,42 @@
       </div>
     </section>
 
+    <!-- Forgot password view -->
+    <section id="view-forgot" class="view">
+      <div class="auth-container">
+        <div class="auth-logo">
+          <div class="auth-logo-icon">
+            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
+          </div>
+          <span>SatDetect</span>
+        </div>
+        <div class="card">
+          <h2>Reset password</h2>
+          <p class="sub">Enter your email and choose a new password.</p>
+          <div id="forgot-error" class="alert alert-error hidden"></div>
+          <div id="forgot-success" class="alert alert-success hidden"></div>
+          <form id="form-forgot">
+            <div class="form-group">
+              <label for="forgot-email">Email</label>
+              <input type="email" id="forgot-email" required placeholder="you@example.com" />
+            </div>
+            <div class="form-group">
+              <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>
+              </div>
+            </div>
+            <button type="submit" class="btn btn-primary btn-block">Reset password</button>
+          </form>
+          <p class="toggle-auth">Remember your password? <a href="#" data-view="login">Sign in</a></p>
+        </div>
+      </div>
+    </section>
+
     <!-- Dashboard view -->
     <section id="view-dashboard" class="view">
       <nav class="nav">
@@ -222,6 +271,6 @@
     </div>
   </div>
 
-  <script src="/static/js/app.js?v=5"></script>
+  <script src="/static/js/app.js?v=6"></script>
 </body>
 </html>