@aimeloic/monkey-tester 4.0.4 → 4.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/htmlTemplate.js +289 -25
- package/package.json +1 -1
- package/temp.backup.js +279 -0
package/htmlTemplate.js
CHANGED
|
@@ -7,7 +7,7 @@ function runtimeClientSandbox() {
|
|
|
7
7
|
|
|
8
8
|
document.getElementById('base-url').value = window.location.origin;
|
|
9
9
|
|
|
10
|
-
// Auto-paste Token directly if it exists in local storage
|
|
10
|
+
// Auto-paste Token directly if it exists in local storage
|
|
11
11
|
const savedToken = localStorage.getItem('__auth_token__');
|
|
12
12
|
if (savedToken) {
|
|
13
13
|
document.getElementById('jwt-input').value = savedToken;
|
|
@@ -153,7 +153,6 @@ function runtimeClientSandbox() {
|
|
|
153
153
|
|
|
154
154
|
// Global UI layouts object
|
|
155
155
|
const UI = {
|
|
156
|
-
// Original Tester UI Page
|
|
157
156
|
tester: (endpointsJsonB64) => `<!DOCTYPE html>
|
|
158
157
|
<html lang="en">
|
|
159
158
|
<head>
|
|
@@ -225,13 +224,12 @@ const UI = {
|
|
|
225
224
|
</body>
|
|
226
225
|
</html>`,
|
|
227
226
|
|
|
228
|
-
// Turnkey Customer Login Page
|
|
229
227
|
login: () => `<!DOCTYPE html><html><head><title>Sign In</title><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
|
230
228
|
<style>body { background: #0e0c09; color: #f0e8d8; font-family: 'DM Sans', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
|
|
231
229
|
.card { background: #181510; border: 1px solid #3a3020; padding: 40px; border-radius: 12px; width: 340px; } h2 { color: #e8a838; margin: 0 0 24px; text-align: center; }
|
|
232
230
|
.field { margin-bottom: 20px; } label { display: block; font-size: 11px; color: #9a8c78; text-transform: uppercase; margin-bottom: 8px; }
|
|
233
231
|
input { background: #221d14; border: 1px solid #3a3020; color: #f0e8d8; padding: 12px; width: 100%; box-sizing: border-box; border-radius: 6px; outline: none; }
|
|
234
|
-
button { background: #e8a838; color: #0e0c09; border: none; padding: 12px; width: 100%; border-radius: 6px; font-weight: 600; cursor: pointer; }
|
|
232
|
+
button { background: #e8a838; color: #0e0c09; border: none; padding: 12px; width: 100%; border-radius: 6px; font-weight: 600; cursor: pointer; margin-top: 10px; }
|
|
235
233
|
.footer { text-align: center; margin-top: 20px; font-size: 13px; color: #9a8c78; } a { color: #e8a838; text-decoration: none; }</style></head>
|
|
236
234
|
<body><div class="card"><h2>Sign In</h2><div id="err" style="color:#d45c3c; font-size:13px; margin-bottom:15px; text-align:center;"></div>
|
|
237
235
|
<div class="field"><label>Email</label><input type="email" id="email" value="customer@bakery.com"></div>
|
|
@@ -248,32 +246,298 @@ const UI = {
|
|
|
248
246
|
} else { document.getElementById('err').textContent = data.error || 'Login failed'; }
|
|
249
247
|
}</script></body></html>`,
|
|
250
248
|
|
|
251
|
-
// Turnkey Customer Signup Page
|
|
252
249
|
signup: () => `<!DOCTYPE html><html><head><title>Create Account</title><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
|
253
250
|
<style>body { background: #0e0c09; color: #f0e8d8; font-family: 'DM Sans', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
|
|
254
251
|
.card { background: #181510; border: 1px solid #3a3020; padding: 40px; border-radius: 12px; width: 340px; } h2 { color: #e8a838; margin: 0 0 24px; text-align: center; }
|
|
255
252
|
.field { margin-bottom: 20px; } label { display: block; font-size: 11px; color: #9a8c78; text-transform: uppercase; margin-bottom: 8px; }
|
|
256
253
|
input { background: #221d14; border: 1px solid #3a3020; color: #f0e8d8; padding: 12px; width: 100%; box-sizing: border-box; border-radius: 6px; outline: none; }
|
|
257
|
-
button { background: #e8a838; color: #0e0c09; border: none; padding: 12px; width: 100%; border-radius: 6px; font-weight: 600; cursor: pointer; }
|
|
258
|
-
|
|
259
|
-
<div class="
|
|
260
|
-
<
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
<
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
254
|
+
button { background: #e8a838; color: #0e0c09; border: none; padding: 12px; width: 100%; border-radius: 6px; font-weight: 600; cursor: pointer; margin-top: 10px; }
|
|
255
|
+
.footer { text-align: center; margin-top: 20px; font-size: 13px; color: #9a8c78; } a { color: #e8a838; text-decoration: none; }</style></head>
|
|
256
|
+
<body><div class="card"><h2>Sign Up</h2><div id="msg" style="font-size:13px; margin-bottom:15px; text-align:center;"></div>
|
|
257
|
+
<div class="field"><label>Username</label><input type="text" id="username" placeholder="Username"></div>
|
|
258
|
+
<div class="field"><label>Email Address</label><input type="email" id="email" placeholder="Email"></div>
|
|
259
|
+
<div class="field"><label>Password</label><input type="password" id="password"></div>
|
|
260
|
+
<button onclick="handleRegister()">Register Account</button><div class="footer">Have an account? <a href="/login">Sign In</a></div></div>
|
|
261
|
+
<script>async function handleRegister() {
|
|
262
|
+
const username = document.getElementById('username').value;
|
|
263
|
+
const email = document.getElementById('email').value;
|
|
264
|
+
const password = document.getElementById('password').value;
|
|
265
|
+
const msgDiv = document.getElementById('msg');
|
|
266
|
+
const res = await fetch('/api/v1/auth/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, email, password }) });
|
|
267
|
+
const data = await res.json();
|
|
268
|
+
if(res.ok) {
|
|
269
|
+
msgDiv.style.color = '#6ba05a'; msgDiv.textContent = 'Registration complete! Redirecting...';
|
|
270
|
+
setTimeout(() => window.location.href = '/login', 1200);
|
|
271
|
+
} else { msgDiv.style.color = '#d45c3c'; msgDiv.textContent = data.error || 'Registration failed'; }
|
|
272
|
+
}</script></body></html>`,
|
|
273
|
+
|
|
274
|
+
// DYNAMIC CRUD DASHBOARD — Reads fields and paths from runtime ENDPOINTS definition instead of static products paths
|
|
275
|
+
dashboard: (endpointsJsonB64) => `<!DOCTYPE html><html><head><title>Dynamic Admin Dashboard</title>
|
|
276
|
+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
|
277
|
+
<style>
|
|
278
|
+
:root { --bg: #0e0c09; --surface: #181510; --surface2: #221d14; --border: #3a3020; --accent: #e8a838; --text: #f0e8d8; --text-dim: #9a8c78; --red: #d45c3c; --green: #6ba05a; }
|
|
279
|
+
body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; padding: 40px; margin: 0; }
|
|
280
|
+
header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 30px; }
|
|
281
|
+
h1 { color: var(--accent); margin: 0; font-size: 24px; }
|
|
282
|
+
.nav-links { display: flex; gap: 16px; align-items: center; }
|
|
283
|
+
.nav-links a { color: var(--text-dim); text-decoration: none; font-size: 14px; }
|
|
284
|
+
.nav-links a:hover { color: var(--accent); }
|
|
285
|
+
.logout-btn { background: #3a1a14; color: var(--red); border: 1px solid #5a2014; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight:600; }
|
|
286
|
+
.selector-banner { background: var(--surface); border: 1px solid var(--border); padding: 12px 20px; border-radius: 8px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }
|
|
287
|
+
select { background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 6px; outline: none; font-weight: 500; }
|
|
288
|
+
.grid { display: grid; grid-template-columns: 360px 1fr; gap: 30px; }
|
|
289
|
+
.panel { background: var(--surface); border: 1px solid var(--border); padding: 24px; border-radius: 8px; height: fit-content; }
|
|
290
|
+
h3 { color: var(--accent); margin-top: 0; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 8px; font-size:14px; text-transform:uppercase; letter-spacing:0.5px; }
|
|
291
|
+
.field { margin-bottom: 16px; }
|
|
292
|
+
label { display: block; font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; font-family: monospace; }
|
|
293
|
+
input { background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 10px; width: 100%; box-sizing: border-box; border-radius: 6px; outline: none; }
|
|
294
|
+
.btn { background: var(--accent); color: #0e0c09; border: none; padding: 11px; width: 100%; border-radius: 6px; font-weight: 700; cursor: pointer; }
|
|
295
|
+
.btn-cancel { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); margin-top: 8px; }
|
|
296
|
+
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: 8px; border: 1px solid var(--border); }
|
|
297
|
+
table { width: 100%; border-collapse: collapse; }
|
|
298
|
+
th { color: var(--text-dim); text-align: left; padding: 14px; border-bottom: 2px solid var(--border); font-size: 11px; text-transform: uppercase; background:#13100b; }
|
|
299
|
+
td { padding: 14px; border-bottom: 1px solid var(--surface2); font-size: 13px; font-family: monospace; }
|
|
300
|
+
.actions-cell { display: flex; gap: 8px; justify-content: flex-end; }
|
|
301
|
+
.btn-sm { padding: 4px 8px; border-radius: 4px; border: none; font-weight: 600; font-size: 11px; cursor: pointer; }
|
|
302
|
+
.btn-edit { background: #1a2e3a; color: #5a86c0; border: 1px solid #224054; }
|
|
303
|
+
.btn-del { background: #3a1a14; color: var(--red); border: 1px solid #5a2014; }
|
|
304
|
+
</style>
|
|
305
|
+
</head>
|
|
306
|
+
<body>
|
|
307
|
+
<div id="__monkey_data__" data-payload="${endpointsJsonB64}" style="display:none;"></div>
|
|
308
|
+
<header>
|
|
309
|
+
<h1>🐒 Universal Management Dashboard</h1>
|
|
310
|
+
<div class="nav-links">
|
|
311
|
+
<a href="/api/tester" target="_blank">🛠 Open Tester Sandbox</a>
|
|
312
|
+
<button class="logout-btn" onclick="localStorage.removeItem('__auth_token__'); window.location.href='/login'">Log Out</button>
|
|
313
|
+
</div>
|
|
314
|
+
</header>
|
|
315
|
+
|
|
316
|
+
<div class="selector-banner">
|
|
317
|
+
<label style="margin:0;">Target Data Resource Collection:</label>
|
|
318
|
+
<select id="route-selector" onchange="switchCollection()"></select>
|
|
319
|
+
</div>
|
|
320
|
+
|
|
321
|
+
<div class="grid">
|
|
322
|
+
<div class="panel">
|
|
323
|
+
<h3 id="form-title">Add Entry</h3>
|
|
324
|
+
<div id="dynamic-fields-container"></div>
|
|
325
|
+
<button class="btn" id="btn-submit" onclick="submitDataForm()">Execute Submission</button>
|
|
326
|
+
<button class="btn btn-sm btn-cancel" id="btn-cancel" style="display:none; margin-top:10px;" onclick="resetDataForm()">Cancel Action</button>
|
|
327
|
+
</div>
|
|
328
|
+
|
|
329
|
+
<div class="table-wrap">
|
|
330
|
+
<table id="dynamic-table">
|
|
331
|
+
<thead id="table-head"></thead>
|
|
332
|
+
<tbody id="table-body"></tbody>
|
|
333
|
+
</table>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
|
|
337
|
+
<script>
|
|
338
|
+
const ENDPOINTS = JSON.parse(atob(document.getElementById('__monkey_data__').getAttribute('data-payload')));
|
|
339
|
+
const token = localStorage.getItem('__auth_token__');
|
|
340
|
+
if (!token) window.location.href = '/login';
|
|
341
|
+
|
|
342
|
+
let dynamicCollections = {};
|
|
343
|
+
let activeCollectionPath = '';
|
|
344
|
+
let activeEditId = null;
|
|
345
|
+
|
|
346
|
+
// Group discovery metadata into unified conceptual resource targets
|
|
347
|
+
function resolveRoutes() {
|
|
348
|
+
Object.values(ENDPOINTS).forEach(ep => {
|
|
349
|
+
// Identify root paths that are collection containers (e.g., /api/v1/products, /api/v1/users)
|
|
350
|
+
if (!ep.path.includes(':')) {
|
|
351
|
+
if (!dynamicCollections[ep.path]) {
|
|
352
|
+
dynamicCollections[ep.path] = { get: null, post: null, put: null, del: null, modelFields: ep.fields || [] };
|
|
353
|
+
}
|
|
354
|
+
if (ep.method === 'GET') dynamicCollections[ep.path].get = ep.path;
|
|
355
|
+
if (ep.method === 'POST') {
|
|
356
|
+
dynamicCollections[ep.path].post = ep.path;
|
|
357
|
+
if (ep.fields && ep.fields.length) dynamicCollections[ep.path].modelFields = ep.fields;
|
|
358
|
+
}
|
|
359
|
+
} else {
|
|
360
|
+
// Match corresponding parameterized items to complete the sub-resource route setup (e.g., /api/v1/products/:id)
|
|
361
|
+
const basePath = ep.path.split('/:')[0];
|
|
362
|
+
if (!dynamicCollections[basePath]) {
|
|
363
|
+
dynamicCollections[basePath] = { get: null, post: null, put: null, del: null, modelFields: [] };
|
|
364
|
+
}
|
|
365
|
+
if (ep.method === 'PUT') dynamicCollections[basePath].put = ep.path;
|
|
366
|
+
if (ep.method === 'DELETE') dynamicCollections[basePath].del = ep.path;
|
|
367
|
+
}
|
|
368
|
+
});
|
|
369
|
+
|
|
370
|
+
// Clean out incomplete route profiles from selector options
|
|
371
|
+
const selector = document.getElementById('route-selector');
|
|
372
|
+
Object.keys(dynamicCollections).forEach(path => {
|
|
373
|
+
if (dynamicCollections[path].get) {
|
|
374
|
+
const opt = document.createElement('option');
|
|
375
|
+
opt.value = path;
|
|
376
|
+
opt.textContent = path + " (Dynamic Dataset)";
|
|
377
|
+
selector.appendChild(opt);
|
|
378
|
+
}
|
|
379
|
+
});
|
|
380
|
+
|
|
381
|
+
if (selector.options.length > 0) {
|
|
382
|
+
switchCollection(selector.options[0].value);
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
function switchCollection(targetPath) {
|
|
387
|
+
activeCollectionPath = targetPath || document.getElementById('route-selector').value;
|
|
388
|
+
activeEditId = null;
|
|
389
|
+
resetDataForm();
|
|
390
|
+
renderFormFields();
|
|
391
|
+
fetchData();
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
function renderFormFields() {
|
|
395
|
+
const container = document.getElementById('dynamic-fields-container');
|
|
396
|
+
container.innerHTML = '';
|
|
397
|
+
const fields = dynamicCollections[activeCollectionPath].modelFields;
|
|
398
|
+
|
|
399
|
+
if (!fields || fields.length === 0) {
|
|
400
|
+
container.innerHTML = '<p style="font-size:12px; color:var(--text-dim);">No input properties found for this resource schema.</p>';
|
|
401
|
+
return;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
fields.forEach(f => {
|
|
405
|
+
container.innerHTML += \`
|
|
406
|
+
<div class="field">
|
|
407
|
+
<label>\${f.label}</label>
|
|
408
|
+
<input type="\${f.type || 'text'}" id="input-\${f.name}" placeholder="\${f.placeholder || ''}">
|
|
409
|
+
</div>
|
|
410
|
+
\`;
|
|
411
|
+
});
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
async function fetchData() {
|
|
415
|
+
const head = document.getElementById('table-head');
|
|
416
|
+
const body = document.getElementById('table-body');
|
|
417
|
+
head.innerHTML = '';
|
|
418
|
+
body.innerHTML = '<tr><td style="padding:20px; color:var(--text-dim)">Loading live system schemas...</td></tr>';
|
|
419
|
+
|
|
420
|
+
try {
|
|
421
|
+
const res = await fetch(activeCollectionPath, { headers: { 'Authorization': 'Bearer ' + token } });
|
|
422
|
+
const rawData = await res.json();
|
|
423
|
+
|
|
424
|
+
// Flatten standard array wrapping logic safely
|
|
425
|
+
let list = [];
|
|
426
|
+
if (Array.isArray(rawData)) list = rawData;
|
|
427
|
+
else if (rawData && typeof rawData === 'object') {
|
|
428
|
+
const arrayKey = Object.keys(rawData).find(k => Array.isArray(rawData[k]));
|
|
429
|
+
list = arrayKey ? rawData[arrayKey] : [rawData];
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
if (!list || list.length === 0 || list[0] === null) {
|
|
433
|
+
body.innerHTML = '<tr><td style="padding:30px; color:var(--text-dim)">No records found inside this live API container.</td></tr>';
|
|
434
|
+
return;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
// Gather unique keys from database entities dynamically
|
|
438
|
+
let keys = Object.keys(list[0]).filter(k => typeof list[0][k] !== 'object');
|
|
439
|
+
|
|
440
|
+
// Generate headers
|
|
441
|
+
let trHead = '<tr>';
|
|
442
|
+
keys.forEach(k => trHead += \`<th>\${k}</th>\`);
|
|
443
|
+
trHead += '<th style="text-align:right; padding-right:20px;">Actions</th></tr>';
|
|
444
|
+
head.innerHTML = trHead;
|
|
445
|
+
|
|
446
|
+
// Populate row fields
|
|
447
|
+
body.innerHTML = '';
|
|
448
|
+
list.forEach(row => {
|
|
449
|
+
let trBody = '<tr>';
|
|
450
|
+
keys.forEach(k => {
|
|
451
|
+
const val = row[k] !== undefined ? row[k] : '';
|
|
452
|
+
trBody += \`<td>\${val}</td>\`;
|
|
453
|
+
});
|
|
454
|
+
|
|
455
|
+
const targetId = row.id || row._id || list.indexOf(row);
|
|
456
|
+
const rowJson = btoa(JSON.stringify(row));
|
|
457
|
+
|
|
458
|
+
trBody += \`
|
|
459
|
+
<td class="actions-cell" style="padding-right:20px;">
|
|
460
|
+
\${dynamicCollections[activeCollectionPath].put ? \`<button class="btn-sm btn-edit" onclick="startRowEdit('\${targetId}', '\${rowJson}')">Edit</button>\` : ''}
|
|
461
|
+
\${dynamicCollections[activeCollectionPath].del ? \`<button class="btn-sm btn-del" onclick="deleteRow('\${targetId}')">Delete</button>\` : ''}
|
|
462
|
+
</td>
|
|
463
|
+
</tr>\`;
|
|
464
|
+
body.innerHTML += trBody;
|
|
465
|
+
});
|
|
466
|
+
|
|
467
|
+
} catch (e) {
|
|
468
|
+
body.innerHTML = '<tr><td style="padding:20px; color:var(--red)">Failed processing remote endpoint structure data.</td></tr>';
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
async function submitDataForm() {
|
|
473
|
+
const fields = dynamicCollections[activeCollectionPath].modelFields;
|
|
474
|
+
const payload = {};
|
|
475
|
+
|
|
476
|
+
fields.forEach(f => {
|
|
477
|
+
const el = document.getElementById(\`input-\${f.name}\`);
|
|
478
|
+
if (el) {
|
|
479
|
+
payload[f.name] = f.type === 'number' ? Number(el.value) : el.value;
|
|
480
|
+
}
|
|
481
|
+
});
|
|
482
|
+
|
|
483
|
+
let url = activeCollectionPath;
|
|
484
|
+
let method = 'POST';
|
|
485
|
+
|
|
486
|
+
if (activeEditId !== null) {
|
|
487
|
+
const putTemplate = dynamicCollections[activeCollectionPath].put;
|
|
488
|
+
const paramName = putTemplate.split('/:')[1];
|
|
489
|
+
url = putTemplate.replace(\`:\${paramName}\`, activeEditId);
|
|
490
|
+
method = 'PUT';
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
const res = await fetch(url, {
|
|
494
|
+
method: method,
|
|
495
|
+
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
|
496
|
+
body: JSON.stringify(payload)
|
|
497
|
+
});
|
|
498
|
+
|
|
499
|
+
if (res.ok) { resetDataForm(); fetchData(); } else { alert('Submission declined by target stack route operations.'); }
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
async function deleteRow(id) {
|
|
503
|
+
if (!confirm('Execute atomic entry removal?')) return;
|
|
504
|
+
const delTemplate = dynamicCollections[activeCollectionPath].del;
|
|
505
|
+
const paramName = delTemplate.split('/:')[1];
|
|
506
|
+
const url = delTemplate.replace(\`:\${paramName}\`, id);
|
|
507
|
+
|
|
508
|
+
const res = await fetch(url, { method: 'DELETE', headers: { 'Authorization': 'Bearer ' + token } });
|
|
509
|
+
if (res.ok) fetchData(); else alert('Delete request blocked by resource server.');
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
function startRowEdit(id, encodedJson) {
|
|
513
|
+
activeEditId = id;
|
|
514
|
+
const data = JSON.parse(atob(encodedJson));
|
|
515
|
+
document.getElementById('form-title').textContent = \`Update Row #\${id}\`;
|
|
516
|
+
document.getElementById('btn-submit').textContent = 'Commit Changes';
|
|
517
|
+
document.getElementById('btn-cancel').style.display = 'block';
|
|
518
|
+
|
|
519
|
+
const fields = dynamicCollections[activeCollectionPath].modelFields;
|
|
520
|
+
fields.forEach(f => {
|
|
521
|
+
const el = document.getElementById(\`input-\${f.name}\`);
|
|
522
|
+
if (el && data[f.name] !== undefined) el.value = data[f.name];
|
|
523
|
+
});
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
function resetDataForm() {
|
|
527
|
+
activeEditId = null;
|
|
528
|
+
document.getElementById('form-title').textContent = 'Add Entry';
|
|
529
|
+
document.getElementById('btn-submit').textContent = 'Execute Submission';
|
|
530
|
+
document.getElementById('btn-cancel').style.display = 'none';
|
|
531
|
+
const fields = dynamicCollections[activeCollectionPath]?.modelFields || [];
|
|
532
|
+
fields.forEach(f => {
|
|
533
|
+
const el = document.getElementById(\`input-\${f.name}\`);
|
|
534
|
+
if (el) el.value = '';
|
|
535
|
+
});
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
resolveRoutes();
|
|
539
|
+
</script>
|
|
540
|
+
</body></html>`
|
|
277
541
|
};
|
|
278
542
|
|
|
279
543
|
export { UI };
|
package/package.json
CHANGED
package/temp.backup.js
ADDED
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
// Original Sandbox Runtime — Stringified safely to browser context
|
|
4
|
+
function runtimeClientSandbox() {
|
|
5
|
+
const ENDPOINTS = JSON.parse(atob(document.getElementById('__monkey_data__').getAttribute('data-payload')));
|
|
6
|
+
let currentKey = null;
|
|
7
|
+
|
|
8
|
+
document.getElementById('base-url').value = window.location.origin;
|
|
9
|
+
|
|
10
|
+
// Auto-paste Token directly if it exists in local storage from the turnkey login page!
|
|
11
|
+
const savedToken = localStorage.getItem('__auth_token__');
|
|
12
|
+
if (savedToken) {
|
|
13
|
+
document.getElementById('jwt-input').value = savedToken;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function buildSidebar() {
|
|
17
|
+
const sidebar = document.getElementById('sidebar-nav');
|
|
18
|
+
const keys = Object.keys(ENDPOINTS);
|
|
19
|
+
if (keys.length === 0) {
|
|
20
|
+
sidebar.innerHTML += '<div style="padding:18px;color:var(--text-dim);font-size:12px">No endpoints discovered.</div>';
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
keys.forEach((key, i) => {
|
|
24
|
+
const ep = ENDPOINTS[key];
|
|
25
|
+
const item = document.createElement('div');
|
|
26
|
+
item.className = 'nav-item' + (i === 0 ? ' active' : '');
|
|
27
|
+
item.setAttribute('data-key', key);
|
|
28
|
+
item.innerHTML = '<span class="method-badge ' + ep.method + '">' + ep.method + '</span><span class="nav-label">' + ep.path + '</span>';
|
|
29
|
+
item.addEventListener('click', () => {
|
|
30
|
+
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
|
31
|
+
item.classList.add('active');
|
|
32
|
+
clearResponse();
|
|
33
|
+
renderPanel(key);
|
|
34
|
+
});
|
|
35
|
+
sidebar.appendChild(item);
|
|
36
|
+
});
|
|
37
|
+
renderPanel(keys[0]);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
function renderPanel(key) {
|
|
41
|
+
currentKey = key;
|
|
42
|
+
const ep = ENDPOINTS[key];
|
|
43
|
+
const main = document.getElementById('main-panel');
|
|
44
|
+
if (!ep) return;
|
|
45
|
+
|
|
46
|
+
let html = '<div class="endpoint-title">' + ep.title + '</div>' +
|
|
47
|
+
'<div class="endpoint-path"><span class="method-badge ' + ep.method + '">' + ep.method + '</span><span>' + ep.path + '</span></div>' +
|
|
48
|
+
'<div class="endpoint-desc">' + ep.desc + '</div>';
|
|
49
|
+
|
|
50
|
+
if (ep.params && ep.params.length) {
|
|
51
|
+
html += '<div class="form-section"><div class="form-section-title">Path Parameters</div>';
|
|
52
|
+
ep.params.forEach(p => {
|
|
53
|
+
html += '<div class="field-row"><label class="field-label">' + p.label + '</label><input type="text" id="param-' + p.name + '" placeholder="' + p.placeholder + '" /></div>';
|
|
54
|
+
});
|
|
55
|
+
html += '</div>';
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
if (ep.fields && ep.fields.length) {
|
|
59
|
+
html += '<div class="form-section"><div class="form-section-title">HTTP JSON Payload Parameters</div>';
|
|
60
|
+
ep.fields.forEach(f => {
|
|
61
|
+
html += '<div class="field-row"><label class="field-label">' + f.label + '</label><input type="' + (f.type || 'text') + '" id="field-' + f.name + '" placeholder="' + (f.placeholder || '') + '" /></div>';
|
|
62
|
+
});
|
|
63
|
+
html += '</div>';
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
html += '<div class="btn-row"><button class="btn" id="_exec_btn">Execute Route</button><button class="btn btn-secondary" id="_clear_btn">Clear Context</button></div>';
|
|
67
|
+
main.innerHTML = html;
|
|
68
|
+
document.getElementById('_exec_btn').addEventListener('click', sendRequest);
|
|
69
|
+
document.getElementById('_clear_btn').addEventListener('click', clearResponse);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
async function sendRequest() {
|
|
73
|
+
const ep = ENDPOINTS[currentKey];
|
|
74
|
+
let path = ep.path;
|
|
75
|
+
if (ep.params && ep.params.length) {
|
|
76
|
+
for (const p of ep.params) {
|
|
77
|
+
const val = (document.getElementById('param-' + p.name) || {}).value || '';
|
|
78
|
+
if (!val.trim()) { showToast('⚠ Path param "' + p.label + '" is required'); return; }
|
|
79
|
+
path = path.replace(':' + p.name, encodeURIComponent(val.trim()));
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
const baseUrl = document.getElementById('base-url').value.replace(/\/+$/, '');
|
|
83
|
+
const url = baseUrl + path;
|
|
84
|
+
const headers = { 'Content-Type': 'application/json' };
|
|
85
|
+
const jwt = document.getElementById('jwt-input').value.trim();
|
|
86
|
+
if (jwt) headers['Authorization'] = 'Bearer ' + jwt;
|
|
87
|
+
|
|
88
|
+
let body = undefined;
|
|
89
|
+
if (['POST', 'PUT', 'PATCH'].includes(ep.method) && ep.fields && ep.fields.length) {
|
|
90
|
+
const payload = {};
|
|
91
|
+
ep.fields.forEach(f => {
|
|
92
|
+
const el = document.getElementById('field-' + f.name);
|
|
93
|
+
if (!el) return;
|
|
94
|
+
let v = el.value.trim();
|
|
95
|
+
if (f.type === 'number' && v !== '') v = Number(v);
|
|
96
|
+
payload[f.name] = v;
|
|
97
|
+
});
|
|
98
|
+
body = JSON.stringify(payload);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
setResponse(null, 'loading');
|
|
102
|
+
const t0 = Date.now();
|
|
103
|
+
try {
|
|
104
|
+
const res = await fetch(url, { method: ep.method, headers, body });
|
|
105
|
+
const ms = Date.now() - t0;
|
|
106
|
+
const text = await res.text();
|
|
107
|
+
let data; try { data = JSON.parse(text); } catch { data = text; }
|
|
108
|
+
setResponse(data, res.ok ? 'ok' : 'err', res.status, ms);
|
|
109
|
+
} catch (err) {
|
|
110
|
+
setResponse({ error: err.message }, 'err', 'FAIL', 0);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
function setResponse(data, state, status, ms) {
|
|
115
|
+
const badge = document.getElementById('status-badge');
|
|
116
|
+
const body = document.getElementById('response-body');
|
|
117
|
+
if (state === 'loading') {
|
|
118
|
+
badge.className = 'status-badge status-idle'; badge.textContent = '…';
|
|
119
|
+
body.className = 'response-body empty'; body.textContent = 'Executing transmission…';
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
badge.className = 'status-badge ' + (state === 'ok' ? 'status-ok' : 'status-err');
|
|
123
|
+
badge.textContent = status + ' · ' + ms + 'ms';
|
|
124
|
+
body.className = 'response-body';
|
|
125
|
+
const str = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
|
|
126
|
+
body.innerHTML = '<pre class="json-render-block">' + highlight(str) + '</pre>';
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
function clearResponse() {
|
|
130
|
+
document.getElementById('status-badge').className = 'status-badge status-idle';
|
|
131
|
+
document.getElementById('status-badge').textContent = '—';
|
|
132
|
+
const body = document.getElementById('response-body');
|
|
133
|
+
body.className = 'response-body empty'; body.textContent = 'Execute a request row to generate feedback data';
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
function highlight(str) {
|
|
137
|
+
return str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')
|
|
138
|
+
.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false)\b|\bnull\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(m) {
|
|
139
|
+
if (/^"/.test(m)) return /:$/.test(m) ? '<span class="json-key">' + m + '</span>' : '<span class="json-str">' + m + '</span>';
|
|
140
|
+
if (/true|false/.test(m)) return '<span class="json-bool">' + m + '</span>';
|
|
141
|
+
if (/null/.test(m)) return '<span class="json-null">' + m + '</span>';
|
|
142
|
+
return '<span class="json-num">' + m + '</span>';
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
function showToast(msg) {
|
|
147
|
+
const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show');
|
|
148
|
+
setTimeout(() => t.classList.remove('show'), 2500);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
buildSidebar();
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// Global UI layouts object
|
|
155
|
+
const UI = {
|
|
156
|
+
// Original Tester UI Page
|
|
157
|
+
tester: (endpointsJsonB64) => `<!DOCTYPE html>
|
|
158
|
+
<html lang="en">
|
|
159
|
+
<head>
|
|
160
|
+
<meta charset="UTF-8"><title>Endtester — Environment Hub</title>
|
|
161
|
+
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
|
162
|
+
<style>
|
|
163
|
+
:root { --bg: #0e0c09; --surface: #181510; --surface2: #221d14; --border: #3a3020; --accent: #e8a838; --text: #f0e8d8; --text-dim: #9a8c78; --red: #d45c3c; --green: #6ba05a; --blue: #5a86c0; --radius: 8px; }
|
|
164
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
165
|
+
body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; height: 100vh; overflow: hidden; background-image: radial-gradient(ellipse 80% 60% at 50% -20%, #3a2a0a22 0%, transparent 70%); }
|
|
166
|
+
header { border-bottom: 1px solid var(--border); padding: 16px 32px; display: flex; align-items: center; gap: 20px; background: #0e0c09ee; backdrop-filter: blur(8px); height: 65px; }
|
|
167
|
+
.logo { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--accent); }
|
|
168
|
+
.logo span { color: var(--text-dim); font-size: 11px; font-family: 'DM Mono', monospace; margin-left: 8px; }
|
|
169
|
+
.header-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
|
|
170
|
+
.jwt-wrap, .base-url-wrap { display: flex; align-items: center; gap: 8px; }
|
|
171
|
+
.jwt-wrap label, .base-url-wrap label { color: var(--text-dim); font-size: 11px; font-family: 'DM Mono', monospace; }
|
|
172
|
+
#jwt-input, #base-url { background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-family: 'DM Mono', monospace; font-size: 12px; padding: 6px 12px; border-radius: var(--radius); width: 220px; outline: none; }
|
|
173
|
+
.layout { display: grid; grid-template-columns: 280px 1fr 450px; height: calc(100vh - 65px); overflow: hidden; }
|
|
174
|
+
aside { border-right: 1px solid var(--border); overflow-y: auto; padding: 16px 0; background: #0b0907; }
|
|
175
|
+
.section-label { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--text-dim); text-transform: uppercase; padding: 12px 18px 6px; }
|
|
176
|
+
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 18px; cursor: pointer; border-left: 2px solid transparent; color: var(--text-dim); }
|
|
177
|
+
.nav-item.active { border-left-color: var(--accent); background: var(--surface); color: var(--accent); }
|
|
178
|
+
.method-badge { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 4px; min-width: 52px; text-align: center; }
|
|
179
|
+
.GET { background: #1a3a22; color: #6ba05a; } .POST { background: #1a2e3a; color: #5a86c0; } .PUT { background: #3a2e10; color: #e8a838; } .DELETE { background: #3a1a14; color: #d45c3c; }
|
|
180
|
+
.nav-label { font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
181
|
+
main { overflow-y: auto; padding: 32px; background: #0e0c09; }
|
|
182
|
+
.endpoint-title { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--accent); margin-bottom: 8px; }
|
|
183
|
+
.endpoint-path { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text-dim); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
|
|
184
|
+
.endpoint-desc { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin-bottom: 24px; border-left: 2px solid var(--border); padding-left: 12px; }
|
|
185
|
+
.form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
|
|
186
|
+
.form-section-title { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-dim); text-transform: uppercase; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
|
|
187
|
+
.field-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 16px; margin-bottom: 14px; }
|
|
188
|
+
.field-label { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-dim); text-align: right; }
|
|
189
|
+
input[type=text], input[type=password], input[type=number] { background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-size: 13px; padding: 8px 12px; border-radius: var(--radius); width: 100%; outline: none; }
|
|
190
|
+
.btn-row { margin-top: 24px; display: flex; gap: 12px; }
|
|
191
|
+
.btn { background: var(--accent); color: #0e0c09; border: none; padding: 10px 24px; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; }
|
|
192
|
+
.btn-secondary { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); }
|
|
193
|
+
.response-panel { border-left: 1px solid var(--border); display: flex; flex-direction: column; background: #110e0a; }
|
|
194
|
+
.response-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; background: var(--surface); height: 50px; }
|
|
195
|
+
.response-header-title { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-dim); text-transform: uppercase; }
|
|
196
|
+
.status-badge { font-family: 'DM Mono', monospace; font-size: 12px; margin-left: auto; padding: 2px 8px; border-radius: 4px; }
|
|
197
|
+
.status-ok { background: #1a3a22; color: #6ba05a; } .status-err { background: #3a1a14; color: #d45c3c; } .status-idle { background: var(--surface2); color: var(--text-dim); }
|
|
198
|
+
.response-body { flex: 1; overflow-y: auto; padding: 0; background: #0d0b08; }
|
|
199
|
+
.response-body.empty { color: var(--text-dim); display: flex; align-items: center; justify-content: center; padding: 20px; font-size: 13px; }
|
|
200
|
+
.json-render-block { display: block; padding: 20px; font-family: 'DM Mono', monospace; font-size: 12px; line-height: 1.5; white-space: pre; }
|
|
201
|
+
.json-key { color: #e8a838; } .json-str { color: #9ab878; } .json-num { color: #5a86c0; } .json-bool { color: #c47a1e; } .json-null { color: var(--text-dim); }
|
|
202
|
+
#toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface2); border: 1px solid var(--border); padding: 10px 18px; border-radius: var(--radius); opacity: 0; transition: all .25s; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--accent); }
|
|
203
|
+
#toast.show { opacity: 1; }
|
|
204
|
+
</style>
|
|
205
|
+
</head>
|
|
206
|
+
<body>
|
|
207
|
+
<div id="__monkey_data__" data-payload="${endpointsJsonB64}" style="display:none;"></div>
|
|
208
|
+
<header>
|
|
209
|
+
<div class="logo">🐒 Endtester <span>Interactive API Hub</span></div>
|
|
210
|
+
<div class="header-right">
|
|
211
|
+
<div class="base-url-wrap"><label>HOST</label><input id="base-url" type="text" value=""></div>
|
|
212
|
+
<div class="jwt-wrap"><label>BEARER AUTH</label><input id="jwt-input" type="text" placeholder="Token value..."></div>
|
|
213
|
+
</div>
|
|
214
|
+
</header>
|
|
215
|
+
<div class="layout">
|
|
216
|
+
<aside id="sidebar-nav"><div class="section-label">Discovered Endpoints</div></aside>
|
|
217
|
+
<main id="main-panel"></main>
|
|
218
|
+
<div class="response-panel">
|
|
219
|
+
<div class="response-header"><span class="response-header-title">Response Output</span><span id="status-badge" class="status-badge status-idle">—</span></div>
|
|
220
|
+
<div class="response-body empty" id="response-body">Execute a request row to generate feedback data</div>
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
<div id="toast"></div>
|
|
224
|
+
<script>(${runtimeClientSandbox.toString()})();</script>
|
|
225
|
+
</body>
|
|
226
|
+
</html>`,
|
|
227
|
+
|
|
228
|
+
// Turnkey Customer Login Page
|
|
229
|
+
login: () => `<!DOCTYPE html><html><head><title>Sign In</title><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
|
230
|
+
<style>body { background: #0e0c09; color: #f0e8d8; font-family: 'DM Sans', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
|
|
231
|
+
.card { background: #181510; border: 1px solid #3a3020; padding: 40px; border-radius: 12px; width: 340px; } h2 { color: #e8a838; margin: 0 0 24px; text-align: center; }
|
|
232
|
+
.field { margin-bottom: 20px; } label { display: block; font-size: 11px; color: #9a8c78; text-transform: uppercase; margin-bottom: 8px; }
|
|
233
|
+
input { background: #221d14; border: 1px solid #3a3020; color: #f0e8d8; padding: 12px; width: 100%; box-sizing: border-box; border-radius: 6px; outline: none; }
|
|
234
|
+
button { background: #e8a838; color: #0e0c09; border: none; padding: 12px; width: 100%; border-radius: 6px; font-weight: 600; cursor: pointer; }
|
|
235
|
+
.footer { text-align: center; margin-top: 20px; font-size: 13px; color: #9a8c78; } a { color: #e8a838; text-decoration: none; }</style></head>
|
|
236
|
+
<body><div class="card"><h2>Sign In</h2><div id="err" style="color:#d45c3c; font-size:13px; margin-bottom:15px; text-align:center;"></div>
|
|
237
|
+
<div class="field"><label>Email</label><input type="email" id="email" value="customer@bakery.com"></div>
|
|
238
|
+
<div class="field"><label>Password</label><input type="password" id="password" value="secret123"></div>
|
|
239
|
+
<button onclick="handleLogin()">Log In</button><div class="footer">Need an account? <a href="/signup">Sign up</a></div></div>
|
|
240
|
+
<script>async function handleLogin() {
|
|
241
|
+
const email = document.getElementById('email').value;
|
|
242
|
+
const password = document.getElementById('password').value;
|
|
243
|
+
const res = await fetch('/api/v1/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, password }) });
|
|
244
|
+
const data = await res.json();
|
|
245
|
+
if (res.ok && data.token) {
|
|
246
|
+
localStorage.setItem('__auth_token__', data.token);
|
|
247
|
+
window.location.href = '/dashboard';
|
|
248
|
+
} else { document.getElementById('err').textContent = data.error || 'Login failed'; }
|
|
249
|
+
}</script></body></html>`,
|
|
250
|
+
|
|
251
|
+
// Turnkey Customer Signup Page
|
|
252
|
+
signup: () => `<!DOCTYPE html><html><head><title>Create Account</title><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
|
253
|
+
<style>body { background: #0e0c09; color: #f0e8d8; font-family: 'DM Sans', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
|
|
254
|
+
.card { background: #181510; border: 1px solid #3a3020; padding: 40px; border-radius: 12px; width: 340px; } h2 { color: #e8a838; margin: 0 0 24px; text-align: center; }
|
|
255
|
+
.field { margin-bottom: 20px; } label { display: block; font-size: 11px; color: #9a8c78; text-transform: uppercase; margin-bottom: 8px; }
|
|
256
|
+
input { background: #221d14; border: 1px solid #3a3020; color: #f0e8d8; padding: 12px; width: 100%; box-sizing: border-box; border-radius: 6px; outline: none; }
|
|
257
|
+
button { background: #e8a838; color: #0e0c09; border: none; padding: 12px; width: 100%; border-radius: 6px; font-weight: 600; cursor: pointer; }</style></head>
|
|
258
|
+
<body><div class="card"><h2>Sign Up</h2><div class="field"><label>Username</label><input type="text" id="username"></div>
|
|
259
|
+
<div class="field"><label>Email</label><input type="email" id="email"></div><div class="field"><label>Password</label><input type="password" id="password"></div>
|
|
260
|
+
<button onclick="window.location.href='/login'">Register Account</button></div></body></html>`,
|
|
261
|
+
|
|
262
|
+
// Turnkey Storefront Dashboard
|
|
263
|
+
dashboard: () => `<!DOCTYPE html><html><head><title>Storefront Catalog</title><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
|
264
|
+
<style>body { background: #0e0c09; color: #f0e8d8; font-family: 'DM Sans', sans-serif; padding: 40px; margin: 0; }
|
|
265
|
+
header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #3a3020; padding-bottom: 20px; margin-bottom: 30px; }
|
|
266
|
+
h1 { color: #e8a838; margin: 0; } .logout { background: #3a1a14; color: #d45c3c; border: 1px solid #5a2014; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
|
|
267
|
+
.grid { display: grid; grid-template-columns: 1fr; gap: 30px; } .panel { background: #181510; border: 1px solid #3a3020; padding: 24px; border-radius: 8px; }
|
|
268
|
+
table { width: 100%; border-collapse: collapse; } th { color: #9a8c78; text-align: left; padding: 12px; border-bottom: 2px solid #3a3020; } td { padding: 12px; border-bottom: 1px solid #221d14; }</style></head>
|
|
269
|
+
<body><header><h1>Bakery Storefront</h1><button class="logout" onclick="localStorage.removeItem('__auth_token__'); window.location.href='/login'">Log Out</button></header>
|
|
270
|
+
<div class="grid"><div class="panel"><h3>Available Baked Goods</h3><table><thead><tr><th>Product Name</th><th>Price</th><th>Stock Status</th></tr></thead><tbody id="catalog"></tbody></table></div></div>
|
|
271
|
+
<script>const token = localStorage.getItem('__auth_token__'); if (!token) window.location.href = '/login';
|
|
272
|
+
async function load() {
|
|
273
|
+
const res = await fetch('/api/v1/products', { headers: { 'Authorization': 'Bearer ' + token } });
|
|
274
|
+
const data = await res.json(); const tbody = document.getElementById('catalog'); tbody.innerHTML = '';
|
|
275
|
+
if(data.products) { data.products.forEach(p => { tbody.innerHTML += '<tr><td><strong>'+p.name+'</strong></td><td>$'+p.price.toFixed(2)+'</td><td>'+p.stock+' left</td></tr>'; }); }
|
|
276
|
+
} load();</script></body></html>`
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
export { UI };
|