feat(magic): redesign status dashboard with hero cards and device sheet
This commit is contained in:
chahinebrini
parent
b5e89b5973
commit
298a0089bb
203
apps/rebreak-magic/app/composables/useProtectionStatus.ts
Normal file
203
apps/rebreak-magic/app/composables/useProtectionStatus.ts
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||||
|
import { useTauri, type IphoneDeviceState, type DesktopProtectionState, type MagicDeviceInfo } from "~/composables/useTauri";
|
||||||
|
import { useIphoneDevice, useMagicDevices, useMagicSession } from "~/composables/useMagicState";
|
||||||
|
|
||||||
|
export interface ProtectionStatus {
|
||||||
|
overall: "protected" | "partial" | "unprotected" | "unknown";
|
||||||
|
label: string;
|
||||||
|
message: string;
|
||||||
|
iosConnected: boolean;
|
||||||
|
iosProtected: boolean;
|
||||||
|
desktopProtected: boolean;
|
||||||
|
anyBackendDevice: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const IPHONE_POLL_INTERVAL = 5000;
|
||||||
|
const DEVICE_REFRESH_INTERVAL = 30000;
|
||||||
|
|
||||||
|
function normalizeHostname(value: string): string {
|
||||||
|
return (value.toLowerCase().split(".")[0] ?? "").trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useProtectionStatus() {
|
||||||
|
const {
|
||||||
|
detectIphoneState,
|
||||||
|
getDesktopProtectionStatus,
|
||||||
|
getMagicDevices,
|
||||||
|
getMagicStatus,
|
||||||
|
getHostname,
|
||||||
|
} = useTauri();
|
||||||
|
|
||||||
|
const iphone = useIphoneDevice();
|
||||||
|
const devices = useMagicDevices();
|
||||||
|
const session = useMagicSession();
|
||||||
|
|
||||||
|
const desktopProtection = ref<DesktopProtectionState | null>(null);
|
||||||
|
const localHostname = ref<string | null>(null);
|
||||||
|
const loading = ref(false);
|
||||||
|
const lastError = ref<string | null>(null);
|
||||||
|
const lastUpdated = ref<Date | null>(null);
|
||||||
|
|
||||||
|
let iphoneTimer: ReturnType<typeof setInterval> | null = null;
|
||||||
|
let deviceTimer: ReturnType<typeof setInterval> | null = null;
|
||||||
|
|
||||||
|
const iosConnected = computed(() => !!iphone.value);
|
||||||
|
const iosProtected = computed(() => {
|
||||||
|
if (!iphone.value) return false;
|
||||||
|
const hasEnrollment = iphone.value.installedProfileIDs?.includes("org.rebreak.mdm.enrollment");
|
||||||
|
const hasLock = iphone.value.installedProfileIDs?.includes("org.rebreak.protection.contentfilter.sideload");
|
||||||
|
return iphone.value.isSupervised && hasEnrollment && hasLock;
|
||||||
|
});
|
||||||
|
const currentBackendDevice = computed<MagicDeviceInfo | null>(() => {
|
||||||
|
if (!localHostname.value) return null;
|
||||||
|
const local = normalizeHostname(localHostname.value);
|
||||||
|
return devices.value.find((d) => normalizeHostname(d.hostname) === local) ?? null;
|
||||||
|
});
|
||||||
|
const desktopProtected = computed(() => !!desktopProtection.value?.active || !!currentBackendDevice.value);
|
||||||
|
const anyBackendDevice = computed(() => devices.value.length > 0);
|
||||||
|
|
||||||
|
const status = computed<ProtectionStatus>(() => {
|
||||||
|
const ios = iosConnected.value;
|
||||||
|
const iosOk = iosProtected.value;
|
||||||
|
const desktopOk = desktopProtected.value;
|
||||||
|
const backendOk = anyBackendDevice.value;
|
||||||
|
|
||||||
|
if (!ios && !desktopOk && !backendOk) {
|
||||||
|
return {
|
||||||
|
overall: "unprotected",
|
||||||
|
label: "Kein Schutz aktiv",
|
||||||
|
message: "Verbinde ein iPhone oder aktiviere den Desktop-Schutz.",
|
||||||
|
iosConnected: false,
|
||||||
|
iosProtected: false,
|
||||||
|
desktopProtected: false,
|
||||||
|
anyBackendDevice: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ios && !iosOk) {
|
||||||
|
return {
|
||||||
|
overall: "partial",
|
||||||
|
label: "iOS-Schutz unvollständig",
|
||||||
|
message: "Supervision oder Schutz-Profile fehlen. Führe das Setup fort.",
|
||||||
|
iosConnected: true,
|
||||||
|
iosProtected: false,
|
||||||
|
desktopProtected: desktopOk,
|
||||||
|
anyBackendDevice: backendOk,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (iosOk && desktopOk) {
|
||||||
|
return {
|
||||||
|
overall: "protected",
|
||||||
|
label: "Vollständig geschützt",
|
||||||
|
message: "iPhone und Desktop sind aktiv geschützt.",
|
||||||
|
iosConnected: true,
|
||||||
|
iosProtected: true,
|
||||||
|
desktopProtected: true,
|
||||||
|
anyBackendDevice: backendOk,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (iosOk || desktopOk || backendOk) {
|
||||||
|
return {
|
||||||
|
overall: "partial",
|
||||||
|
label: "Teilweise geschützt",
|
||||||
|
message: iosOk
|
||||||
|
? "iPhone geschützt. Desktop-Schutz ist optional."
|
||||||
|
: desktopOk
|
||||||
|
? "Desktop geschützt. iPhone noch nicht verbunden."
|
||||||
|
: "Ein registriertes Gerät vorhanden, aber keine lokale Schutzkontrolle.",
|
||||||
|
iosConnected: ios,
|
||||||
|
iosProtected: iosOk,
|
||||||
|
desktopProtected: desktopOk,
|
||||||
|
anyBackendDevice: backendOk,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
overall: "unknown",
|
||||||
|
label: "Status unbekannt",
|
||||||
|
message: "Schutzstatus konnte nicht ermittelt werden.",
|
||||||
|
iosConnected: false,
|
||||||
|
iosProtected: false,
|
||||||
|
desktopProtected: false,
|
||||||
|
anyBackendDevice: false,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
async function refreshIphone() {
|
||||||
|
try {
|
||||||
|
const state = await detectIphoneState();
|
||||||
|
iphone.value = state;
|
||||||
|
} catch (e: any) {
|
||||||
|
// Bei Fehler nicht crashen — Gerät ist einfach nicht verbunden
|
||||||
|
iphone.value = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refreshDesktop() {
|
||||||
|
try {
|
||||||
|
desktopProtection.value = await getDesktopProtectionStatus();
|
||||||
|
} catch (e: any) {
|
||||||
|
lastError.value = e?.message ?? "Desktop-Schutzstatus konnte nicht geladen werden";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refreshBackendDevices() {
|
||||||
|
try {
|
||||||
|
devices.value = await getMagicDevices();
|
||||||
|
if (session.value?.dnsToken) {
|
||||||
|
await getMagicStatus(session.value.dnsToken);
|
||||||
|
}
|
||||||
|
} catch (e: any) {
|
||||||
|
lastError.value = e?.message ?? "Geräte konnten nicht geladen werden";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refresh() {
|
||||||
|
loading.value = true;
|
||||||
|
lastError.value = null;
|
||||||
|
await Promise.all([
|
||||||
|
refreshIphone(),
|
||||||
|
refreshDesktop(),
|
||||||
|
refreshBackendDevices(),
|
||||||
|
refreshHostname(),
|
||||||
|
]);
|
||||||
|
lastUpdated.value = new Date();
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refreshHostname() {
|
||||||
|
try {
|
||||||
|
localHostname.value = await getHostname();
|
||||||
|
} catch (e: any) {
|
||||||
|
localHostname.value = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
refresh();
|
||||||
|
iphoneTimer = setInterval(refreshIphone, IPHONE_POLL_INTERVAL);
|
||||||
|
deviceTimer = setInterval(refreshBackendDevices, DEVICE_REFRESH_INTERVAL);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (iphoneTimer) clearInterval(iphoneTimer);
|
||||||
|
if (deviceTimer) clearInterval(deviceTimer);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
status,
|
||||||
|
iphone: computed(() => iphone.value),
|
||||||
|
desktopProtection,
|
||||||
|
localHostname,
|
||||||
|
loading,
|
||||||
|
lastError,
|
||||||
|
lastUpdated,
|
||||||
|
iosConnected,
|
||||||
|
iosProtected,
|
||||||
|
desktopProtected,
|
||||||
|
anyBackendDevice,
|
||||||
|
refresh,
|
||||||
|
};
|
||||||
|
}
|
||||||
342
apps/rebreak-magic/app/pages/status.vue
Normal file
342
apps/rebreak-magic/app/pages/status.vue
Normal file
@ -0,0 +1,342 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/40">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="bg-white/80 backdrop-blur-md border-b border-white/60 sticky top-0 z-10">
|
||||||
|
<div class="max-w-3xl mx-auto px-6 py-4">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="relative">
|
||||||
|
<img :src="rebreakIcon" alt="ReBreak" class="w-11 h-11 rounded-xl shadow-lg shadow-blue-500/20">
|
||||||
|
<div class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-500 rounded-full border-2 border-white" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<h1 class="text-lg font-extrabold text-gray-900 truncate">
|
||||||
|
{{ profile?.nickname || 'ReBreak Magic' }}
|
||||||
|
</h1>
|
||||||
|
<div class="flex items-center gap-2 text-sm text-gray-500">
|
||||||
|
<UBadge v-if="profile?.plan" color="primary" variant="subtle" size="xs" class="font-bold">
|
||||||
|
{{ profile.plan }}
|
||||||
|
</UBadge>
|
||||||
|
<span v-if="session?.label" class="truncate">{{ session.label }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<UButton
|
||||||
|
icon="i-heroicons-arrow-right-start-on-rectangle"
|
||||||
|
color="neutral"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
@click="logout"
|
||||||
|
>
|
||||||
|
Abmelden
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="max-w-3xl mx-auto px-6 py-8 space-y-6">
|
||||||
|
<!-- Overall status card -->
|
||||||
|
<UCard class="shadow-sm border-gray-100 overflow-hidden">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div
|
||||||
|
class="w-14 h-14 rounded-2xl bg-gradient-to-br flex items-center justify-center shrink-0"
|
||||||
|
:class="statusCardClass"
|
||||||
|
>
|
||||||
|
<UIcon
|
||||||
|
:name="protection.status.value.overall === 'protected'
|
||||||
|
? 'i-heroicons-shield-check'
|
||||||
|
: protection.status.value.overall === 'partial'
|
||||||
|
? 'i-heroicons-shield-exclamation'
|
||||||
|
: 'i-heroicons-shield-slash'"
|
||||||
|
class="w-7 h-7 text-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center gap-2 flex-wrap">
|
||||||
|
<h2 class="text-lg font-bold text-gray-900">{{ protection.status.value.label }}</h2>
|
||||||
|
<UBadge
|
||||||
|
:color="badgeColorForOverall"
|
||||||
|
variant="subtle"
|
||||||
|
size="xs"
|
||||||
|
>
|
||||||
|
{{ overallBadgeLabel }}
|
||||||
|
</UBadge>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-500 mt-0.5">{{ protection.status.value.message }}</p>
|
||||||
|
</div>
|
||||||
|
<div v-if="protection.lastUpdated.value" class="hidden sm:block text-xs text-gray-400 text-right">
|
||||||
|
Aktualisiert<br>{{ formatTime(protection.lastUpdated.value) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
<!-- Hero section -->
|
||||||
|
<section>
|
||||||
|
<h2 class="text-sm font-bold text-gray-500 uppercase tracking-wider mb-3">Aktives Gerät</h2>
|
||||||
|
|
||||||
|
<DeviceHeroCard
|
||||||
|
v-if="currentBackendDevice"
|
||||||
|
:device="currentBackendDevice"
|
||||||
|
:is-current="true"
|
||||||
|
:ios-stars="currentBackendDevice.platform === 'ios' ? iosStars : null"
|
||||||
|
@open="openDevice"
|
||||||
|
@toggle-protection="toggleProtection"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Empty / not registered state -->
|
||||||
|
<div v-else class="rounded-2xl bg-white ring-1 ring-gray-100 shadow-sm p-6 text-center">
|
||||||
|
<div class="w-16 h-16 mx-auto rounded-2xl bg-blue-50 flex items-center justify-center mb-4">
|
||||||
|
<UIcon name="i-heroicons-shield-exclamation" class="w-8 h-8 text-[var(--rebreak-primary)]" />
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-bold text-gray-900">Dieses Gerät ist nicht registriert</h3>
|
||||||
|
<p class="text-sm text-gray-500 mt-1 mb-4">Füge es hinzu, um den Schutz zu aktivieren.</p>
|
||||||
|
<div class="flex justify-center gap-3">
|
||||||
|
<UButton color="primary" icon="i-heroicons-device-phone-mobile" to="/detect">iPhone / iPad</UButton>
|
||||||
|
<UButton color="neutral" variant="soft" icon="i-heroicons-computer-desktop" to="/desktop-enroll">Diesen Computer</UButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Other devices list -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<h2 class="text-sm font-bold text-gray-500 uppercase tracking-wider">Weitere Geräte</h2>
|
||||||
|
<UButton
|
||||||
|
icon="i-heroicons-arrow-path"
|
||||||
|
color="neutral"
|
||||||
|
variant="ghost"
|
||||||
|
size="xs"
|
||||||
|
:loading="loading"
|
||||||
|
@click="refresh"
|
||||||
|
>
|
||||||
|
Aktualisieren
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="error" class="text-sm text-red-600 mb-4 p-4 bg-red-50 rounded-xl">{{ error }}</div>
|
||||||
|
|
||||||
|
<div v-if="loading && otherDevices.length === 0" class="py-12 text-center text-gray-500">
|
||||||
|
<UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin mx-auto mb-3 text-[var(--rebreak-primary)]" />
|
||||||
|
<p class="font-semibold">Lade Geräte…</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="otherDevices.length === 0" class="py-10 text-center rounded-2xl bg-white ring-1 ring-gray-100">
|
||||||
|
<p class="text-sm text-gray-500">Keine weiteren Geräte registriert.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="space-y-3">
|
||||||
|
<DeviceListItem
|
||||||
|
v-for="device in otherDevices"
|
||||||
|
:key="device.deviceId"
|
||||||
|
:device="device"
|
||||||
|
:is-current="false"
|
||||||
|
@open="openDevice"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Add device shortcuts -->
|
||||||
|
<section class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<UButton
|
||||||
|
color="primary"
|
||||||
|
variant="soft"
|
||||||
|
size="lg"
|
||||||
|
block
|
||||||
|
icon="i-heroicons-device-phone-mobile"
|
||||||
|
to="/detect"
|
||||||
|
>
|
||||||
|
iPhone / iPad hinzufügen
|
||||||
|
</UButton>
|
||||||
|
<UButton
|
||||||
|
color="neutral"
|
||||||
|
variant="soft"
|
||||||
|
size="lg"
|
||||||
|
block
|
||||||
|
icon="i-heroicons-computer-desktop"
|
||||||
|
to="/desktop-enroll"
|
||||||
|
>
|
||||||
|
Diesen Computer schützen
|
||||||
|
</UButton>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DeviceDetailSheet
|
||||||
|
v-model:open="sheetOpen"
|
||||||
|
:device="selectedDevice"
|
||||||
|
:ios-stars="selectedDevice?.platform === 'ios' && selectedDevice?.isCurrent ? iosStars : null"
|
||||||
|
@close="sheetOpen = false"
|
||||||
|
@toggle-protection="toggleProtection"
|
||||||
|
@start-cooldown="startCooldown"
|
||||||
|
@cancel-cooldown="cancelCooldown"
|
||||||
|
@remove="requestDeviceRelease"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, onMounted } from "vue";
|
||||||
|
import { useTauri, type UserProfile } from "~/composables/useTauri";
|
||||||
|
import { useMagicSession, useMagicDevices, useIphoneDevice } from "~/composables/useMagicState";
|
||||||
|
import { useProtectionStatus } from "~/composables/useProtectionStatus";
|
||||||
|
import { useDeviceStatus, type ComputedDevice } from "~/composables/useDeviceStatus";
|
||||||
|
import rebreakIcon from "~/assets/rebreak-icon.png";
|
||||||
|
|
||||||
|
const {
|
||||||
|
getMagicDevices,
|
||||||
|
requestRelease,
|
||||||
|
startCooldown: apiStartCooldown,
|
||||||
|
cancelCooldown: apiCancelCooldown,
|
||||||
|
logoutMagic,
|
||||||
|
fetchMe,
|
||||||
|
setDesktopProtectionStatus,
|
||||||
|
getPlatform,
|
||||||
|
} = useTauri();
|
||||||
|
|
||||||
|
const session = useMagicSession();
|
||||||
|
const devices = useMagicDevices();
|
||||||
|
const iphone = useIphoneDevice();
|
||||||
|
const protection = useProtectionStatus();
|
||||||
|
|
||||||
|
const profile = ref<UserProfile | null>(null);
|
||||||
|
const loading = ref(false);
|
||||||
|
const error = ref<string | null>(null);
|
||||||
|
const sheetOpen = ref(false);
|
||||||
|
const selectedDevice = ref<ComputedDevice | null>(null);
|
||||||
|
const platformInfo = ref<{ platform: string } | null>(null);
|
||||||
|
|
||||||
|
// Share localHostname from protection composable with device status logic.
|
||||||
|
const localHostname = protection.localHostname;
|
||||||
|
const { currentBackendDevice, otherDevices, iosStars } = useDeviceStatus(devices, localHostname, iphone);
|
||||||
|
|
||||||
|
const statusCardClass = computed(() => {
|
||||||
|
switch (protection.status.value.overall) {
|
||||||
|
case "protected": return "from-emerald-500 to-teal-500";
|
||||||
|
case "partial": return "from-amber-500 to-orange-500";
|
||||||
|
case "unprotected": return "from-slate-400 to-slate-500";
|
||||||
|
default: return "from-blue-500 to-indigo-500";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const badgeColorForOverall = computed(() => {
|
||||||
|
switch (protection.status.value.overall) {
|
||||||
|
case "protected": return "success";
|
||||||
|
case "partial": return "warning";
|
||||||
|
case "unprotected": return "neutral";
|
||||||
|
default: return "primary";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const overallBadgeLabel = computed(() => {
|
||||||
|
switch (protection.status.value.overall) {
|
||||||
|
case "protected": return "Aktiv";
|
||||||
|
case "partial": return "Teilweise";
|
||||||
|
case "unprotected": return "Inaktiv";
|
||||||
|
default: return "Unbekannt";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await loadProfile();
|
||||||
|
await refresh();
|
||||||
|
try {
|
||||||
|
const info = await getPlatform();
|
||||||
|
platformInfo.value = { platform: info.platform };
|
||||||
|
} catch (e) {
|
||||||
|
platformInfo.value = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function loadProfile() {
|
||||||
|
try {
|
||||||
|
profile.value = await fetchMe();
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Failed to load profile:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refresh() {
|
||||||
|
loading.value = true;
|
||||||
|
error.value = null;
|
||||||
|
try {
|
||||||
|
await protection.refresh();
|
||||||
|
devices.value = await getMagicDevices();
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e?.message ?? "Geräte konnten nicht geladen werden";
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(date: Date) {
|
||||||
|
return date.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
||||||
|
}
|
||||||
|
|
||||||
|
function openDevice(device: ComputedDevice) {
|
||||||
|
selectedDevice.value = device;
|
||||||
|
sheetOpen.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function toggleProtection(device: ComputedDevice) {
|
||||||
|
if (!device.isCurrent) return;
|
||||||
|
if (device.platform === "mac" || device.platform === "windows") {
|
||||||
|
if (protection.status.value.desktopProtected) {
|
||||||
|
try {
|
||||||
|
await setDesktopProtectionStatus(false, device.platform);
|
||||||
|
await refresh();
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e?.message ?? "Schutz konnte nicht deaktiviert werden";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
await navigateTo("/desktop-enroll");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function startCooldown(device: ComputedDevice, minutes: number) {
|
||||||
|
if (!device.isCurrent) return;
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
await apiStartCooldown(device.deviceId, minutes);
|
||||||
|
await refresh();
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e?.message ?? "Cooldown konnte nicht gestartet werden";
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function cancelCooldown(device: ComputedDevice) {
|
||||||
|
if (!device.isCurrent) return;
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
await apiCancelCooldown(device.deviceId);
|
||||||
|
await refresh();
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e?.message ?? "Cooldown konnte nicht beendet werden";
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function requestDeviceRelease(device: ComputedDevice) {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
await requestRelease(device.deviceId);
|
||||||
|
sheetOpen.value = false;
|
||||||
|
await refresh();
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e?.message ?? "Freigabe fehlgeschlagen";
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function logout() {
|
||||||
|
try {
|
||||||
|
await logoutMagic();
|
||||||
|
session.value = null;
|
||||||
|
devices.value = [];
|
||||||
|
await navigateTo("/");
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e?.message ?? "Abmelden fehlgeschlagen";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user