8650704316
Backend: - AuthManager (api/auth_manager.py): server-side user store with bcrypt password hashing, account lockout after 5 failed attempts (15 min), and atomic file writes - AuthRoutes (api/auth_routes.py): Blueprint at /api/auth/* — login, logout, me, change-password, admin reset-password, list-users - app.py: register auth_bp blueprint; add enforce_auth before_request hook (401 for unauthenticated, 403 for wrong role; only active when auth store has users so pre-auth tests remain green); instantiate AuthManager; update POST /api/peers to require password >= 10 chars and auto-provision email + calendar + files + auth accounts with full rollback on any failure; extend DELETE /api/peers to tear down all four service accounts; add /api/peer/dashboard and /api/peer/services peer-scoped routes; fix is_local_request to also trust the last X-Forwarded-For entry appended by the reverse proxy (Caddy) - Role-based access: admin for /api/* (except /api/auth/* which is public and /api/peer/* which is peer-only) - setup_cell.py: generate and print initial admin password, store in .admin_initial_password with 0600 permissions; cleaned up on first admin login Frontend: - AuthContext.jsx: React context with login/logout/me state and Axios interceptor for automatic 401 redirect - PrivateRoute.jsx: route guard component - Login.jsx: login page with error handling and must-change-password redirect - AccountSettings.jsx: change-password form for any authenticated user - PeerDashboard.jsx: peer-role landing page (IP, service list) - MyServices.jsx: peer service links page - App.jsx, Sidebar.jsx: AuthContext integration, logout button, PrivateRoute wrappers, peer-role routing - Peers.jsx, WireGuard.jsx, api.js: auth-aware API calls Tests: 100 new auth tests all pass (test_auth_manager, test_auth_routes, test_route_protection, test_peer_provisioning). Fix pre-existing test failures: update WireGuard test keys to valid 44-char base64 format (test_wireguard_manager, test_peer_wg_integration), add password field and service manager mocks to test_api_endpoints peer tests, add auth helpers to conftest.py. Full suite: 845 passed, 0 failures. Fixed: .admin_initial_password security cleanup on bootstrap, username minimum length (3 chars enforced by USERNAME_RE regex) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Personal Internet Cell - Web UI
A modern React-based web interface for managing your Personal Internet Cell.
Features
- Dashboard: Overview of cell status and services
- Peer Management: Add, remove, and configure WireGuard peers
- Network Services: DNS, DHCP, and NTP management
- WireGuard: VPN configuration and status
- Email Services: Postfix and Dovecot management
- Calendar Services: Radicale CalDAV/CardDAV management
- File Storage: WebDAV file storage management
- Routing: Advanced VPN gateway and routing configuration
- Logs: System logs and monitoring
- Settings: Cell configuration and security settings
Tech Stack
- React 19: Modern React with hooks
- Vite: Fast build tool and dev server
- Tailwind CSS: Utility-first CSS framework
- Lucide React: Beautiful icons
- React Router: Client-side routing
- Axios: HTTP client for API communication
Development
Prerequisites
- Node.js 18+ and npm
- Personal Internet Cell backend running on port 3000
Setup
-
Install dependencies:
bun install -
Start the development server:
npm run dev -
Open your browser to
http://localhost:5173
Development Features
- Hot Reload: Changes reflect immediately
- API Proxy: Requests to
/api/*are proxied tohttp://localhost:3000 - TypeScript Support: Full TypeScript support available
- ESLint: Code linting and formatting
Building for Production
Build
npm run build
This creates a dist/ directory with optimized production files.
Preview
npm run preview
This serves the built files locally for testing.
API Integration
The Web UI communicates with the Personal Internet Cell backend API:
- Base URL:
http://localhost:3000(development) - Health Check:
/health - API Endpoints:
/api/*
Environment Variables
Create a .env file to customize the API URL:
VITE_API_URL=http://localhost:3000
Project Structure
src/
├── components/ # Reusable UI components
│ └── Sidebar.jsx # Navigation sidebar
├── pages/ # Page components
│ ├── Dashboard.jsx # Main dashboard
│ ├── Peers.jsx # Peer management
│ ├── NetworkServices.jsx
│ ├── WireGuard.jsx # VPN configuration
│ ├── Email.jsx # Email services
│ ├── Calendar.jsx # Calendar services
│ ├── Files.jsx # File storage
│ ├── Routing.jsx # Routing configuration
│ ├── Logs.jsx # System logs
│ └── Settings.jsx # Cell settings
├── services/ # API services
│ └── api.js # API client and endpoints
├── App.jsx # Main app component
├── main.jsx # App entry point
└── index.css # Global styles
Styling
The Web UI uses Tailwind CSS with custom components:
- Cards:
.cardfor content containers - Buttons:
.btn,.btn-primary,.btn-secondary, etc. - Inputs:
.inputfor form fields - Status Indicators:
.status-indicator,.status-online, etc.
Browser Support
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
Contributing
- Follow the existing code style
- Use TypeScript for new components
- Add tests for new features
- Update documentation as needed
License
Part of the Personal Internet Cell project.