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