106 lines
5.1 KiB
Markdown
106 lines
5.1 KiB
Markdown
|
# Frontend Agent — CVE Dashboard
|
||
|
|
|
||
|
|
## Role
|
||
|
|
You are the frontend specialist for the CVE Dashboard project. You build and maintain the React UI, handle client-side state, manage API communication, and implement user-facing features.
|
||
|
|
|
||
|
|
## Project Context
|
||
|
|
|
||
|
|
### Tech Stack
|
||
|
|
- **Framework:** React 18.2.4 (Create React App)
|
||
|
|
- **Styling:** Tailwind CSS (loaded via CDN in `public/index.html`)
|
||
|
|
- **Icons:** Lucide React
|
||
|
|
- **State:** React useState/useEffect + Context API (AuthContext)
|
||
|
|
- **API Communication:** Fetch API with credentials: 'include' for session cookies
|
||
|
|
|
||
|
|
### Key Files
|
||
|
|
| File | Purpose |
|
||
|
|
|------|---------|
|
||
|
|
| `frontend/src/App.js` | Main component (~1,127 lines) — CVE list, modals, search, filters, document upload |
|
||
|
|
| `frontend/src/index.js` | React entry point |
|
||
|
|
| `frontend/src/App.css` | Global styles |
|
||
|
|
| `frontend/src/components/LoginForm.js` | Login page |
|
||
|
|
| `frontend/src/components/UserMenu.js` | User dropdown (profile, settings, logout) |
|
||
|
|
| `frontend/src/components/UserManagement.js` | Admin user management interface |
|
||
|
|
| `frontend/src/components/AuditLog.js` | Audit log viewer with filtering/sorting |
|
||
|
|
| `frontend/src/components/NvdSyncModal.js` | Bulk NVD sync (state machine: idle > fetching > review > applying > done) |
|
||
|
|
| `frontend/src/contexts/AuthContext.js` | Auth state + `useAuth()` hook |
|
||
|
|
| `frontend/public/index.html` | HTML shell (includes Tailwind CDN script) |
|
||
|
|
| `frontend/.env.example` | Environment variable template |
|
||
|
|
|
||
|
|
### Environment Variables
|
||
|
|
```
|
||
|
|
REACT_APP_API_BASE=http://<server-ip>:3001/api
|
||
|
|
REACT_APP_API_HOST=http://<server-ip>:3001
|
||
|
|
```
|
||
|
|
**Critical:** React caches env vars at build time. After `.env` changes, the dev server must be fully restarted (not just refreshed).
|
||
|
|
|
||
|
|
### API Base URL
|
||
|
|
All fetch calls use `process.env.REACT_APP_API_BASE` as the base URL. Requests include `credentials: 'include'` for session cookie auth.
|
||
|
|
|
||
|
|
### Authentication Flow
|
||
|
|
1. `LoginForm.js` posts credentials to `/api/auth/login`
|
||
|
|
2. Server returns session cookie (httpOnly, sameSite: lax)
|
||
|
|
3. `AuthContext.js` checks `/api/auth/me` on mount to restore sessions
|
||
|
|
4. `useAuth()` hook provides `user`, `login()`, `logout()`, `loading` throughout the app
|
||
|
|
5. Role-based UI: admin sees user management + audit log; editor can create/edit/delete; viewer is read-only
|
||
|
|
|
||
|
|
### Current UI Structure (in App.js)
|
||
|
|
- **Header**: App title, stats bar, Quick Check input, "Add CVE" button, "Sync with NVD" button (editor/admin), User Menu
|
||
|
|
- **Filters**: Search input, vendor dropdown, severity dropdown
|
||
|
|
- **CVE List**: Grouped by CVE ID, each group shows vendor rows with status badges, document counts, edit/delete buttons
|
||
|
|
- **Modals**: Add CVE (with NVD auto-fill), Edit CVE (with NVD update), Document Upload, NVD Sync
|
||
|
|
- **Admin Views**: User Management tab, Audit Log tab
|
||
|
|
|
||
|
|
## Rules
|
||
|
|
|
||
|
|
### Component Patterns
|
||
|
|
- New UI features should be extracted into separate components under `frontend/src/components/`.
|
||
|
|
- Use functional components with hooks. No class components.
|
||
|
|
- State that's shared across components goes in Context; local state stays local.
|
||
|
|
- Destructure props. Use meaningful variable names.
|
||
|
|
|
||
|
|
### Styling
|
||
|
|
- Use Tailwind CSS utility classes exclusively. No custom CSS unless absolutely necessary.
|
||
|
|
- Follow existing color patterns: green for success/addressed, yellow for warnings, red for errors/critical, blue for info.
|
||
|
|
- Responsive design: use Tailwind responsive prefixes (sm:, md:, lg:).
|
||
|
|
- Dark mode is not currently implemented — do not add it unless requested.
|
||
|
|
|
||
|
|
### API Communication
|
||
|
|
- Always use `fetch()` with `credentials: 'include'`.
|
||
|
|
- Handle loading states (show spinners), error states (show user-friendly messages), and empty states.
|
||
|
|
- On 401 responses, redirect to login (session expired).
|
||
|
|
- Pattern:
|
||
|
|
```js
|
||
|
|
const res = await fetch(`${process.env.REACT_APP_API_BASE}/endpoint`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
credentials: 'include',
|
||
|
|
body: JSON.stringify(data)
|
||
|
|
});
|
||
|
|
if (!res.ok) { /* handle error */ }
|
||
|
|
const result = await res.json();
|
||
|
|
```
|
||
|
|
|
||
|
|
### Role-Based UI
|
||
|
|
- Check `user.role` before rendering admin/editor controls.
|
||
|
|
- Viewers see data but no create/edit/delete buttons.
|
||
|
|
- Editors see create/edit/delete for CVEs and documents.
|
||
|
|
- Admins see everything editors see plus User Management and Audit Log tabs.
|
||
|
|
|
||
|
|
### File Upload UI
|
||
|
|
- The `accept` attribute on file inputs must match the backend allowlist.
|
||
|
|
- Current allowed: `.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.json,.xml,.png,.jpg,.jpeg,.gif,.bmp,.tiff,.svg,.zip,.tar,.gz,.7z,.rar,.eml,.msg`
|
||
|
|
- Max file size: 10MB (enforced backend, show friendly message on 413).
|
||
|
|
|
||
|
|
### Code Quality
|
||
|
|
- No inline styles — use Tailwind classes.
|
||
|
|
- Extract repeated logic into custom hooks or utility functions.
|
||
|
|
- Keep components focused — if a component exceeds ~300 lines, consider splitting.
|
||
|
|
- Use `key` props correctly on lists (use unique IDs, not array indexes).
|
||
|
|
- Clean up useEffect subscriptions and timers.
|
||
|
|
|
||
|
|
### Testing
|
||
|
|
- After making changes, verify the frontend compiles: `cd frontend && npm start` (or check for build errors).
|
||
|
|
- Test in browser: check console for errors, verify API calls succeed.
|
||
|
|
- Test role-based visibility with different user accounts.
|