chahinebrini 1596a4ea7a feat(protection,onboarding): anti-auto-reactivation + protection pre-explainer + custom sheets
## Backend: Anti-Auto-Reactivation nach Cooldown

Bug: nach Cooldown-Ablauf wurde der URL-Filter automatisch wieder
reaktiviert (enforceProtection-Loop fängt 'recoveringFromBypass'-Phase ab).
Damit war der Cooldown-Schritt entwertet — User konnte nicht wirklich
abschalten, weil die App den Schutz sofort wieder hochfuhr.

Fix: Profile.protectionDisabledAt (DateTime nullable). Wird in
/api/cooldown/status auf cooldown-auto-resolve gesetzt. /api/protection/state
gibt dann protectionShouldBeActive=false zurück → Frontend macht KEINE
Auto-Reactivation. User muss explizit re-aktivieren (CTA in der App).

- Migration 20260517_protection_disabled_at
- Schema: Profile.protectionDisabledAt
- /api/cooldown/status: setzt das Feld auf expired+resolve
- /api/protection/state: includes profile.protectionDisabledAt in shouldBeActive-Berechnung
- /api/protection/mark-active (POST, NEU): clears das Feld, vom Frontend
  auto-aufgerufen nach erfolgreichem activateUrlFilter

Bypass-Recovery durch externe iOS-Settings-Disable (nicht cooldown-bezogen)
funktioniert weiter — protectionDisabledAt ist dann null, alte Logik greift.

## Frontend: ProtectionOffSheet (Custom-Sheet statt Alert.alert)

Bisheriges native Alert mit OK+Reactivate-Buttons hat keine visuelle
Hierarchy (iOS macht beide gleich). Ersetzt mit FormSheet:
 - Großer blauer Primary "Schutz wieder einschalten"
 - Ghost-Link "Später"
 - Swipe-down / Backdrop-Tap zum Schließen

## Frontend: ProtectionSlide mit Pre-Explainer (Screenshot + Pulse-Marker)

User-Request: vor dem iOS-Permission-Dialog ein Erklärungs-Screen zeigen
damit der User weiß wo er tappen muss (Apple's "Don't Allow" ist groß+
blau = Trap, "Allow" ist der unscheinbare Button unten).

- components/onboarding/ScreenshotPointer.tsx — Reanimated pulsing red
  ring, positionierbar via {xPercent, yPercent}
- lib/onboardingAssets.ts — locale-aware require()-Map für Screenshot-
  Assets mit de-Fallback
- assets/onboarding/de/ — 4 iOS-Screenshots vom User (url_filter +
  screen_time permission dialogs + 2 confirm screens)
- ProtectionSlide refactored: internal phase state preexplain_url →
  preexplain_lock → done. Jede Phase zeigt Screenshot + Pulse-Marker auf
  korrekten Button + Lyra-Bubble + activate-CTA.

## Locale-Keys

- onboarding.lyra.protection_url.body, onboarding.lyra.protection_lock.body
- onboarding.protection.url_title, .lock_title, .tap_marker_hint
- onboarding.protection.applock_failed_*, applock_skip
- blocker.protection_off_later, reactivate_btn (refined)

## Bugfix: de.json JSON-syntax

Smart-quote-typo: schließendes "" nach „Erlauben" und „Fortfahren" war
ein plain ASCII " (U+0022) statt U+201D, was den JSON-String früh
terminiert hat. Metro+Hermes warfen "unrecognized Unicode —".
Fix: escapte \" verwendet — JSON-safe.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-17 19:05:37 +02:00

368 lines
14 KiB
TypeScript

