104 lines
4.7 KiB
Markdown
104 lines
4.7 KiB
Markdown
# Design: Open AP tab — Mark VII "PineAP Settings" card
|
|
|
|
Date: 2026-08-11
|
|
Status: Approved
|
|
|
|
## Problem
|
|
|
|
The PineAP **Open AP** tab (`#/pineap/open`) renders as a flat list of nine
|
|
plain checkboxes inside a single `.pineap-title-card`. The Mark VII PineAP page's
|
|
settings card ("PineAP") uses a titled card with a subtitle, iOS-style slide
|
|
toggles (`mat-slide-toggle`) grouped into sections, and a Save button. The Open
|
|
AP tab should be restyled to that anatomy, with behavior switched from
|
|
immediate-apply to a batched Mk7-style Save.
|
|
|
|
## Reference (Mark VII)
|
|
|
|
The Mk7 "PineAP" settings card (from the firmware bundle):
|
|
- 20px card title **"PineAP"** + muted subtitle **"Quickly set the general
|
|
behavior of PineAP"**
|
|
- The Passive/Active/Advanced button group (already on our Overview tab — not
|
|
duplicated here)
|
|
- Settings as `mat-slide-toggle` iOS switches
|
|
- A small accent **save** button (`savePineAPSettings`)
|
|
|
|
## Design
|
|
|
|
### Layout
|
|
|
|
A full-width `.pineap-card-settings` card containing:
|
|
|
|
- **Title row** (`.pineap-card-title-flex`): title **"PineAP"**, muted subtitle
|
|
**"Quickly set the general behavior of PineAP"**, and a **Save** button on the
|
|
right (accent/primary `.btn`).
|
|
- **Grouped slide-toggle settings** using the repo's existing `.switch` CSS
|
|
(iOS-style slider; defined in `app.css` but currently unused):
|
|
- **Karma**: Enable PineAP, Karma
|
|
- **SSID Pool**: Capture SSIDs to Pool, Advertise AP Impersonation Pool
|
|
- **Logging**: Log Handshakes, Log Partial Handshakes, Log PCAP, Log WiGLE,
|
|
Log Recon
|
|
- **Footer** (muted): `PineAP MAC: X Target MAC: Y`
|
|
|
|
### Behavior (Mk7-style Save, batched)
|
|
|
|
- Flipping a switch **stages** the value locally and marks the field dirty — no
|
|
API call is made until Save.
|
|
- **Save** applies only the dirty fields, batched per backend route:
|
|
- Logging + Capture SSIDs (set_config fields `loghandshake`,
|
|
`logpartialhandshake`, `logpcap`, `logwigle`, `logrecon`, `autossidpool`) →
|
|
one `POST /api/pineap/set_config` with the dirty fields. The backend merges
|
|
over the current daemon config, so untouched settings keep their values.
|
|
- `pineap_disabled` (Enable PineAP) → `POST /api/pineap/enable {enable}` if
|
|
dirty.
|
|
- `karma` → `POST /api/pineap/mimic {enable}` if dirty.
|
|
- `advertise` → `POST /api/pineap/ssidpool/advertise {enable}` if dirty.
|
|
- All dirty routes fire together (`Promise.allSettled`); toast "Settings
|
|
saved" if all fulfilled, else "Some settings failed" (error).
|
|
- Dirty-only apply preserves the unreadable live Karma state: the Pager daemon
|
|
cannot report Karma, so leaving the switch untouched means Save does not
|
|
change it.
|
|
- `load()` runs once on entry and after a successful Save to populate the
|
|
switches from the daemon (`get_config`, `hostapd`, `wifi/get_ap`). No polling
|
|
on this tab (unchanged), so staged values are never clobbered.
|
|
- If nothing is dirty, Save toasts "No changes".
|
|
|
|
### Mapping table (field → route, dirty-only)
|
|
|
|
| Switch | Backend call | Dirty flag |
|
|
|---|---|---|
|
|
| Enable PineAP | `POST /api/pineap/enable {enable}` | `pineap_disabled` |
|
|
| Karma | `POST /api/pineap/mimic {enable}` | `karma` |
|
|
| Capture SSIDs to Pool | `POST /api/pineap/set_config {autossidpool}` | `autossidpool` |
|
|
| Advertise AP Impersonation Pool | `POST /api/pineap/ssidpool/advertise {enable}` | `advertise` |
|
|
| Log Handshakes | `POST /api/pineap/set_config {loghandshake}` | `loghandshake` |
|
|
| Log Partial Handshakes | `POST /api/pineap/set_config {logpartialhandshake}` | `logpartialhandshake` |
|
|
| Log PCAP | `POST /api/pineap/set_config {logpcap}` | `logpcap` |
|
|
| Log WiGLE | `POST /api/pineap/set_config {logwigle}` | `logwigle` |
|
|
| Log Recon | `POST /api/pineap/set_config {logrecon}` | `logrecon` |
|
|
|
|
## CSS additions (`app.css`)
|
|
|
|
- `.pineap-card-subtitle` — muted, ~13px subtitle under the card title.
|
|
- `.pineap-settings-section` — small muted group label (e.g. "Karma", "SSID
|
|
Pool", "Logging"), 13px, with margin, used between the toggle groups.
|
|
- Reuse the existing `.switch` slider CSS (no change to it).
|
|
|
|
## Files touched
|
|
|
|
- `payload/user/general/pager-webui/www/css/app.css` — two new classes.
|
|
- `payload/user/general/pager-webui/www/js/views.js` — rewrite
|
|
`views.pineap_open` (layout + staged-save behavior).
|
|
|
|
No backend changes. No test-module changes.
|
|
|
|
## Verification
|
|
|
|
1. JS delimiter balance check (Python checker; no node available).
|
|
2. All 13 backend unittest modules pass (unchanged).
|
|
3. Deploy via `scripts/deploy.ps1` (password supplied securely), restart
|
|
`/etc/init.d/pagerwebui`.
|
|
4. On-device: Open AP tab shows the titled settings card with grouped slide
|
|
switches and Save; flipping a switch then Save applies the values (verify
|
|
via `get_config`/`hostapd` after Save); untouched toggles are not sent;
|
|
user walks the tab visually.
|