@mongoosejs/studio 0.0.61 → 0.0.63

package/backend/db/dashboardSchema.js

@@ -18,7 +18,7 @@ const dashboardSchema = new mongoose.Schema({
 });
 
 dashboardSchema.methods.evaluate = async function evaluate() {
-  const context = vm.createContext({ db: this.constructor.db });
+  const context = vm.createContext({ db: this.constructor.db, setTimeout });
   let result = null;
   result = await vm.runInContext(formatFunction(this.code), context);
   if (result.$document?.constructor?.modelName) {
@@ -42,4 +42,4 @@ module.exports = dashboardSchema;
 
 const formatFunction = code => `(async function() {
   ${code}
-})();`
+})();`

package/frontend/public/app.js

@@ -343,7 +343,7 @@ module.exports = app => app.component('dashboard-document', {
       return null;
     },
     schemaPaths() {
-      return Object.keys(this.value.$document?.schemaPaths || {}).sort((k1, k2) => {
+      return Object.keys(this.value?.$document?.schemaPaths || {}).sort((k1, k2) => {
         if (k1 === '_id' && k2 !== '_id') {
           return -1;
         }
@@ -351,7 +351,7 @@ module.exports = app => app.component('dashboard-document', {
           return 1;
         }
         return 0;
-      }).map(key => this.value.$document.schemaPaths[key]);
+      }).map(key => this.value?.$document.schemaPaths[key]);
     }
   }
 });
@@ -499,7 +499,8 @@ module.exports = app => app.component('dashboard', {
     }
   },
   mounted: async function() {
-    const { dashboard, result, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
+    this.showEditor = this.$route.query.edit;
+    const { dashboard, result, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: !this.showEditor });
     if (!dashboard) {
       return;
     }
@@ -535,7 +536,7 @@ module.exports = app => app.component('edit-dashboard', {
   props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
   data: function() {
     return {
-      status: 'loading',
+      status: 'loaded',
       editor: null,
       title: '',
       description: ''
@@ -546,7 +547,7 @@ module.exports = app => app.component('edit-dashboard', {
         this.$emit('close')
     },
     async updateCode() {
-      console.log('this.title', this.title, 'this.description', this.description)
+      this.status = 'loading';
       const { doc, result, error } = await api.Dashboard.updateDashboard({
         dashboardId: this.dashboardId,
         code: this.editor.getValue(),
@@ -555,6 +556,7 @@ module.exports = app => app.component('edit-dashboard', {
       });
       this.$emit('update', { doc, result, error });
       this.editor.setValue(doc.code);
+      this.status = 'loaded';
       this.closeEditor();
     }
   },
@@ -570,12 +572,7 @@ module.exports = app => app.component('edit-dashboard', {
       lineWrapping: true,
       showCursorWhenSelecting: true,
     });
-    // this.editor.setValue(this.code);
-    // this.editor.setSize(300, 300); // Ensure the editor has a fixed height
-    
-    // this.editor.setCursor(this.editor.lineCount() - 1, this.editor.getLine(this.editor.lineCount() - 1).length);
-   
-    this.editor.focus();
+    // this.editor.focus();
     // this.editor.refresh(); // if anything weird happens on load, this usually fixes it. However, this breaks it in this case.
     this.description = this.currentDescription;
     this.title = this.currentTitle;
@@ -1900,27 +1897,27 @@ exports.githubLogin = function githubLogin() {
 };
 
 exports.getWorkspaceTeam = function getWorkspaceTeam() {
-  return client.post('/getWorkspaceTeam', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}._id }).then(res => res.data);
+  return client.post('/getWorkspaceTeam', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T22:07:14.883Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnClziXVYs4Kez","stripeSubscriptionId":"sub_1QtcLYIIV4Jx8vgxXFUfKRfo"}._id }).then(res => res.data);
 };
 
 exports.getWorkspaceCustomerPortalLink = function getWorkspaceCustomerPortalLink(params) {
-  return client.post('/getWorkspaceCustomerPortalLink', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}._id, ...params }).then(res => res.data);
+  return client.post('/getWorkspaceCustomerPortalLink', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T22:07:14.883Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnClziXVYs4Kez","stripeSubscriptionId":"sub_1QtcLYIIV4Jx8vgxXFUfKRfo"}._id, ...params }).then(res => res.data);
 };
 
 exports.github = function github(code) {
-  return client.post('/github', { code, workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}._id }).then(res => res.data);
+  return client.post('/github', { code, workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T22:07:14.883Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnClziXVYs4Kez","stripeSubscriptionId":"sub_1QtcLYIIV4Jx8vgxXFUfKRfo"}._id }).then(res => res.data);
 };
 
 exports.inviteToWorkspace = function inviteToWorkspace(params) {
-  return client.post('/inviteToWorkspace', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}._id, ...params }).then(res => res.data);
+  return client.post('/inviteToWorkspace', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T22:07:14.883Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnClziXVYs4Kez","stripeSubscriptionId":"sub_1QtcLYIIV4Jx8vgxXFUfKRfo"}._id, ...params }).then(res => res.data);
 };
 
 exports.me = function me() {
-  return client.post('/me', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}._id }).then(res => res.data);
+  return client.post('/me', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T22:07:14.883Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnClziXVYs4Kez","stripeSubscriptionId":"sub_1QtcLYIIV4Jx8vgxXFUfKRfo"}._id }).then(res => res.data);
 };
 
 exports.removeFromWorkspace = function removeFromWorkspace(params) {
-  return client.post('/removeFromWorkspace', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}._id, ...params }).then(res => res.data);
+  return client.post('/removeFromWorkspace', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T22:07:14.883Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnClziXVYs4Kez","stripeSubscriptionId":"sub_1QtcLYIIV4Jx8vgxXFUfKRfo"}._id, ...params }).then(res => res.data);
 };
 
 exports.hasAPIKey = client.hasAPIKey;
@@ -1948,13 +1945,14 @@ appendCSS(__webpack_require__(/*! ./navbar.css */ "./frontend/src/navbar/navbar.
 module.exports = app => app.component('navbar', {
   template: template,
   props: ['user', 'roles'],
-  data: () => ({ nodeEnv: null, showFlyout: false }),
+  inject: ['state'],
+  data: () => ({ showFlyout: false }),
   computed: {
     routeName() {
       return this.$route.name;
     },
     warnEnv() {
-      return this.nodeEnv === 'prod' || this.nodeEnv === 'production';
+      return this.state.nodeEnv === 'prod' || this.state.nodeEnv === 'production';
     },
     hasAPIKey() {
       return mothership.hasAPIKey;
@@ -1963,10 +1961,6 @@ module.exports = app => app.component('navbar', {
       return this.roles?.includes('owner') || this.roles?.includes('admin');
     }
   },
-  async mounted() {
-    const { nodeEnv } = await api.status();
-    this.nodeEnv = nodeEnv;
-  },
   methods: {
     async loginWithGithub() {
       const { url } = await mothership.githubLogin();
@@ -2064,23 +2058,11 @@ const template = __webpack_require__(/*! ./splash.html */ "./frontend/src/splash
 module.exports = app => app.component('splash', {
   template,
   inject: ['state'],
+  props: ['loading'],
   data: () => ({ error: null }),
   computed: {
     workspaceName() {
-      return {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}.name;
-    }
-  },
-  async mounted() {
-    const href = window.location.href;
-    if (href.match(/\?code=([a-zA-Z0-9]+)$/)) {
-      const code = href.match(/\?code=([a-zA-Z0-9]+)$/)[1];
-      const { accessToken, user, roles } = await mothership.github(code);
-      if (roles == null) {
-        this.error = 'You are not authorized to access this workspace';
-        return;
-      }
-      this.state.user = user;
-      window.localStorage.setItem('_mongooseStudioAccessToken', accessToken._id);
+      return {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T22:07:14.883Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnClziXVYs4Kez","stripeSubscriptionId":"sub_1QtcLYIIV4Jx8vgxXFUfKRfo"}.name;
     }
   },
   methods: {
@@ -2145,13 +2127,15 @@ module.exports = app => app.component('team', {
     users: null,
     invitations: null,
     showNewInvitationModal: false,
-    showRemoveModal: null
+    showRemoveModal: null,
+    status: 'loading'
   }),
   async mounted() {
     const { workspace, users, invitations } = await mothership.getWorkspaceTeam();
     this.workspace = workspace;
     this.users = users;
     this.invitations = invitations;
+    this.status = 'loaded';
   },
   computed: {
     paymentLink() {
@@ -2170,15 +2154,7 @@ module.exports = app => app.component('team', {
     },
     async getWorkspaceCustomerPortalLink() {
       const { url } = await mothership.getWorkspaceCustomerPortalLink();
-      window.open(url, '_blank');
-
-      const interval = setInterval(async () => {
-        const { workspace } = await mothership.getWorkspaceTeam();
-        if (workspace.subscriptionTier) {
-          this.workspace = workspace;
-          clearInterval(interval);
-        }
-      }, 15000);
+      window.open(url, '_self');
     }
   }
 });
@@ -2892,7 +2868,7 @@ module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline mt-10\">\n  </div>\n  <div v-if=\"dashboard && status === 'loaded'\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div>\n        <button\n          v-if=\"!showEditor\"\n          @click=\"showEditor = true\"\n          type=\"button\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1em]\" /> Edit\n        </button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <dashboard-result :result=\"result\"></dashboard-result>\n    </div>\n    <div v-if=\"showEditor\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n    <div v-if=\"errorMessage\" class=\"rounded-md bg-red-50 p-4 mt-4\">\n      <div class=\"flex\">\n        <div class=\"flex-shrink-0\">\n          <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z\" clip-rule=\"evenodd\" />\n          </svg>\n        </div>\n        <div class=\"ml-3\">\n          <h3 class=\"text-sm font-medium text-red-800\">{{errorMessage}}</h3>\n        </div>\n      </div>\n    </div>\n    \n  </div>\n  <div v-if=\"!dashboard && status === 'loaded'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\n";
+module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline mt-10\">\n  </div>\n  <div v-if=\"dashboard && status === 'loaded'\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div>\n        <button\n          v-if=\"!showEditor\"\n          @click=\"showEditor = true\"\n          type=\"button\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1em]\" /> Edit\n        </button>\n      </div>\n    </div>\n    <div  v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <dashboard-result :result=\"result\"></dashboard-result>\n    </div>\n    <div v-if=\"showEditor\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n    <div v-if=\"errorMessage\" class=\"rounded-md bg-red-50 p-4 mt-4\">\n      <div class=\"flex\">\n        <div class=\"flex-shrink-0\">\n          <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z\" clip-rule=\"evenodd\" />\n          </svg>\n        </div>\n        <div class=\"ml-3\">\n          <h3 class=\"text-sm font-medium text-red-800\">{{errorMessage}}</h3>\n        </div>\n      </div>\n    </div>\n\n  </div>\n  <div v-if=\"!dashboard && status === 'loaded'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -2903,7 +2879,7 @@ module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'load
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"p-4 bg-gray-100 rounded-lg shadow-lg\">\n    <div>\n        <input v-model=\"title\" class=\"w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"Title\"/>\n    </div>\n    <div>\n        <textarea v-model=\"description\" class=\"w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" rows=\"4\" placeholder=\"Description\">{{description}}</textarea>\n    </div>\n    <div>\n        <textarea ref=\"codeEditor\" class=\"w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" rows=\"6\">{{code}}</textarea>\n    </div>\n    <div class=\"flex space-x-2\">\n        <button @click=\"updateCode\" class=\"px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500\">Submit</button>\n        <button @click=\"closeEditor\" class=\"px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500\">Cancel</button>\n    </div>\n</div>";
+module.exports = "<div class=\"p-4 bg-gray-100 rounded-lg shadow-lg\">\n    <div v-show=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n        <img src=\"images/loader.gif\" class=\"inline mt-10\">\n    </div>\n    <div v-show=\"status !== 'loading'\">\n        <div>\n            <input v-model=\"title\" class=\"w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"Title\"/>\n        </div>\n        <div>\n            <textarea v-model=\"description\" class=\"w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" rows=\"4\" placeholder=\"Description\">{{description}}</textarea>\n        </div>\n        <div>\n            <textarea ref=\"codeEditor\" class=\"w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" rows=\"6\">{{code}}</textarea>\n        </div>\n        <div class=\"flex space-x-2\">\n            <async-button @click=\"updateCode\" class=\"px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500\">Submit</async-button>\n            <button @click=\"closeEditor\" class=\"px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500\">Cancel</button>\n        </div>\n    </div>\n</div>";
 
 /***/ }),
 
@@ -3310,7 +3286,7 @@ module.exports = ".navbar {\n  width: 100%;\n  background-color: #eee;\n}\n\n.ac
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"navbar\">\n  <div class=\"nav-left flex items-center gap-4 h-full\">\n    <router-link to=\"/\">\n      <img src=\"images/logo.svg\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <div v-if=\"!!nodeEnv\" class=\"inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900\" :class=\"warnEnv ? 'bg-red-300' : 'bg-yellow-300'\">\n      {{nodeEnv}}\n    </div>\n  </div>\n  <div class=\"nav-right h-full\">\n    <div class=\"sm:ml-6 sm:flex sm:space-x-8 h-full\">\n      <a\n        href=\"#/\"\n        class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium\"\n        :class=\"routeName === 'root' ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Documents</a>\n      <a\n        href=\"#/dashboards\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"routeName === 'dashboards' ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n\n      <div class=\"h-full flex items-center\" v-if=\"!user && hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"h-full flex items-center relative\" v-clickOutside=\"hideFlyout\">\n        <div>\n          <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n            <span class=\"absolute -inset-1.5\"></span>\n            <span class=\"sr-only\">Open user menu</span>\n            <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          </button>\n        </div>\n\n        <div v-if=\"showFlyout\" class=\"absolute right-0 z-10 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"user-menu-button\" tabindex=\"-1\">\n          <router-link to=\"/team\" v-if=\"canViewTeam\" @click=\"showFlyout = false\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Team</router-link>\n          <span @click=\"logout\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Sign out</span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div style=\"clear: both\"></div>\n</div>\n";
+module.exports = "<div class=\"navbar\">\n  <div class=\"nav-left flex items-center gap-4 h-full\">\n    <router-link to=\"/\">\n      <img src=\"images/logo.svg\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <div v-if=\"!!state.nodeEnv\" class=\"inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900\" :class=\"warnEnv ? 'bg-red-300' : 'bg-yellow-300'\">\n      {{state.nodeEnv}}\n    </div>\n  </div>\n  <div class=\"nav-right h-full\">\n    <div class=\"sm:ml-6 sm:flex sm:space-x-8 h-full\">\n      <a\n        href=\"#/\"\n        class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium\"\n        :class=\"routeName === 'root' ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Documents</a>\n      <a\n        href=\"#/dashboards\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"routeName === 'dashboards' ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n\n      <div class=\"h-full flex items-center\" v-if=\"!user && hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"h-full flex items-center relative\" v-clickOutside=\"hideFlyout\">\n        <div>\n          <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n            <span class=\"absolute -inset-1.5\"></span>\n            <span class=\"sr-only\">Open user menu</span>\n            <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          </button>\n        </div>\n\n        <div v-if=\"showFlyout\" class=\"absolute right-0 z-10 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"user-menu-button\" tabindex=\"-1\">\n          <router-link to=\"/team\" v-if=\"canViewTeam\" @click=\"showFlyout = false\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Team</router-link>\n          <span @click=\"logout\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Sign out</span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div style=\"clear: both\"></div>\n</div>\n";
 
 /***/ }),
 
@@ -3321,7 +3297,7 @@ module.exports = "<div class=\"navbar\">\n  <div class=\"nav-left flex items-cen
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"w-full h-full flex items-center justify-center\">\n  <div class=\"text-center\">\n    <div class=\"rounded-full bg-gray-100 p-6 inline-block\">\n      <img src=\"images/logo.svg\" class=\"w-48 h-48\">\n    </div>\n    <div class=\"text-lg mt-2 font-bold\">\n      Mongoose Studio\n    </div>\n    <div class=\"mt-2 text-gray-700\">\n      {{workspaceName}}\n    </div>\n    <div class=\"mt-4\">\n      <async-button\n        type=\"button\"\n        @click=\"loginWithGithub\"\n        class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n        Login With GitHub\n      </async-button>\n    </div>\n    <div class=\"mt-4\" v-if=\"error\">\n      <div class=\"rounded-md bg-red-50 p-4\">\n        <div class=\"flex\">\n          <div class=\"shrink-0\">\n            <svg class=\"size-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z\" clip-rule=\"evenodd\" />\n            </svg>\n          </div>\n          <div class=\"ml-3\">\n            <h3 class=\"text-sm font-medium text-red-800\">{{error}}</h3>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"w-full h-full flex items-center justify-center\">\n  <div class=\"text-center\">\n    <div class=\"rounded-full bg-gray-100 p-6 inline-block\">\n      <img src=\"images/logo.svg\" class=\"w-48 h-48\">\n    </div>\n    <div class=\"text-lg mt-2 font-bold\">\n      Mongoose Studio\n    </div>\n    <div v-if=\"loading\" class=\"mt-2\">\n      <img src=\"images/loader.gif\" class=\"inline w-16 h-16\">\n    </div>\n    <div class=\"mt-2 text-gray-700\" v-if=\"!loading\">\n      {{workspaceName}}\n    </div>\n    <div class=\"mt-4\" v-if=\"!loading\">\n      <async-button\n        type=\"button\"\n        @click=\"loginWithGithub\"\n        class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n        Login With GitHub\n      </async-button>\n    </div>\n    <div class=\"mt-4\" v-if=\"state.authError\">\n      <div class=\"rounded-md bg-red-50 p-4\">\n        <div class=\"flex\">\n          <div class=\"shrink-0\">\n            <svg class=\"size-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z\" clip-rule=\"evenodd\" />\n            </svg>\n          </div>\n          <div class=\"ml-3\">\n            <h3 class=\"text-sm font-medium text-red-800\">{{state.authError}}</h3>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -3343,7 +3319,7 @@ module.exports = "<div class=\"p-1\">\n  <form class=\"space-y-4\">\n    <div cl
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"mx-auto max-w-5xl py-6 px-2 flex flex-col gap-8\">\n  <div>\n    <div class=\"text-xl font-bold\">\n      Subscription Details\n    </div>\n    <div v-if=\"workspace && workspace.subscriptionTier\" class=\"mt-4 flex justify-between items-center\">\n      <div>\n        <span class=\"font-bold\">Tier:</span> {{workspace.subscriptionTier ?? 'No subscription'}}\n      </div>\n      <div>\n        <async-button\n          type=\"submit\"\n          @click=\"getWorkspaceCustomerPortalLink\"\n          class=\"inline-flex items-center justify-center rounded-md border border-transparent bg-ultramarine-600 py-1 px-2 text-sm font-medium text-white shadow-sm hover:bg-ultramarine-500 focus:outline-none focus:ring-2 focus:ring-forest-green-500 focus:ring-offset-2\">\n          View in Stripe\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4 ml-1\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25\" />\n          </svg>\n        </async-button>\n      </div>\n    </div>\n    <div v-if=\"workspace && !workspace.subscriptionTier\" class=\"mt-4 flex justify-between items-center\">\n      <div>\n        <span class=\"font-bold\">No active subscription</span>\n        <div class=\"text-sm text-gray-700\">\n          You won't be able to invite your team until you activate a subscription\n        </div>\n      </div>\n      <div>\n        <a\n          :href=\"paymentLink\"\n          target=\"_blank\"\n          class=\"inline-flex items-center justify-center rounded-md border border-transparent bg-ultramarine-600 py-1 px-2 text-sm font-medium text-white shadow-sm hover:bg-ultramarine-500 focus:outline-none focus:ring-2 focus:ring-ultramarine-500 focus:ring-offset-2\">\n          Subscribe With Stripe\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4 ml-1\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25\" />\n          </svg>\n        </a>\n      </div>\n    </div>\n  </div>\n  <div>\n    <div class=\"text-xl font-bold\">\n      Current Members\n    </div>\n    <ul role=\"list\" class=\"divide-y divide-gray-100\">\n      <li class=\"flex justify-between gap-x-6 py-5\" v-for=\"user in users\">\n        <div class=\"flex min-w-0 gap-x-4\">\n          <img class=\"size-12 flex-none rounded-full bg-gray-50\" :src=\"user.picture ?? 'images/logo.svg'\" alt=\"\">\n          <div class=\"min-w-0 flex-auto\">\n            <p class=\"text-sm/6 font-semibold text-gray-900\">\n              {{user.name}}\n              <span v-if=\"user.isFreeUser\" class=\"inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20\">Free</span>\n            </p>\n            <p class=\"mt-1 truncate text-xs/5 text-gray-500\">{{user.email ?? 'No Email'}}</p>\n          </div>\n        </div>\n        <div class=\"hidden shrink-0 sm:flex sm:flex-col sm:items-end\">\n          <p class=\"text-sm/6 text-gray-900 capitalize\">{{getRolesForUser(user).join(', ')}}</p>\n          <div class=\"flex gap-3\">\n            <p class=\"mt-1 text-xs/5 text-gray-500 cursor-pointer\">\n              Edit\n            </p>\n            <p class=\"mt-1 text-xs/5 text-valencia-500 cursor-pointer\" @click=\"showRemoveModal = user\">\n              Remove\n            </p>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div>\n    <div class=\"flex items-center justify-between\">\n      <div class=\"text-xl font-bold\">\n        Invitations\n      </div>\n      <div class=\"mt-4 sm:ml-16 sm:mt-0 sm:flex-none\">\n        <button\n          type=\"button\"\n          @click=\"showNewInvitationModal = true\"\n          :disabled=\"workspace && !workspace.subscriptionTier\"\n          class=\"block rounded-md bg-ultramarine-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 disabled:bg-gray-500 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n          New Invitation\n          <svg class=\"inline w-4 h-4 ml-1\" v-if=\"workspace && !workspace.subscriptionTier\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path fill-rule=\"evenodd\" d=\"M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z\" clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div class=\"mt-8 flow-root\" v-if=\"invitations?.length > 0\">\n      <div class=\"-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n        <div class=\"inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8\">\n          <table class=\"min-w-full divide-y divide-gray-300\">\n            <thead>\n              <tr>\n                <th scope=\"col\" class=\"py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0\">GitHub Username</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Email</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Status</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Role</th>\n              </tr>\n            </thead>\n            <tbody class=\"divide-y divide-gray-200 bg-white\">\n              <tr v-for=\"invitation in invitations\">\n                <td class=\"whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0\">\n                  {{invitation.githubUsername}}\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  {{invitation.email}}\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  <span class=\"inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-600/20\">\n                    Pending\n                  </span>\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  {{invitation.roles.join(', ')}}\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n\n    <div v-if=\"invitations?.length === 0\" class=\"mt-4\">\n      <div class=\"text-center\">\n        <svg class=\"mx-auto size-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n        </svg>\n        <h3 class=\"mt-2 text-sm font-semibold text-gray-900\">No invitations</h3>\n        <p class=\"mt-1 text-sm text-gray-500\">You have no outstanding invitations</p>\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"showNewInvitationModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showNewInvitationModal = false\">&times;</div>\n      <new-invitation @close=\"showNewInvitationModal = false\" @invitationCreated=\"invitations.push($event.invitation)\"></new-invitation>\n    </template>\n  </modal>\n\n  <modal v-if=\"showRemoveModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showRemoveModal = false\">&times;</div>\n      <div>\n        Are you sure you want to remove user <span class=\"font-bold\">{{showRemoveModal.githubUsername}}</span> from this workspace?\n      </div>\n      <div class=\"mt-6 grid grid-cols-2 gap-4\">\n        <async-button\n          @click=\"removeFromWorkspace(showConfirmDeleteModal)\"\n          class=\"border-0 mt-0 flex w-full items-center justify-center gap-3 rounded-md bg-valencia-500 hover:bg-valencia-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-400\">\n          <span class=\"text-sm font-semibold leading-6\">Yes, Remove</span>\n        </async-button>\n\n        <span @click=\"showRemoveModal = null\" class=\"cursor-pointer flex w-full items-center justify-center gap-3 rounded-md bg-slate-500 hover:bg-slate-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400\">\n          <span class=\"text-sm font-semibold leading-6\">Cancel</span>\n        </span>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"mx-auto max-w-5xl py-6 px-2 flex flex-col gap-8\">\n  <div>\n    <div class=\"text-xl font-bold\">\n      Subscription Details\n    </div>\n    <div v-if=\"status === 'loading'\" class=\"mt-4\">\n      <img src=\"images/loader.gif\" class=\"inline w-8 h-8\">\n    </div>\n    <div v-else-if=\"workspace && workspace.subscriptionTier\" class=\"mt-4 flex justify-between items-center\">\n      <div>\n        <span class=\"font-bold\">Tier:</span> {{workspace.subscriptionTier ?? 'No subscription'}}\n      </div>\n      <div>\n        <async-button\n          type=\"submit\"\n          @click=\"getWorkspaceCustomerPortalLink\"\n          class=\"inline-flex items-center justify-center rounded-md border border-transparent bg-ultramarine-600 py-1 px-2 text-sm font-medium text-white shadow-sm hover:bg-ultramarine-500 focus:outline-none focus:ring-2 focus:ring-forest-green-500 focus:ring-offset-2\">\n          View in Stripe\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4 ml-1\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25\" />\n          </svg>\n        </async-button>\n      </div>\n    </div>\n    <div v-else-if=\"workspace && !workspace.subscriptionTier\" class=\"mt-4 flex justify-between items-center\">\n      <div>\n        <span class=\"font-bold\">No active subscription</span>\n        <div class=\"text-sm text-gray-700\">\n          You won't be able to invite your team until you activate a subscription\n        </div>\n      </div>\n      <div>\n        <a\n          :href=\"paymentLink\"\n          target=\"_blank\"\n          class=\"inline-flex items-center justify-center rounded-md border border-transparent bg-ultramarine-600 py-1 px-2 text-sm font-medium text-white shadow-sm hover:bg-ultramarine-500 focus:outline-none focus:ring-2 focus:ring-ultramarine-500 focus:ring-offset-2\">\n          Subscribe With Stripe\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4 ml-1\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25\" />\n          </svg>\n        </a>\n      </div>\n    </div>\n  </div>\n  <div>\n    <div class=\"text-xl font-bold\">\n      Current Members\n    </div>\n    <div v-if=\"status === 'loading'\" class=\"mt-4\">\n      <img src=\"images/loader.gif\" class=\"inline w-8 h-8\">\n    </div>\n    <ul v-else role=\"list\" class=\"divide-y divide-gray-100\">\n      <li class=\"flex justify-between gap-x-6 py-5\" v-for=\"user in users\">\n        <div class=\"flex min-w-0 gap-x-4\">\n          <img class=\"size-12 flex-none rounded-full bg-gray-50\" :src=\"user.picture ?? 'images/logo.svg'\" alt=\"\">\n          <div class=\"min-w-0 flex-auto\">\n            <p class=\"text-sm/6 font-semibold text-gray-900\">\n              {{user.name}}\n              <span v-if=\"user.isFreeUser\" class=\"inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20\">Free</span>\n            </p>\n            <p class=\"mt-1 truncate text-xs/5 text-gray-500\">{{user.email ?? 'No Email'}}</p>\n          </div>\n        </div>\n        <div class=\"hidden shrink-0 sm:flex sm:flex-col sm:items-end\">\n          <p class=\"text-sm/6 text-gray-900 capitalize\">{{getRolesForUser(user).join(', ')}}</p>\n          <div class=\"flex gap-3\">\n            <p class=\"mt-1 text-xs/5 text-gray-500 cursor-pointer\">\n              Edit\n            </p>\n            <p class=\"mt-1 text-xs/5 text-valencia-500 cursor-pointer\" @click=\"showRemoveModal = user\">\n              Remove\n            </p>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div>\n    <div class=\"flex items-center justify-between\">\n      <div class=\"text-xl font-bold\">\n        Invitations\n      </div>\n      <div class=\"mt-4 sm:ml-16 sm:mt-0 sm:flex-none\">\n        <button\n          type=\"button\"\n          @click=\"showNewInvitationModal = true\"\n          :disabled=\"status === 'loading' || (workspace && !workspace.subscriptionTier)\"\n          class=\"block rounded-md bg-ultramarine-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 disabled:bg-gray-500 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n          New Invitation\n          <svg class=\"inline w-4 h-4 ml-1\" v-if=\"workspace && !workspace.subscriptionTier\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path fill-rule=\"evenodd\" d=\"M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z\" clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div v-if=\"status === 'loading'\" class=\"mt-4\">\n      <img src=\"images/loader.gif\" class=\"inline w-8 h-8\">\n    </div>\n    <div v-else-if=\"invitations?.length > 0\" class=\"mt-8 flow-root\" v-if=\"invitations?.length > 0\">\n      <div class=\"-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n        <div class=\"inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8\">\n          <table class=\"min-w-full divide-y divide-gray-300\">\n            <thead>\n              <tr>\n                <th scope=\"col\" class=\"py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0\">GitHub Username</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Email</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Status</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Role</th>\n              </tr>\n            </thead>\n            <tbody class=\"divide-y divide-gray-200 bg-white\">\n              <tr v-for=\"invitation in invitations\">\n                <td class=\"whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0\">\n                  {{invitation.githubUsername}}\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  {{invitation.email}}\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  <span class=\"inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-600/20\">\n                    Pending\n                  </span>\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  {{invitation.roles.join(', ')}}\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div v-else-if=\"invitations?.length === 0\" class=\"mt-4\">\n      <div class=\"text-center\">\n        <svg class=\"mx-auto size-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n        </svg>\n        <h3 class=\"mt-2 text-sm font-semibold text-gray-900\">No invitations</h3>\n        <p class=\"mt-1 text-sm text-gray-500\">You have no outstanding invitations</p>\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"showNewInvitationModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showNewInvitationModal = false\">&times;</div>\n      <new-invitation @close=\"showNewInvitationModal = false\" @invitationCreated=\"invitations.push($event.invitation)\"></new-invitation>\n    </template>\n  </modal>\n\n  <modal v-if=\"showRemoveModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showRemoveModal = false\">&times;</div>\n      <div>\n        Are you sure you want to remove user <span class=\"font-bold\">{{showRemoveModal.githubUsername}}</span> from this workspace?\n      </div>\n      <div class=\"mt-6 grid grid-cols-2 gap-4\">\n        <async-button\n          @click=\"removeFromWorkspace(showConfirmDeleteModal)\"\n          class=\"border-0 mt-0 flex w-full items-center justify-center gap-3 rounded-md bg-valencia-500 hover:bg-valencia-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-400\">\n          <span class=\"text-sm font-semibold leading-6\">Yes, Remove</span>\n        </async-button>\n\n        <span @click=\"showRemoveModal = null\" class=\"cursor-pointer flex w-full items-center justify-center gap-3 rounded-md bg-slate-500 hover:bg-slate-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400\">\n          <span class=\"text-sm font-semibold leading-6\">Cancel</span>\n        </span>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -11164,6 +11140,7 @@ if (typeof process === 'undefined') {
   __webpack_require__.g.process = { env: {} }; // To make `util` package work
 }
 
+const api = __webpack_require__(/*! ./api */ "./frontend/src/api.js");
 const mothership = __webpack_require__(/*! ./mothership */ "./frontend/src/mothership.js");
 const vanillatoasts = __webpack_require__(/*! vanillatoasts */ "./node_modules/vanillatoasts/vanillatoasts.js");
 
@@ -11211,8 +11188,8 @@ __webpack_require__(/*! ./team/new-invitation/new-invitation */ "./frontend/src/
 app.component('app-component', {
   template: `
   <div>
