rebreak-monorepo/apps/rebreak-magic/app/pages/enroll.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">MDM-Enrollment</h1>
        <p class="text-gray-600 mt-2">
          Scanne den QR-Code mit deinem iPhone und installiere das Verbindungs-Profil.
        </p>
      </div>

      <UCard>
        <div class="space-y-4">
          <div v-if="!profilePath" class="text-center">
            <UButton
              color="primary"
              block
              size="lg"
              :loading="downloading"
              @click="downloadEnrollmentProfile"
            >
              Enrollment-Profil laden
            </UButton>
          </div>

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

            <div class="text-sm text-center text-gray-600">
              <p>Scanne den Code mit der Kamera-App.</p>
              <p class="text-xs mt-1 break-all">{{ serverUrl }}</p>
            </div>

            <UButton
              color="primary"
              variant="soft"
              block
              :loading="checking"
              @click="checkEnrollment"
            >
              Installation prüfen
            </UButton>
          </div>

          <div v-if="status" class="text-sm p-3 rounded-lg" :class="status.ok ? 'bg-green-50 text-green-700' : 'bg-amber-50 text-amber-700'">
            <p><strong>Push-Status:</strong> {{ status.ok ? '✓ Gerät erreichbar' : '✗ Nicht erreichbar' }}</p>
            <p v-if="status.result" class="text-xs break-all mt-1">{{ status.result }}</p>
          </div>

          <div v-if="iphone" class="grid grid-cols-2 gap-2 text-xs">
            <div
              class="flex items-center gap-2 p-2 rounded-lg"
              :class="hasEnrollmentProfile ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500'"
            >
              <UIcon :name="hasEnrollmentProfile ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" class="w-4 h-4" />
              <span>Enrollment-Profil</span>
            </div>
          </div>

          <p v-if="error" class="text-sm text-red-600">
            {{ error }}
          </p>

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

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

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

const {
  downloadAndPatchEnrollmentProfile,
  startLocalProfileServer,
  stopLocalProfileServer,
  getInstalledProfiles,
  mdmPush,
} = useTauri();

const iphone = useIphoneDevice();
const profilePath = ref<string | null>(null);
const serverInfo = ref<LocalServerInfo | null>(null);
const qrDataUrl = ref<string>("");
const downloading = ref(false);
const checking = ref(false);
const error = ref<string | null>(null);
const logs = ref<string[]>([]);
const status = ref<{ ok: boolean; result?: string } | null>(null);

const ENROLLMENT_PROFILE_ID = "org.rebreak.mdm.enrollment";

const hasEnrollmentProfile = computed(() =>
  iphone.value?.installedProfileIDs?.includes(ENROLLMENT_PROFILE_ID) ?? false,
);

const serverUrl = computed(() => serverInfo.value?.url ?? "");

const canContinue = computed(() =>
  hasEnrollmentProfile.value || status.value?.ok === true,
);

onMounted(async () => {
  if (iphone.value?.udid) {
    await refreshProfileList();
  }
});

onUnmounted(async () => {
  await stopLocalProfileServer();
});

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}`);
  }
}

async function downloadEnrollmentProfile() {
  downloading.value = true;
  error.value = null;
  logs.value = [];

  try {
    if (!iphone.value?.udid) {
      throw new Error("Kein iPhone erkannt. Bitte zurück zu Schritt 1.");
    }

    const url = `https://mdm.rebreak.org/enrollment/rebreak-enrollment.mobileconfig`;
    logs.value.push(`→ Lade ${url}`);

    const path = await downloadAndPatchEnrollmentProfile(url, iphone.value.udid);
    profilePath.value = path;
    logs.value.push(`✓ Profil gespeichert: ${path}`);

    serverInfo.value = await startLocalProfileServer(path);
    logs.value.push(`✓ Lokaler Server: ${serverInfo.value.url}`);

    qrDataUrl.value = await QRCode.toDataURL(serverInfo.value.qr_payload, {
      width: 192,
      margin: 2,
    });
  } catch (e: any) {
    error.value = e?.message ?? "Download fehlgeschlagen";
    logs.value.push(`✗ ${error.value}`);
  } finally {
    downloading.value = false;
  }
}

async function checkEnrollment() {
  checking.value = true;
  error.value = null;
  status.value = null;

  try {
    await refreshProfileList();

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

    const push = await mdmPush(iphone.value.udid);
    status.value = { ok: true, result: push.push_result };
    logs.value.push(`✓ Push erreichbar: ${push.push_result}`);
  } catch (e: any) {
    status.value = { ok: false, result: e?.message ?? String(e) };
    error.value = e?.message ?? "Prüfung fehlgeschlagen";
    logs.value.push(`✗ ${error.value}`);
  } finally {
    checking.value = false;
  }
}
</script>