rebreak-monorepo/apps/rebreak-magic/app/pages/configure.vue

<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-6">
    <div class="max-w-md w-full space-y-6">
      <div class="text-center">
        <h1 class="text-2xl font-bold text-gray-900">Schutz aktivieren</h1>
        <p class="text-gray-600 mt-2">
          Wir richten die ReBreak-App ein und installieren das Lock-Profil. Scanne die QR-Codes mit deinem iPhone.
        </p>
      </div>

      <UCard>
        <div class="space-y-4">
          <div class="space-y-3">
            <StepButton
              title="1. ReBreak-App einrichten"
              :done="appDone"
              :loading="appLoading"
              :error="appError"
              @click="setupApp"
            />
            <StepButton
              title="2. Lock-Profil installieren"
              :done="lockDone"
              :loading="lockLoading"
              :error="lockError"
              @click="setupLockProfile"
            />
          </div>

          <div v-if="qrDataUrl" class="flex justify-center">
            <img :src="qrDataUrl" alt="QR Code" class="w-48 h-48 rounded-xl shadow-md">
          </div>

          <div v-if="lastCommand" class="text-xs bg-gray-100 p-3 rounded break-all">
            <p class="font-semibold">Letzter Command:</p>
            <p>{{ lastCommand }}</p>
            <p class="font-mono mt-1">{{ lastResponse }}</p>
          </div>

          <div v-if="logs.length > 0" class="text-xs bg-gray-100 p-3 rounded overflow-auto max-h-40">
            <pre class="whitespace-pre-wrap">{{ logs.join('\n') }}</pre>
          </div>
        </div>
      </UCard>

      <div class="flex justify-between">
        <UButton to="/enroll" variant="ghost" color="neutral">
          Zurück
        </UButton>
        <UButton
          to="/done"
          variant="solid"
          color="primary"
          :disabled="!allDone"
        >
          Weiter
        </UButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import QRCode from "qrcode";
import {
  useTauri,
  type LocalServerInfo,
  type MdmCommandResult,
} from "~/composables/useTauri";
import { useIphoneDevice } from "~/composables/useMagicState";
import StepButton from "~/components/StepButton.vue";

const {
  mdmPing,
  mdmInstallApp,
  mdmSetSupervisedMode,
  mdmTakeManagement,
  mdmInstallLockProfile,
  startLocalProfileServer,
  stopLocalProfileServer,
  getInstalledProfiles,
} = useTauri();

const iphone = useIphoneDevice();

const appLoading = ref(false);
const appDone = ref(false);
const appError = ref<string | null>(null);
const lockLoading = ref(false);
const lockDone = ref(false);
const lockError = ref<string | null>(null);
const logs = ref<string[]>([]);
const lastCommand = ref<string>("");
const lastResponse = ref<string>("");
const qrDataUrl = ref<string>("");

const LOCK_PROFILE_PATH = "/Users/chahinebrini/mono/rebreak-monorepo/ops/mdm/profiles/rebreak-content-filter-sideload.mobileconfig";

const allDone = computed(() => appDone.value && lockDone.value);

async function setupApp() {
  appLoading.value = true;
  appError.value = null;
  logs.value = [];
  qrDataUrl.value = "";

  try {
    if (!iphone.value?.udid) {
      throw new Error("Kein iPhone erkannt.");
    }

    logs.value.push("→ Ping NanoMDM …");
    const version = await mdmPing();
    logs.value.push(`✓ NanoMDM ${version.trim()}`);

    const udid = iphone.value.udid;

    logs.value.push("→ InstallApplication …");
    const r1 = await mdmInstallApp(udid);
    logCommand("InstallApplication", r1);

    logs.value.push("→ Settings mdmSupervised=true …");
    const r2 = await mdmSetSupervisedMode(udid);
    logCommand("Settings", r2);

    if (iphone.value.installedAppBundleIDs?.includes("org.rebreak.app")) {
      logs.value.push("→ Take Management …");
      const r3 = await mdmTakeManagement(udid);
      logCommand("TakeManagement", r3);
    }

    appDone.value = true;
    logs.value.push("✓ App-Setup abgeschlossen.");
  } catch (e: any) {
    appError.value = e?.message ?? "App-Setup fehlgeschlagen";
    logs.value.push(`✗ ${appError.value}`);
  } finally {
    appLoading.value = false;
  }
}

async function setupLockProfile() {
  lockLoading.value = true;
  lockError.value = null;
  qrDataUrl.value = "";

  try {
    if (!iphone.value?.udid) {
      throw new Error("Kein iPhone erkannt.");
    }

    // Try MDM push first
    logs.value.push("→ Versuche Lock-Profil per MDM …");
    const r = await mdmInstallLockProfile(iphone.value.udid, LOCK_PROFILE_PATH);
    logCommand("InstallProfile (Lock)", r);

    // Also start local QR server as fallback / confirmation
    logs.value.push("→ Starte lokalen Server für Lock-Profil …");
    const serverInfo: LocalServerInfo = await startLocalProfileServer(LOCK_PROFILE_PATH);
    logs.value.push(`✓ QR: ${serverInfo.url}`);

    qrDataUrl.value = await QRCode.toDataURL(serverInfo.qr_payload, {
      width: 192,
      margin: 2,
    });

    await refreshProfileList();
    lockDone.value = true;
    logs.value.push("✓ Lock-Profil-Installation initiiert.");
  } catch (e: any) {
    lockError.value = e?.message ?? "Lock-Profil fehlgeschlagen";
    logs.value.push(`✗ ${lockError.value}`);
  } finally {
    lockLoading.value = false;
  }
}

async function refreshProfileList() {
  try {
    const ids = await getInstalledProfiles();
    if (iphone.value) {
      iphone.value.installedProfileIDs = ids;
    }
  } catch (e: any) {
    logs.value.push(`Profil-Liste nicht lesbar: ${e?.message ?? e}`);
  }
}

function logCommand(name: string, result: MdmCommandResult) {
  lastCommand.value = name;
  lastResponse.value = `${result.command_uuid}: ${result.response_body.substring(0, 200)}`;
  logs.value.push(`✓ ${name}: ${result.command_uuid}`);
}

onUnmounted(async () => {
  await stopLocalProfileServer();
});
</script>