@mongoosejs/studio 0.0.89 → 0.0.90

package/astra.js

@@ -154,6 +154,6 @@ void async function main() {
 # Astra Notes
 
 1. Must use collections. Tables don't support `countDocuments()` or `estimatedDocumentCount()`.
-2. Annoying issue: collections don't let you store keys that start with '$'. Ended up creating separate connection to store ChatMessages in MongoDB.
-3. `countDocuments()` with filter erroring out with more than 1000 documents is problematic, e.g. https://studio-astra-demo.netlify.app/imdb/#/?search={genres:'Drama'} fails
+2. Collections don't let you store keys that start with '$', which is problematic for `$chart`. Ended up creating separate connection to store ChatMessages in MongoDB.
+3. `countDocuments()` with filter erroring out with more than 1000 documents caused trouble. Worked around it by converting `countDocuments()` to `find()` using Mongoose middleware.
 */

package/backend/actions/ChatMessage/executeScript.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const Archetype = require('archetype');
+const authorize = require('../../authorize');
 const mongoose = require('mongoose');
 const vm = require('vm');
 
@@ -12,7 +13,10 @@ const ExecuteScriptParams = new Archetype({
     $type: mongoose.Types.ObjectId
   },
   script: {
-    $type: String
+    $type: 'string'
+  },
+  roles: {
+    $type: ['string']
   }
 }).compile('ExecuteScriptParams');
 
