marcogll/formbricks_form_manager
1
0
Fork 0
mirror of https://github.com/marcogll/formbricks_form_manager.git synced 2026-01-13 21:35:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Reformat admin view and update survey mapping database files.

Browse Source
This commit is contained in:
Marco Gallegos
2025-12-13 14:35:50 -06:00
parent 3a31818ca8
commit c711817e40
6 changed files with 485 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
data/survey_mappings.db-shm
View File

Binary file not shown.

BIN
data/survey_mappings.db-wal
View File

Binary file not shown.

10
src/routes/admin.js
View File

@@ -6,10 +6,20 @@ const {
updateEnvironmentAlias, updateEnvironmentAlias,
getSurveysByEnvironment, getSurveysByEnvironment,
updateSurveySlug, updateSurveySlug,
refreshSurveyCache,
} = require("../services/formbricks"); } = require("../services/formbricks");
router.use(ensureAdminToken); router.use(ensureAdminToken);
router.post("/sync", async (req, res) => {
try {
await refreshSurveyCache();
res.json({ status: "ok", message: "Surveys synced successfully" });
} catch (error) {
res.status(500).json({ error: error.message });
}
});
router.get("/environments", (req, res) => { router.get("/environments", (req, res) => {
try { try {
const environments = getAllEnvironments(); const environments = getAllEnvironments();

54
src/server.js
View File

@@ -1,55 +1,55 @@
require('dotenv').config(); require("dotenv").config();
const express = require('express'); const express = require("express");
const path = require('path'); const path = require("path");
const surveyRoutes = require('./routes/surveys'); const surveyRoutes = require("./routes/surveys");
const adminRoutes = require('./routes/admin'); const adminRoutes = require("./routes/admin");
const { refreshSurveyCache } = require('./services/formbricks'); const { refreshSurveyCache } = require("./services/formbricks");
const app = express(); const app = express();
const PORT = process.env.PORT || 3011; const PORT = process.env.PORT || 3011;
// Template Engine Setup // Template Engine Setup
app.set('view engine', 'ejs'); app.set("view engine", "ejs");
app.set('views', path.join(__dirname, 'views')); app.set("views", path.join(__dirname, "views"));
// Middleware // Middleware
app.use(express.json()); app.use(express.json());
app.use(express.urlencoded({ extended: true })); app.use(express.urlencoded({ extended: true }));
// Health check endpoint // Health check endpoint
app.get('/health', (req, res) => { app.get("/health", (req, res) => {
res.status(200).json({ status: 'ok' }); res.status(200).json({ status: "ok" });
}); });
// Root landing page // Root landing page
app.get('/', (req, res) => { app.get("/", (req, res) => {
res.render('index', { res.render("index", {
title: 'Formbricks Survey Portal' title: "Formbricks Survey Portal",
}); });
}); });
// Admin UI // Admin UI
app.get('/admin', (req, res) => { app.get("/admin", (req, res) => {
res.render('admin', { res.render("admin", {
title: 'Admin - Formbricks Vanity' title: "Admin - Formbricks Vanity",
}); });
}); });
// Admin API routes // Admin API routes
app.use('/api/mappings', adminRoutes); app.use("/api/mappings", adminRoutes);
// Main survey routes (catch-all for vanity URLs) // Main survey routes (catch-all for vanity URLs)
app.use('/', surveyRoutes); app.use("/", surveyRoutes);
// Handle 404 for any other route // Handle 404 for any other route
app.use((req, res, next) => { app.use((req, res, next) => {
res.status(404).send('Sorry, that page does not exist.'); res.status(404).send("Sorry, that page does not exist.");
}); });
// Global error handler // Global error handler
app.use((err, req, res, next) => { app.use((err, req, res, next) => {
console.error(err.stack); console.error(err.stack);
res.status(500).send('Something broke!'); res.status(500).send("Something broke!");
}); });
// Initialize the survey cache at startup // Initialize the survey cache at startup
@@ -59,7 +59,15 @@ refreshSurveyCache()
console.log(`Server is running at http://localhost:${PORT}`); console.log(`Server is running at http://localhost:${PORT}`);
}); });
}) })
.catch(error => { .catch((error) => {
console.error('Failed to initialize Formbricks survey cache. Please check API key and connection.', error); console.error(
process.exit(1); // Exit if we can't load the initial surveys "Failed to initialize Formbricks survey cache. Please check API key and connection.",
error.message
);
// process.exit(1); // Don't exit, allow the server to start even if sync fails
app.listen(PORT, () => {
console.log(
`Server is running at http://localhost:${PORT} (Survey sync failed)`
);
});
}); });

