update workspace from account

vkarpov15 · vkarpov15 · commit 7b561a12fc92 · 2026-02-24T14:59:19.000-05:00
diff --git a/netlify/functions/updateWorkspace.js b/netlify/functions/updateWorkspace.js
@@ -0,0 +1,5 @@
+'use strict';
+
+const extrovert = require('extrovert');
+
+module.exports = extrovert.toNetlifyFunction(require('../../src/actions/updateWorkspace'));
diff --git a/public/login.html b/public/login.html
@@ -12,9 +12,15 @@
         <h1 class="text-3xl font-bold tracking-tight">Set up your account</h1>
         <p id="message" class="mt-2 text-slate-600">Sign in to connect your account and access your API key.</p>
 
-        <div class="mt-6 grid gap-3">
-          <button id="githubButton" type="button" class="w-full rounded-lg bg-[#880000] px-4 py-3 text-sm font-semibold text-white transition hover:bg-[#6d0000] disabled:cursor-not-allowed disabled:opacity-60">Continue with GitHub</button>
-          <button id="googleButton" type="button" class="w-full rounded-lg bg-[#880000] px-4 py-3 text-sm font-semibold text-white transition hover:bg-[#6d0000] disabled:cursor-not-allowed disabled:opacity-60">Continue with Google</button>
+        <div class="mt-6 grid grid-cols-2 gap-3">
+          <button id="githubButton" type="button" class="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60">
+            <svg viewBox="0 0 98 98" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#111827"/></svg>
+            Continue with GitHub
+          </button>
+          <button id="googleButton" type="button" class="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60">
+            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true"><path fill="#EA4335" d="M256 212v88h146c-6 38-22 66-47 85l76 59c44-40 69-99 69-169 0-16-1-28-4-40z"/><path fill="#34A853" d="M256 512c68 0 126-22 168-59l-76-59c-21 14-49 24-92 24-70 0-129-47-150-111l-79 61c41 81 125 144 229 144z"/><path fill="#4A90E2" d="M106 307c-5-14-8-30-8-47s3-33 8-47l-79-61C10 185 0 221 0 260s10 75 27 108z"/><path fill="#FBBC05" d="M256 102c37 0 70 13 96 38l72-72C382 28 324 0 256 0 152 0 68 63 27 152l79 61c21-64 80-111 150-111z"/></svg>
+            Continue with Google
+          </button>
         </div>
 
         <p class="mt-4">
diff --git a/public/my-account.html b/public/my-account.html
@@ -27,6 +27,37 @@ <h1 class="text-3xl font-bold tracking-tight">My Account</h1>
       </section>
     </main>
 
