roof/pic

Files

T

roof 4215e03ac6 fix: autosave, cell name overflow, length validation, apply-and-verify tests

Autosave on Apply (was broken):
- App.jsx called useDraftConfig() in the same component that rendered
  DraftConfigProvider — a component cannot consume context it provides.
  Fixed by splitting into AppCore (consumes context, all logic) and App
  (thin shell that wraps AppCore in DraftConfigProvider).  The hook now
  runs inside the provider and hasDirty()/flushAll() work correctly.

Cell name / domain length validation (255-char DNS standard):
- api/app.py: reject cell_name or domain > 255 chars or empty with 400
- api/app.py: reject ip_range without CIDR prefix (bare IPs shift all VIPs)
- webui/src/pages/Settings.jsx: cellNameError + domainError computed values
  block saveIdentity and show inline error; maxLength={255} on inputs
- tests/test_identity_validation.py: 8 unit tests for the new validation

Cell name overflow on all pages:
- Dashboard.jsx: add min-w-0 to flex child div + truncate + title on cell_name
- CellNetwork.jsx: min-w-0 + truncate + title on cell_name, domain, endpoint,
  vpn_subnet in invite cards and connected-cells list

Apply-and-verify integration tests:
- tests/integration/test_apply_propagation.py: TestPendingState (no restarts)
  and TestApplyAndVerify (triggers real container restart + health poll)
  covering the full save → apply → wait → verify propagation lifecycle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-04-24 05:29:09 -04:00

public

init

2025-09-12 23:04:52 +03:00

src

fix: autosave, cell name overflow, length validation, apply-and-verify tests

2026-04-24 05:29:09 -04:00

.gitignore

init

2025-09-12 23:04:52 +03:00

Dockerfile

wip: Fix ContainerDashboard

2025-09-13 15:49:32 +03:00

eslint.config.js

init

2025-09-12 23:04:52 +03:00

index.html

wip: peers

2025-09-13 18:56:00 +03:00

nginx.conf

feat: external IP detection, port status, fix peer config generation

2026-04-20 02:41:50 -04:00

package.json

wip: peer make work with qr code

2025-09-13 12:08:28 -05:00

postcss.config.js

init

2025-09-12 23:04:52 +03:00

README.md

wip: make work Services Status

2025-09-13 14:23:31 +03:00

tailwind.config.js

init

2025-09-12 23:04:52 +03:00

vite.config.js

init

2025-09-12 23:04:52 +03:00

README.md

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 to http://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: .card for content containers
Buttons: .btn, .btn-primary, .btn-secondary, etc.
Inputs: .input for 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.