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:
48
README.md
48
README.md
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user