feat: mobile setup — QR onboarding, Wi-Fi scoped mobileconfig (#73)

* fix: scope mobileconfig DNS to Wi-Fi only via OnDemandRules Without OnDemandRules, iOS applies the DoT profile globally — cellular DNS breaks when the phone leaves the LAN. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: phone setup QR code in dashboard header - Add /qr endpoint serving SVG (uses existing qrcode crate, svg feature) - Header popover: QR on desktop, direct download link on mobile viewports - Only visible when [mobile] enabled = true in config - Expose mobile.enabled and mobile.port in /stats response - Lazy-load QR on first click, dismiss on outside click Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: add Cache-Control to /qr, re-fetch QR on each popover open Cache-Control: no-store prevents stale QR after LAN IP change. Remove qrLoaded flag so the QR always reflects the current IP. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * style: rustfmt serve_qr response tuple Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: add iOS install steps to phone setup popover iOS shows "Profile Downloaded" with no guidance. The popover now includes the 3-step install flow including the buried Certificate Trust Settings toggle. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-10 22:21:51 +03:00
parent 921ed68d54
commit 2c20c56421
8 changed files with 108 additions and 4 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
 CLAUDE.md
 docs/
 site/blog/posts/
+ios/
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -30,7 +30,7 @@ tokio-rustls = "0.26"
 arc-swap = "1"
 ring = "0.17"
 rustls-pemfile = "2.2.0"
-qrcode = { version = "0.14", default-features = false }
+qrcode = { version = "0.14", default-features = false, features = ["svg"] }

 [dev-dependencies]
 criterion = { version = "0.8", features = ["html_reports"] }
--- a/site/dashboard.html
+++ b/site/dashboard.html
@@ -554,6 +554,20 @@ body {
    <div class="tagline">DNS that governs itself</div>
  </div>
  <div style="display:flex;align-items:center;gap:1.2rem;">
+    <div id="phoneSetup" style="position:relative;display:none;">
+      <button class="btn" onclick="togglePhoneSetup()" style="background:var(--bg-surface);color:var(--text-secondary);font-family:var(--font-mono);font-size:0.7rem;padding:0.35rem 0.6rem;border:1px solid var(--border);" title="Set up phone">Phone Setup</button>
+      <div id="phoneSetupPopover" style="display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:100;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1.2rem;width:260px;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
+        <div style="font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-secondary);margin-bottom:0.8rem;">Phone Setup</div>
+        <div id="qrContainer" style="display:flex;justify-content:center;margin-bottom:0.8rem;"></div>
+        <div id="phoneSetupLink" style="display:none;text-align:center;margin-bottom:0.8rem;"></div>
+        <div style="font-family:var(--font-mono);font-size:0.62rem;color:var(--text-dim);line-height:1.6;">
+          1. Scan QR &rarr; allow download<br>
+          2. Settings &rarr; Profile Downloaded &rarr; Install<br>
+          3. Settings &rarr; General &rarr; About &rarr;<br>
+          &nbsp;&nbsp;&nbsp;Certificate Trust Settings &rarr; toggle ON
+        </div>
+      </div>
+    </div>
    <button class="btn" id="pauseBtn" style="background:var(--amber);color:white;font-family:var(--font-mono);font-size:0.7rem;display:none;">Pause 5m</button>
    <button class="btn" id="toggleBtn" onclick="toggleBlocking()" style="background:var(--rose);color:white;font-family:var(--font-mono);font-size:0.7rem;display:none;"></button>
    <div class="status-badge">
@@ -788,6 +802,34 @@ function formatTime(epoch) {
  return d.toLocaleTimeString([], { hour12: false });
 }

+let mobilePort = 8765;
+function togglePhoneSetup() {
+  const pop = document.getElementById('phoneSetupPopover');
+  const isOpen = pop.style.display !== 'none';
+  pop.style.display = isOpen ? 'none' : 'block';
+  if (!isOpen) {
+    if (window.innerWidth <= 700) {
+      document.getElementById('qrContainer').style.display = 'none';
+      const linkEl = document.getElementById('phoneSetupLink');
+      const host = window.location.hostname;
+      linkEl.style.display = 'block';
+      linkEl.innerHTML = `<a href="http://${host}:${mobilePort}/mobileconfig" style="display:inline-block;padding:0.5rem 1rem;background:var(--amber);color:white;border-radius:6px;text-decoration:none;font-family:var(--font-mono);font-size:0.75rem;">Install Profile</a>`;
+    } else {
+      fetch(API + '/qr').then(r => r.text()).then(svg => {
+        document.getElementById('qrContainer').innerHTML = svg;
+      }).catch(() => {
+        document.getElementById('qrContainer').innerHTML = '<div class="empty-state">Could not load QR</div>';
+      });
+    }
+  }
+}
+document.addEventListener('click', (e) => {
+  const setup = document.getElementById('phoneSetup');
+  if (setup && !setup.contains(e.target)) {
+    document.getElementById('phoneSetupPopover').style.display = 'none';
+  }
+});
+
 function shortSrc(addr) {
  if (!addr) return '';
  const ip = addr.replace(/:\d+$/, '');
@@ -1058,6 +1100,14 @@ async function refresh() {
      }
    }

+    const phoneSetupEl = document.getElementById('phoneSetup');
+    if (stats.mobile && stats.mobile.enabled) {
+      phoneSetupEl.style.display = '';
+      mobilePort = stats.mobile.port;
+    } else {
+      phoneSetupEl.style.display = 'none';
+    }
+
    document.getElementById('overrideCount').textContent = stats.overrides.active;
    document.getElementById('blockedCount').textContent = formatNumber(q.blocked);
    const bl = stats.blocking;
--- a/src/api.rs
+++ b/src/api.rs
@@ -57,6 +57,7 @@ pub fn router(ctx: Arc<ServerCtx>) -> Router {
        .route("/services/{name}/routes", post(add_route))
        .route("/services/{name}/routes", delete(remove_route))
        .route("/ca.pem", get(serve_ca))
+        .route("/qr", get(serve_qr))
        .route("/fonts/fonts.css", get(serve_fonts_css))
        .route(
            "/fonts/dm-sans-latin.woff2",
@@ -170,9 +171,16 @@ struct StatsResponse {
    overrides: OverrideStats,
    blocking: BlockingStatsResponse,
    lan: LanStatsResponse,
+    mobile: MobileStatsResponse,
    memory: MemoryStats,
 }

+#[derive(Serialize)]
+struct MobileStatsResponse {
+    enabled: bool,
+    port: u16,
+}
+
 #[derive(Serialize)]
 struct LanStatsResponse {
    enabled: bool,
@@ -551,6 +559,10 @@ async fn stats(State(ctx): State<Arc<ServerCtx>>) -> Json<StatsResponse> {
            enabled: ctx.lan_enabled,
            peers: ctx.lan_peers.lock().unwrap().list().len(),
        },
+        mobile: MobileStatsResponse {
+            enabled: ctx.mobile_enabled,
+            port: ctx.mobile_port,
+        },
        memory: MemoryStats {
            cache_bytes,
            blocklist_bytes,
@@ -931,6 +943,28 @@ pub async fn serve_ca(State(ctx): State<Arc<ServerCtx>>) -> Result<impl IntoResp
    ))
 }

+async fn serve_qr(State(ctx): State<Arc<ServerCtx>>) -> Result<impl IntoResponse, StatusCode> {
+    if !ctx.mobile_enabled {
+        return Err(StatusCode::NOT_FOUND);
+    }
+    let lan_ip = *ctx.lan_ip.lock().unwrap();
+    let url = format!("http://{}:{}/mobileconfig", lan_ip, ctx.mobile_port);
+    let code = qrcode::QrCode::new(&url).map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+    let svg = code
+        .render::<qrcode::render::svg::Color>()
+        .min_dimensions(180, 180)
+        .dark_color(qrcode::render::svg::Color("#2c2418"))
+        .light_color(qrcode::render::svg::Color("#faf7f2"))
+        .build();
+    Ok((
+        [
+            (header::CONTENT_TYPE, "image/svg+xml"),
+            (header::CACHE_CONTROL, "no-store"),
+        ],
+        svg,
+    ))
+}
+
 async fn serve_fonts_css() -> impl IntoResponse {
    (
        [
@@ -1005,6 +1039,8 @@ mod tests {
            dnssec_strict: false,
            health_meta: crate::health::HealthMeta::test_fixture(),
            ca_pem: None,
+            mobile_enabled: false,
+            mobile_port: 8765,
        })
    }

--- a/src/ctx.rs
+++ b/src/ctx.rs
@@ -70,6 +70,8 @@ pub struct ServerCtx {
    /// Used by `/ca.pem`, `/mobileconfig`, and `/ca.mobileconfig`
    /// handlers to avoid per-request disk I/O on the hot path.
    pub ca_pem: Option<String>,
+    pub mobile_enabled: bool,
+    pub mobile_port: u16,
 }

 /// Transport-agnostic DNS resolution. Runs the full pipeline (overrides, blocklist,
--- a/src/dot.rs
+++ b/src/dot.rs
@@ -383,6 +383,8 @@ mod tests {
            dnssec_strict: false,
            health_meta: crate::health::HealthMeta::test_fixture(),
            ca_pem: None,
+            mobile_enabled: false,
+            mobile_port: 8765,
        });

        let listener = TcpListener::bind("127.0.0.1:0").await.unwrap();
--- a/src/main.rs
+++ b/src/main.rs
@@ -319,6 +319,8 @@ async fn main() -> numa::Result<()> {
        dnssec_strict: config.dnssec.strict,
        health_meta,
        ca_pem,
+        mobile_enabled: config.mobile.enabled,
+        mobile_port: config.mobile.port,
    });

    let zone_count: usize = ctx.zone_map.values().map(|m| m.len()).sum();
--- a/src/mobileconfig.rs
+++ b/src/mobileconfig.rs
@@ -144,8 +144,6 @@ fn build_ca_payload(ca_pem: &str) -> String {
 }

 /// Render the `com.apple.dnsSettings.managed` payload dict for Full mode.
-/// Pins the device to Numa as its system resolver over DoT with
-/// `ServerName = "numa.numa"` (must match the DoT cert SAN).
 fn build_dns_payload(lan_ip: Ipv4Addr) -> String {
    format!(
        r#"		<dict>
@@ -160,8 +158,21 @@ fn build_dns_payload(lan_ip: Ipv4Addr) -> String {
 				<key>ServerName</key>
 				<string>numa.numa</string>
 			</dict>
+			<key>OnDemandRules</key>
+			<array>
+				<dict>
+					<key>Action</key>
+					<string>Connect</string>
+					<key>InterfaceTypeMatch</key>
+					<string>WiFi</string>
+				</dict>
+				<dict>
+					<key>Action</key>
+					<string>Disconnect</string>
+				</dict>
+			</array>
 			<key>PayloadDescription</key>
-			<string>Routes all DNS queries through Numa over DNS-over-TLS</string>
+			<string>Routes DNS queries through Numa over DoT when on Wi-Fi</string>
 			<key>PayloadDisplayName</key>
 			<string>Numa DNS-over-TLS</string>
 			<key>PayloadIdentifier</key>