9dce93cf67
First of three commits porting the vanilla settings.html (13 sub-sections
total) to the React tree. This commit delivers the Settings page shell
plus the three Security sub-sections. Integrations (Nextcloud, Documents)
and Voice + Content land in the two follow-ups.
client/src/pages/Settings.tsx
Page shell that fetches /api/auth/me and conditionally renders the
local-auth sections only when user.canLocalAuth !== false. SSO-only
users see a brief "managed by your identity provider" notice instead —
matches vanilla behavior, which hides those cards for SSO accounts.
Change Password: three-field form (current / new / confirm) with
client-side validation (8+ chars, match). POSTs /api/auth/change-password.
On success the server destroys all OTHER sessions, so the component
invalidates the ['sessions'] query so the Active Sessions card below
refreshes without a full reload. passwordWarning (pwned-password hint)
surfaces as a follow-up info toast.
Two-Factor Auth: status line ("Enabled" / "Not enabled") reads
user.totp_enabled. Enable button POSTs /api/auth/setup-2fa, renders the
returned QR + secret, accepts the 6-digit code and POSTs /verify-2fa.
First-enable shows a one-shot BackupCodesDisplay modal with Copy + close.
Disable flow is inline (password field + Confirm Disable + Cancel, no
modal) — matches the vanilla UX. Backup-codes remaining count pulls
from /api/auth/2fa/backup-codes/count; a Regenerate button opens a
ConfirmModal with requirePassword=true and POSTs /2fa/backup-codes.
Active Sessions: useQuery on /api/sessions renders one row per session
with the current one highlighted. Per-row Revoke opens a ConfirmModal;
Revoke All Other Sessions opens another ConfirmModal. Both DELETE calls
invalidate ['sessions'] on success.
client/src/components/ConfirmModal.tsx
Reusable styled confirmation dialog — replaces vanilla showConfirm().
Supports a danger variant (destructive button styling) and an optional
password-input variant for confirm-by-password flows. Escape closes,
backdrop click closes, Enter in the password field submits. Carries
data-testid hooks (confirm-modal-ok, confirm-modal-cancel) so Playwright
can drive it without ever hitting window.confirm().
shared/types.ts + client/src/shared/types.ts
Additive changes only:
- AuthUser gains optional canLocalAuth, totp_enabled, email_verified,
nextcloud_url/user/folder, created_at — all fields the server
already returns from /api/auth/me but the type had never described.
- SessionRow reshape to match the wire format the server actually
returns (snake_case ip_address / device_label / created_at /
last_activity), replacing the speculative camelCase draft. No
existing consumer of SessionRow existed outside Settings, so the
rename is a no-op for current code.
- New types for 2FA + change-password response shapes (Setup2faOk,
Verify2faOk, BackupCodesCountOk, RegenBackupCodesOk,
ChangePasswordOk, RevokeAllSessionsOk).
client/src/App.tsx
Adds <Route path="/settings" element={<Settings />} />.
client/src/components/Layout.tsx
Flips the Settings nav entry to available: true.
e2e/tests/settings-react-security.spec.js
Five smoke tests against /app/settings mirroring the coverage of
settings-faq-dictation.spec.js for the vanilla tree: field/button
presence for all three sections, password-mismatch inline error,
revoke-all click surfaces the styled modal (with an explicit
page.on('dialog') guard to catch any future regression to native
confirm()).
Note: the e2e container image currently predates the /app/* route
(its /app/public/app/ directory is absent), so running this spec requires
a rebuild — deferred to Daniel's call. Client tsc -b, server tsc --noEmit,
and vite build all pass locally.
68 lines
3 KiB
TypeScript
68 lines
3 KiB
TypeScript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router-dom';
|
|
import Layout from '@/components/Layout';
|
|
import Extensions from '@/pages/Extensions';
|
|
import Faq from '@/pages/Faq';
|
|
import Dictation from '@/pages/Dictation';
|
|
import Encounter from '@/pages/Encounter';
|
|
import Soap from '@/pages/Soap';
|
|
import SickVisit from '@/pages/SickVisit';
|
|
import HospitalCourse from '@/pages/HospitalCourse';
|
|
import ChartReview from '@/pages/ChartReview';
|
|
import WellVisit from '@/pages/WellVisit';
|
|
import VaxSchedule from '@/pages/VaxSchedule';
|
|
import Catchup from '@/pages/Catchup';
|
|
import Settings from '@/pages/Settings';
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: { queries: { staleTime: 30_000, retry: 1 } },
|
|
});
|
|
|
|
function Home() {
|
|
return (
|
|
<div className="max-w-3xl mx-auto p-6 space-y-4">
|
|
<h1 className="text-2xl font-semibold">Pediatric AI Scribe — React client</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
This is the new React tree. The legacy vanilla-JS app still lives at{' '}
|
|
<a href="/" className="underline">/</a>.
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">Ported tabs so far:</p>
|
|
<ul className="list-disc pl-6 text-sm space-y-1">
|
|
<li><Link to="/encounter" className="underline">Encounter HPI</Link></li>
|
|
<li><Link to="/dictation" className="underline">Dictation HPI</Link></li>
|
|
<li><Link to="/soap" className="underline">SOAP Note</Link></li>
|
|
<li><Link to="/sickvisit" className="underline">Sick Visit</Link></li>
|
|
<li><Link to="/extensions" className="underline">Extensions & Pagers</Link></li>
|
|
<li><Link to="/faq" className="underline">FAQ</Link></li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<BrowserRouter basename="/app">
|
|
<Routes>
|
|
<Route element={<Layout />}>
|
|
<Route path="/" element={<Home />} />
|
|
<Route path="/encounter" element={<Encounter />} />
|
|
<Route path="/dictation" element={<Dictation />} />
|
|
<Route path="/soap" element={<Soap />} />
|
|
<Route path="/sickvisit" element={<SickVisit />} />
|
|
<Route path="/hospital" element={<HospitalCourse />} />
|
|
<Route path="/chart" element={<ChartReview />} />
|
|
<Route path="/wellvisit" element={<WellVisit />} />
|
|
<Route path="/vaxschedule" element={<VaxSchedule />} />
|
|
<Route path="/catchup" element={<Catchup />} />
|
|
<Route path="/extensions" element={<Extensions />} />
|
|
<Route path="/settings" element={<Settings />} />
|
|
<Route path="/faq" element={<Faq />} />
|
|
{/* catch-all falls back to home while more tabs port over */}
|
|
<Route path="*" element={<Navigate to="/" replace />} />
|
|
</Route>
|
|
</Routes>
|
|
</BrowserRouter>
|
|
</QueryClientProvider>
|
|
);
|
|
}
|