TasGrid Parent App Simulator

Login to Parent Application

This simulates the parent application authenticating with the shared backend.

Test Deep Linking:

Test API Creation:

Manual Auth:

Developer Integration Guide

1. Available Routes:

  • /embed/notes: Renders the full notepad/editor.
  • /embed/notes?noteId=XXX: Renders a specific note directly.
  • /embed/quick-add: Renders a standalone task creation form.

2. Creating Notes Programmatically (API):

Before embedding, a sister app can create a Note via PocketBase API to retrieve a new noteId. By default, notes should have an array of tags and a title.

Using the PocketBase JS SDK:

const record = await pb.collection('TasGrid_Notes').create({
    title: "Sister App Payload",
    content: "<p>Initial content here...</p>",
    tags: ["sister_app_export"],
    isPrivate: false,
    user: pb.authStore.model.id, // Must be authenticated user ID
    tasks: [] // Optional array of linked task IDs
});
const newNoteId = record.id;
// Then iframe to /embed/notes?noteId=${newNoteId}

Using standard REST API (fetch):

const res = await fetch('https://pocketbase.ccllc.pro/api/collections/TasGrid_Notes/records', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'YOUR_PB_AUTH_TOKEN'
    },
    body: JSON.stringify({
        title: "REST Custom Note",
        user: "YOUR_USER_ID",
        tags: [],
        tasks: [],
        isPrivate: false
    })
});
const data = await res.json();
const newNoteId = data.id;

3. Authentication Protocol:

The parent application must send a postMessage to the iframe immediately after the iframe loads (or whenever auth state changes). Since iframes reset their internal state on navigation, you should always sync auth on the onload event.

Example using vanilla JS:

// 1. Define sync function
function syncAuth(iframe) {
    iframe.contentWindow.postMessage({
        type: "TASGRID_AUTH",
        token: pb.authStore.token,
        user: pb.authStore.model
    }, "*");
}

// 2. Attach to iframe (either in HTML or via JS)
// <iframe onload="syncAuth(this)" src="..."></iframe>

4. Responsiveness:

Both routes are designed to be fluid. Ensure your iframe container has defined dimensions; the content will expand to fill it.

Notes Embed /embed/notes
Quick Add Embed /embed/quick-add