45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import { type Component, type JSX, onMount, onCleanup, createSignal, Show } from "solid-js";
|
|
import { pb } from "@/lib/pocketbase";
|
|
|
|
interface EmbedAuthWrapperProps {
|
|
children: JSX.Element;
|
|
}
|
|
|
|
export const EmbedAuthWrapper: Component<EmbedAuthWrapperProps> = (props) => {
|
|
const [isHydrated, setIsHydrated] = createSignal(pb.authStore.isValid);
|
|
|
|
const handleMessage = (event: MessageEvent) => {
|
|
const { data } = event;
|
|
console.log('[DEBUG] EmbedAuthWrapper received message:', data?.type);
|
|
if (data?.type === "TASGRID_AUTH" && data.token) {
|
|
console.log("[DEBUG] Received TasGrid auth payload, hydrating...");
|
|
// Save triggers pb.authStore.onChange, which App.tsx is already listening to and calling initStore()
|
|
pb.authStore.save(data.token, data.user || null);
|
|
setIsHydrated(true);
|
|
}
|
|
};
|
|
|
|
onMount(() => {
|
|
console.log('[DEBUG] EmbedAuthWrapper mounted. Initial isHydrated:', isHydrated());
|
|
window.addEventListener("message", handleMessage);
|
|
});
|
|
|
|
onCleanup(() => {
|
|
window.removeEventListener("message", handleMessage);
|
|
});
|
|
|
|
return (
|
|
<Show
|
|
when={isHydrated()}
|
|
fallback={
|
|
<div class="flex flex-col items-center justify-center h-full space-y-4">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
<p class="text-sm text-muted-foreground">Waiting for authentication...</p>
|
|
</div>
|
|
}
|
|
>
|
|
{props.children}
|
|
</Show>
|
|
);
|
|
};
|