Add 'frontend/' from commit '63381d9f2a4829e09d9ba6f29608bbaa2eb38601'

git-subtree-dir: frontend git-subtree-mainline: 79bc04aaa7 git-subtree-split: 63381d9f2a
2026-07-31 23:53:50 +05:00
parent 79bc04aaa7 63381d9f2a
commit 010d98df1c
39 changed files with 4968 additions and 0 deletions
@@ -0,0 +1,73 @@
+# 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`).