84 lines
3.0 KiB
Markdown
84 lines
3.0 KiB
Markdown
# radui — RADIUS Admin Portal
|
|
|
|
Web UI for the [`radapi`](../radapi) FreeRADIUS REST API. Manage **clients**
|
|
(customer MACs), **devices** (NAS/AP boxes seen in accounting), and **VLANs**
|
|
without touching SQL. Auth is an **API key** entered on a login screen and stored in
|
|
the browser (`localStorage`), sent as `X-API-Key` on every request.
|
|
|
|
## Stack
|
|
|
|
- React 19 + Vite + TypeScript
|
|
- Tailwind v4 + shadcn/ui-style components (Radix primitives)
|
|
- react-router-dom, sonner (toasts)
|
|
- Node provided via `shell.nix` (NixOS) — no global install needed
|
|
|
|
## Develop
|
|
|
|
```bash
|
|
nix-shell # drops you into a shell with node 22 + npm
|
|
npm install # first time only
|
|
npm run dev # http://localhost:5173
|
|
```
|
|
|
|
Or as a one-liner without entering the shell:
|
|
|
|
```bash
|
|
nix-shell --run "npm run dev -- --host 0.0.0.0"
|
|
```
|
|
|
|
### Talking to the API
|
|
|
|
In dev, Vite proxies `/api/*` to the backend so the browser makes same-origin
|
|
requests (no CORS) and the key is only ever sent as a header. The target defaults
|
|
to `http://10.0.1.235:8000`; override it:
|
|
|
|
```bash
|
|
VITE_API_TARGET=http://192.168.1.21:8000 npm run dev
|
|
```
|
|
|
|
Log in with the API key configured in radapi's `.env` (`API_KEY`). A `401` from any
|
|
request clears the stored key and returns you to the login screen.
|
|
|
|
## Build
|
|
|
|
```bash
|
|
npm run build # tsc -b && vite build → dist/
|
|
npm run preview # serve the production build locally
|
|
```
|
|
|
|
For production the built `dist/` is static — serve it behind the same origin as the
|
|
API (or set `VITE_API_BASE` to the API's absolute URL at build time).
|
|
|
|
## Layout
|
|
|
|
```
|
|
src/
|
|
main.tsx providers (router, auth, toaster)
|
|
App.tsx auth gate + nav + routes
|
|
auth/auth.tsx API-key auth context (login/logout, 401 handling)
|
|
lib/api.ts typed API client (client + device + vlan) + error handling
|
|
lib/utils.ts cn() helper
|
|
pages/
|
|
Login.tsx API-key login screen
|
|
Clients.tsx client list + add/edit/delete + CSV import/export dialogs
|
|
Devices.tsx NAS device list + editable alias
|
|
Vlans.tsx VLAN list + add/rename/delete dialogs
|
|
components/
|
|
ClientImportExport.tsx CSV import (preview/confirm) + export dialog
|
|
ui/ button, input, label, dialog, select, table, card, badge, sonner
|
|
```
|
|
|
|
## Notes
|
|
|
|
- **Clients** — add requires MAC, group (VLAN), name, phone; alias optional. The
|
|
group dropdown is populated from `GET /vlan/`. Edit changes any subset of group,
|
|
status, name, phone, alias.
|
|
- **CSV import** parses the file client-side, does a dry-run against
|
|
`POST /client/import` to preview valid/error rows, and only writes on confirm.
|
|
Export downloads all clients as CSV.
|
|
- **Devices** — lists NAS/AP boxes from accounting, one row per **AP MAC** (with its
|
|
NAS IP and all SSIDs — extra SSIDs collapse to `SSID1 (and N more…)` on hover). The
|
|
only editable field is the human `alias` (`PUT /device/{ap_mac}`).
|
|
- Validation/`4xx` errors from the API surface as toasts with the server's message
|
|
(422 field errors are flattened to `field: message`).
|