/**
* Protection orchestration layer (JS-side).
*
* Verbindet das native rebreak-protection-Modul (Device-Layer-State) mit
* dem Backend-Cooldown-API (`/api/cooldown/*` + `/api/protection/state`).
*
* Cooldown ist Backend-driven (JWT mit `cooldown_ends_at`-Claim, server-time
* = single source of truth gegen lokale-Uhr-Manipulation). Native-Modul
* kümmert sich nur um echten Device-State (NEFilter, Family Controls etc.).
*/
import { Platform } from "react-native";
import Constants from "expo-constants";
import AsyncStorage from "@react-native-async-storage/async-storage";
import RebreakProtection from "../modules/rebreak-protection";
import type {
ActivateResult,
DeviceLayers,
HealthProbeOpts,
HealthProbeResult,
SyncBlocklistOpts,
SyncBlocklistResult,
SystemSettingsTarget,
} from "../modules/rebreak-protection";
import { apiFetch } from "./api";
// ─── Feature Flags ─────────────────────────────────────────────────────────
/**
* True only in dev/dev-client builds where Apple's FamilyControls Development
* entitlement is active. False in preview/production (Distribution entitlement
* pending Apple approval) — showing the App-Lock toggle in those builds would
* throw NSCocoaErrorDomain:4099.
*/
export const FAMILY_CONTROLS_AVAILABLE =
Constants.expoConfig?.extra?.familyControlsEnabled === true;
// ─── Public Types ──────────────────────────────────────────────────────────
export type ProtectionPhase =
| "inactive"
| "activating"
| "active"
| "cooldownPending"
| "cooldownActive"
| "recoveringFromBypass";
export type CooldownState = {
active: boolean;
endsAt: string | null;
remainingSeconds: number;
reason: string | null;
};
export type ProtectionState = {
phase: ProtectionPhase;
layers: DeviceLayers;
cooldown: CooldownState;
blocklistCount: number;
plan: "free" | "pro" | "legend";
};
// ─── Backend Response-Types ────────────────────────────────────────────────
type BackendCooldownStatus = {
active: boolean;
remainingSeconds: number;
cooldownEndsAt: string | null;
token: string | null;
canDisableProtection: boolean;
reason?: string;
};
// Matches actual response from `apps/rebreak/server/api/protection/state.get.ts`
// (apiFetch unwrapt das `data`-Feld bereits, daher hier nur die Inner-Shape).
type BackendProtectionState = {
protectionShouldBeActive: boolean;
cooldown: {
active: boolean;
remainingSeconds: number;
cooldownEndsAt: string | null;
};
plan: "free" | "pro" | "legend";
};
// ─── Dev Helpers ───────────────────────────────────────────────────────────
const DEV_COOLDOWN_TESTMODE_KEY = "dev:cooldown-testmode";
export async function setCooldownTestMode(on: boolean): Promise<void> {
await AsyncStorage.setItem(DEV_COOLDOWN_TESTMODE_KEY, on ? "1" : "0");
}
export async function getCooldownTestMode(): Promise<boolean> {
const val = await AsyncStorage.getItem(DEV_COOLDOWN_TESTMODE_KEY);
return val === "1";
}
// ─── Public API ────────────────────────────────────────────────────────────
export const protection = {
// ─── Native-Calls (Device-Layer) ─────────────────────────────────────────
activate(): Promise<ActivateResult> {
return RebreakProtection.activate();
},
async activateUrlFilter(): Promise<{ enabled: boolean; error?: string }> {
let res: { enabled: boolean; error?: string };
if (Platform.OS === "android") {
// Android Layer-1 = VpnService (DNS-Filter). iOS-API erwartet hier
// {enabled, error?}, also Native-`activate()`-Result re-shapen.
const r = await RebreakProtection.activate();
const enabled = !r.missingLayers.includes("vpn");
res = enabled ? { enabled: true } : { enabled: false, error: r.errors?.[0] };
} else {
res = await RebreakProtection.activateUrlFilter();
}
// Bei erfolgreicher Reaktivierung: Backend-Flag clearen (sonst bleibt
// protectionShouldBeActive=false und Bypass-Detection feuert nicht mehr).
// Best-effort — wenn das Backend nicht erreichbar ist, lokal nicht blocken.
if (res.enabled) {
apiFetch("/api/protection/mark-active", { method: "POST" }).catch(() => {});
}
return res;
},
/**
* iOS-only Workaround: User hat "Nicht erlauben" beim NEFilter-System-Dialog
* getippt → iOS cached den Denied-State + zeigt den Dialog beim erneuten
* activateUrlFilter NICHT mehr (NEFilterErrorDomain code 5 silent).
* resetUrlFilter macht removeFromPreferences VOR saveToPreferences — iOS
* behandelt das als frischen Request → System-Dialog kommt erneut.
*
* Auf Android no-op (gibt einfach activateUrlFilter zurück, dort kein Cache).
*/
async resetUrlFilter(): Promise<{ enabled: boolean; error?: string }> {
if (Platform.OS === "android") {
return this.activateUrlFilter();
}
return RebreakProtection.resetUrlFilter();
},
async activateFamilyControls(): Promise<{ enabled: boolean; error?: string }> {
if (Platform.OS === "android") {
// Android "App-Lock" = AccessibilityService als reiner Tamper-Lock (KEIN
// Browser-Filter mehr — Glücksspielseiten blockt der VpnService DNS-Filter).
// Der a11y-Service verhindert nur, dass schutz-relevante Settings geöffnet
// werden (VPN abschalten / App deinstallieren / a11y-Service abschalten).
// Two-step UX:
// (1) A11y nicht aktiv → Settings öffnen, return {enabled:false} mit
// Marker-Error. UI fragt nach Return den State neu ab und tappt
// erneut auf "App lock" → wir landen in Step (2).
// (2) A11y aktiv → tamperLock armen → return {enabled:true}.
const a11y = await RebreakProtection.isAccessibilityEnabled();
if (!a11y.enabled) {
await RebreakProtection.openAccessibilitySettings();
return { enabled: false, error: "accessibility_pending" };
}
try {
await RebreakProtection.armTamperLock();
return { enabled: true };
} catch (e: any) {
return {
enabled: false,
error: e?.message ?? "tamper_lock_failed",
};
}
}
return RebreakProtection.activateFamilyControls();
},
/** Schaltet alle Layer ab + disarmed den Tamper-Lock. NUR aufrufen wenn JS-Layer Cooldown verifiziert. */
async forceDisable() {
console.log("[protection] forceDisable() — disarm tamper + native disable");
// Tamper-Lock ZUERST disarmen — sonst setzt der AccessibilityService den Schutz
// nach dem Cooldown weiter durch (blockt z.B. das Ausschalten des a11y-Service in den
// System-Settings) → der User kommt nicht aus dem Schutz raus, obwohl der Cooldown
// abgelaufen ist. (Android-Bug-Fix.)
try {
await RebreakProtection.disarmTamperLock();
} catch (e) {
console.warn("[protection] disarmTamperLock failed:", e);
}
const res = await RebreakProtection.disable();
console.log("[protection] native disable returned:", res);
return res;
},
getDeviceState(): Promise<DeviceLayers> {
return RebreakProtection.getDeviceState();
},
/** Android: VpnService neu starten falls er laufen sollte (`filter_enabled`)
* aber tot ist (Reinstall / OS-Kill). Bei App-Start/Foreground aufrufen,
* damit der State nicht „an aber tot" bleibt. No-op auf iOS/Web. */
async reconcileVpn(): Promise<void> {
if (Platform.OS !== "android") return;
try {
await RebreakProtection.reconcileVpn();
} catch (e) {
console.warn("[protection] reconcileVpn failed:", e);
}
},
syncBlocklist(opts: SyncBlocklistOpts): Promise<SyncBlocklistResult> {
return RebreakProtection.syncBlocklist(opts);
},
runHealthProbe(opts?: HealthProbeOpts): Promise<HealthProbeResult> {
return RebreakProtection.runHealthProbe(opts);
},
openSystemSettings(target?: SystemSettingsTarget): Promise<void> {
return RebreakProtection.openSystemSettings(target);
},
addLayerChangeListener(cb: (layers: DeviceLayers) => void) {
return RebreakProtection.addListener("onLayerChange", cb);
},
// ─── Backend-Cooldown ────────────────────────────────────────────────────
/** Startet 24h Cooldown (oder 40s bei aktivem __DEV__-testMode). Schutz BLEIBT aktiv. */
async requestDeactivation(
reason?: string,
): Promise<{ cooldownEndsAt: string }> {
const testMode = __DEV__ ? await getCooldownTestMode() : false;
const body: Record<string, unknown> = { reason };
if (testMode) body.testMode = true;
const res = await apiFetch<{
cooldownEndsAt: string;
token: string;
remainingSeconds: number;
}>("/api/cooldown/request", { method: "POST", body });
return { cooldownEndsAt: res.cooldownEndsAt };
},
/** Bricht laufenden Cooldown ab. Schutz BLEIBT aktiv. */
async cancelDeactivation(): Promise<{ cancelled: boolean }> {
const res = await apiFetch<{ cancelled: boolean }>("/api/cooldown/cancel", {
method: "POST",
body: {},
});
return res;
},
async getCooldownStatus(): Promise<CooldownState> {
try {
const res = await apiFetch<BackendCooldownStatus>("/api/cooldown/status");
return {
active: res.active,
endsAt: res.cooldownEndsAt,
remainingSeconds: res.remainingSeconds,
reason: res.reason ?? null,
};
} catch {
// Offline / Backend down → konservativ: kein Cooldown angenommen
return { active: false, endsAt: null, remainingSeconds: 0, reason: null };
}
},
async getBackendProtectionState(): Promise<BackendProtectionState | null> {
try {
return await apiFetch<BackendProtectionState>("/api/protection/state");
} catch {
return null;
}
},
// ─── Combined State (für UI) ─────────────────────────────────────────────
/**
* Holt nativen Device-State + Backend-Cooldown parallel und merged.
* Phase-Berechnung folgt der State-Machine im Plan.
*/
async getCombinedState(): Promise<ProtectionState> {
const [rawLayers, cooldown, backend] = await Promise.all([
this.getDeviceState(),
this.getCooldownStatus(),
this.getBackendProtectionState(),
]);
// Android's native module reports {vpn, accessibility, tamperLock}; the UI
// (blocker.tsx, isAllLayersOn) reads the iOS-shaped names {urlFilter,
// familyControls, appDeletionLock}. Alias them so consumers are platform-
// agnostic. Android "App-Lock" = AccessibilityService + armed tamper-lock,
// so the lock-state maps to `tamperLock`.
const layers: DeviceLayers =
Platform.OS === "android" && rawLayers.urlFilter === undefined
? ({
...rawLayers,
urlFilter: rawLayers.vpn,
familyControls: rawLayers.tamperLock,
appDeletionLock: rawLayers.tamperLock,
} as DeviceLayers)
: rawLayers;
// "Aktiv" = der eigentliche Schutz (URL-/DNS-Filter) läuft. Der App-Lock
// (familyControls/tamperLock) ist optionales Hardening — er macht den Schutz
// schwerer abschaltbar, ist aber keine Voraussetzung für "geschützt". Er wird
// nur beim ersten Aktivieren eingerichtet; eine Reaktivierung setzt nur den
// Filter wieder. → "recoveringFromBypass" heißt deshalb: Filter ist aus,
// obwohl das Backend sagt er sollte an sein (= jemand hat den VPN extern aus).
const phase: ProtectionPhase = cooldown.active
? "cooldownActive"
: backend?.protectionShouldBeActive === true && layers.urlFilter !== true
? "recoveringFromBypass"
: layers.urlFilter === true
? "active"
: "inactive";
return {
phase,
layers,
cooldown,
blocklistCount: layers.blocklistCount,
plan: backend?.plan ?? "free",
};
},
/**
* Wenn ein Cooldown TATSÄCHLICH gelaufen ist und jetzt elapsed → native disable.
*
* Defensiv: prüft `cooldownEndsAt` (heißt es gab einen Cooldown) UND
* `remainingSeconds <= 0` (heißt er ist abgelaufen) UND `canDisableProtection`.
* Backend kann `canDisableProtection: true` auch im initial-state geben;
* der `cooldownEndsAt`-Check verhindert dann False-Positives.
*/
async applyCooldownDisableIfElapsed(): Promise<boolean> {
const status = await apiFetch<BackendCooldownStatus>(
"/api/cooldown/status",
).catch(() => null);
if (!status) return false;
if (!status.canDisableProtection) return false;
if (!status.cooldownEndsAt) return false; // nie ein Cooldown gewesen
if (status.remainingSeconds > 0) return false; // Cooldown noch nicht abgelaufen
await this.forceDisable();
return true;
},
};
// ─── Helpers ───────────────────────────────────────────────────────────────
export function isAllLayersOn(layers: DeviceLayers): boolean {
// iOS: urlFilter + appDeletionLock (fallback: familyControls für ältere Builds).
// Android: vpn + accessibility (+ tamperLock optional).
if (
layers.urlFilter !== undefined ||
layers.familyControls !== undefined ||
layers.appDeletionLock !== undefined
) {
const lockLayer = layers.appDeletionLock ?? layers.familyControls;
return layers.urlFilter === true && lockLayer === true;
}
if (layers.vpn !== undefined || layers.accessibility !== undefined) {
return layers.vpn === true && layers.accessibility === true;
}
return false;
}
export function formatCooldownRemaining(seconds: number): string {
if (seconds <= 0) return "00:00:00";
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;
return [h, m, s].map((n) => String(n).padStart(2, "0")).join(":");
}