-    <div v-if="hasAPIKey && user == null">
-      <splash />
+    <div v-if="hasAPIKey && (user == null || status === 'init')">
+      <splash :loading="status === 'init'" />
     </div>
     <div v-else-if="!hasAPIKey || user">
       <navbar :user="user" :roles="roles" />
@@ -11239,19 +11216,45 @@ app.component('app-component', {
     window.$router = this.$router;
 
     if (mothership.hasAPIKey) {
-      const token = window.localStorage.getItem('_mongooseStudioAccessToken');
-      if (token) {
-        const { user, roles } = await mothership.me();
+      const href = window.location.href;
+      if (href.match(/\?code=([a-zA-Z0-9]+)$/)) {
+        const code = href.match(/\?code=([a-zA-Z0-9]+)$/)[1];
+        const { accessToken, user, roles } = await mothership.github(code);
+        if (roles == null) {
+          this.authError = 'You are not authorized to access this workspace';
+          return;
+        }
         this.user = user;
         this.roles = roles;
+        window.localStorage.setItem('_mongooseStudioAccessToken', accessToken._id);
+
+        const { nodeEnv } = await api.status();
+        this.nodeEnv = nodeEnv;
+      } else {
+        const token = window.localStorage.getItem('_mongooseStudioAccessToken');
+        if (token) {
+          const { user, roles } = await mothership.me();
+          this.user = user;
+          this.roles = roles;
+
+          const { nodeEnv } = await api.status();
+          this.nodeEnv = nodeEnv;
+        }
       }
+    } else {
+      const { nodeEnv } = await api.status();
+      this.nodeEnv = nodeEnv;
     }
+    this.status = 'loaded';
   },
   setup() {
     const user = Vue.ref(null);
     const roles = Vue.ref(null);
+    const status = Vue.ref('init');
+    const nodeEnv = Vue.ref(null);
+    const authError = Vue.ref(null);
 
-    const state = Vue.reactive({ user, roles });
+    const state = Vue.reactive({ user, roles, status, nodeEnv, authError });
     Vue.provide('state', state);
 
     return state;

package/frontend/public/tw.css

@@ -594,10 +594,6 @@ video {
   pointer-events: none;
 }
 
-.fixed {
-  position: fixed;
-}
-
 .absolute {
   position: absolute;
 }
@@ -789,6 +785,10 @@ video {
   height: 2rem;
 }
 
+.h-16 {
+  height: 4rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -829,6 +829,10 @@ video {
   max-height: 50vh;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -845,6 +849,10 @@ video {
   width: 16rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
 .w-\[50\%\] {
   width: 50%;
 }

package/frontend/src/dashboard/dashboard.html

@@ -15,7 +15,7 @@
         </button>
       </div>
     </div>
-    <div v-if="!showEditor" class="mt-4 mb-4">
+    <div  v-if="!showEditor" class="mt-4 mb-4">
       <dashboard-result :result="result"></dashboard-result>
     </div>
     <div v-if="showEditor">
@@ -39,7 +39,7 @@
         </div>
       </div>
     </div>
-    
+
   </div>
   <div v-if="!dashboard && status === 'loaded'">
     No dashboard with the given id could be found.

package/frontend/src/dashboard/dashboard.js

@@ -34,7 +34,8 @@ module.exports = app => app.component('dashboard', {
     }
   },
   mounted: async function() {
-    const { dashboard, result, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
+    this.showEditor = this.$route.query.edit;
+    const { dashboard, result, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: !this.showEditor });
     if (!dashboard) {
       return;
     }

package/frontend/src/dashboard/edit-dashboard/edit-dashboard.html

@@ -1,15 +1,20 @@
 <div class="p-4 bg-gray-100 rounded-lg shadow-lg">
-    <div>
-        <input v-model="title" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Title"/>
+    <div v-show="status === 'loading'" class="max-w-5xl mx-auto text-center">
+        <img src="images/loader.gif" class="inline mt-10">
     </div>
-    <div>
-        <textarea v-model="description" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="Description">{{description}}</textarea>
-    </div>
-    <div>
-        <textarea ref="codeEditor" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="6">{{code}}</textarea>
-    </div>
-    <div class="flex space-x-2">
-        <button @click="updateCode" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">Submit</button>
-        <button @click="closeEditor" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500">Cancel</button>
+    <div v-show="status !== 'loading'">
+        <div>
+            <input v-model="title" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Title"/>
+        </div>
+        <div>
+            <textarea v-model="description" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="Description">{{description}}</textarea>
+        </div>
+        <div>
+            <textarea ref="codeEditor" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="6">{{code}}</textarea>
+        </div>
+        <div class="flex space-x-2">
+            <async-button @click="updateCode" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">Submit</async-button>
+            <button @click="closeEditor" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500">Cancel</button>
+        </div>
     </div>
 </div>

package/frontend/src/dashboard/edit-dashboard/edit-dashboard.js

@@ -8,7 +8,7 @@ module.exports = app => app.component('edit-dashboard', {
   props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
   data: function() {
     return {
-      status: 'loading',
+      status: 'loaded',
       editor: null,
       title: '',
       description: ''
@@ -19,7 +19,7 @@ module.exports = app => app.component('edit-dashboard', {
         this.$emit('close')
     },
     async updateCode() {
-      console.log('this.title', this.title, 'this.description', this.description)
+      this.status = 'loading';
       const { doc, result, error } = await api.Dashboard.updateDashboard({
         dashboardId: this.dashboardId,
         code: this.editor.getValue(),
@@ -28,6 +28,7 @@ module.exports = app => app.component('edit-dashboard', {
       });
       this.$emit('update', { doc, result, error });
       this.editor.setValue(doc.code);
+      this.status = 'loaded';
       this.closeEditor();
     }
   },
@@ -43,12 +44,7 @@ module.exports = app => app.component('edit-dashboard', {
       lineWrapping: true,
       showCursorWhenSelecting: true,
     });
-    // this.editor.setValue(this.code);
-    // this.editor.setSize(300, 300); // Ensure the editor has a fixed height
-    
-    // this.editor.setCursor(this.editor.lineCount() - 1, this.editor.getLine(this.editor.lineCount() - 1).length);
-   
-    this.editor.focus();
+    // this.editor.focus();
     // this.editor.refresh(); // if anything weird happens on load, this usually fixes it. However, this breaks it in this case.
     this.description = this.currentDescription;
     this.title = this.currentTitle;

package/frontend/src/dashboard-result/dashboard-document/dashboard-document.js

@@ -15,7 +15,7 @@ module.exports = app => app.component('dashboard-document', {
       return null;
     },
     schemaPaths() {
-      return Object.keys(this.value.$document?.schemaPaths || {}).sort((k1, k2) => {
+      return Object.keys(this.value?.$document?.schemaPaths || {}).sort((k1, k2) => {
         if (k1 === '_id' && k2 !== '_id') {
           return -1;
         }
@@ -23,7 +23,7 @@ module.exports = app => app.component('dashboard-document', {
           return 1;
         }
         return 0;
-      }).map(key => this.value.$document.schemaPaths[key]);
+      }).map(key => this.value?.$document.schemaPaths[key]);
     }
   }
 });

package/frontend/src/index.js

@@ -4,6 +4,7 @@ if (typeof process === 'undefined') {
   global.process = { env: {} }; // To make `util` package work
 }
 
+const api = require('./api');
 const mothership = require('./mothership');
 const vanillatoasts = require('vanillatoasts');
 
@@ -51,8 +52,8 @@ require('./team/new-invitation/new-invitation')(app);
 app.component('app-component', {
   template: `
   <div>
-    <div v-if="hasAPIKey && user == null">
-      <splash />
+    <div v-if="hasAPIKey && (user == null || status === 'init')">
+      <splash :loading="status === 'init'" />
     </div>
     <div v-else-if="!hasAPIKey || user">
       <navbar :user="user" :roles="roles" />
@@ -79,19 +80,45 @@ app.component('app-component', {
     window.$router = this.$router;
 
     if (mothership.hasAPIKey) {
-      const token = window.localStorage.getItem('_mongooseStudioAccessToken');
-      if (token) {
-        const { user, roles } = await mothership.me();
+      const href = window.location.href;
+      if (href.match(/\?code=([a-zA-Z0-9]+)$/)) {
+        const code = href.match(/\?code=([a-zA-Z0-9]+)$/)[1];
+        const { accessToken, user, roles } = await mothership.github(code);
+        if (roles == null) {
+          this.authError = 'You are not authorized to access this workspace';
+          return;
+        }
         this.user = user;
         this.roles = roles;
+        window.localStorage.setItem('_mongooseStudioAccessToken', accessToken._id);
+
+        const { nodeEnv } = await api.status();
+        this.nodeEnv = nodeEnv;
+      } else {
+        const token = window.localStorage.getItem('_mongooseStudioAccessToken');
+        if (token) {
+          const { user, roles } = await mothership.me();
+          this.user = user;
+          this.roles = roles;
+
+          const { nodeEnv } = await api.status();
+          this.nodeEnv = nodeEnv;
+        }
       }
+    } else {
+      const { nodeEnv } = await api.status();
+      this.nodeEnv = nodeEnv;
     }
+    this.status = 'loaded';
   },
   setup() {
     const user = Vue.ref(null);
     const roles = Vue.ref(null);
+    const status = Vue.ref('init');
+    const nodeEnv = Vue.ref(null);
+    const authError = Vue.ref(null);
 
-    const state = Vue.reactive({ user, roles });
+    const state = Vue.reactive({ user, roles, status, nodeEnv, authError });
     Vue.provide('state', state);
 
     return state;

package/frontend/src/navbar/navbar.html

@@ -3,8 +3,8 @@
     <router-link to="/">
       <img src="images/logo.svg" alt="Mongoose Studio Logo" />
     </router-link>
-    <div v-if="!!nodeEnv" class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900" :class="warnEnv ? 'bg-red-300' : 'bg-yellow-300'">
-      {{nodeEnv}}
+    <div v-if="!!state.nodeEnv" class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900" :class="warnEnv ? 'bg-red-300' : 'bg-yellow-300'">
+      {{state.nodeEnv}}
     </div>
   </div>
   <div class="nav-right h-full">

package/frontend/src/navbar/navbar.js

@@ -11,13 +11,14 @@ appendCSS(require('./navbar.css'));
 module.exports = app => app.component('navbar', {
   template: template,
   props: ['user', 'roles'],
-  data: () => ({ nodeEnv: null, showFlyout: false }),
+  inject: ['state'],
+  data: () => ({ showFlyout: false }),
   computed: {
     routeName() {
       return this.$route.name;
     },
     warnEnv() {
-      return this.nodeEnv === 'prod' || this.nodeEnv === 'production';
+      return this.state.nodeEnv === 'prod' || this.state.nodeEnv === 'production';
     },
     hasAPIKey() {
       return mothership.hasAPIKey;
@@ -26,10 +27,6 @@ module.exports = app => app.component('navbar', {
       return this.roles?.includes('owner') || this.roles?.includes('admin');
     }
   },
-  async mounted() {
-    const { nodeEnv } = await api.status();
-    this.nodeEnv = nodeEnv;
-  },
   methods: {
     async loginWithGithub() {
       const { url } = await mothership.githubLogin();

package/frontend/src/splash/splash.html

@@ -6,10 +6,13 @@
     <div class="text-lg mt-2 font-bold">
       Mongoose Studio
     </div>
-    <div class="mt-2 text-gray-700">
+    <div v-if="loading" class="mt-2">
+      <img src="images/loader.gif" class="inline w-16 h-16">
+    </div>
+    <div class="mt-2 text-gray-700" v-if="!loading">
       {{workspaceName}}
     </div>
-    <div class="mt-4">
+    <div class="mt-4" v-if="!loading">
       <async-button
         type="button"
         @click="loginWithGithub"
@@ -17,7 +20,7 @@
         Login With GitHub
       </async-button>
     </div>
-    <div class="mt-4" v-if="error">
+    <div class="mt-4" v-if="state.authError">
       <div class="rounded-md bg-red-50 p-4">
         <div class="flex">
           <div class="shrink-0">
@@ -26,7 +29,7 @@
             </svg>
           </div>
           <div class="ml-3">
-            <h3 class="text-sm font-medium text-red-800">{{error}}</h3>
+            <h3 class="text-sm font-medium text-red-800">{{state.authError}}</h3>
           </div>
         </div>
       </div>

package/frontend/src/splash/splash.js

@@ -6,25 +6,13 @@ const template = require('./splash.html');
 module.exports = app => app.component('splash', {
   template,
   inject: ['state'],
+  props: ['loading'],
   data: () => ({ error: null }),
   computed: {
     workspaceName() {
       return config__workspace.name;
     }
   },
-  async mounted() {
-    const href = window.location.href;
-    if (href.match(/\?code=([a-zA-Z0-9]+)$/)) {
-      const code = href.match(/\?code=([a-zA-Z0-9]+)$/)[1];
-      const { accessToken, user, roles } = await mothership.github(code);
-      if (roles == null) {
-        this.error = 'You are not authorized to access this workspace';
-        return;
-      }
-      this.state.user = user;
-      window.localStorage.setItem('_mongooseStudioAccessToken', accessToken._id);
-    }
-  },
   methods: {
     async loginWithGithub() {
       const { url } = await mothership.githubLogin();

package/frontend/src/team/team.html

@@ -3,7 +3,10 @@
     <div class="text-xl font-bold">
       Subscription Details
     </div>
-    <div v-if="workspace && workspace.subscriptionTier" class="mt-4 flex justify-between items-center">
+    <div v-if="status === 'loading'" class="mt-4">
+      <img src="images/loader.gif" class="inline w-8 h-8">
+    </div>
+    <div v-else-if="workspace && workspace.subscriptionTier" class="mt-4 flex justify-between items-center">
       <div>
         <span class="font-bold">Tier:</span> {{workspace.subscriptionTier ?? 'No subscription'}}
       </div>
@@ -19,7 +22,7 @@
         </async-button>
       </div>
     </div>
-    <div v-if="workspace && !workspace.subscriptionTier" class="mt-4 flex justify-between items-center">
+    <div v-else-if="workspace && !workspace.subscriptionTier" class="mt-4 flex justify-between items-center">
       <div>
         <span class="font-bold">No active subscription</span>
         <div class="text-sm text-gray-700">
@@ -43,7 +46,10 @@
     <div class="text-xl font-bold">
       Current Members
     </div>
-    <ul role="list" class="divide-y divide-gray-100">
+    <div v-if="status === 'loading'" class="mt-4">
+      <img src="images/loader.gif" class="inline w-8 h-8">
+    </div>
+    <ul v-else role="list" class="divide-y divide-gray-100">
       <li class="flex justify-between gap-x-6 py-5" v-for="user in users">
         <div class="flex min-w-0 gap-x-4">
           <img class="size-12 flex-none rounded-full bg-gray-50" :src="user.picture ?? 'images/logo.svg'" alt="">
@@ -78,7 +84,7 @@
         <button
           type="button"
           @click="showNewInvitationModal = true"
-          :disabled="workspace && !workspace.subscriptionTier"
+          :disabled="status === 'loading' || (workspace && !workspace.subscriptionTier)"
           class="block rounded-md bg-ultramarine-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 disabled:bg-gray-500 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
           New Invitation
           <svg class="inline w-4 h-4 ml-1" v-if="workspace && !workspace.subscriptionTier" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
@@ -87,7 +93,10 @@
         </button>
       </div>
     </div>
-    <div class="mt-8 flow-root" v-if="invitations?.length > 0">
+    <div v-if="status === 'loading'" class="mt-4">
+      <img src="images/loader.gif" class="inline w-8 h-8">
+    </div>
+    <div v-else-if="invitations?.length > 0" class="mt-8 flow-root" v-if="invitations?.length > 0">
       <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
         <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
           <table class="min-w-full divide-y divide-gray-300">
@@ -121,8 +130,7 @@
         </div>
       </div>
     </div>
-
-    <div v-if="invitations?.length === 0" class="mt-4">
+    <div v-else-if="invitations?.length === 0" class="mt-4">
       <div class="text-center">
         <svg class="mx-auto size-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
           <path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />

package/frontend/src/team/team.js

@@ -10,13 +10,15 @@ module.exports = app => app.component('team', {
     users: null,
     invitations: null,
     showNewInvitationModal: false,
-    showRemoveModal: null
+    showRemoveModal: null,
+    status: 'loading'
   }),
   async mounted() {
     const { workspace, users, invitations } = await mothership.getWorkspaceTeam();
     this.workspace = workspace;
     this.users = users;
     this.invitations = invitations;
+    this.status = 'loaded';
   },
   computed: {
     paymentLink() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "dependencies": {
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",