Web UI for the 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

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:

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:

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

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).