radui — RADIUS Admin Portal

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

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