+    <template id="emptyStateTemplate">
+      <div class="rounded-lg border border-dashed border-slate-300 p-4 text-slate-600">No workspaces found for this account.</div>
+    </template>
+
+    <template id="workspaceTemplate">
+      <section class="rounded-xl border border-slate-200 p-4">
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <div class="inline-flex items-center gap-2">
+              <div class="text-lg font-semibold" data-workspace-name></div>
+              <button type="button" class="inline-flex items-center rounded-md border border-slate-300 bg-white p-1 text-slate-700 hover:bg-slate-50" data-edit-name aria-label="Edit workspace name">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path d="M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25Zm18-11.5a1 1 0 0 0 0-1.41l-1.34-1.34a1 1 0 0 0-1.41 0l-1.18 1.18 3.75 3.75L21 5.75Z"/></svg>
+              </button>
+            </div>
+            <div class="text-sm text-slate-600">Workspace ID: <span data-workspace-id-label></span></div>
+          </div>
+          <div class="flex flex-wrap gap-2 text-xs">
+            <span class="rounded-full border border-slate-300 px-2 py-1 text-slate-700">Tier: <span data-tier-label></span></span>
+            <span class="rounded-full border border-slate-300 px-2 py-1 text-slate-700">Roles: <span data-roles-label></span></span>
+          </div>
+        </div>
+        <div class="mt-3 flex flex-wrap items-center gap-2">
+          <code class="max-w-full break-all rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs sm:text-sm" data-key-view></code>
+          <button type="button" class="inline-flex items-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50" data-toggle-key data-visible="false" aria-label="Show API key">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path d="M12 5c-5.5 0-9.5 4.5-10.8 6.2a1.3 1.3 0 0 0 0 1.6C2.5 14.5 6.5 19 12 19s9.5-4.5 10.8-6.2a1.3 1.3 0 0 0 0-1.6C21.5 9.5 17.5 5 12 5Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"/></svg>
+          </button>
+          <button type="button" class="rounded-lg bg-[#880000] px-3 py-2 text-xs font-semibold text-white transition hover:bg-[#6d0000]" data-copy-key>Copy API Key</button>
+        </div>
+      </section>
+    </template>
+
     <script>
       (function() {
         const ACCESS_TOKEN_KEY = '_mongooseStudioAccessToken';
@@ -69,77 +100,117 @@ <h1 class="text-3xl font-bold tracking-tight">My Account</h1>
           const workspaces = data.workspaces || [];
 
           userSummary.textContent = user.email ? user.email : 'Signed in';
+          workspaceList.innerHTML = '';
 
           if (workspaces.length === 0) {
-            workspaceList.innerHTML = '<div class="rounded-lg border border-dashed border-slate-300 p-4 text-slate-600">No workspaces found for this account.</div>';
+            workspaceList.appendChild(createElementFromTemplate('emptyStateTemplate'));
             return;
           }
 
-          workspaceList.innerHTML = '';
           for (const workspace of workspaces) {
-            const item = document.createElement('section');
-            item.className = 'rounded-xl border border-slate-200 p-4';
+            const item = createElementFromTemplate('workspaceTemplate');
+            item.setAttribute('data-workspace-id', String(workspace._id));
 
             const roles = Array.isArray(workspace.roles) && workspace.roles.length ? workspace.roles.join(', ') : 'none';
             const apiKey = String(workspace.apiKey || '');
             const maskedApiKey = apiKey ? '\u2022'.repeat(Math.max(8, apiKey.length)) : '';
+            const canEditName = Array.isArray(workspace.roles) && (workspace.roles.includes('owner') || workspace.roles.includes('admin'));
+
+            item.querySelector('[data-workspace-name]').textContent = workspace.name || 'Unnamed Workspace';
+            item.querySelector('[data-workspace-id-label]').textContent = String(workspace._id);
+            item.querySelector('[data-tier-label]').textContent = workspace.subscriptionTier || 'unknown';
+            item.querySelector('[data-roles-label]').textContent = roles;
+
+            const editButton = item.querySelector('[data-edit-name]');
+            if (!canEditName) {
+              editButton.remove();
+            }
+
+            const keyView = item.querySelector('[data-key-view]');
+            keyView.textContent = maskedApiKey;
 
-            item.innerHTML = [
-              '<div class="flex flex-wrap items-start justify-between gap-3">',
-              '<div>',
-              '<div class="text-lg font-semibold">' + escapeHtml(workspace.name || 'Unnamed Workspace') + '</div>',
-              '<div class="text-sm text-slate-600">Workspace ID: ' + escapeHtml(String(workspace._id)) + '</div>',
-              '</div>',
-              '<div class="flex flex-wrap gap-2 text-xs">',
-              '<span class="rounded-full border border-slate-300 px-2 py-1 text-slate-700">Tier: ' + escapeHtml(workspace.subscriptionTier || 'unknown') + '</span>',
-              '<span class="rounded-full border border-slate-300 px-2 py-1 text-slate-700">Roles: ' + escapeHtml(roles) + '</span>',
-              '</div>',
-              '</div>',
-              '<div class="mt-3 flex flex-wrap items-center gap-2">',
-              '<code class="max-w-full break-all rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs sm:text-sm" data-key-view>' + escapeHtml(maskedApiKey) + '</code>',
-              '<button type="button" class="inline-flex items-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50" data-toggle-key data-key="' + escapeHtml(apiKey) + '" data-masked="' + escapeHtml(maskedApiKey) + '" data-visible="false" aria-label="Show API key">',
-              '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path d="M12 5c-5.5 0-9.5 4.5-10.8 6.2a1.3 1.3 0 0 0 0 1.6C2.5 14.5 6.5 19 12 19s9.5-4.5 10.8-6.2a1.3 1.3 0 0 0 0-1.6C21.5 9.5 17.5 5 12 5Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"/></svg>',
-              '</button>',
-              '<button type="button" class="rounded-lg bg-[#880000] px-3 py-2 text-xs font-semibold text-white transition hover:bg-[#6d0000]" data-copy-key="' + escapeHtml(apiKey) + '">Copy API Key</button>',
-              '</div>'
-            ].join('');
+            const toggleButton = item.querySelector('[data-toggle-key]');
+            toggleButton.setAttribute('data-key', apiKey);
+            toggleButton.setAttribute('data-masked', maskedApiKey);
+
+            const copyButton = item.querySelector('[data-copy-key]');
+            copyButton.setAttribute('data-copy-key', apiKey);
 
             workspaceList.appendChild(item);
-          }
 
-          workspaceList.querySelectorAll('button[data-copy-key]').forEach(function(button) {
-            button.addEventListener('click', async function() {
-              const key = button.getAttribute('data-copy-key') || '';
+            copyButton.addEventListener('click', async function() {
+              const key = copyButton.getAttribute('data-copy-key') || '';
               if (!key) {
                 return;
               }
               await navigator.clipboard.writeText(key);
-              const prev = button.textContent;
-              button.textContent = 'Copied';
+              const prev = copyButton.textContent;
+              copyButton.textContent = 'Copied';
               setTimeout(function() {
-                button.textContent = prev;
+                copyButton.textContent = prev;
               }, 1200);
             });
-          });
 
-          workspaceList.querySelectorAll('button[data-toggle-key]').forEach(function(button) {
-            button.addEventListener('click', function() {
-              const visible = button.getAttribute('data-visible') === 'true';
-              const code = button.parentElement.querySelector('[data-key-view]');
-              if (!code) {
+            toggleButton.addEventListener('click', function() {
+              const visible = toggleButton.getAttribute('data-visible') === 'true';
+              if (!keyView) {
                 return;
               }
               if (visible) {
-                code.textContent = button.getAttribute('data-masked') || '';
-                button.setAttribute('data-visible', 'false');
-                button.setAttribute('aria-label', 'Show API key');
+                keyView.textContent = toggleButton.getAttribute('data-masked') || '';
+                toggleButton.setAttribute('data-visible', 'false');
+                toggleButton.setAttribute('aria-label', 'Show API key');
               } else {
-                code.textContent = button.getAttribute('data-key') || '';
-                button.setAttribute('data-visible', 'true');
-                button.setAttribute('aria-label', 'Hide API key');
+                keyView.textContent = toggleButton.getAttribute('data-key') || '';
+                toggleButton.setAttribute('data-visible', 'true');
+                toggleButton.setAttribute('aria-label', 'Hide API key');
               }
             });
-          });
+
+            if (editButton) {
+              editButton.addEventListener('click', async function() {
+                const section = editButton.closest('section');
+                if (!section) {
+                  return;
+                }
+                const workspaceId = section.getAttribute('data-workspace-id');
+                const nameEl = section.querySelector('[data-workspace-name]');
+                if (!workspaceId || !nameEl) {
+                  return;
+                }
+                const currentName = nameEl.textContent || '';
+                const nextName = window.prompt('Update workspace name', currentName);
+                if (nextName == null || nextName.trim() === '' || nextName.trim() === currentName) {
+                  return;
+                }
+
+                try {
+                  const token = localStorage.getItem(ACCESS_TOKEN_KEY);
+                  const { workspace: updatedWorkspace } = await postJson('/.netlify/functions/updateWorkspace', {
+                    workspaceId: workspaceId.trim(),
+                    name: nextName.trim()
+                  }, token);
+                  nameEl.textContent = updatedWorkspace.name || nextName.trim();
+                } catch (err) {
+                  showError(err.message || 'Failed to update workspace name');
+                }
+              });
+            }
+          }
+        }
+
+        function createElementFromTemplate(templateId) {
+          const template = document.getElementById(templateId);
+          if (!template) {
+            throw new Error('Missing template: ' + templateId);
+          }
+          const container = document.createElement('div');
+          container.innerHTML = template.innerHTML.trim();
+          const element = container.firstElementChild;
+          if (!element) {
+            throw new Error('Template produced no element: ' + templateId);
+          }
+          return element;
         }
 
         async function postJson(url, body, token) {
@@ -174,15 +245,6 @@ <h1 class="text-3xl font-bold tracking-tight">My Account</h1>
         function showError(message) {
           errorEl.textContent = message;
         }
-
-        function escapeHtml(str) {
-          return String(str)
-            .replaceAll('&', '&amp;')
-            .replaceAll('<', '&lt;')
-            .replaceAll('>', '&gt;')
-            .replaceAll('"', '&quot;')
-            .replaceAll("'", '&#39;');
-        }
       })();
     </script>
   </body>
diff --git a/src/actions/stripeWebhook.js b/src/actions/stripeWebhook.js
@@ -78,7 +78,8 @@ module.exports = async function stripeWebhook(params, event) {
         setupUrl.searchParams.set('workspaceId', newWorkspace._id.toString());
         const $ = cheerio.load(newWorkspaceTemplate);
         $('#workspace-name').text(newWorkspace.name);
-        $('#setup-link').attr('href', setupUrl.toString()).text(setupUrl.toString());
+        $('#setup-link').attr('href', setupUrl.toString());
+        $('#setup-link-fallback').attr('href', setupUrl.toString()).text(setupUrl.toString());
         await mailgun.sendEmail({
           to: customerEmail,
           from: process.env.MAILGUN_FROM_EMAIL,
@@ -104,7 +105,8 @@ module.exports = async function stripeWebhook(params, event) {
         setupUrl.searchParams.set('workspaceId', workspace._id.toString());
         const $ = cheerio.load(newWorkspaceTemplate);
         $('#workspace-name').text(workspace.name || randomWorkspaceName);
-        $('#setup-link').attr('href', setupUrl.toString()).text(setupUrl.toString());
+        $('#setup-link').attr('href', setupUrl.toString());
+        $('#setup-link-fallback').attr('href', setupUrl.toString()).text(setupUrl.toString());
         await mailgun.sendEmail({
           to: customerEmail,
           from: process.env.MAILGUN_FROM_EMAIL,
diff --git a/src/actions/updateWorkspace.js b/src/actions/updateWorkspace.js
@@ -0,0 +1,52 @@
+'use strict';
+
+const Archetype = require('archetype');
+const connect = require('../../src/db');
+const mongoose = require('mongoose');
+
+const UpdateWorkspaceParams = new Archetype({
+  authorization: {
+    $type: 'string',
+    $required: true
+  },
+  workspaceId: {
+    $type: mongoose.Types.ObjectId,
+    $required: true
+  },
+  name: {
+    $type: 'string'
+  }
+}).compile('UpdateWorkspaceParams');
+
+module.exports = async function updateWorkspace(params) {
+  const { authorization, workspaceId, name } = new UpdateWorkspaceParams(params);
+
+  const db = await connect();
+  const { AccessToken, Workspace } = db.models;
+
+  const accessToken = await AccessToken.findById(authorization).orFail(new Error('Invalid or expired access token'));
+  if (accessToken.expiresAt < new Date()) {
+    throw new Error('Access token has expired');
+  }
+
+  const workspace = await Workspace.findById(workspaceId).orFail(new Error('Workspace not found'));
+  const roles = workspace.members.find(member => member.userId.toString() === accessToken.userId.toString())?.roles || [];
+  if (!roles.includes('owner') && !roles.includes('admin')) {
+    throw new Error('Forbidden');
+  }
+
+  if (name != null) {
+    const trimmed = name.trim();
+    if (!trimmed) {
+      throw new Error('Workspace name is required');
+    }
+    if (trimmed.length > 120) {
+      throw new Error('Workspace name is too long');
+    }
+    workspace.name = trimmed;
+  }
+
+  await workspace.save();
+
+  return { workspace };
+};
diff --git a/src/emailTemplates/newWorkspace.html b/src/emailTemplates/newWorkspace.html
@@ -12,11 +12,13 @@
           <table role="presentation" width="600" cellspacing="0" cellpadding="0" style="max-width:600px;background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:24px;">
             <tr>
               <td>
-                <h1 style="margin:0 0 12px 0;font-size:24px;line-height:1.25;">Welcome to Mongoose Studio</h1>
-                <p style="margin:0 0 12px 0;font-size:14px;color:#334155;">Your new workspace is ready.</p>
+                <h1 style="margin:0 0 12px 0;font-size:24px;line-height:1.25;color:#880000;">Welcome to Mongoose Studio</h1>
+                <p style="margin:0 0 12px 0;font-size:14px;color:#334155;">Thank you for your support. Your new workspace is ready and we appreciate you being here.</p>
                 <p style="margin:0 0 16px 0;font-size:14px;"><strong>Workspace:</strong> <span id="workspace-name"></span></p>
                 <p style="margin:0 0 16px 0;font-size:14px;color:#334155;">Use the link below to sign in and finish setup:</p>
-                <p style="margin:0 0 20px 0;"><a id="setup-link" href="#" style="display:inline-block;background:#0f766e;color:#ffffff;text-decoration:none;padding:10px 14px;border-radius:8px;font-size:14px;">Set up my account</a></p>
+                <p style="margin:0 0 8px 0;"><a id="setup-link" href="#" style="display:inline-block;background:#880000;color:#ffffff;text-decoration:none;padding:10px 14px;border-radius:8px;font-size:14px;">Finish Setup</a></p>
+                <p style="margin:0 0 20px 0;font-size:12px;color:#64748b;line-height:1.5;">If the button does not work, copy and paste this link into your browser:<br><a id="setup-link-fallback" href="#" style="color:#880000;word-break:break-all;"></a></p>
+                <p style="margin:0;font-size:14px;color:#334155;">Need help? We're here for you on Discord: <a href="https://discord.gg/P3YCfKYxpy" style="color:#880000;font-weight:600;">Get Help on Discord</a></p>
               </td>
             </tr>
           </table>
