@mongoosejs/studio 0.0.60 → 0.0.62

package/frontend/src/navbar/navbar.js

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

package/frontend/src/splash/splash.html

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

package/frontend/src/splash/splash.js

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

package/frontend/src/team/team.html

@@ -1,23 +1,75 @@
-<div class="mx-auto max-w-5xl py-6 px-2">
-  <div class="text-xl font-bold">
-    Current Members
-  </div>
-  <ul role="list" class="divide-y divide-gray-100">
-    <li class="flex justify-between gap-x-6 py-5" v-for="user in users">
-      <div class="flex min-w-0 gap-x-4">
-        <img class="size-12 flex-none rounded-full bg-gray-50" :src="user.picture ?? 'images/logo.svg'" alt="">
-        <div class="min-w-0 flex-auto">
-          <p class="text-sm/6 font-semibold text-gray-900">{{user.name}}</p>
-          <p class="mt-1 truncate text-xs/5 text-gray-500">{{user.email}}</p>
+<div class="mx-auto max-w-5xl py-6 px-2 flex flex-col gap-8">
+  <div>
+    <div class="text-xl font-bold">
+      Subscription Details
+    </div>
+    <div v-if="workspace && workspace.subscriptionTier" class="mt-4 flex justify-between items-center">
+      <div>
+        <span class="font-bold">Tier:</span> {{workspace.subscriptionTier ?? 'No subscription'}}
+      </div>
+      <div>
+        <async-button
+          type="submit"
+          @click="getWorkspaceCustomerPortalLink"
+          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">
+          View in Stripe
+          <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">
+            <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" />
+          </svg>
+        </async-button>
+      </div>
+    </div>
+    <div v-if="workspace && !workspace.subscriptionTier" class="mt-4 flex justify-between items-center">
+      <div>
+        <span class="font-bold">No active subscription</span>
+        <div class="text-sm text-gray-700">
+          You won't be able to invite your team until you activate a subscription
         </div>
       </div>
-      <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
-        <p class="text-sm/6 text-gray-900 capitalize">{{getRolesForUser(user).join(', ')}}</p>
-        <p class="mt-1 text-xs/5 text-gray-500">Last seen <time datetime="2023-01-23T13:23Z">3h ago</time></p>
+      <div>
+        <a
+          :href="paymentLink"
+          target="_blank"
+          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">
+          Subscribe With Stripe
+          <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">
+            <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" />
+          </svg>
+        </a>
       </div>
-    </li>
-  </ul>
-  <div class="mt-6">
+    </div>
+  </div>
+  <div>
+    <div class="text-xl font-bold">
+      Current Members
+    </div>
+    <ul role="list" class="divide-y divide-gray-100">
+      <li class="flex justify-between gap-x-6 py-5" v-for="user in users">
+        <div class="flex min-w-0 gap-x-4">
+          <img class="size-12 flex-none rounded-full bg-gray-50" :src="user.picture ?? 'images/logo.svg'" alt="">
+          <div class="min-w-0 flex-auto">
+            <p class="text-sm/6 font-semibold text-gray-900">
+              {{user.name}}
+              <span v-if="user.isFreeUser" class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Free</span>
+            </p>
+            <p class="mt-1 truncate text-xs/5 text-gray-500">{{user.email ?? 'No Email'}}</p>
+          </div>
+        </div>
+        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
+          <p class="text-sm/6 text-gray-900 capitalize">{{getRolesForUser(user).join(', ')}}</p>
+          <div class="flex gap-3">
+            <p class="mt-1 text-xs/5 text-gray-500 cursor-pointer">
+              Edit
+            </p>
+            <p class="mt-1 text-xs/5 text-valencia-500 cursor-pointer" @click="showRemoveModal = user">
+              Remove
+            </p>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div>
     <div class="flex items-center justify-between">
       <div class="text-xl font-bold">
         Invitations
@@ -26,8 +78,12 @@
         <button
           type="button"
           @click="showNewInvitationModal = true"
-          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 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
+          :disabled="workspace && !workspace.subscriptionTier"
+          class="block rounded-md bg-ultramarine-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 disabled:bg-gray-500 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
           New Invitation
+          <svg class="inline w-4 h-4 ml-1" v-if="workspace && !workspace.subscriptionTier" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <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" />
+          </svg>
         </button>
       </div>
     </div>
@@ -83,4 +139,24 @@
       <new-invitation @close="showNewInvitationModal = false" @invitationCreated="invitations.push($event.invitation)"></new-invitation>
     </template>
   </modal>
+
+  <modal v-if="showRemoveModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="showRemoveModal = false">&times;</div>
+      <div>
+        Are you sure you want to remove user <span class="font-bold">{{showRemoveModal.githubUsername}}</span> from this workspace?
+      </div>
+      <div class="mt-6 grid grid-cols-2 gap-4">
+        <async-button
+          @click="removeFromWorkspace(showConfirmDeleteModal)"
+          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">
+          <span class="text-sm font-semibold leading-6">Yes, Remove</span>
+        </async-button>
+
+        <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">
+          <span class="text-sm font-semibold leading-6">Cancel</span>
+        </span>
+      </div>
+    </template>
+  </modal>
 </div>

package/frontend/src/team/team.js

@@ -9,7 +9,8 @@ module.exports = app => app.component('team', {
     workspace: null,
     users: null,
     invitations: null,
-    showNewInvitationModal: false
+    showNewInvitationModal: false,
+    showRemoveModal: null
   }),
   async mounted() {
     const { workspace, users, invitations } = await mothership.getWorkspaceTeam();
@@ -17,9 +18,24 @@ module.exports = app => app.component('team', {
     this.users = users;
     this.invitations = invitations;
   },
+  computed: {
+    paymentLink() {
+      return 'https://buy.stripe.com/test_eVaeYa2jC7565Lq7ss?client_reference_id=' + this.workspace?._id;
+    }
+  },
   methods: {
     getRolesForUser(user) {
       return this.workspace.members.find(member => member.userId === user._id)?.roles ?? [];
+    },
+    async removeFromWorkspace() {
+      const { workspace, users } = await mothership.removeFromWorkspace({ userId: this.showRemoveModal._id });
+      this.workspace = workspace;
+      this.users = users;
+      this.showRemoveModal = false;
+    },
+    async getWorkspaceCustomerPortalLink() {
+      const { url } = await mothership.getWorkspaceCustomerPortalLink();
+      window.open(url, '_self');
     }
   }
 });

package/package.json

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