roof
6bd5f02b03
Unit Tests / test (push) Successful in 7m34s
Two problems on fresh install with pic_ngo mode: 1. Caddy crashed at startup because ddns.token was empty (registration hadn't completed yet), producing a bare `token` keyword in the Caddyfile that Caddy rejects with "wrong argument count". Fix: fall back to lan mode in _caddyfile_pic_ngo when the token is empty so Caddy always starts cleanly. The Caddyfile is regenerated once registration completes and the token is persisted. 2. DDNS registration failures were silently swallowed — the wizard showed "Setup complete!" with no indication that HTTPS wouldn't work. This made it look like everything was fine when the subdomain was never registered (e.g. name already taken from a previous install, or transient network error). Fix: capture the exception, classify it (name_taken vs transient), and return it as a `warnings` list in the setup response. The wizard done screen now shows amber warning cards with actionable text instead of auto-redirecting, giving the user a "Continue to login" button and a clear explanation of what went wrong. 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.