@mongoosejs/studio 0.0.49 → 0.0.51

package/frontend/src/navbar/navbar.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const api = require('../api');
+const mothership = require('../mothership');
 const template = require('./navbar.html');
 
 const appendCSS = require('../appendCSS');
@@ -9,17 +10,53 @@ appendCSS(require('./navbar.css'));
 
 module.exports = app => app.component('navbar', {
   template: template,
-  data: () => ({ nodeEnv: null }),
+  props: ['user'],
+  data: () => ({ nodeEnv: null, showFlyout: false }),
   computed: {
     routeName() {
       return this.$route.name;
     },
     warnEnv() {
       return this.nodeEnv === 'prod' || this.nodeEnv === 'production';
+    },
+    hasAPIKey() {
+      return mothership.hasAPIKey;
     }
   },
   async mounted() {
     const { nodeEnv } = await api.status();
     this.nodeEnv = nodeEnv;
+  },
+  methods: {
+    async loginWithGithub() {
+      const { url } = await mothership.githubLogin();
+      window.location.href = url;
+    },
+    hideFlyout() {
+      this.showFlyout = false;
+    },
+    logout() {
+      window.localStorage.setItem('_mongooseStudioAccessToken', '');
+      window.location.reload();
+    },
+  },
+  directives: {
+    clickOutside: {
+      beforeMount(el, binding, vnode) {
+        el.clickOutsideEvent = (event) => {
+          let isOutside = true;
+          if (event.target === el || el.contains(event.target)) {
+            isOutside = false;
+          }
+          if (isOutside) {
+            binding.value.call();
+          }
+        };
+        document.body.addEventListener('click', el.clickOutsideEvent);
+      },
+      unmounted(el) {
+        document.body.removeEventListener('click', el.clickOutsideEvent);
+      }
+    }
   }
 });

package/frontend/src/splash/splash.html

@@ -0,0 +1,35 @@
+<div class="w-full h-full flex items-center justify-center">
+  <div class="text-center">
+    <div class="rounded-full bg-gray-100 p-6 inline-block">
+      <img src="images/logo.svg" class="w-48 h-48">
+    </div>
+    <div class="text-lg mt-2 font-bold">
+      Mongoose Studio
+    </div>
+    <div class="mt-2 text-gray-700">
+      {{workspaceName}}
+    </div>
+    <div class="mt-4">
+      <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>
+    <div class="mt-4" v-if="error">
+      <div class="rounded-md bg-red-50 p-4">
+        <div class="flex">
+          <div class="shrink-0">
+            <svg class="size-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+              <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" />
+            </svg>
+          </div>
+          <div class="ml-3">
+            <h3 class="text-sm font-medium text-red-800">{{error}}</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/frontend/src/splash/splash.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const mothership = require('../mothership');
+const template = require('./splash.html');
+
+module.exports = app => app.component('splash', {
+  template,
+  inject: ['state'],
+  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();
+      window.location.href = url;
+    }
+  }
+});

package/package.json

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

package/tailwind.config.js

@@ -36,20 +36,46 @@ module.exports = {
           '900': '#0a5757',
           '950': '#003235',
         },
-        'navy-blue': {
-          '50': '#f1f4ff',
-          '100': '#e5e8ff',
-          '200': '#ced5ff',
-          '300': '#a7b1ff',
-          '400': '#767fff',
-          '500': '#3f42ff',
-          '600': '#2118ff',
-          '700': '#1007fa',
-          '800': '#0d05d2',
-          '900': '#0c06ac',
-          '950': '#000088',
+        'ultramarine': {
+            '50': '#f1f5ff',
+            '100': '#e5eaff',
+            '200': '#cedaff',
+            '300': '#a7b9ff',
+            '400': '#768cff',
+            '500': '#3f53ff',
+            '600': '#1823ff',
+            '700': '#0713fa',
+            '800': '#0510d2',
+            '900': '#060eac',
+            '950': '#000c87',
         },
-      } 
+        'forest-green': {
+            '50': '#ecfff1',
+            '100': '#d3ffe0',
+            '200': '#aaffc3',
+            '300': '#69ff95',
+            '400': '#21ff5f',
+            '500': '#00f23a',
+            '600': '#00ca2c',
+            '700': '#009e25',
+            '800': '#008726',
+            '900': '#02651f',
+            '950': '#00390e',
+        },
+        'valencia': {
+            '50': '#fdf3f3',
+            '100': '#fbe5e5',
+            '200': '#f9cfcf',
+            '300': '#f3aeae',
+            '400': '#eb7e7e',
+            '500': '#dc4949',
+            '600': '#ca3838',
+            '700': '#aa2b2b',
+            '800': '#8d2727',
+            '900': '#752727',
+            '950': '#3f1010',
+        }
+      }
     }
   }
-};
+};