@mongoosejs/studio 0.0.61 → 0.0.62

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: {
@@ -2170,15 +2152,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 +2866,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 +2877,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 +3284,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 +3295,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";
 
 /***/ }),
 
@@ -11164,6 +11138,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 +11186,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 +11214,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;
 }

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/package.json

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