366 lines
14 KiB
HTML
366 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TasGrid Parent App Simulator</title>
|
|
<style>
|
|
body {
|
|
font-family: system-ui;
|
|
padding: 20px;
|
|
background: #f4f4f5;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.iframe-container {
|
|
flex: 1;
|
|
border: 1px solid #ddd;
|
|
background: white;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 600px;
|
|
}
|
|
|
|
.controls {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border: 1px solid #ddd;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.login-form {
|
|
display: grid;
|
|
gap: 10px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.login-form input {
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.login-form button {
|
|
padding: 10px;
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.login-form button:hover {
|
|
background: #0056b3;
|
|
}
|
|
|
|
.status {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
display: none;
|
|
}
|
|
|
|
.status.success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
display: block;
|
|
}
|
|
|
|
.status.error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
display: block;
|
|
}
|
|
|
|
iframe {
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
button.send-manual {
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
input.manual-token {
|
|
padding: 8px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 0;
|
|
}
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>TasGrid Parent App Simulator</h1>
|
|
|
|
<div class="controls">
|
|
<div id="login-section">
|
|
<h3>Login to Parent Application</h3>
|
|
<p>This simulates the parent application authenticating with the shared backend.</p>
|
|
<div class="login-form">
|
|
<input type="email" id="email" placeholder="Email" value="">
|
|
<input type="password" id="password" placeholder="Password" value="">
|
|
<button onclick="login()">Login & Sync Iframes</button>
|
|
</div>
|
|
<div id="status" class="status"></div>
|
|
</div>
|
|
|
|
<div id="manual-section" style="margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px;">
|
|
<p style="font-size: 13px; color: #666;"><strong>Test Deep Linking:</strong></p>
|
|
<div style="display: flex; gap: 10px; margin-bottom: 10px;">
|
|
<input type="text" id="note-id-input" style="flex: 1; padding: 8px;"
|
|
placeholder="Paste Note ID here...">
|
|
<button onclick="loadSpecificNote()" style="padding: 8px 16px; cursor: pointer;">Load Note</button>
|
|
</div>
|
|
|
|
<p style="font-size: 13px; color: #666; margin-top: 20px;"><strong>Test API Creation:</strong></p>
|
|
<div style="display: flex; gap: 10px; margin-bottom: 10px;">
|
|
<input type="text" id="new-note-title" style="flex: 1; padding: 8px;" placeholder="New Note Title...">
|
|
<button onclick="createNoteViaAPI()"
|
|
style="padding: 8px 16px; cursor: pointer; background: #28a745; color: white; border: none; border-radius: 4px; font-weight: bold;">Create
|
|
& Open Note</button>
|
|
</div>
|
|
|
|
<p style="font-size: 13px; color: #666; margin-top: 20px;"><strong>Manual Auth:</strong></p>
|
|
<input type="text" id="token" class="manual-token" placeholder="Paste PB Token here...">
|
|
<button class="send-manual" onclick="sendAuthFromInput()">Send Manual Token</button>
|
|
</div>
|
|
|
|
<div id="docs-section" style="margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px;">
|
|
<details>
|
|
<summary style="cursor: pointer; font-weight: bold; color: #007bff;">Developer Integration Guide
|
|
</summary>
|
|
<div style="font-size: 14px; line-height: 1.6; margin-top: 15px;">
|
|
<p><strong>1. Available Routes:</strong></p>
|
|
<ul>
|
|
<li><code>/embed/notes</code>: Renders the full notepad/editor.</li>
|
|
<li><code>/embed/notes?noteId=XXX</code>: Renders a specific note directly.</li>
|
|
<li><code>/embed/quick-add</code>: Renders a standalone task creation form.</li>
|
|
</ul>
|
|
|
|
<p><strong>2. Creating Notes Programmatically (API):</strong></p>
|
|
<p>Before embedding, a sister app can create a Note via PocketBase API to retrieve a new
|
|
<code>noteId</code>. By default, notes should have an array of <code>tags</code> and a
|
|
<code>title</code>.
|
|
</p>
|
|
<p><em>Using the PocketBase JS SDK:</em></p>
|
|
<pre
|
|
style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto; font-size: 12px;">
|
|
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}
|
|
</pre>
|
|
<p><em>Using standard REST API (fetch):</em></p>
|
|
<pre
|
|
style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto; font-size: 12px;">
|
|
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;</pre>
|
|
|
|
<p><strong>3. Authentication Protocol:</strong></p>
|
|
<p>The parent application must send a <code>postMessage</code> 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 <code>onload</code> event.</p>
|
|
<p><em>Example using vanilla JS:</em></p>
|
|
<pre
|
|
style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto; font-size: 12px;">
|
|
// 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>
|
|
</pre>
|
|
|
|
<p><strong>4. Responsiveness:</strong></p>
|
|
<p>Both routes are designed to be fluid. Ensure your iframe container has defined dimensions; the
|
|
content will expand to fill it.</p>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="iframe-container">
|
|
<div
|
|
style="padding: 10px; background: #eee; border-bottom: 1px solid #ddd; font-weight: bold; font-size: 12px; display: flex; justify-content: space-between;">
|
|
<span>Notes Embed</span>
|
|
<code style="font-size: 10px;">/embed/notes</code>
|
|
</div>
|
|
<iframe id="notes-iframe" src="http://localhost:4000/embed/notes" onload="syncAuthOnLoad(this)"></iframe>
|
|
</div>
|
|
|
|
<div class="iframe-container">
|
|
<div
|
|
style="padding: 10px; background: #eee; border-bottom: 1px solid #ddd; font-weight: bold; font-size: 12px; display: flex; justify-content: space-between;">
|
|
<span>Quick Add Embed</span>
|
|
<code style="font-size: 10px;">/embed/quick-add</code>
|
|
</div>
|
|
<iframe id="quick-add-iframe" src="http://localhost:4000/embed/quick-add"
|
|
onload="syncAuthOnLoad(this)"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const pb = new PocketBase('https://pocketbase.ccllc.pro');
|
|
const statusEl = document.getElementById('status');
|
|
|
|
function syncAuthOnLoad(iframe) {
|
|
console.log(`Iframe ${iframe.id} loaded, checking auth sync...`);
|
|
if (pb.authStore.isValid) {
|
|
console.log(`Syncing existing auth to ${iframe.id}`);
|
|
sendAuthToIframes();
|
|
}
|
|
}
|
|
|
|
function loadSpecificNote() {
|
|
const id = document.getElementById('note-id-input').value.trim();
|
|
const iframe = document.getElementById('notes-iframe');
|
|
if (id) {
|
|
iframe.src = `http://localhost:4000/embed/notes?noteId=${id}`;
|
|
} else {
|
|
iframe.src = `http://localhost:4000/embed/notes`;
|
|
}
|
|
}
|
|
|
|
async function createNoteViaAPI() {
|
|
const title = document.getElementById('new-note-title').value.trim() || 'API Generated Note';
|
|
if (!pb.authStore.isValid) {
|
|
alert("Please log in first before creating a note via API.");
|
|
return;
|
|
}
|
|
|
|
statusEl.className = 'status';
|
|
statusEl.textContent = 'Creating note via API...';
|
|
statusEl.style.display = 'block';
|
|
|
|
try {
|
|
// Using PocketBase SDK to mimic a REST API call from sister app
|
|
const record = await pb.collection('TasGrid_Notes').create({
|
|
title: title,
|
|
content: "<p>This note was created automatically via the API script!</p>",
|
|
tags: ["api_generated"],
|
|
isPrivate: false,
|
|
user: pb.authStore.model.id,
|
|
tasks: []
|
|
});
|
|
|
|
statusEl.className = 'status success';
|
|
statusEl.textContent = `Note created successfully (ID: ${record.id})! Loading iframe...`;
|
|
|
|
// Automatically set the new ID in the deep link input
|
|
document.getElementById('note-id-input').value = record.id;
|
|
|
|
// Automatically load it
|
|
loadSpecificNote();
|
|
|
|
} catch (err) {
|
|
statusEl.className = 'status error';
|
|
statusEl.textContent = 'Failed to create note: ' + err.message;
|
|
}
|
|
}
|
|
|
|
async function login() {
|
|
const email = document.getElementById('email').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
statusEl.className = 'status';
|
|
statusEl.textContent = 'Logging in...';
|
|
statusEl.style.display = 'block';
|
|
|
|
try {
|
|
const authData = await pb.collection('users').authWithPassword(email, password);
|
|
|
|
statusEl.className = 'status success';
|
|
statusEl.textContent = `Logged in as ${authData.record.email}! Syncing iframes...`;
|
|
|
|
// Automatically send auth to iframes
|
|
sendAuth(pb.authStore.token, authData.record);
|
|
} catch (err) {
|
|
statusEl.className = 'status error';
|
|
statusEl.textContent = 'Login failed: ' + err.message;
|
|
}
|
|
}
|
|
|
|
function sendAuthFromInput() {
|
|
const token = document.getElementById('token').value;
|
|
if (!token) {
|
|
alert("Please enter a token first");
|
|
return;
|
|
}
|
|
sendAuth(token, null);
|
|
}
|
|
|
|
function sendAuth(token, user) {
|
|
const payload = {
|
|
type: "TASGRID_AUTH",
|
|
token: token,
|
|
user: user
|
|
};
|
|
|
|
const notesIframe = document.getElementById('notes-iframe').contentWindow;
|
|
const quickAddIframe = document.getElementById('quick-add-iframe').contentWindow;
|
|
|
|
console.log("Sending auth to iframes...", payload);
|
|
notesIframe.postMessage(payload, "*");
|
|
quickAddIframe.postMessage(payload, "*");
|
|
}
|
|
|
|
// Handle case where user refreshed but is still logged in to the parent
|
|
window.addEventListener('load', () => {
|
|
if (pb.authStore.isValid && pb.authStore.model) {
|
|
document.getElementById('email').value = pb.authStore.model.email || "";
|
|
statusEl.className = 'status success';
|
|
statusEl.textContent = 'Session restored. Click login or send manual token to sync.';
|
|
statusEl.style.display = 'block';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |