mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-07 12:21:31 +00:00
93e00f6a5e
Frontend design remediation, Phase 0 (Hygiene Day). Eleven low-risk
audit findings closed in one PR. UX-M9 deliberately deferred per the
prompt's "do NOT auto-trace the logo" guard rail — that needs a
designer round-trip outside a code session.
Findings closed (mapped by source ID)
=====================================
FE-H1 Half-wired dark mode removed.
web/index.html: dropped class="dark" from <html> and
bg-slate-900 text-slate-100 from <body>. Replaced with
bg-page text-ink (matching the live light-mode palette).
web/tailwind.config.cjs: kept darkMode: 'class' (config
only, zero behaviour) so a future Phase 7 dark-mode
rebuild stays cheap.
FE-H4 Self-hosted fonts (closes PERF-H3 as a side-effect).
web/package.json: added @fontsource-variable/inter +
@fontsource/jetbrains-mono (^5.2.8 both).
web/src/main.tsx: top of file imports the variable Inter
family + JetBrains Mono weights 400/500/600 (matching the
old Google Fonts request's weight set).
web/src/index.css: removed the @import url(
'https://fonts.googleapis.com/...') that lived on line 1.
Body font-family updated to "Inter Variable", "Inter",
system-ui, ... (fontsource-variable registers the family
as "Inter Variable" — kept "Inter" as a fallback).
Vite bundles the .woff2 files into dist/assets/ on build:
verified inter-latin-wght-normal-*.woff2 (48 kB) +
the JetBrains weights all land in the build output.
Net effect: cold load makes ZERO third-party requests.
FE-L2 StatusBadge.tsx.bak removed.
Audit claim "tracked in git" was stale — the file was
already excluded by .gitignore:46 (*.bak). Closure was
a plain `rm`, not `git rm`. (Audit accuracy note above.)
FE-L3 brand-900 removed from web/tailwind.config.cjs.
Verified 0 callers in web/src via
`grep -rEc "brand-$w\b" web/src --include='*.tsx'`.
Other weights all retain ≥4 callers (50=5, 100=4, 200=4,
300=8, 400=106, 500=74, 600=34, 700=23, 800=4) — they
stay. Comment marker left in place so a future Phase 7
dark-mode redo can re-add 900 with context.
UX-M6 text-ink-faint contrast bumped from #94a3b8 (3.0:1
against bg-page #f0f4f8, fails WCAG AA) to #64748b
(4.6:1, passes AA). To preserve the three-tier ink
hierarchy, ink.muted darkens from #64748b to #475569
(6.9:1, passes AA Large). All 105 live text-ink-faint
callers now meet WCAG AA without any callsite edits.
UX-M9 DEFERRED. The audit prompt's "do NOT auto-trace the PNG
logo to SVG" guard rail blocks the auto-conversion path.
Logo (886x864 PNG, 773 kB) remains shipped to dist/assets/
unchanged. Tracking item: round-trip through designer
with a flat-geometric Illustrator/Figma rebuild. Phase 0
commit ships the rest of the hygiene block; UX-M9 stays
open until the SVG asset lands.
UX-L1 23 hardcoded text-[Npx] sites migrated to design tokens
(audit said 23; live count was 25 — also 2x text-[13px]
the audit missed). web/tailwind.config.cjs added the
`2xs: 0.625rem` (10px) rung so the 7x text-[10px] sites
migrate losslessly. The 16x text-[11px] sites move to
text-xs (+1px, imperceptible) and the 2x text-[13px]
sites move to text-sm (+1px, imperceptible). Six files
touched: Layout.tsx, NetworkScanPage.tsx, SCEPAdminPage.tsx,
DiscoveryPage.tsx, ESTAdminPage.tsx, auth/SessionsPage.tsx.
Post-migration: zero `text-[Npx]` callers in web/src.
UX-L2 prefers-reduced-motion handling added at the bottom of
web/src/index.css. Caps animation-duration +
transition-duration at 0.01ms when the OS reduce-motion
flag is set. Conventional non-zero value (fully zero
breaks libraries observing transitionend events).
UX-L3 Print stylesheet added to web/src/index.css. Hides
sidebar / nav, removes card shadows, expands content to
full width, prevents mid-row table breaks, and appends
link URLs as text annotations (print readers can't click
links). Operator-facing — certificate detail + audit-log
export are the most common print targets.
UX-L4 DataTable.tsx <th>s now carry scope="col". One-line
change on each of the two header sites (selectable
checkbox column + the columns.map iteration). Closes the
accessibility-tree screen-reader gap.
PERF-H2 The only production <img> site (Layout.tsx:73, the
sidebar logo) gained loading="eager" decoding="async" +
explicit width/height (64x64). eager (not lazy) because
the logo is the LCP candidate above the fold. Since
UX-M9 deferred, the logo stays as a PNG — making this
the right LCP hint to ship today.
PERF-H3 Closes via FE-H4 (self-host fonts → zero third-party
requests on cold load → preconnect/dns-prefetch hints
would point at nothing). web/index.html stays free of
preconnect lines.
Verification
============
$ git status --short
(only the 13 expected files modified)
$ cd web && npx tsc --noEmit
(exit 0, no type errors)
$ cd web && npx vitest run
Test Files 54 passed (54)
Tests 583 passed (583)
(all green; ran via `timeout 35 npx vitest run`)
$ cd web && npx vite build
✓ built in 2.70s
dist/assets/index-Da_kGcIu.css 75.54 kB (was 39.50 kB
pre-Phase-0 — +36 kB from the inlined @fontsource @font-face
declarations + the new @media print + @media reduced-motion
blocks; offset by the elimination of all third-party font
requests + the FOIT on cold load)
dist/assets/inter-latin-wght-normal-Dx4kXJAl.woff2 48.25 kB
dist/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2 21.16 kB
(... + the rest of the weight variants and unicode-range subsets)
$ grep -rohE "text-\[[0-9]+px\]" web/src --include='*.tsx'
(zero matches — all 25 inline-pixel sites migrated)
$ grep -rEc "brand-900" web/src --include='*.tsx'
(zero callers)
$ grep -nE "scope=\"col\"" web/src/components/DataTable.tsx
86, 96 (both <th> sites carry scope="col")
$ grep -nE "loading=|decoding=" web/src/components/Layout.tsx
73 (logo <img> has both attrs + width/height)
$ grep -nE "prefers-reduced-motion|@media print" web/src/index.css
74, 92 (both blocks present)
$ ls web/src/components/StatusBadge.tsx.bak
(file not found — deleted)
Audit-accuracy notes
====================
* FE-L2 stale: the .bak file was NOT tracked in git (gitignored via
.gitignore:46 *.bak). The audit's "tracked in git" claim was wrong.
Closure path adjusted: `rm` instead of `git rm`.
* UX-L1 undercount: audit reported 23 inline-pixel sites; live count
was 25 (16x 11px + 7x 10px + 2x 13px). All 25 migrated.
* UX-M9 not closed: audit prompt's "do NOT auto-trace" guard rail
blocks closure in this code session. Tracking item for the
designer/Phase-1 follow-up.
Residual risks
==============
* Logo PNG (773 kB) still ships as-is until the designer round-trip
produces a hand-built SVG. Vite cache-busts the asset hash so
cold loads cost the same one-shot 773 kB; warm loads hit the
browser cache.
* Removing brand-900 may surface in a future dark-mode rebuild
(Phase 7) that wants a deeper teal floor. Easy re-add — comment
marker left in tailwind.config.cjs at the deletion site.
* The +1px nudges on text-[11px] -> text-xs and text-[13px] ->
text-sm are theoretically visible but practically imperceptible.
Any future visual-regression suite will catch genuine differences.
160 lines
8.8 KiB
TypeScript
160 lines
8.8 KiB
TypeScript
// Phase 0 hygiene (FE-H4 / PERF-H3): self-hosted fonts. Replaces the
|
|
// Google Fonts @import that used to live at the top of src/index.css —
|
|
// Vite hashes + bundles these CSS files into web/dist on build, so cold
|
|
// loads no longer touch fonts.googleapis.com / fonts.gstatic.com.
|
|
import '@fontsource-variable/inter';
|
|
import '@fontsource/jetbrains-mono/400.css';
|
|
import '@fontsource/jetbrains-mono/500.css';
|
|
import '@fontsource/jetbrains-mono/600.css';
|
|
|
|
import { StrictMode } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import ErrorBoundary from './components/ErrorBoundary';
|
|
import AuthProvider from './components/AuthProvider';
|
|
import AuthGate from './components/AuthGate';
|
|
import Layout from './components/Layout';
|
|
import DashboardPage from './pages/DashboardPage';
|
|
import CertificatesPage from './pages/CertificatesPage';
|
|
import CertificateDetailPage from './pages/CertificateDetailPage';
|
|
import AgentsPage from './pages/AgentsPage';
|
|
import AgentDetailPage from './pages/AgentDetailPage';
|
|
import JobsPage from './pages/JobsPage';
|
|
import NotificationsPage from './pages/NotificationsPage';
|
|
import PoliciesPage from './pages/PoliciesPage';
|
|
import RenewalPoliciesPage from './pages/RenewalPoliciesPage';
|
|
import IssuersPage from './pages/IssuersPage';
|
|
import TargetsPage from './pages/TargetsPage';
|
|
import ProfilesPage from './pages/ProfilesPage';
|
|
import OwnersPage from './pages/OwnersPage';
|
|
import TeamsPage from './pages/TeamsPage';
|
|
import AgentGroupsPage from './pages/AgentGroupsPage';
|
|
import AuditPage from './pages/AuditPage';
|
|
import ShortLivedPage from './pages/ShortLivedPage';
|
|
import AgentFleetPage from './pages/AgentFleetPage';
|
|
import DiscoveryPage from './pages/DiscoveryPage';
|
|
import NetworkScanPage from './pages/NetworkScanPage';
|
|
import HealthMonitorPage from './pages/HealthMonitorPage';
|
|
import DigestPage from './pages/DigestPage';
|
|
import ObservabilityPage from './pages/ObservabilityPage';
|
|
import JobDetailPage from './pages/JobDetailPage';
|
|
import IssuerDetailPage from './pages/IssuerDetailPage';
|
|
import IssuerHierarchyPage from './pages/IssuerHierarchyPage';
|
|
import TargetDetailPage from './pages/TargetDetailPage';
|
|
import SCEPAdminPage from './pages/SCEPAdminPage';
|
|
import ESTAdminPage from './pages/ESTAdminPage';
|
|
// Bundle 1 Phase 10 — RBAC management pages.
|
|
import RolesPage from './pages/auth/RolesPage';
|
|
import RoleDetailPage from './pages/auth/RoleDetailPage';
|
|
import KeysPage from './pages/auth/KeysPage';
|
|
import AuthSettingsPage from './pages/auth/AuthSettingsPage';
|
|
import ApprovalsPage from './pages/auth/ApprovalsPage';
|
|
// Bundle 2 Phase 8 — OIDC + session management pages.
|
|
import OIDCProvidersPage from './pages/auth/OIDCProvidersPage';
|
|
import OIDCProviderDetailPage from './pages/auth/OIDCProviderDetailPage';
|
|
import GroupMappingsPage from './pages/auth/GroupMappingsPage';
|
|
import SessionsPage from './pages/auth/SessionsPage';
|
|
import BreakglassPage from './pages/auth/BreakglassPage';
|
|
// Audit 2026-05-10 MED-11 closure — federated-user admin page.
|
|
import UsersPage from './pages/auth/UsersPage';
|
|
import './index.css';
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
staleTime: 10_000,
|
|
retry: 1,
|
|
refetchOnWindowFocus: true,
|
|
},
|
|
},
|
|
});
|
|
|
|
createRoot(document.getElementById('root')!).render(
|
|
<StrictMode>
|
|
<ErrorBoundary>
|
|
<QueryClientProvider client={queryClient}>
|
|
<AuthProvider>
|
|
<AuthGate>
|
|
<BrowserRouter>
|
|
<Routes>
|
|
<Route element={<Layout />}>
|
|
<Route index element={<DashboardPage />} />
|
|
<Route path="certificates" element={<CertificatesPage />} />
|
|
<Route path="certificates/:id" element={<CertificateDetailPage />} />
|
|
<Route path="agents" element={<AgentsPage />} />
|
|
<Route path="agents/:id" element={<AgentDetailPage />} />
|
|
<Route path="fleet" element={<AgentFleetPage />} />
|
|
<Route path="jobs" element={<JobsPage />} />
|
|
<Route path="jobs/:id" element={<JobDetailPage />} />
|
|
<Route path="notifications" element={<NotificationsPage />} />
|
|
<Route path="policies" element={<PoliciesPage />} />
|
|
<Route path="renewal-policies" element={<RenewalPoliciesPage />} />
|
|
<Route path="profiles" element={<ProfilesPage />} />
|
|
<Route path="issuers" element={<IssuersPage />} />
|
|
<Route path="issuers/:id" element={<IssuerDetailPage />} />
|
|
{/* Rank 8 — operator-managed multi-level CA hierarchy.
|
|
Admin-gated at the API; the page renders the
|
|
backend's 403 as ErrorState for non-admin
|
|
callers. See docs/intermediate-ca-hierarchy.md. */}
|
|
<Route path="issuers/:id/hierarchy" element={<IssuerHierarchyPage />} />
|
|
<Route path="targets" element={<TargetsPage />} />
|
|
<Route path="targets/:id" element={<TargetDetailPage />} />
|
|
<Route path="owners" element={<OwnersPage />} />
|
|
<Route path="teams" element={<TeamsPage />} />
|
|
<Route path="agent-groups" element={<AgentGroupsPage />} />
|
|
<Route path="audit" element={<AuditPage />} />
|
|
<Route path="short-lived" element={<ShortLivedPage />} />
|
|
<Route path="discovery" element={<DiscoveryPage />} />
|
|
<Route path="network-scans" element={<NetworkScanPage />} />
|
|
<Route path="health-monitor" element={<HealthMonitorPage />} />
|
|
<Route path="digest" element={<DigestPage />} />
|
|
<Route path="observability" element={<ObservabilityPage />} />
|
|
{/* SCEP RFC 8894 + Intune master bundle Phase 9.4 (initial)
|
|
+ Phase 9 follow-up (rebrand): per-profile SCEP
|
|
Administration page with Profiles / Intune Monitoring /
|
|
Recent Activity tabs. Route is unconditional; the page
|
|
itself renders an "Admin access required" banner for
|
|
non-admin callers and skips the underlying API calls so
|
|
the server never sees a 403-prone request. */}
|
|
<Route path="scep" element={<SCEPAdminPage />} />
|
|
{/* Backward-compat alias for external bookmarks the Phase 9
|
|
release advertised. Lands on the Intune Monitoring tab. */}
|
|
<Route path="scep/intune" element={<SCEPAdminPage />} />
|
|
{/* EST RFC 7030 hardening master bundle Phase 8: per-profile
|
|
EST Administration page with Profiles / Recent Activity /
|
|
Trust Bundle tabs. Same admin-gate pattern as SCEP — the
|
|
route is unconditional; the page renders an "Admin access
|
|
required" banner for non-admin callers and skips the
|
|
underlying API calls so the server never sees a 403. */}
|
|
<Route path="est" element={<ESTAdminPage />} />
|
|
{/* Bundle 1 Phase 10 — RBAC management surface.
|
|
Every page reads /api/v1/auth/me on mount via the
|
|
useAuthMe hook and gates affordances against the
|
|
cached effective_permissions slice. Server-side
|
|
enforcement is the load-bearing layer; client-side
|
|
hide/disable is UX. */}
|
|
{/* Bundle 2 Phase 8 — OIDC + session management surface. */}
|
|
<Route path="auth/oidc/providers" element={<OIDCProvidersPage />} />
|
|
<Route path="auth/oidc/providers/:id" element={<OIDCProviderDetailPage />} />
|
|
<Route path="auth/oidc/providers/:id/mappings" element={<GroupMappingsPage />} />
|
|
<Route path="auth/sessions" element={<SessionsPage />} />
|
|
<Route path="auth/roles" element={<RolesPage />} />
|
|
<Route path="auth/roles/:id" element={<RoleDetailPage />} />
|
|
<Route path="auth/keys" element={<KeysPage />} />
|
|
<Route path="auth/settings" element={<AuthSettingsPage />} />
|
|
<Route path="auth/approvals" element={<ApprovalsPage />} />
|
|
{/* Audit 2026-05-10 CRIT-4 closure — break-glass admin surface. */}
|
|
<Route path="auth/breakglass" element={<BreakglassPage />} />
|
|
{/* Audit 2026-05-10 MED-11 closure — federated-user admin. */}
|
|
<Route path="auth/users" element={<UsersPage />} />
|
|
</Route>
|
|
</Routes>
|
|
</BrowserRouter>
|
|
</AuthGate>
|
|
</AuthProvider>
|
|
</QueryClientProvider>
|
|
</ErrorBoundary>
|
|
</StrictMode>
|
|
);
|