note specific navigation lock for embeding
This commit is contained in:
+1
-1
@@ -104,7 +104,7 @@ const App: Component = () => {
|
|||||||
const searchParams = new URLSearchParams(window.location.search);
|
const searchParams = new URLSearchParams(window.location.search);
|
||||||
const noteIdFromUrl = searchParams.get('noteId');
|
const noteIdFromUrl = searchParams.get('noteId');
|
||||||
const [selectedNoteId, setSelectedNoteId] = createSignal<string | null>(noteIdFromUrl);
|
const [selectedNoteId, setSelectedNoteId] = createSignal<string | null>(noteIdFromUrl);
|
||||||
return <NotepadView selectedNoteId={selectedNoteId()} setSelectedNoteId={setSelectedNoteId} />;
|
return <NotepadView selectedNoteId={selectedNoteId()} setSelectedNoteId={setSelectedNoteId} hideNavigation={!!noteIdFromUrl} />;
|
||||||
})()}
|
})()}
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={getEmbedView() === 'embed_quick_add'}>
|
<Show when={getEmbedView() === 'embed_quick_add'}>
|
||||||
|
|||||||
+16
-11
@@ -13,6 +13,7 @@ import { NotesSidebar } from "@/components/NotesSidebar";
|
|||||||
export const NotepadView: Component<{
|
export const NotepadView: Component<{
|
||||||
selectedNoteId: string | null;
|
selectedNoteId: string | null;
|
||||||
setSelectedNoteId: (id: string | null) => void;
|
setSelectedNoteId: (id: string | null) => void;
|
||||||
|
hideNavigation?: boolean;
|
||||||
}> = (props) => {
|
}> = (props) => {
|
||||||
const [isLinking, setIsLinking] = createSignal(false);
|
const [isLinking, setIsLinking] = createSignal(false);
|
||||||
const [linkSearchQuery, setLinkSearchQuery] = createSignal("");
|
const [linkSearchQuery, setLinkSearchQuery] = createSignal("");
|
||||||
@@ -131,12 +132,14 @@ export const NotepadView: Component<{
|
|||||||
return (
|
return (
|
||||||
<div class="flex flex-col md:flex-row h-full bg-background md:bg-card md:border md:border-border md:rounded-xl md:shadow-sm overflow-hidden relative">
|
<div class="flex flex-col md:flex-row h-full bg-background md:bg-card md:border md:border-border md:rounded-xl md:shadow-sm overflow-hidden relative">
|
||||||
{/* Mobile Notes List */}
|
{/* Mobile Notes List */}
|
||||||
<div class={cn(
|
<Show when={!props.hideNavigation}>
|
||||||
"md:hidden absolute inset-0 z-10 bg-card overflow-hidden flex flex-col h-full transition-all duration-200 ease-out",
|
<div class={cn(
|
||||||
props.selectedNoteId ? "opacity-0 pointer-events-none -translate-x-8" : "opacity-100 translate-x-0"
|
"md:hidden absolute inset-0 z-10 bg-card overflow-hidden flex flex-col h-full transition-all duration-200 ease-out",
|
||||||
)}>
|
props.selectedNoteId ? "opacity-0 pointer-events-none -translate-x-8" : "opacity-100 translate-x-0"
|
||||||
<NotesSidebar selectedNoteId={props.selectedNoteId} setSelectedNoteId={props.setSelectedNoteId} />
|
)}>
|
||||||
</div>
|
<NotesSidebar selectedNoteId={props.selectedNoteId} setSelectedNoteId={props.setSelectedNoteId} />
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
{/* Note Editor (Main Panel) */}
|
{/* Note Editor (Main Panel) */}
|
||||||
<div class={cn(
|
<div class={cn(
|
||||||
@@ -156,11 +159,13 @@ export const NotepadView: Component<{
|
|||||||
{/* Editor Area */}
|
{/* Editor Area */}
|
||||||
<div class="flex-none md:flex-1 flex flex-col min-w-0 md:h-full overflow-visible md:overflow-y-auto relative p-4 md:p-6 space-y-4 md:space-y-6 scroll-smooth">
|
<div class="flex-none md:flex-1 flex flex-col min-w-0 md:h-full overflow-visible md:overflow-y-auto relative p-4 md:p-6 space-y-4 md:space-y-6 scroll-smooth">
|
||||||
{/* Mobile Back Button */}
|
{/* Mobile Back Button */}
|
||||||
<div class="md:hidden mt-2 md:mt-0 mb-2 md:mb-0">
|
<Show when={!props.hideNavigation}>
|
||||||
<Button variant="ghost" size="sm" class="h-8 px-2 text-xs" onClick={() => props.setSelectedNoteId(null)}>
|
<div class="md:hidden mt-2 md:mt-0 mb-2 md:mb-0">
|
||||||
← Back to Notes
|
<Button variant="ghost" size="sm" class="h-8 px-2 text-xs" onClick={() => props.setSelectedNoteId(null)}>
|
||||||
</Button>
|
← Back to Notes
|
||||||
</div>
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
<div class="flex items-start justify-between gap-4">
|
<div class="flex items-start justify-between gap-4">
|
||||||
<input
|
<input
|
||||||
|
|||||||
@@ -1,245 +0,0 @@
|
|||||||
<!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;">Or send a token manually:</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/quick-add</code>: Renders a standalone task creation form.</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p><strong>2. 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).</p>
|
|
||||||
<pre
|
|
||||||
style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto;">
|
|
||||||
iframe.contentWindow.postMessage({
|
|
||||||
type: "TASGRID_AUTH",
|
|
||||||
token: "YOUR_POCKETBASE_TOKEN",
|
|
||||||
user: { /* optional PB user record */ }
|
|
||||||
}, "*");</pre>
|
|
||||||
|
|
||||||
<p><strong>3. 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"></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"></iframe>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const pb = new PocketBase('https://pocketbase.ccllc.pro');
|
|
||||||
const statusEl = document.getElementById('status');
|
|
||||||
|
|
||||||
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>
|
|
||||||
Reference in New Issue
Block a user