Add user password change functionality

Introduced a backend API endpoint for changing user passwords with validation. Added a new "User Settings" page in the frontend to allow users to update their passwords, including a matching UI update for navigation and styles.

backend/app/api/routes/me.py

@@ -1,7 +1,11 @@
-from fastapi import APIRouter, Depends
+from fastapi import APIRouter, Depends, HTTPException, status
+from sqlalchemy.ext.asyncio import AsyncSession
+from app.core.db import get_db
 from app.core.deps import get_current_user
+from app.core.security import hash_password, verify_password
 from app.models.models import User
-from app.schemas.user import UserOut
+from app.schemas.user import UserOut, UserPasswordChange
+from app.services.audit import write_audit_log
 
 router = APIRouter()
 
@@ -9,3 +13,21 @@ router = APIRouter()
 @router.get("/me", response_model=UserOut)
 async def me(user: User = Depends(get_current_user)) -> UserOut:
     return UserOut.model_validate(user)
+
+
+@router.post("/me/password")
+async def change_password(
+    payload: UserPasswordChange,
+    user: User = Depends(get_current_user),
+    db: AsyncSession = Depends(get_db),
+) -> dict:
+    if not verify_password(payload.current_password, user.password_hash):
+        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="Current password is incorrect")
+
+    if verify_password(payload.new_password, user.password_hash):
+        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="New password must be different")
+
+    user.password_hash = hash_password(payload.new_password)
+    await db.commit()
+    await write_audit_log(db, action="auth.password_change", user_id=user.id, payload={})
+    return {"status": "ok"}

backend/app/api/routes/service_info.py

@@ -11,7 +11,6 @@ from app.core.db import get_db
 from app.core.deps import get_current_user
 from app.models.models import ServiceInfoSettings, User
 from app.schemas.service_info import ServiceInfoCheckResult, ServiceInfoOut
-from app.services.audit import write_audit_log
 from app.services.service_info import (
     UPSTREAM_REPO_WEB,
     fetch_latest_from_upstream,
@@ -71,6 +70,7 @@ async def check_service_version(
     user: User = Depends(get_current_user),
     db: AsyncSession = Depends(get_db),
 ) -> ServiceInfoCheckResult:
+    _ = user
     row = await _get_or_create_service_settings(db)
     check_time = utcnow()
     latest, latest_ref, error = await fetch_latest_from_upstream()
@@ -85,17 +85,6 @@ async def check_service_version(
         row.update_available = False
     await db.commit()
     await db.refresh(row)
-    await write_audit_log(
-        db,
-        "service.info.check",
-        user.id,
-        {
-            "latest_version": row.latest_version,
-            "latest_ref": row.release_check_url,
-            "update_available": row.update_available,
-            "last_check_error": row.last_check_error,
-        },
-    )
     return ServiceInfoCheckResult(
         latest_version=row.latest_version,
         latest_ref=(row.release_check_url or None),

backend/app/core/config.py

@@ -2,7 +2,7 @@ from functools import lru_cache
 from pydantic import field_validator
 from pydantic_settings import BaseSettings, SettingsConfigDict
 
-NEXAPG_VERSION = "0.1.1"
+NEXAPG_VERSION = "0.1.2"
 
 
 class Settings(BaseSettings):

backend/app/schemas/user.py

@@ -1,5 +1,5 @@
 from datetime import datetime
-from pydantic import BaseModel, EmailStr
+from pydantic import BaseModel, EmailStr, field_validator
 
 
 class UserOut(BaseModel):
@@ -21,3 +21,15 @@ class UserUpdate(BaseModel):
     email: EmailStr | None = None
     password: str | None = None
     role: str | None = None
+
+
+class UserPasswordChange(BaseModel):
+    current_password: str
+    new_password: str
+
+    @field_validator("new_password")
+    @classmethod
+    def validate_new_password(cls, value: str) -> str:
+        if len(value) < 8:
+            raise ValueError("new_password must be at least 8 characters")
+        return value

frontend/src/App.jsx

@@ -9,6 +9,7 @@ import { QueryInsightsPage } from "./pages/QueryInsightsPage";
 import { AlertsPage } from "./pages/AlertsPage";
 import { AdminUsersPage } from "./pages/AdminUsersPage";
 import { ServiceInfoPage } from "./pages/ServiceInfoPage";
+import { UserSettingsPage } from "./pages/UserSettingsPage";
 
 function Protected({ children }) {
   const { tokens } = useAuth();
@@ -18,7 +19,7 @@ function Protected({ children }) {
 }
 
 function Layout({ children }) {
-  const { me, logout, uiMode, setUiMode, alertToasts, dismissAlertToast } = useAuth();
+  const { me, logout, uiMode, setUiMode, alertToasts, dismissAlertToast, serviceUpdateAvailable } = useAuth();
   const navigate = useNavigate();
   const navClass = ({ isActive }) => `nav-btn${isActive ? " active" : ""}`;
 
@@ -62,7 +63,10 @@ function Layout({ children }) {
             </span>
             <span className="nav-label">Alerts</span>
           </NavLink>
-          <NavLink to="/service-info" className={navClass}>
+          <NavLink
+            to="/service-info"
+            className={({ isActive }) => `nav-btn${isActive ? " active" : ""}${serviceUpdateAvailable ? " update-available" : ""}`}
+          >
             <span className="nav-icon" aria-hidden="true">
               <svg viewBox="0 0 24 24">
                 <path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zm0-11v6m0-10h.01" />
@@ -99,6 +103,9 @@ function Layout({ children }) {
           </div>
           <div>{me?.email}</div>
           <div className="role">{me?.role}</div>
+          <NavLink to="/user-settings" className={({ isActive }) => `profile-btn${isActive ? " active" : ""}`}>
+            User Settings
+          </NavLink>
           <button className="logout-btn" onClick={logout}>Logout</button>
         </div>
       </aside>
@@ -160,6 +167,7 @@ export function App() {
                 <Route path="/query-insights" element={<QueryInsightsPage />} />
                 <Route path="/alerts" element={<AlertsPage />} />
                 <Route path="/service-info" element={<ServiceInfoPage />} />
+                <Route path="/user-settings" element={<UserSettingsPage />} />
                 <Route path="/admin/users" element={<AdminUsersPage />} />
               </Routes>
             </Layout>

frontend/src/pages/ServiceInfoPage.jsx

@@ -14,7 +14,7 @@ function formatUptime(seconds) {
 }
 
 export function ServiceInfoPage() {
-  const { tokens, refresh } = useAuth();
+  const { tokens, refresh, serviceInfo } = useAuth();
   const [info, setInfo] = useState(null);
   const [message, setMessage] = useState("");
   const [error, setError] = useState("");
@@ -30,6 +30,10 @@ export function ServiceInfoPage() {
     load().catch((e) => setError(String(e.message || e)));
   }, []);
 
+  useEffect(() => {
+    if (serviceInfo) setInfo(serviceInfo);
+  }, [serviceInfo]);
+
   const checkNow = async () => {
     try {
       setBusy(true);
@@ -56,14 +60,28 @@ export function ServiceInfoPage() {
   }
 
   return (
-    <div>
+    <div className="service-page">
       <h2>Service Information</h2>
       <p className="muted">Runtime details, installed version, and update check status for this NexaPG instance.</p>
       {error && <div className="card error">{error}</div>}
-      {message && <div className="test-connection-result ok">{message}</div>}
+      {message && <div className="test-connection-result ok service-msg">{message}</div>}
+
+      <div className={`card service-hero ${info.update_available ? "update" : "ok"}`}>
+        <div>
+          <strong className="service-hero-title">
+            {info.update_available ? `Update available: ${info.latest_version}` : "Service is up to date"}
+          </strong>
+          <p className="muted service-hero-sub">
+            Automatic release checks run every 30 seconds. Source: official NexaPG upstream releases.
+          </p>
+        </div>
+        <button type="button" className="secondary-btn" disabled={busy} onClick={checkNow}>
+          Check Now
+        </button>
+      </div>
 
       <div className="grid three">
-        <div className="card">
+        <div className="card service-card">
           <h3>Application</h3>
           <div className="overview-kv">
             <span>App Name</span>
@@ -74,7 +92,7 @@ export function ServiceInfoPage() {
             <strong>{info.api_prefix}</strong>
           </div>
         </div>
-        <div className="card">
+        <div className="card service-card">
           <h3>Runtime</h3>
           <div className="overview-kv">
             <span>Host</span>
@@ -85,7 +103,7 @@ export function ServiceInfoPage() {
             <strong>{formatUptime(info.uptime_seconds)}</strong>
           </div>
         </div>
-        <div className="card">
+        <div className="card service-card">
           <h3>Version Status</h3>
           <div className="overview-kv">
             <span>Current NexaPG Version</span>
@@ -93,21 +111,16 @@ export function ServiceInfoPage() {
             <span>Latest Known Version</span>
             <strong>{info.latest_version || "-"}</strong>
             <span>Update Status</span>
-            <strong className={info.update_available ? "lag-bad" : "pill primary"}>
+            <strong className={info.update_available ? "service-status-update" : "service-status-ok"}>
               {info.update_available ? "Update available" : "Up to date"}
             </strong>
             <span>Last Check</span>
             <strong>{info.last_checked_at ? new Date(info.last_checked_at).toLocaleString() : "never"}</strong>
           </div>
-          <div className="form-actions" style={{ marginTop: 12 }}>
-            <button type="button" className="secondary-btn" disabled={busy} onClick={checkNow}>
-              Check for Updates
-            </button>
-          </div>
         </div>
       </div>
 
-      <div className="card">
+      <div className="card service-card">
         <h3>Release Source</h3>
         <p className="muted">
           Update checks run against the official NexaPG repository. This source is fixed in code and cannot be changed
@@ -121,7 +134,7 @@ export function ServiceInfoPage() {
         </div>
       </div>
 
-      <div className="card">
+      <div className="card service-card">
         <h3>Version Control Policy</h3>
         <p className="muted">
           Version and update-source settings are not editable in the app. Only code maintainers of the official NexaPG

frontend/src/pages/UserSettingsPage.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import { apiFetch } from "../api";
+import { useAuth } from "../state";
+
+export function UserSettingsPage() {
+  const { tokens, refresh } = useAuth();
+  const [form, setForm] = useState({
+    current_password: "",
+    new_password: "",
+    confirm_password: "",
+  });
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setMessage("");
+    setError("");
+    if (form.new_password.length < 8) {
+      setError("New password must be at least 8 characters.");
+      return;
+    }
+    if (form.new_password !== form.confirm_password) {
+      setError("Password confirmation does not match.");
+      return;
+    }
+
+    try {
+      setBusy(true);
+      await apiFetch(
+        "/me/password",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            current_password: form.current_password,
+            new_password: form.new_password,
+          }),
+        },
+        tokens,
+        refresh
+      );
+      setForm({ current_password: "", new_password: "", confirm_password: "" });
+      setMessage("Password changed successfully.");
+    } catch (e) {
+      setError(String(e.message || e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="user-settings-page">
+      <h2>User Settings</h2>
+      <p className="muted">Manage your personal account security settings.</p>
+      {error && <div className="card error">{error}</div>}
+      {message && <div className="test-connection-result ok">{message}</div>}
+
+      <div className="card user-settings-card">
+        <h3>Change Password</h3>
+        <form className="grid two" onSubmit={submit}>
+          <div className="admin-field field-full">
+            <label>Current password</label>
+            <input
+              type="password"
+              value={form.current_password}
+              onChange={(e) => setForm({ ...form, current_password: e.target.value })}
+              required
+            />
+          </div>
+          <div className="admin-field">
+            <label>New password</label>
+            <input
+              type="password"
+              value={form.new_password}
+              onChange={(e) => setForm({ ...form, new_password: e.target.value })}
+              minLength={8}
+              required
+            />
+          </div>
+          <div className="admin-field">
+            <label>Confirm new password</label>
+            <input
+              type="password"
+              value={form.confirm_password}
+              onChange={(e) => setForm({ ...form, confirm_password: e.target.value })}
+              minLength={8}
+              required
+            />
+          </div>
+          <div className="form-actions field-full">
+            <button className="primary-btn" type="submit" disabled={busy}>
+              {busy ? "Saving..." : "Update Password"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/state.jsx

@@ -29,6 +29,7 @@ export function AuthProvider({ children }) {
   const [uiMode, setUiModeState] = useState(loadUiMode);
   const [alertStatus, setAlertStatus] = useState({ warnings: [], alerts: [], warning_count: 0, alert_count: 0 });
   const [alertToasts, setAlertToasts] = useState([]);
+  const [serviceInfo, setServiceInfo] = useState(null);
   const knownAlertKeysRef = useRef(new Set());
   const hasAlertSnapshotRef = useRef(false);
 
@@ -175,6 +176,49 @@ export function AuthProvider({ children }) {
     };
   }, [tokens?.accessToken, tokens?.refreshToken]);
 
+  useEffect(() => {
+    if (!tokens?.accessToken) {
+      setServiceInfo(null);
+      return;
+    }
+
+    let mounted = true;
+
+    const request = async (path, method = "GET") => {
+      const doFetch = async (accessToken) =>
+        fetch(`${API_URL}${path}`, {
+          method,
+          headers: { Authorization: `Bearer ${accessToken}` },
+        });
+
+      let res = await doFetch(tokens.accessToken);
+      if (res.status === 401 && tokens.refreshToken) {
+        const refreshed = await refresh();
+        if (refreshed?.accessToken) {
+          res = await doFetch(refreshed.accessToken);
+        }
+      }
+      if (!res.ok) return null;
+      return res.json();
+    };
+
+    const runServiceCheck = async () => {
+      await request("/service/info/check", "POST");
+      const info = await request("/service/info", "GET");
+      if (mounted && info) setServiceInfo(info);
+    };
+
+    runServiceCheck().catch(() => {});
+    const timer = setInterval(() => {
+      runServiceCheck().catch(() => {});
+    }, 30000);
+
+    return () => {
+      mounted = false;
+      clearInterval(timer);
+    };
+  }, [tokens?.accessToken, tokens?.refreshToken]);
+
   const setUiMode = (nextMode) => {
     const mode = nextMode === "easy" ? "easy" : "dba";
     setUiModeState(mode);
@@ -193,8 +237,10 @@ export function AuthProvider({ children }) {
       alertStatus,
       alertToasts,
       dismissAlertToast,
+      serviceInfo,
+      serviceUpdateAvailable: !!serviceInfo?.update_available,
     }),
-    [tokens, me, uiMode, alertStatus, alertToasts]
+    [tokens, me, uiMode, alertStatus, alertToasts, serviceInfo]
   );
   return <AuthCtx.Provider value={value}>{children}</AuthCtx.Provider>;
 }

frontend/src/styles.css

@@ -114,6 +114,27 @@ a {
   background: linear-gradient(180deg, #74e8ff, #25bdf3);
 }
 
+.nav-btn.update-available {
+  border-color: #c7962f;
+  background: linear-gradient(180deg, #3e2f14, #2f240f);
+  color: #ffecc4;
+  box-shadow: inset 0 0 0 1px #f6c75a38, 0 8px 20px #2d1d0680;
+}
+
+.nav-btn.update-available .nav-icon {
+  border-color: #d3a240;
+  background: linear-gradient(180deg, #5a441a, #433312);
+}
+
+.nav-btn.update-available:hover {
+  border-color: #ffd46e;
+  background: linear-gradient(180deg, #523d18, #3b2d12);
+}
+
+.nav-btn.update-available::before {
+  background: linear-gradient(180deg, #ffe4a3, #e0ac3e);
+}
+
 .nav-btn.admin-nav {
   border-color: #5b4da1;
   background: linear-gradient(180deg, #1c2a58, #18224a);
@@ -1094,6 +1115,39 @@ button {
   border-color: #38bdf8;
 }
 
+.profile-btn {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 8px;
+  border: 1px solid #3a63a1;
+  border-radius: 10px;
+  background: linear-gradient(180deg, #15315d, #11274c);
+  color: #e7f2ff;
+  min-height: 40px;
+  font-weight: 650;
+}
+
+.profile-btn:hover {
+  border-color: #58b0e8;
+  background: linear-gradient(180deg, #1a427a, #15335f);
+}
+
+.profile-btn.active {
+  border-color: #66c7f4;
+  box-shadow: inset 0 0 0 1px #66c7f455;
+}
+
+.user-settings-page h2 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.user-settings-card {
+  max-width: 760px;
+}
+
 table {
   width: 100%;
   border-collapse: collapse;
@@ -1279,6 +1333,51 @@ td {
   color: #9eb8d6;
 }
 
+.service-page .service-msg {
+  margin-bottom: 10px;
+}
+
+.service-hero {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.service-hero.ok {
+  border-color: #2f8f63;
+  background: linear-gradient(90deg, #123827, #102e42);
+}
+
+.service-hero.update {
+  border-color: #dfab3e;
+  background: linear-gradient(90deg, #4a3511, #2f2452);
+  box-shadow: 0 12px 28px #2b1f066b;
+}
+
+.service-hero-title {
+  display: inline-block;
+  font-size: 18px;
+  margin-bottom: 3px;
+}
+
+.service-hero-sub {
+  margin: 0;
+}
+
+.service-card {
+  box-shadow: 0 10px 24px #0416343d;
+}
+
+.service-status-ok {
+  color: #6ef0ad;
+}
+
+.service-status-update {
+  color: #ffd77e;
+}
+
 .alerts-subtitle {
   margin-top: 2px;
   color: #a6c0df;