Zapier integration (#491)

* create zapier app

* install sanctum

* move OAuthProviderController

* make `api-external` middleware

* add zapier endpoints

* add tests

* token management

* zapier event handler

* add policy

* use `slug` instead of `id`

* wip

* check policies

* change api prefix to `external`

* ui tweaks

* validate token abilities

* open zapier URL

* zapier ui tweaks

* update zap

* Fix linting

* Added sample endpoints + minor UI changes

* Run PHP code linter

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/pages/forms/[slug]/show/integrations/index.vue

@@ -49,7 +49,7 @@
             v-for="(sectionItem, sectionItemKey) in section"
             :key="sectionItemKey"
             :integration="sectionItem"
-            @select="openIntegrationModal"
+            @select="openIntegration"
           />
         </div>
       </div>
@@ -107,11 +107,22 @@ onMounted(() => {
   oAuthProvidersStore.fetchOAuthProviders(props.form.workspace_id)
 })
 
-const openIntegrationModal = (itemKey) => {
-  if (!itemKey || !integrations.value.has(itemKey))
+const openIntegration = (itemKey) => {
+  if (!itemKey || !integrations.value.has(itemKey)) {
     return alert.error("Integration not found")
-  if (integrations.value.get(itemKey).coming_soon)
+  }
+
+  const integration = integrations.value.get(itemKey)
+
+  if (integration.coming_soon) {
     return alert.warning("This integration is not available yet")
+  }
+
+  if(integration.is_external && integration.url) {
+    window.open(integration.url, '_blank')
+    return
+  }
+
   selectedIntegrationKey.value = itemKey
   selectedIntegration.value = integrations.value.get(
     selectedIntegrationKey.value,

client/pages/settings.vue

@@ -66,6 +66,10 @@ const tabsList = computed(() => {
       name: "Workspace Settings",
       route: "settings-workspace",
     },
+    {
+      name: "Access Tokens",
+      route: "settings-access-tokens",
+    },
     {
       name: "Connections",
       route: "settings-connections",

client/pages/settings/access-tokens.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div class="flex items-center gap-y-4 flex-wrap-reverse">
+      <div class="flex-grow">
+        <h3 class="font-semibold text-2xl text-gray-900">
+          Access Tokens
+        </h3>
+        <small class="text-gray-600">Manage your access tokens keys.</small>
+      </div>
+
+      <UButton
+        label="Create new token"
+        icon="i-heroicons-plus"
+        :loading="loading"
+        @click="accessTokenModal = true"
+      />
+    </div>
+
+    <div
+      v-if="loading"
+      class="w-full text-blue-500 text-center"
+    >
+      <Loader class="h-10 w-10 p-5" />
+    </div>
+
+    <div class="py-6">
+      <SettingsAccessTokenCard
+        v-for="token in tokens"
+        :key="token.id"
+        :token="token"
+      />
+    </div>
+
+    <SettingsAccessTokenModal
+      :show="accessTokenModal"
+      @close="accessTokenModal = false"
+    />
+  </div>
+</template>
+
+<script setup>
+useOpnSeoMeta({
+  title: "Access Tokens",
+})
+
+const accessTokenModal = ref(false)
+const accessTokenStore = useAccessTokenStore()
+const tokens = computed(() => accessTokenStore.getAll)
+const loading = computed(() => accessTokenStore.loading)
+
+onMounted(() => {
+  accessTokenStore.fetchTokens()
+})
+</script>