74 lines
2.4 KiB
Markdown
74 lines
2.4 KiB
Markdown
# radui — RADIUS Admin Portal
|
|
|
|
Web UI for the [`radapi`](../radapi) FreeRADIUS REST API. Manage **devices** 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 (device + vlan) + error handling
|
|
lib/utils.ts cn() helper
|
|
pages/
|
|
Login.tsx API-key login screen
|
|
Devices.tsx device list + add/edit/delete dialogs
|
|
Vlans.tsx VLAN list + add/rename/delete dialogs
|
|
components/ui/ button, input, label, dialog, select, table, card, badge, sonner
|
|
```
|
|
|
|
## Notes
|
|
|
|
- **Add device** requires MAC, group (VLAN), name, phone; alias optional. The group
|
|
dropdown is populated from `GET /vlan/`.
|
|
- **Edit device** can change group, status, name, phone, alias (any subset).
|
|
- Validation/`4xx` errors from the API surface as toasts with the server's message
|
|
(422 field errors are flattened to `field: message`).
|