rebreak-monorepo/apps/rebreak-magic/app/pages/detect.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">Gerät erkennen</h1>
        <p class="text-gray-600 mt-2">
          Verbinde dein iPhone per USB und bestätige „Diesem Computer vertrauen".
        </p>
      </div>

      <UCard>
        <div v-if="info" class="space-y-2 text-sm">
          <p><strong>Computer:</strong> {{ info.platform }}</p>
          <p><strong>Version:</strong> {{ info.version }}</p>
          <p>
            <strong>iOS-Supervision:</strong>
            {{ info.supports_ios_supervision ? "Unterstützt" : "Nicht unterstützt" }}
          </p>
        </div>
        <div v-else class="text-gray-500 text-sm">
          Lade Plattform-Informationen...
        </div>
      </UCard>

      <UCard>
        <div class="space-y-4">
          <UButton
            size="lg"
            color="primary"
            block
            :loading="detecting"
            @click="detectIphone"
          >
            iPhone suchen
          </UButton>

          <div v-if="iphone" class="space-y-3">
            <div class="text-sm space-y-1">
              <p><strong>Gerät:</strong> {{ iphone.name }}</p>
              <p><strong>Modell:</strong> {{ displayModel(iphone.productType) }}</p>
              <p><strong>UDID:</strong> {{ iphone.udid }}</p>
              <p><strong>iOS:</strong> {{ iphone.productVersion }}</p>
            </div>

            <div class="grid grid-cols-2 gap-2 text-xs">
              <div
                class="flex items-center gap-2 p-2 rounded-lg"
                :class="iphone.isSupervised ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500'"
              >
                <UIcon :name="iphone.isSupervised ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" class="w-4 h-4" />
                <span>{{ iphone.isSupervised ? 'Supervised' : 'Nicht supervised' }}</span>
              </div>
              <div
                v-if="iphone.organizationName"
                class="flex items-center gap-2 p-2 rounded-lg bg-blue-50 text-blue-700"
              >
                <UIcon name="i-heroicons-building-office" class="w-4 h-4" />
                <span>{{ iphone.organizationName }}</span>
              </div>
              <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</span>
              </div>
              <div
                class="flex items-center gap-2 p-2 rounded-lg"
                :class="hasLockProfile ? 'bg-green-50 text-green-700' : 'bg-amber-50 text-amber-700'"
              >
                <UIcon :name="hasLockProfile ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-triangle'" class="w-4 h-4" />
                <span>Lock-Profil</span>
              </div>
              <div
                class="flex items-center gap-2 p-2 rounded-lg"
                :class="hasReBreakApp ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500'"
              >
                <UIcon :name="hasReBreakApp ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" class="w-4 h-4" />
                <span>ReBreak-App</span>
              </div>
            </div>
          </div>

          <div v-if="rawOutput" class="text-xs bg-gray-100 p-3 rounded overflow-auto max-h-48">
            <p class="font-semibold text-gray-700 mb-1">Roh-Output:</p>
            <pre class="whitespace-pre-wrap break-all">{{ rawOutput }}</pre>
          </div>

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

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

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

const { getPlatform, detectIphoneState } = useTauri();
const iphone = useIphoneDevice();
const info = ref<PlatformInfo | null>(null);
const detecting = ref(false);
const error = ref<string | null>(null);
const rawOutput = ref<string | null>(null);

const ENROLLMENT_PROFILE_ID = "org.rebreak.mdm.enrollment";
const LOCK_PROFILE_ID = "org.rebreak.protection.contentfilter.sideload";

const hasEnrollmentProfile = computed(() =>
  iphone.value?.installedProfileIDs?.includes(ENROLLMENT_PROFILE_ID) ?? false,
);
const hasLockProfile = computed(() =>
  iphone.value?.installedProfileIDs?.includes(LOCK_PROFILE_ID) ?? false,
);
const hasReBreakApp = computed(() =>
  iphone.value?.installedAppBundleIDs?.includes("org.rebreak.app") ?? false,
);

onMounted(async () => {
  info.value = await getPlatform();
});

async function detectIphone() {
  detecting.value = true;
  error.value = null;
  rawOutput.value = null;

  try {
    const state = await detectIphoneState();
    iphone.value = state;
    rawOutput.value = state ? JSON.stringify(state, null, 2) : "Kein iPhone erkannt";
    if (!state) {
      error.value = "Kein iPhone verbunden. Bitte per USB anschließen und \"Diesem Computer vertrauen\" bestätigen.";
    }
  } catch (e: any) {
    error.value = e?.message ?? "Fehler bei der Geräteerkennung";
    rawOutput.value = e?.stack || String(e);
  } finally {
    detecting.value = false;
  }
}

function displayModel(productType: string) {
  const map: Record<string, string> = {
    "iPhone18,4": "iPhone Air",
    "iPhone17,1": "iPhone 16 Pro",
    "iPhone17,2": "iPhone 16 Pro Max",
    "iPhone17,3": "iPhone 16",
    "iPhone17,4": "iPhone 16 Plus",
    "iPhone16,1": "iPhone 15 Pro",
    "iPhone16,2": "iPhone 15 Pro Max",
    "iPhone15,4": "iPhone 15",
    "iPhone15,5": "iPhone 15 Plus",
  };
  return map[productType] || productType;
}
</script>