2
src/services/formbricks.js
View File

@@ -64,6 +64,7 @@ async function fetchSurveysFromAPI() {
headers: { headers: {
"x-api-key": process.env.FORMBRICKS_API_KEY, "x-api-key": process.env.FORMBRICKS_API_KEY,
}, },
timeout: 15000, // 15 seconds timeout
} }
); );
@@ -108,6 +109,7 @@ async function refreshSurveyCache() {
console.log(`Successfully synced ${synced} surveys into the database.`); console.log(`Successfully synced ${synced} surveys into the database.`);
} catch (error) { } catch (error) {
console.error("Failed to refresh survey cache:", error.message); console.error("Failed to refresh survey cache:", error.message);
throw error; // Re-throw so server.js knows initialization failed
} }
} }

789
src/views/admin.ejs
View File

@@ -1,365 +1,386 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title> <title><%= title %></title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<style> <style>
:root { :root {
/* Catppuccin Mocha Palette */ /* Catppuccin Mocha Palette */
--ctp-base: #1e1e2e; --ctp-base: #1e1e2e;
--ctp-mantle: #181825; --ctp-mantle: #181825;
--ctp-crust: #11111b; --ctp-crust: #11111b;
--ctp-surface0: #313244; --ctp-surface0: #313244;
--ctp-surface1: #45475a; --ctp-surface1: #45475a;
--ctp-surface2: #585b70; --ctp-surface2: #585b70;
--ctp-overlay0: #6c7086; --ctp-overlay0: #6c7086;
--ctp-overlay1: #7f849c; --ctp-overlay1: #7f849c;
--ctp-overlay2: #9399b2; --ctp-overlay2: #9399b2;
--ctp-text: #cdd6f4; --ctp-text: #cdd6f4;
--ctp-subtext1: #bac2de; --ctp-subtext1: #bac2de;
--ctp-subtext0: #a6adc8; --ctp-subtext0: #a6adc8;
--ctp-lavender: #b4befe; --ctp-lavender: #b4befe;
--ctp-blue: #89b4fa; --ctp-blue: #89b4fa;
--ctp-sapphire: #74c7ec; --ctp-sapphire: #74c7ec;
--ctp-sky: #89dceb; --ctp-sky: #89dceb;
--ctp-teal: #94e2d5; --ctp-teal: #94e2d5;
--ctp-green: #a6e3a1; --ctp-green: #a6e3a1;
--ctp-yellow: #f9e2af; --ctp-yellow: #f9e2af;
--ctp-peach: #fab387; --ctp-peach: #fab387;
--ctp-maroon: #eba0ac; --ctp-maroon: #eba0ac;
--ctp-red: #f38ba8; --ctp-red: #f38ba8;
--ctp-mauve: #cba6f7; --ctp-mauve: #cba6f7;
--ctp-pink: #f5c2e7; --ctp-pink: #f5c2e7;
--ctp-flamingo: #f2cdcd; --ctp-flamingo: #f2cdcd;
--ctp-rosewater: #f5e0dc; --ctp-rosewater: #f5e0dc;
/* Application Colors */ /* Application Colors */
--bg-color: var(--ctp-base); --bg-color: var(--ctp-base);
--card-bg: var(--ctp-mantle); --card-bg: var(--ctp-mantle);
--text-primary: var(--ctp-text); --text-primary: var(--ctp-text);
--text-secondary: var(--ctp-subtext0); --text-secondary: var(--ctp-subtext0);
--accent: var(--ctp-mauve); --accent: var(--ctp-mauve);
--accent-hover: var(--ctp-lavender); --accent-hover: var(--ctp-lavender);
--border: var(--ctp-surface0); --border: var(--ctp-surface0);
--danger: var(--ctp-red); --danger: var(--ctp-red);
--success: var(--ctp-green); --success: var(--ctp-green);
} }
body { body {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--text-primary); color: var(--text-primary);
margin: 0; margin: 0;
padding: 2rem; padding: 2rem;
line-height: 1.5; line-height: 1.5;
} }
.container { .container {
max-width: 1000px; max-width: 1000px;
margin: 0 auto; margin: 0 auto;
} }
header { header {
margin-bottom: 2rem; margin-bottom: 2rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
h1 { h1 {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
margin: 0; margin: 0;
} }
.card { .card {
background-color: var(--card-bg); background-color: var(--card-bg);
border-radius: 0.75rem; border-radius: 0.75rem;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.card-header { .card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
h2 { h2 {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
} }
input, select { input,
background-color: var(--ctp-surface0); select {
border: 1px solid var(--border); background-color: var(--ctp-surface0);
color: var(--text-primary); border: 1px solid var(--border);
padding: 0.5rem 0.75rem; color: var(--text-primary);
border-radius: 0.375rem; padding: 0.5rem 0.75rem;
font-family: inherit; border-radius: 0.375rem;
width: 100%; font-family: inherit;
box-sizing: border-box; width: 100%;
transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box;
} transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus { input:focus,
outline: none; select:focus {
border-color: var(--accent); outline: none;
box-shadow: 0 0 0 3px rgba(203, 166, 247, 0.1); border-color: var(--accent);
} box-shadow: 0 0 0 3px rgba(203, 166, 247, 0.1);
}
button { button {
background-color: var(--accent); background-color: var(--accent);
color: white; color: white;
border: none; border: none;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 0.375rem; border-radius: 0.375rem;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
button:hover { button:hover {
background-color: var(--accent-hover); background-color: var(--accent-hover);
} }
button.danger { button.danger {
background-color: transparent; background-color: transparent;
color: var(--danger); color: var(--danger);
border: 1px solid var(--danger); border: 1px solid var(--danger);
} }
button.danger:hover { button.danger:hover {
background-color: rgba(239, 68, 68, 0.1); background-color: rgba(239, 68, 68, 0.1);
} }
button.secondary { button.secondary {
background-color: transparent; background-color: transparent;
color: var(--text-secondary); color: var(--text-secondary);
border: 1px solid var(--border); border: 1px solid var(--border);
} }
button.secondary:hover { button.secondary:hover {
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
th, td { th,
text-align: left; td {
padding: 0.75rem; text-align: left;
border-bottom: 1px solid var(--border); padding: 0.75rem;
} border-bottom: 1px solid var(--border);
}
th { th {
color: var(--text-secondary); color: var(--text-secondary);
font-weight: 500; font-weight: 500;
font-size: 0.875rem; font-size: 0.875rem;
} }
.hidden { .hidden {
display: none; display: none;
} }
.form-group { .form-group {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.form-row { .form-row {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
gap: 1rem; gap: 1rem;
align-items: end; align-items: end;
} }
#auth-section { #auth-section {
max-width: 400px; max-width: 400px;
margin: 4rem auto; margin: 4rem auto;
text-align: center; text-align: center;
} }
.env-section { .env-section {
margin-bottom: 2rem; margin-bottom: 2rem;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.env-section:last-child { .env-section:last-child {
border-bottom: none; border-bottom: none;
} }
.survey-list { .survey-list {
margin-top: 1rem; margin-top: 1rem;
padding-left: 1rem; padding-left: 1rem;
border-left: 2px solid var(--border); border-left: 2px solid var(--border);
} }
.survey-item { .survey-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.5rem 0; padding: 0.5rem 0;
color: var(--text-secondary); color: var(--text-secondary);
gap: 1rem; gap: 1rem;
} }
.survey-link { .survey-link {
color: var(--accent); color: var(--accent);
text-decoration: none; text-decoration: none;
flex: 1; flex: 1;
} }
.survey-link:hover { .survey-link:hover {
text-decoration: underline; text-decoration: underline;
} }
.copy-btn { .copy-btn {
background-color: transparent; background-color: transparent;
color: var(--text-secondary); color: var(--text-secondary);
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 0.75rem; font-size: 0.75rem;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
white-space: nowrap; white-space: nowrap;
} }
.copy-btn:hover { .copy-btn:hover {
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
color: var(--accent); color: var(--accent);
} }
.copy-btn.copied { .copy-btn.copied {
background-color: var(--success); background-color: var(--success);
color: white; color: white;
border-color: var(--success); border-color: var(--success);
} }
</style> </style>
</head> </head>
<body> <body>
<div id="auth-section" class="card"> <div id="auth-section" class="card">
<h2>Admin Authentication</h2> <h2>Admin Authentication</h2>
<p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Enter your Admin Token to manage surveys.</p> <p style="color: var(--text-secondary); margin-bottom: 1.5rem">
<div class="form-group"> Enter your Admin Token to manage surveys.
<input type="password" id="admin-token" placeholder="Admin Token"> </p>
</div> <div class="form-group">
<button onclick="authenticate()">Login</button> <input type="password" id="admin-token" placeholder="Admin Token" />
</div>
<button onclick="authenticate()">Login</button>
</div> </div>
<div id="app-section" class="container hidden"> <div id="app-section" class="container hidden">
<header> <header>
<h1>Environment Management</h1> <h1>Environment Management</h1>
<button onclick="logout()" class="danger">Logout</button> <button onclick="logout()" class="danger">Logout</button>
</header> </header>
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h2>Environments & Aliases</h2> <h2>Environments & Aliases</h2>
<button onclick="loadData()">Refresh</button> <div style="display: flex; gap: 0.5rem">
</div> <button onclick="syncSurveys()" class="secondary">
<div id="environments-container"> Sync Surveys
<!-- Environments will be inserted here --> </button>
</div> <button onclick="loadData()">Refresh</button>
</div>
</div> </div>
<div id="environments-container">
<!-- Environments will be inserted here -->
</div>
</div>
</div> </div>
<script> <script>
const API_BASE = '/api/mappings'; const API_BASE = "/api/mappings";
let token = localStorage.getItem('admin_token'); let token = localStorage.getItem("admin_token");
if (token) { if (token) {
showApp(); showApp();
}
function authenticate() {
const input = document.getElementById("admin-token").value;
if (input) {
token = input;
localStorage.setItem("admin_token", token);
showApp();
} }
}
function authenticate() { function logout() {
const input = document.getElementById('admin-token').value; token = null;
if (input) { localStorage.removeItem("admin_token");
token = input; document.getElementById("auth-section").classList.remove("hidden");
localStorage.setItem('admin_token', token); document.getElementById("app-section").classList.add("hidden");
showApp(); }
}
function showApp() {
document.getElementById("auth-section").classList.add("hidden");
document.getElementById("app-section").classList.remove("hidden");
loadData();
}
async function fetchWithAuth(url, options = {}) {
const headers = {
"Content-Type": "application/json",
"x-admin-token": token,
...options.headers,
};
const response = await fetch(url, { ...options, headers });
if (response.status === 403) {
alert("Invalid Token");
logout();
return null;
} }
return response;
}
function logout() { async function loadData() {
token = null; const res = await fetchWithAuth(`${API_BASE}/environments`);
localStorage.removeItem('admin_token'); if (!res) return;
document.getElementById('auth-section').classList.remove('hidden'); const data = await res.json();
document.getElementById('app-section').classList.add('hidden'); renderEnvironments(data.environments);
} }
function showApp() { async function renderEnvironments(environments) {
document.getElementById('auth-section').classList.add('hidden'); const container = document.getElementById("environments-container");
document.getElementById('app-section').classList.remove('hidden'); container.innerHTML = "";
loadData();
}
async function fetchWithAuth(url, options = {}) { for (const env of environments) {
const headers = { const div = document.createElement("div");
'Content-Type': 'application/json', div.className = "env-section";
'x-admin-token': token,
...options.headers
};
const response = await fetch(url, { ...options, headers });
if (response.status === 403) {
alert('Invalid Token');
logout();
return null;
}
return response;
}
async function loadData() { // Fetch surveys for this environment
const res = await fetchWithAuth(`${API_BASE}/environments`); const surveyRes = await fetchWithAuth(
if (!res) return; `${API_BASE}/environments/${env.environment_id}/surveys`
const data = await res.json(); );
renderEnvironments(data.environments); const surveyData = await surveyRes.json();
} const surveys = surveyData.surveys || [];
async function renderEnvironments(environments) { const aliasValue = env.alias || "";
const container = document.getElementById('environments-container'); const hasAlias = !!aliasValue;
container.innerHTML = '';
for (const env of environments) { let surveysHtml = "";
const div = document.createElement('div'); if (surveys.length > 0) {
div.className = 'env-section'; surveysHtml = '<div class="survey-list">';
surveys.forEach((s) => {
const displaySlug = s.custom_slug || s.name;
const url = hasAlias ? `/${aliasValue}/${displaySlug}` : "#";
const fullUrl = hasAlias
? `${window.location.origin}/${aliasValue}/${displaySlug}`
: "";
const link = hasAlias
? `<a href="${url}" target="_blank" class="survey-link">${url}</a>`
: `<span style="color: var(--text-secondary);">(Set alias to generate URL)</span>`;
const copyBtn = hasAlias
? `<button class="copy-btn" onclick="copyToClipboard('${fullUrl}', this)">📋 Copy</button>`
: "";
// Fetch surveys for this environment surveysHtml += `
const surveyRes = await fetchWithAuth(`${API_BASE}/environments/${env.environment_id}/surveys`);
const surveyData = await surveyRes.json();
const surveys = surveyData.surveys || [];
const aliasValue = env.alias || '';
const hasAlias = !!aliasValue;
let surveysHtml = '';
if (surveys.length > 0) {
surveysHtml = '<div class="survey-list">';
surveys.forEach(s => {
const displaySlug = s.custom_slug || s.name;
const url = hasAlias ? `/${aliasValue}/${displaySlug}` : '#';
const fullUrl = hasAlias ? `${window.location.origin}/${aliasValue}/${displaySlug}` : '';
const link = hasAlias
? `<a href="${url}" target="_blank" class="survey-link">${url}</a>`
: `<span style="color: var(--text-secondary);">(Set alias to generate URL)</span>`;
const copyBtn = hasAlias
? `<button class="copy-btn" onclick="copyToClipboard('${fullUrl}', this)">📋 Copy</button>`
: '';
surveysHtml += `
<div class="survey-item" style="flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 1rem 0; border-bottom: 1px solid var(--border);"> <div class="survey-item" style="flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 1rem 0; border-bottom: 1px solid var(--border);">
<div style="display: flex; justify-content: space-between; align-items: center;"> <div style="display: flex; justify-content: space-between; align-items: center;">
<span style="font-weight: 500;">${s.name}</span> <span style="font-weight: 500;">${
<span style="font-size: 0.75rem; color: var(--text-secondary);">Type: ${s.type}</span> s.name
}</span>
<span style="font-size: 0.75rem; color: var(--text-secondary);">Type: ${
s.type
}</span>
</div> </div>
<div style="display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; align-items: center;"> <div style="display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; align-items: center;">
<input <input
@@ -369,19 +390,26 @@
placeholder="custom-slug" placeholder="custom-slug"
style="font-size: 0.875rem; padding: 0.375rem 0.5rem;" style="font-size: 0.875rem; padding: 0.375rem 0.5rem;"
/> />
<button onclick="saveSlug('${s.id}')" class="secondary" style="font-size: 0.875rem;">Save Slug</button> <button onclick="saveSlug('${
s.id
}')" class="secondary" style="font-size: 0.875rem;">Save Slug</button>
${copyBtn} ${copyBtn}
</div> </div>
${hasAlias ? `<div style="font-size: 0.875rem;">${link}</div>` : ''} ${
hasAlias
? `<div style="font-size: 0.875rem;">${link}</div>`
: ""
}
</div> </div>
`; `;
}); });
surveysHtml += '</div>'; surveysHtml += "</div>";
} else { } else {
surveysHtml = '<p style="color: var(--text-secondary); margin-top: 0.5rem;">No surveys found.</p>'; surveysHtml =
} '<p style="color: var(--text-secondary); margin-top: 0.5rem;">No surveys found.</p>';
}
div.innerHTML = ` div.innerHTML = `
<div style="margin-bottom: 1rem;"> <div style="margin-bottom: 1rem;">
<h3 style="margin: 0 0 0.5rem 0;">Environment ID: <span style="font-family: monospace; font-weight: 400; color: var(--text-secondary);">${env.environment_id}</span></h3> <h3 style="margin: 0 0 0.5rem 0;">Environment ID: <span style="font-family: monospace; font-weight: 400; color: var(--text-secondary);">${env.environment_id}</span></h3>
<div class="form-row"> <div class="form-row">
@@ -394,70 +422,99 @@
</div> </div>
${surveysHtml} ${surveysHtml}
`; `;
container.appendChild(div); container.appendChild(div);
} }
}
async function saveAlias(envId) {
const input = document.getElementById(`alias-${envId}`);
const alias = input.value.trim();
if (!alias) {
alert("Alias cannot be empty");
return;
} }
async function saveAlias(envId) { const res = await fetchWithAuth(
const input = document.getElementById(`alias-${envId}`); `${API_BASE}/environments/${envId}/alias`,
const alias = input.value.trim(); {
method: "PUT",
body: JSON.stringify({ alias }),
}
);
if (!alias) { if (res.ok) {
alert('Alias cannot be empty'); loadData(); // Refresh to update URLs
return; } else {
} const err = await res.json();
alert(err.error || "Failed to update alias");
}
}
const res = await fetchWithAuth(`${API_BASE}/environments/${envId}/alias`, { async function copyToClipboard(text, button) {
method: 'PUT', try {
body: JSON.stringify({ alias }) await navigator.clipboard.writeText(text);
}); const originalText = button.textContent;
button.textContent = "✓ Copied!";
button.classList.add("copied");
if (res.ok) { setTimeout(() => {
loadData(); // Refresh to update URLs button.textContent = originalText;
} else { button.classList.remove("copied");
const err = await res.json(); }, 2000);
alert(err.error || 'Failed to update alias'); } catch (err) {
} console.error("Failed to copy:", err);
alert("Failed to copy to clipboard");
}
}
async function saveSlug(surveyId) {
const input = document.getElementById(`slug-${surveyId}`);
const slug = input.value.trim();
if (!slug) {
alert("Slug cannot be empty");
return;
} }
async function copyToClipboard(text, button) { const res = await fetchWithAuth(
`${API_BASE}/surveys/${surveyId}/slug`,
{
method: "PUT",
body: JSON.stringify({ slug }),
}
);
if (res.ok) {
loadData(); // Refresh to update URLs
} else {
const err = await res.json();
alert(err.error || "Failed to update slug");
}
}
async function syncSurveys() {
const btn = document.querySelector('button[onclick="syncSurveys()"]');
const originalText = btn.textContent;
btn.textContent = 'Syncing...';
btn.disabled = true;
try { try {
await navigator.clipboard.writeText(text); const res = await fetchWithAuth(`${API_BASE}/sync`, { method: 'POST' });
const originalText = button.textContent; if (res.ok) {
button.textContent = '✓ Copied!'; alert('Surveys synced successfully!');
button.classList.add('copied'); loadData();
} else {
setTimeout(() => { const err = await res.json();
button.textContent = originalText; alert('Sync failed: ' + (err.error || 'Unknown error'));
button.classList.remove('copied'); }
}, 2000); } catch (error) {
} catch (err) { alert('Sync failed: ' + error.message);
console.error('Failed to copy:', err); } finally {
alert('Failed to copy to clipboard'); btn.textContent = originalText;
} btn.disabled = false;
}
async function saveSlug(surveyId) {
const input = document.getElementById(`slug-${surveyId}`);
const slug = input.value.trim();
if (!slug) {
alert('Slug cannot be empty');
return;
}
const res = await fetchWithAuth(`${API_BASE}/surveys/${surveyId}/slug`, {
method: 'PUT',
body: JSON.stringify({ slug })
});
if (res.ok) {
loadData(); // Refresh to update URLs
} else {
const err = await res.json();
alert(err.error || 'Failed to update slug');
} }
} }
</script> </script>
</body> </body>
</html> </html>