adding embed routes for testing
This commit is contained in:
+216
@@ -0,0 +1,216 @@
|
||||
<!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>
|
||||
|
||||
<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:5173/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:5173/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