@@ -20,6 +24,8 @@ module.exports = ({ db, studioConnection }) => async function executeScript(para
   const { userId, chatMessageId, script } = new ExecuteScriptParams(params);
   const ChatMessage = studioConnection.model('__Studio_ChatMessage');
 
+  await authorize('ChatMessage.executeScript', roles);
+
   const chatMessage = await ChatMessage.findById(chatMessageId);
   if (!chatMessage) {
     throw new Error('Chat message not found');

package/backend/actions/ChatThread/createChatMessage.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const Archetype = require('archetype');
+const authorize = require('../../authorize');
 const getModelDescriptions = require('../../helpers/getModelDescriptions');
 const mongoose = require('mongoose');
 
@@ -17,6 +18,9 @@ const CreateChatMessageParams = new Archetype({
   authorization: {
     $type: 'string',
     $required: true
+  },
+  roles: {
+    $type: ['string'],
   }
 }).compile('CreateChatMessageParams');
 
@@ -56,10 +60,12 @@ Here is a description of the user's models. Assume these are the only models ava
 `.trim();
 
 module.exports = ({ db, studioConnection, options }) => async function createChatMessage(params) {
-  const { chatThreadId, userId, content, script, authorization } = new CreateChatMessageParams(params);
+  const { chatThreadId, userId, content, script, authorization, roles } = new CreateChatMessageParams(params);
   const ChatThread = studioConnection.model('__Studio_ChatThread');
   const ChatMessage = studioConnection.model('__Studio_ChatMessage');
 
+  await authorize('ChatThread.createChatMessage', roles);
+
   // Check that the user owns the thread
   const chatThread = await ChatThread.findOne({ _id: chatThreadId });
   if (!chatThread) {

package/backend/actions/ChatThread/createChatThread.js

@@ -1,11 +1,15 @@
 'use strict';
 
 const Archetype = require('archetype');
+const authorize = require('../../authorize');
 const mongoose = require('mongoose');
 
 const CreateChatThreadParams = new Archetype({
   userId: {
     $type: mongoose.Types.ObjectId
+  },
+  roles: {
+    $type: ['string'],
   }
 }).compile('CreateChatThreadParams');
 
@@ -13,6 +17,8 @@ module.exports = ({ studioConnection }) => async function createChatThread(param
   const { userId } = new CreateChatThreadParams(params);
   const ChatThread = studioConnection.model('__Studio_ChatThread');
 
+  await authorize('ChatThread.createChatThread', roles);
+
   const chatThread = await ChatThread.create({ userId });
 
   return { chatThread };

package/backend/actions/ChatThread/getChatThread.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const Archetype = require('archetype');
+const authorize = require('../../authorize');
 const mongoose = require('mongoose');
 
 const GetChatThreadParams = new Archetype({
@@ -9,14 +10,19 @@ const GetChatThreadParams = new Archetype({
   },
   userId: {
     $type: mongoose.Types.ObjectId
+  },
+  roles: {
+    $type: ['string']
   }
 }).compile('GetChatThreadParams');
 
 module.exports = ({ db, studioConnection }) => async function getChatThread(params) {
-  const { chatThreadId, userId } = new GetChatThreadParams(params);
+  const { chatThreadId, userId, roles } = new GetChatThreadParams(params);
   const ChatThread = studioConnection.model('__Studio_ChatThread');
   const ChatMessage = studioConnection.model('__Studio_ChatMessage');
 
+  await authorize('ChatThread.getChatThread', roles);
+
   const chatThread = await ChatThread.findById(chatThreadId);
 
   if (!chatThread) {

package/backend/actions/ChatThread/listChatThreads.js

@@ -1,19 +1,25 @@
 'use strict';
 
 const Archetype = require('archetype');
+const authorize = require('../../authorize');
 const mongoose = require('mongoose');
 
 const ListChatThreadsParams = new Archetype({
   userId: {
     $type: mongoose.Types.ObjectId
+  },
+  roles: {
+    $type: ['string']
   }
 }).compile('ListChatThreadsParams');
 
 module.exports = ({ db, studioConnection }) => async function listChatThreads(params) {
-  // Just validate the params object, but no actual parameters needed
-  const { userId } = new ListChatThreadsParams(params);
+  // Validate the params object
+  const { userId, roles } = new ListChatThreadsParams(params);
   const ChatThread = studioConnection.model('__Studio_ChatThread');
 
+  await authorize('ChatThread.listChatThreads', roles);
+
   // Get all chat threads
   const chatThreads = await ChatThread.find(userId ? { userId } : {})
     .sort({ updatedAt: -1 }); // Sort by most recently updated

package/backend/actions/Dashboard/createDashboard.js

@@ -1,5 +1,7 @@
 'use strict';
+
 const Archetype = require('archetype');
+const authorize = require('../../authorize');
 
 const CreateDashboardParams = new Archetype({
   title: {
@@ -9,14 +11,19 @@ const CreateDashboardParams = new Archetype({
   code: {
     $type: 'string',
     $required: true
+  },
+  roles: {
+    $type: ['string']
   }
 }).compile('CreateDashboardParams');
 
 module.exports = ({ db }) => async function createDashboard(params) {
-  const { title, code } = new CreateDashboardParams(params);
+  const { title, code, roles } = new CreateDashboardParams(params);
   const Dashboard = db.model('__Studio_Dashboard');
 
+  await authorize('Dashboard.createDashboard', roles);
+
   const dashboard = await Dashboard.create({ title, code });
 
   return { dashboard };
-};
+};

package/backend/actions/Dashboard/deleteDashboard.js

@@ -1,19 +1,24 @@
 'use strict';
 
 const Archetype = require('archetype');
-const vm = require('vm');
+const authorize = require('../../authorize');
 
 const DeleteDashboardParams = new Archetype({
   dashboardId: {
     $type: 'string',
     $required: true
   },
+  roles: {
+    $type: ['string']
+  }
 }).compile('DeleteDashboardParams');
 
 module.exports = ({ db }) => async function deleteDashboard(params) {
-  const { dashboardId } = new DeleteDashboardParams(params);
+  const { dashboardId, roles } = new DeleteDashboardParams(params);
   const Dashboard = db.model('__Studio_Dashboard');
 
+  await authorize('Dashboard.deleteDashboard', roles);
+
   const result = await Dashboard.deleteOne({ _id: dashboardId }).orFail();
   return { result };
-};
+};

package/backend/actions/Dashboard/getDashboard.js

@@ -2,6 +2,7 @@
 
 const Archetype = require('archetype');
 const vm = require('vm');
+const authorize = require('../../authorize');
 
 const GetDashboardParams = new Archetype({
   dashboardId: {
@@ -10,13 +11,18 @@ const GetDashboardParams = new Archetype({
   },
   evaluate: {
     $type: 'boolean'
+  },
+  roles: {
+    $type: ['string']
   }
 }).compile('GetDashboardParams');
 
 module.exports = ({ db }) => async function getDashboard(params) {
-  const { dashboardId, evaluate } = new GetDashboardParams(params);
+  const { dashboardId, evaluate, roles } = new GetDashboardParams(params);
   const Dashboard = db.model('__Studio_Dashboard');
 
+  await authorize('Dashboard.getDashboard', roles);
+
   const dashboard = await Dashboard.findOne({ _id: dashboardId });
   if (evaluate) {
     let result = null;
@@ -25,9 +31,9 @@ module.exports = ({ db }) => async function getDashboard(params) {
     } catch (error) {
       return { dashboard, error: { message: error.message } };
     }
-    
+
     return { dashboard, result };
   }
 
   return { dashboard };
-};
+};

package/backend/actions/Dashboard/getDashboards.js

@@ -1,10 +1,13 @@
 'use strict';
 
+const authorize = require('../../authorize');
 
-module.exports = ({ db }) => async function getDashboards() {
+module.exports = ({ db }) => async function getDashboards(roles) {
   const Dashboard = db.model('__Studio_Dashboard');
 
+  await authorize('Dashboard.getDashboards', roles);
+
   const dashboards = await Dashboard.find();
 
   return { dashboards }
-};
+};

package/backend/actions/Dashboard/updateDashboard.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const Archetype = require('archetype');
+const authorize = require('../../authorize');
 
 const UpdateDashboardParams = new Archetype({
   dashboardId: {
@@ -16,16 +17,21 @@ const UpdateDashboardParams = new Archetype({
   },
   description: {
     $type: 'string'
+  },
+  roles: {
+    $type: ['string']
   }
 }).compile('UpdateDashboardParams');
 
 module.exports = ({ db }) => async function updateDashboard(params) {
-  const { dashboardId, code, title, description } = new UpdateDashboardParams(params);
+  const { dashboardId, code, title, description, roles } = new UpdateDashboardParams(params);
 
   const Dashboard = db.models[`__Studio_Dashboard`];
 
+  await authorize('Dashboard.updateDashboard', roles);
+
   const updateObj = { code };
-  
+
   if (title) {
     updateObj.title = title;
   }
@@ -36,7 +42,7 @@ module.exports = ({ db }) => async function updateDashboard(params) {
 
   const doc = await Dashboard.
     findByIdAndUpdate(dashboardId, updateObj, { sanitizeFilter: true, returnDocument: 'after', overwriteImmutable: true });
-  
+
   let result = null;
   try {
     result = await doc.evaluate();
@@ -45,4 +51,4 @@ module.exports = ({ db }) => async function updateDashboard(params) {
   }
 
   return { doc, result };
-};
+};

package/backend/actions/Model/createDocument.js

@@ -2,6 +2,7 @@
 
 const Archetype = require('archetype');
 const { EJSON } = require('bson');
+const authorize = require('../../authorize');
 
 const CreateDocumentParams = new Archetype({
   model: {
@@ -20,16 +21,14 @@ const CreateDocumentParams = new Archetype({
 module.exports = ({ db }) => async function CreateDocument(params) {
   const { model, data, roles } = new CreateDocumentParams(params);
 
-  if (roles && roles.includes('readonly')) {
-    throw new Error('Not authorized');
-  }
+  await authorize('Model.createDocument', roles);
 
   const Model = db.models[model];
   if (Model == null) {
     throw new Error(`Model ${model} not found`);
   }
-  
+
   const doc = await Model.create(EJSON.deserialize(data));
-  
+
   return { doc };
-};
+};

package/backend/actions/Model/deleteDocument.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const Archetype = require('archetype');
+const authorize = require('../../authorize');
 
 const DeleteDocumentParams = new Archetype({
   model: {
@@ -21,9 +22,8 @@ module.exports = ({ db }) => async function DeleteDocument(params) {
 
   const Model = db.models[model];
 
-  if (roles && roles.includes('readonly')) {
-    throw new Error('Not authorized');
-  }
+  await authorize('Model.deleteDocument', roles);
+
   if (Model == null) {
     throw new Error(`Model ${model} not found`);
   }
@@ -33,6 +33,6 @@ module.exports = ({ db }) => async function DeleteDocument(params) {
     setOptions({ sanitizeFilter: true }).
     orFail();
     console.log('what is doc', doc);
-  
+
   return { doc };
-};
+};

package/backend/actions/Model/deleteDocuments.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const Archetype = require('archetype');
+const authorize = require('../../authorize');
 
 const DeleteDocumentsParams = new Archetype({
   model: {
@@ -21,9 +22,8 @@ module.exports = ({ db }) => async function DeleteDocuments(params) {
 
   const Model = db.models[model];
 
-  if (roles && roles.includes('readonly')) {
-    throw new Error('Not authorized');
-  }
+  await authorize('Model.deleteDocuments', roles);
+
   if (Model == null) {
     throw new Error(`Model ${model} not found`);
   }
@@ -32,7 +32,7 @@ module.exports = ({ db }) => async function DeleteDocuments(params) {
     deleteMany({_id: { $in: documentIds }}).
     setOptions({ sanitizeFilter: true }).
     orFail();
-   
-  
+
+
   return { };
-};
+};

package/backend/actions/Model/dropIndex.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const Archetype = require('archetype');
+const authorize = require('../../authorize');
+
+const DropIndexParams = new Archetype({
+  model: {
+    $type: 'string',
+    $required: true
+  },
+  name: {
+    $type: 'string',
+    $required: true
+  },
+  roles: {
+    $type: ['string']
+  }
+}).compile('DropIndexParams');
+
+module.exports = ({ db }) => async function getIndexes(params) {
+  const { model, name, roles } = new DropIndexParams(params);
+
+  await authorize('Model.dropIndex', roles);
+
+  const Model = db.models[model];
+  if (Model == null) {
+    throw new Error(`Model ${model} not found`);
+  }
+
+  await Model.dropIndex(name);
+
+  const mongoDBIndexes = await Model.listIndexes();
+  return {
+    mongoDBIndexes
+  };
+};

package/backend/actions/Model/exportQueryResults.js

@@ -3,6 +3,7 @@
 const Archetype = require('archetype');
 const mongoose = require('mongoose');
 const { stringify } = require('csv-stringify/sync');
+const authorize = require('../../authorize');
 
 const GetDocumentsParams = new Archetype({
   model: {
@@ -21,13 +22,18 @@ const GetDocumentsParams = new Archetype({
       }
       return v;
     }
+  },
+  roles: {
+    $type: ['string']
   }
 }).compile('GetDocumentsParams');
 
 module.exports = ({ db }) => async function exportQueryResults(params, req, res) {
   params = new GetDocumentsParams(params);
   let { filter } = params;
-  const { model, propertiesToInclude } = params;
+  const { model, propertiesToInclude, roles } = params;
+
+  await authorize('Model.exportQueryResults', roles);
 
   const Model = db.models[model];
   if (Model == null) {

package/backend/actions/Model/getDocument.js

@@ -2,6 +2,7 @@
 
 const Archetype = require('archetype');
 const removeSpecifiedPaths = require('../../helpers/removeSpecifiedPaths');
+const authorize = require('../../authorize');
 
 const GetDocumentParams = new Archetype({
   model: {
@@ -11,11 +12,16 @@ const GetDocumentParams = new Archetype({
   documentId: {
     $type: 'string',
     $required: true
+  },
+  roles: {
+    $type: ['string']
   }
 }).compile('GetDocumentParams');
 
 module.exports = ({ db }) => async function getDocument(params) {
-  const { model, documentId } = new GetDocumentParams(params);
+  const { model, documentId, roles } = new GetDocumentParams(params);
+
+  await authorize('Model.getDocument', roles);
 
   const Model = db.models[model];
   if (Model == null) {
@@ -35,6 +41,6 @@ module.exports = ({ db }) => async function getDocument(params) {
     };
   }
   removeSpecifiedPaths(schemaPaths, '.$*');
-  
+
   return { doc: doc.toJSON({ virtuals: true, getters: false, transform: false }), schemaPaths };
-};
+};

package/backend/actions/Model/getDocuments.js

@@ -3,6 +3,7 @@
 const Archetype = require('archetype');
 const removeSpecifiedPaths = require('../../helpers/removeSpecifiedPaths');
 const { EJSON } = require('bson')
+const authorize = require('../../authorize');
 
 const GetDocumentsParams = new Archetype({
   model: {
@@ -24,11 +25,17 @@ const GetDocumentsParams = new Archetype({
   },
   sort: {
     $type: Archetype.Any
+  },
+  roles: {
+    $type: ['string']
   }
 }).compile('GetDocumentsParams');
 
 module.exports = ({ db }) => async function getDocuments(params) {
   params = new GetDocumentsParams(params);
+  const { roles } = params;
+  await authorize('Model.getDocuments', roles);
+
   let { filter } = params;
   if (filter != null && Object.keys(filter).length > 0) {
     filter = EJSON.parse(filter);

package/backend/actions/Model/getIndexes.js

@@ -1,18 +1,22 @@
 'use strict';
 
 const Archetype = require('archetype');
+const authorize = require('../../authorize');
 
 const GetDocumentsParams = new Archetype({
   model: {
     $type: 'string',
     $required: true
   },
+  roles: {
+    $type: ['string']
+  }
 }).compile('GetDocumentsParams');
 
 module.exports = ({ db }) => async function getIndexes(params) {
-  params = new GetDocumentsParams(params);
+  const { model, roles } = new GetDocumentsParams(params);
 
-  const { model } = params;
+  await authorize('Model.getIndexes', roles);
 
   const Model = db.models[model];
   if (Model == null) {

package/backend/actions/Model/listModels.js

@@ -1,7 +1,19 @@
 'use strict';
 
-module.exports = ({ db }) => async function listModels() {
+const Archetype = require('archetype');
+const authorize = require('../../authorize');
+
+const ListModelsParams = new Archetype({
+  roles: {
+    $type: ['string']
+  }
+}).compile('ListModelsParams');
+
+module.exports = ({ db }) => async function listModels(params) {
+  const { roles } = new ListModelsParams(params);
+  await authorize('Model.listModels', roles);
+
   return {
     models: Object.keys(db.models).filter(key => !key.startsWith('__Studio_')).sort()
   };
-};
+};

package/backend/actions/Model/updateDocument.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const Archetype = require('archetype');
+const authorize = require('../../authorize');
 
 const UpdateDocumentsParams = new Archetype({
   model: {
@@ -23,9 +24,8 @@ const UpdateDocumentsParams = new Archetype({
 module.exports = ({ db }) => async function updateDocument(params) {
   const { model, _id, update, roles } = new UpdateDocumentsParams(params);
 
-  if (roles && roles.includes('readonly')) {
-    throw new Error('Not authorized');
-  }
+  await authorize('Document.updateDocument', roles);
+
   const Model = db.models[model];
   if (Model == null) {
     throw new Error(`Model ${model} not found`);
@@ -40,6 +40,6 @@ module.exports = ({ db }) => async function updateDocument(params) {
 
   const doc = await Model.
     findByIdAndUpdate(_id, processedUpdate, { sanitizeFilter: true, returnDocument: 'after', overwriteImmutable: true, runValidators: false });
-  
+
   return { doc };
-};
+};

package/backend/actions/Model/updateDocuments.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const Archetype = require('archetype');
-const mongoose = require('mongoose');
+const authorize = require('../../authorize');
 
 const UpdateDocumentsParams = new Archetype({
   model: {
@@ -24,9 +24,8 @@ const UpdateDocumentsParams = new Archetype({
 module.exports = ({ db }) => async function updateDocuments(params) {
   const { model, _id, update, roles } = new UpdateDocumentsParams(params);
 
-  if (roles && roles.includes('readonly')) {
-    throw new Error('Not authorized');
-  }
+  await authorize('Document.updateDocuments', roles);
+
   const Model = db.models[model];
   if (Model == null) {
     throw new Error(`Model ${model} not found`);
@@ -41,6 +40,6 @@ module.exports = ({ db }) => async function updateDocuments(params) {
 
   const result = await Model.
     updateMany({ _id: { $in: _id } }, processedUpdate, { overwriteImmutable: true, runValidators: false });
-  
+
   return { result };
-};
+};

package/backend/authorize.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const actionsToRequiredRoles = {
+  'ChatMessage.executeScript': ['owner', 'admin', 'member'],
+  'ChatThread.createChatMessage': ['owner', 'admin', 'member'],
+  'ChatThread.createChatThread': ['owner', 'admin', 'member'],
+  'ChatThread.getChatThread': ['owner', 'admin', 'member'],
+  'ChatThread.listChatThreads': ['owner', 'admin', 'member'],
+  'Dashboard.createDashboard': ['owner', 'admin', 'member'],
+  'Dashboard.deleteDashboard': ['owner', 'admin', 'member'],
+  'Dashboard.getDashboard': ['owner', 'admin', 'member', 'readonly', 'dashboards'],
+  'Dashboard.getDashboards': ['owner', 'admin', 'member', 'readonly', 'dashboards'],
+  'Dashboard.getDashboard': ['owner', 'admin', 'member', 'readonly', 'dashboards'],
+  'Dashboard.updateDashboard': ['owner', 'admin', 'member'],
+  'Model.createDocument': ['owner', 'admin', 'member'],
+  'Model.updateDocument': ['owner', 'admin', 'member'],
+  'Model.deleteDocument': ['owner', 'admin', 'member'],
+  'Model.dropIndex': ['owner', 'admin'],
+  'Model.exportQueryResults': ['owner', 'admin', 'member', 'readonly'],
+  'Model.getDocument': ['owner', 'admin', 'member', 'readonly'],
+  'Model.getDocuments': ['owner', 'admin', 'member', 'readonly'],
+  'Model.getIndexes': ['owner', 'admin', 'member', 'readonly'],
+  'Model.listModels': ['owner', 'admin', 'member', 'readonly'],
+  'Model.updateDocument': ['owner', 'admin', 'member'],
+  'Model.updateDocuments': ['owner', 'admin', 'member']
+};
+
+module.exports = function authorize(action, roles) {
+  if (roles == null) {
+    return;
+  }
+  const authorized = actionsToRequiredRoles[action] && roles.find(role => actionsToRequiredRoles[action].includes(role));
+  if (!authorized) {
+    throw new Error(`Unauthorized to take action ${action}`);
+  }
+}

package/frontend/public/app.js

@@ -1800,13 +1800,15 @@ app.component('app-component', {
     window.state = this;
 
     if (mothership.hasAPIKey) {
-      const href = window.location.href;
-      if (href.match(/\?code=([a-zA-Z0-9]+)$/)) {
-        const code = href.match(/\?code=([a-zA-Z0-9]+)$/)[1];
+      const hashParams = new URLSearchParams(window.location.hash.replace(/^#?\/?\??/, '') || '');
+      if (hashParams.has('code')) {
+        const code = hashParams.get('code');
+        const provider = hashParams.get('provider');
         try {
-          const { accessToken, user, roles } = await mothership.github(code);
+          const { accessToken, user, roles } = provider === 'github' ? await mothership.github(code) : await mothership.google(code);
           if (roles == null) {
             this.authError = 'You are not authorized to access this workspace';
+            this.status = 'loaded';
             return;
           }
           this.user = user;
@@ -2291,6 +2293,10 @@ module.exports = app => app.component('models', {
     this.status = 'loaded';
   },
   methods: {
+    async dropIndex(name) {
+      const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, index: name });
+      this.mongoDBIndexes = mongoDBIndexes;
+    },
     initFilter(ev) {
       if (!this.searchText) {
         this.searchText = '{}';
@@ -2389,7 +2395,7 @@ module.exports = app => app.component('models', {
     },
     async openIndexModal() {
       this.shouldShowIndexModal = true;
-      const { mongoDBIndexes, schemaIndexes } = await api.Model.getIndexes({ model: this.currentModel })
+      const { mongoDBIndexes, schemaIndexes } = await api.Model.getIndexes({ model: this.currentModel });
       this.mongoDBIndexes = mongoDBIndexes;
       this.schemaIndexes = schemaIndexes;
     },
@@ -2493,6 +2499,9 @@ module.exports = app => app.component('models', {
     deselectAll() {
       this.selectedPaths = [];
     },
+    selectAll() {
+      this.selectedPaths = [...this.schemaPaths];
+    },
     isSelected(path) {
       return this.selectedPaths.find(x => x.path == path);
     },
@@ -2607,6 +2616,10 @@ exports.githubLogin = function githubLogin() {
   return client.post('/githubLogin', { state: window.location.href }).then(res => res.data);
 };
 
+exports.googleLogin = function googleLogin() {
+  return client.post('/googleLogin', { state: window.location.href }).then(res => res.data);
+};
+
 exports.getWorkspaceTeam = function getWorkspaceTeam() {
   return client.post('/getWorkspaceTeam', { workspaceId: window.MONGOOSE_STUDIO_CONFIG.workspace._id }).then(res => res.data);
 };
@@ -2619,6 +2632,10 @@ exports.github = function github(code) {
   return client.post('/github', { code, workspaceId: window.MONGOOSE_STUDIO_CONFIG.workspace._id }).then(res => res.data);
 };
 
+exports.google = function google(code) {
+  return client.post('/google', { code, workspaceId: window.MONGOOSE_STUDIO_CONFIG.workspace._id }).then(res => res.data);
+};
+
 exports.inviteToWorkspace = function inviteToWorkspace(params) {
   return client.post('/inviteToWorkspace', { workspaceId: window.MONGOOSE_STUDIO_CONFIG.workspace._id, ...params }).then(res => res.data);
 };
@@ -2862,6 +2879,10 @@ module.exports = app => app.component('splash', {
     async loginWithGithub() {
       const { url } = await mothership.githubLogin();
       window.location.href = url;
+    },
+    async loginWithGoogle() {
+      const { url } = await mothership.googleLogin();
+      window.location.href = url;
     }
   }
 });
@@ -2883,12 +2904,18 @@ const template = __webpack_require__(/*! ./new-invitation.html */ "./frontend/sr
 
 module.exports = app => app.component('new-invitation', {
   template,
+  props: ['tier'],
   emits: ['close', 'invitationCreated'],
   data: () => ({
     githubUsername: '',
     email: '',
     role: null
   }),
+  mounted() {
+    if (this.tier == null) {
+      this.role = 'dashboards';
+    }
+  },
   methods: {
     async inviteToWorkspace() {
       const { invitation } = await mothership.inviteToWorkspace({ githubUsername: this.githubUsername, email: this.email, roles: [this.role] });
@@ -4377,7 +4404,7 @@ module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-dir
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"models\">\n  <div>\n    <div class=\"flex grow flex-col gap-y-5 overflow-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)] w-48\">\n      <div class=\"flex font-bold font-xl mt-4 pl-2\">\n        Models\n      </div>\n      <nav class=\"flex flex-1 flex-col\">\n        <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n          <li>\n            <ul role=\"list\">\n              <li v-for=\"model in models\">\n                <router-link\n                  :to=\"'/model/' + model\"\n                  class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                  :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                  {{model}}\n                </router-link>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </nav>\n    </div>\n\n  </div>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"flex-grow m-0\">\n            <input ref=\"searchInput\" class=\"w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none\" type=\"text\" placeholder=\"Filter\" v-model=\"searchText\" @click=\"initFilter\" />\n          </form>\n          <div>\n            <span v-if=\"status === 'loading'\">Loading ...</span>\n            <span v-if=\"status === 'loaded'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Export\n          </button>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-ultramarine-500 ring-inset ring-2 ring-gray-300 hover:bg-ultramarine-600': selectMultiple }\"\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          >\n            Select\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"outputType = 'table'\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"outputType = 'json'\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <table v-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"clickFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"handleDocumentClick(document)\" :key=\"document._id\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :filter=\"filter\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <button\n              type=\"submit\"\n              @click=\"dropIndex()\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"submit\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 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-teal-600\">Filter Selection</button>\n        <button type=\"submit\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"submit\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"models\">\n  <div>\n    <div class=\"flex grow flex-col gap-y-5 overflow-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)] w-48\">\n      <div class=\"flex font-bold font-xl mt-4 pl-2\">\n        Models\n      </div>\n      <nav class=\"flex flex-1 flex-col\">\n        <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n          <li>\n            <ul role=\"list\">\n              <li v-for=\"model in models\">\n                <router-link\n                  :to=\"'/model/' + model\"\n                  class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                  :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                  {{model}}\n                </router-link>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </nav>\n    </div>\n\n  </div>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"flex-grow m-0\">\n            <input ref=\"searchInput\" class=\"w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none\" type=\"text\" placeholder=\"Filter\" v-model=\"searchText\" @click=\"initFilter\" />\n          </form>\n          <div>\n            <span v-if=\"status === 'loading'\">Loading ...</span>\n            <span v-if=\"status === 'loaded'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Export\n          </button>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-ultramarine-500 ring-inset ring-2 ring-gray-300 hover:bg-ultramarine-600': selectMultiple }\"\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          >\n            Select\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"outputType = 'table'\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"outputType = 'json'\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <table v-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"clickFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"handleDocumentClick(document)\" :key=\"document._id\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :filter=\"filter\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 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-teal-600\">Filter Selection</button>\n        <button type=\"button\" @click=\"selectAll()\" class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">Select All</button>\n        <button type=\"button\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"button\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -4410,7 +4437,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 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";
+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 flex gap-4 justify-center\" v-if=\"!loading\">\n      <div>\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          <svg viewBox=\"0 0 98 98\" class=\"inline mr-1\" height=\"1.5em\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z\" fill=\"#fff\"/></svg>\n          Login With GitHub\n        </async-button>\n      </div>\n      <div>\n        <async-button\n          type=\"button\"\n          @click=\"loginWithGoogle\"\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          <svg class=\"inline\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.5em\" viewBox=\"0 0 512 512\"><path fill=\"#fff\" d=\"M386 400c45-42 65-112 53-179H260v74h102c-4 24-18 44-38 57z\"/><path fill=\"#fff\" d=\"M90 341a192 192 0 0 0 296 59l-62-48c-53 35-141 22-171-60z\"/><path fill=\"#fff\" d=\"M153 292c-8-25-8-48 0-73l-63-49c-23 46-30 111 0 171z\"/><path fill=\"#fff\" d=\"M153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55z\"/></svg>\n          Login With Google\n        </async-button>\n      </div>\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";
 
 /***/ }),
 
@@ -4421,7 +4448,7 @@ module.exports = "<div class=\"w-full h-full flex items-center justify-center\">
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"p-1\">\n  <form class=\"space-y-4\">\n    <div class=\"text-lg font-bold\">\n      New Invitation\n    </div>\n\n    <div>\n      <label for=\"githubUsername\" class=\"block text-sm/6 font-medium text-gray-900\">GitHub Username</label>\n      <div class=\"mt-2\">\n        <input type=\"githubUsername\" name=\"githubUsername\" id=\"githubUsername\" v-model=\"githubUsername\" class=\"block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6\" placeholder=\"johnsmith12\">\n      </div>\n    </div>\n\n    <div>\n      <label for=\"email\" class=\"block text-sm/6 font-medium text-gray-900\">Email (Optional)</label>\n      <div class=\"mt-2\">\n        <input type=\"email\" name=\"email\" id=\"email\" v-model=\"email\" class=\"block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6\" placeholder=\"you@example.com\">\n      </div>\n    </div>\n\n    <div>\n      <label for=\"location\" class=\"block text-sm/6 font-medium text-gray-900\">Role</label>\n      <div class=\"mt-2 grid grid-cols-1\">\n        <select id=\"role\" name=\"role\" v-model=\"role\" class=\"col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6\">\n          <option value=\"admin\">Admin</option>\n          <option value=\"member\">Member</option>\n          <option value=\"readonly\">Read-only</option>\n        </select>\n        <svg class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n          <path fill-rule=\"evenodd\" d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" />\n        </svg>\n      </div>\n    </div>\n\n    <async-button\n      type=\"submit\"\n      @click=\"inviteToWorkspace\"\n      class=\"inline-flex justify-center rounded-md border border-transparent bg-forest-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-forest-green-500 focus:outline-none focus:ring-2 focus:ring-forest-green-500 focus:ring-offset-2\">\n      Submit\n    </async-button>\n  </form>\n</div>\n";
+module.exports = "<div class=\"p-1\">\n  <form class=\"space-y-4\">\n    <div class=\"text-lg font-bold\">\n      New Invitation\n    </div>\n\n    <div>\n      <label for=\"githubUsername\" class=\"block text-sm/6 font-medium text-gray-900\">GitHub Username</label>\n      <div class=\"mt-2\">\n        <input type=\"githubUsername\" name=\"githubUsername\" id=\"githubUsername\" v-model=\"githubUsername\" class=\"block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6\" placeholder=\"johnsmith12\">\n      </div>\n    </div>\n\n    <div>\n      <label for=\"email\" class=\"block text-sm/6 font-medium text-gray-900\">Email (Optional)</label>\n      <div class=\"mt-2\">\n        <input type=\"email\" name=\"email\" id=\"email\" v-model=\"email\" class=\"block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6\" placeholder=\"you@example.com\">\n      </div>\n    </div>\n\n    <div>\n      <label for=\"location\" class=\"block text-sm/6 font-medium text-gray-900\">Role</label>\n      <div class=\"mt-2 grid grid-cols-1\">\n        <select id=\"role\" :disabled=\"tier == null\" name=\"role\" v-model=\"role\" class=\"col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6\">\n          <option value=\"admin\">Admin</option>\n          <option value=\"member\">Member</option>\n          <option value=\"readonly\">Read-only</option>\n          <option value=\"dashboards\">Dashboards Only</option>\n        </select>\n        <svg class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n          <path fill-rule=\"evenodd\" d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" />\n        </svg>\n      </div>\n      <div v-if=\"tier == null\" class=\"text-sm text-gray-700\">\n        You can only invite \"Dashboards Only\" users until you set up a subscription.\n      </div>\n    </div>\n\n    <async-button\n      type=\"submit\"\n      @click=\"inviteToWorkspace\"\n      class=\"inline-flex justify-center rounded-md border border-transparent bg-forest-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-forest-green-500 focus:outline-none focus:ring-2 focus:ring-forest-green-500 focus:ring-offset-2\">\n      Submit\n    </async-button>\n  </form>\n</div>\n";
 
 /***/ }),
 
@@ -4432,7 +4459,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=\"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 || user.githubUsername}}\n              <span v-if=\"user.isFreeUser\" class=\"ml-1 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            <button\n              class=\"mt-1 text-xs/5 text-valencia-500 cursor-pointer disabled:cursor-not-allowed disabled:text-gray-300\"\n              :disabled=\"getRolesForUser(user).includes('owner')\"\n              @click=\"showRemoveModal = user\">\n              Remove\n            </button>\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";
+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 || user.githubUsername}}\n              <span v-if=\"user.isFreeUser\" class=\"ml-1 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            <button\n              class=\"mt-1 text-xs/5 text-valencia-500 cursor-pointer disabled:cursor-not-allowed disabled:text-gray-300\"\n              :disabled=\"getRolesForUser(user).includes('owner')\"\n              @click=\"showRemoveModal = user\">\n              Remove\n            </button>\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'\"\n          :tier=\"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";
 
 /***/ }),
 

package/frontend/src/index.js

@@ -67,13 +67,15 @@ app.component('app-component', {
     window.state = this;
 
     if (mothership.hasAPIKey) {
-      const href = window.location.href;
-      if (href.match(/\?code=([a-zA-Z0-9]+)$/)) {
-        const code = href.match(/\?code=([a-zA-Z0-9]+)$/)[1];
+      const hashParams = new URLSearchParams(window.location.hash.replace(/^#?\/?\??/, '') || '');
+      if (hashParams.has('code')) {
+        const code = hashParams.get('code');
+        const provider = hashParams.get('provider');
         try {
-          const { accessToken, user, roles } = await mothership.github(code);
+          const { accessToken, user, roles } = provider === 'github' ? await mothership.github(code) : await mothership.google(code);
           if (roles == null) {
             this.authError = 'You are not authorized to access this workspace';
+            this.status = 'loaded';
             return;
           }
           this.user = user;

package/frontend/src/models/models.html

@@ -162,12 +162,12 @@
             <div class="text-sm font-mono">{{ JSON.stringify(index.key) }}</div>
           </div>
           <div>
-            <button
-              type="submit"
-              @click="dropIndex()"
+            <async-button
+              type="button"
+              @click="dropIndex(index.name)"
               class="rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed">
               Drop
-            </button>
+            </async-button>
           </div>
         </div>
       </div>
@@ -183,9 +183,10 @@
         </div>
       </div>
       <div class="mt-4 flex gap-2">
-        <button type="submit" @click="filterDocuments()" class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 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-teal-600">Filter Selection</button>
-        <button type="submit" @click="deselectAll()" class="rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">Deselect All</button>
-        <button type="submit" @click="resetDocuments()" class="rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600" >Cancel</button>
+        <button type="button" @click="filterDocuments()" class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 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-teal-600">Filter Selection</button>
+        <button type="button" @click="selectAll()" class="rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600">Select All</button>
+        <button type="button" @click="deselectAll()" class="rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">Deselect All</button>
+        <button type="button" @click="resetDocuments()" class="rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600" >Cancel</button>
       </div>
     </template>
   </modal>

package/frontend/src/models/models.js

@@ -93,6 +93,10 @@ module.exports = app => app.component('models', {
     this.status = 'loaded';
   },
   methods: {
+    async dropIndex(name) {
+      const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, index: name });
+      this.mongoDBIndexes = mongoDBIndexes;
+    },
     initFilter(ev) {
       if (!this.searchText) {
         this.searchText = '{}';
@@ -191,7 +195,7 @@ module.exports = app => app.component('models', {
     },
     async openIndexModal() {
       this.shouldShowIndexModal = true;
-      const { mongoDBIndexes, schemaIndexes } = await api.Model.getIndexes({ model: this.currentModel })
+      const { mongoDBIndexes, schemaIndexes } = await api.Model.getIndexes({ model: this.currentModel });
       this.mongoDBIndexes = mongoDBIndexes;
       this.schemaIndexes = schemaIndexes;
     },
@@ -295,6 +299,9 @@ module.exports = app => app.component('models', {
     deselectAll() {
       this.selectedPaths = [];
     },
+    selectAll() {
+      this.selectedPaths = [...this.schemaPaths];
+    },
     isSelected(path) {
       return this.selectedPaths.find(x => x.path == path);
     },

package/frontend/src/mothership.js

@@ -22,6 +22,10 @@ exports.githubLogin = function githubLogin() {
   return client.post('/githubLogin', { state: window.location.href }).then(res => res.data);
 };
 
+exports.googleLogin = function googleLogin() {
+  return client.post('/googleLogin', { state: window.location.href }).then(res => res.data);
+};
+
 exports.getWorkspaceTeam = function getWorkspaceTeam() {
   return client.post('/getWorkspaceTeam', { workspaceId: window.MONGOOSE_STUDIO_CONFIG.workspace._id }).then(res => res.data);
 };
@@ -34,6 +38,10 @@ exports.github = function github(code) {
   return client.post('/github', { code, workspaceId: window.MONGOOSE_STUDIO_CONFIG.workspace._id }).then(res => res.data);
 };
 
+exports.google = function google(code) {
+  return client.post('/google', { code, workspaceId: window.MONGOOSE_STUDIO_CONFIG.workspace._id }).then(res => res.data);
+};
+
 exports.inviteToWorkspace = function inviteToWorkspace(params) {
   return client.post('/inviteToWorkspace', { workspaceId: window.MONGOOSE_STUDIO_CONFIG.workspace._id, ...params }).then(res => res.data);
 };

package/frontend/src/splash/splash.html

@@ -12,13 +12,25 @@
     <div class="mt-2 text-gray-700" v-if="!loading">
       {{workspaceName}}
     </div>
-    <div class="mt-4" v-if="!loading">
-      <async-button
-        type="button"
-        @click="loginWithGithub"
-        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">
-        Login With GitHub
-      </async-button>
+    <div class="mt-4 flex gap-4 justify-center" v-if="!loading">
+      <div>
+        <async-button
+          type="button"
+          @click="loginWithGithub"
+          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">
+          <svg viewBox="0 0 98 98" class="inline mr-1" height="1.5em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
+          Login With GitHub
+        </async-button>
+      </div>
+      <div>
+        <async-button
+          type="button"
+          @click="loginWithGoogle"
+          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">
+          <svg class="inline" xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"><path fill="#fff" d="M386 400c45-42 65-112 53-179H260v74h102c-4 24-18 44-38 57z"/><path fill="#fff" d="M90 341a192 192 0 0 0 296 59l-62-48c-53 35-141 22-171-60z"/><path fill="#fff" d="M153 292c-8-25-8-48 0-73l-63-49c-23 46-30 111 0 171z"/><path fill="#fff" d="M153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55z"/></svg>
+          Login With Google
+        </async-button>
+      </div>
     </div>
     <div class="mt-4" v-if="state.authError">
       <div class="rounded-md bg-red-50 p-4">

package/frontend/src/splash/splash.js

@@ -17,6 +17,10 @@ module.exports = app => app.component('splash', {
     async loginWithGithub() {
       const { url } = await mothership.githubLogin();
       window.location.href = url;
+    },
+    async loginWithGoogle() {
+      const { url } = await mothership.googleLogin();
+      window.location.href = url;
     }
   }
 });

package/frontend/src/team/new-invitation/new-invitation.html

@@ -21,15 +21,19 @@
     <div>
       <label for="location" class="block text-sm/6 font-medium text-gray-900">Role</label>
       <div class="mt-2 grid grid-cols-1">
-        <select id="role" name="role" v-model="role" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
+        <select id="role" :disabled="tier == null" name="role" v-model="role" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
           <option value="admin">Admin</option>
           <option value="member">Member</option>
           <option value="readonly">Read-only</option>
+          <option value="dashboards">Dashboards Only</option>
         </select>
         <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
           <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
         </svg>
       </div>
+      <div v-if="tier == null" class="text-sm text-gray-700">
+        You can only invite "Dashboards Only" users until you set up a subscription.
+      </div>
     </div>
 
     <async-button

package/frontend/src/team/new-invitation/new-invitation.js

@@ -5,12 +5,18 @@ const template = require('./new-invitation.html');
 
 module.exports = app => app.component('new-invitation', {
   template,
+  props: ['tier'],
   emits: ['close', 'invitationCreated'],
   data: () => ({
     githubUsername: '',
     email: '',
     role: null
   }),
+  mounted() {
+    if (this.tier == null) {
+      this.role = 'dashboards';
+    }
+  },
   methods: {
     async inviteToWorkspace() {
       const { invitation } = await mothership.inviteToWorkspace({ githubUsername: this.githubUsername, email: this.email, roles: [this.role] });

package/frontend/src/team/team.html

@@ -87,7 +87,8 @@
         <button
           type="button"
           @click="showNewInvitationModal = true"
-          :disabled="status === 'loading' || (workspace && !workspace.subscriptionTier)"
+          :disabled="status === 'loading'"
+          :tier="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">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {