feat: Phase 7 - Frontend scaffolding and auth (T-023, T-024, T-025)

T-023: Initialize React project
- Vite + React 19 + TypeScript scaffold
- Tailwind CSS v4 with @tailwindcss/vite plugin
- Dependencies: react-router-dom, axios, @tanstack/react-query, lucide-react
- Project structure: api/, components/, pages/, context/, types/, hooks/, lib/

T-024: API client and auth context
- Axios client with JWT interceptor (auto-attach token, clear on 401)
- login() and getMe() API functions
- AuthContext: user state, login, logout, isAuthenticated, isLoading
- Token persistence via localStorage with hydration on mount
- TypeScript types for all backend models

T-025: Login page and layout
- LoginPage with form, error handling, redirect on success
- Layout with sidebar + header + Outlet
- Sidebar with role-aware navigation (System only for admin)
- ProtectedRoute wrapper with role-based access control
- Routes: /login, /dashboard, /techniques, /tests, /system
This commit is contained in:
2026-02-06 16:09:50 +01:00
parent 52d230628d
commit 591b5df250
26 changed files with 3489 additions and 4 deletions

View File

@@ -18,7 +18,7 @@ Aegis is a comprehensive platform for tracking and managing security coverage ag
- **Database**: PostgreSQL 15
- **Object Storage**: MinIO (S3-compatible)
- **ORM**: SQLAlchemy with Alembic migrations
- **Frontend**: React + TypeScript + Vite (coming soon)
- **Frontend**: React 19 + TypeScript + Vite + Tailwind CSS v4
## Quick Start
@@ -50,11 +50,23 @@ docker exec -w /app aegis-backend-1 alembic upgrade head
docker exec -w /app aegis-backend-1 python -m app.seed
```
5. Verify the installation:
5. Start the frontend (requires Node.js 20+ or Docker):
```bash
# Check backend health
# Option A — with Node.js installed locally
cd frontend && npm install && npm run dev
# Option B — via Docker
docker run --rm -v ./frontend:/app -w /app -p 5173:5173 node:20-alpine sh -c "npm run dev"
```
6. Verify the installation:
```bash
# Backend health
curl http://localhost:8000/health
# Expected: {"status":"ok"}
# Frontend
# Open http://localhost:5173 — should show the Aegis login page
```
### Authentication
@@ -77,6 +89,7 @@ curl http://localhost:8000/api/v1/auth/me \
| Service | Port | Description |
|----------|------|-------------|
| Frontend | 5173 | React dev server (Vite) |
| Backend | 8000 | FastAPI REST API |
| PostgreSQL | 5433 | Database (mapped to 5433 to avoid conflicts) |
| MinIO API | 9000 | S3-compatible object storage |
@@ -184,7 +197,34 @@ Aegis/
│ ├── status_service.py # Recalculate technique status from tests
│ ├── mitre_sync_service.py # MITRE ATT&CK sync via TAXII / GitHub
│ └── intel_service.py # Automated intel scan via RSS feeds
└── frontend/ # React frontend (coming soon)
└── frontend/ # React + TypeScript frontend
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
├── main.tsx # App entry point
├── App.tsx # Route definitions
├── index.css # Tailwind CSS entry
├── api/ # Axios clients
│ ├── client.ts # Base axios instance with JWT interceptor
│ └── auth.ts # login(), getMe()
├── context/
│ └── AuthContext.tsx # Auth state: user, login, logout, isLoading
├── components/
│ ├── Layout.tsx # Sidebar + header + <Outlet/>
│ ├── Sidebar.tsx # Nav links (role-aware)
│ └── ProtectedRoute.tsx
├── pages/
│ ├── LoginPage.tsx
│ ├── DashboardPage.tsx
│ ├── TechniquesPage.tsx
│ ├── TestsPage.tsx
│ └── SystemPage.tsx
├── types/
│ └── models.ts # TS interfaces matching backend schemas
├── hooks/
└── lib/
```
## Database Schema