Google Sheet - OAuth "client" powered integrations (#415)

* fix `helpers.php`

* fix `.eslintrc.cjs`

* spreadsheet manager

* fetch providers. set `oauth_id` for integrations

* create spreadsheet on integration create event

* connect OAuth accounts

* display actions. connect account if missing

* cleanup

* handle form field change

* map integration data object to `SpreadsheetData`

* validate request

* wip

* redirect to integrations page

* fix refresh token

* add helper text

* add extra integration info

* refactor

* refresh google token

* fix validation

* add tests

* Fix linting issue

* Update composer lock file

---------

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

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

@@ -84,6 +84,8 @@ useOpnSeoMeta({
 
 const alert = useAlert()
 
+const oAuthProvidersStore = useOAuthProvidersStore()
+
 const formIntegrationsStore = useFormIntegrationsStore()
 const integrationsLoading = computed(() => formIntegrationsStore.loading)
 const integrations = computed(
@@ -102,6 +104,7 @@ const selectedIntegration = ref(null)
 
 onMounted(() => {
   formIntegrationsStore.fetchFormIntegrations(props.form.id)
+  oAuthProvidersStore.fetchOAuthProviders(props.form.workspace_id)
 })
 
 const openIntegrationModal = (itemKey) => {

client/pages/settings.vue

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

client/pages/settings/connections.vue

@@ -0,0 +1,116 @@
+<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">
+          Connections
+        </h3>
+        <small class="text-gray-600">Manage your external connections.</small>
+      </div>
+      <v-button
+        color="outline-blue"
+        :loading="loading"
+        @click="providerModal = true"
+      >
+        <svg
+          class="inline -mt-1 mr-1 h-4 w-4"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.99996 1.16699V12.8337M1.16663 7.00033H12.8333"
+            stroke="currentColor"
+            stroke-width="1.67"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        Connect new account
+      </v-button>
+    </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">
+      <SettingsProviderCard
+        v-for="provider in providers"
+        :key="provider.id"
+        :provider="provider"
+      />
+    </div>
+
+    <SettingsProviderModal
+      :show="providerModal"
+      @close="providerModal = false"
+    />
+  </div>
+</template>
+
+<script setup>
+useOpnSeoMeta({
+  title: "Connections",
+})
+
+definePageMeta({
+  middleware: "auth",
+  alias: [
+    '/settings/connections/callback/:service'
+  ]
+})
+
+const router = useRouter()
+const route = useRoute()
+const alert = useAlert()
+
+const providerModal = ref(false)
+const providersStore = useOAuthProvidersStore()
+const providers = computed(() => providersStore.getAll)
+const loading = computed(() => providersStore.loading)
+
+function handleCallback() {
+  const code = route.query.code
+  const service = route.params.service
+
+  if(!code || !service) {
+    router.push('/settings/connections')
+
+    return
+  }
+
+  opnFetch(`/settings/providers/callback/${service}`, {
+    method: 'POST',
+    params: {
+      code
+    }
+  })
+    .then((data) => {
+      if(!data.intention) {
+        router.push('/settings/connections')
+      }
+      else {
+        router.push(data.intention)
+      }
+    })
+    .catch((error) => {
+      try {
+        alert.error(error.data.message)
+      } catch (e) {
+        alert.error("An error occurred while connecting an account")
+      }
+
+      router.push('/settings/connections')
+    })
+}
+
+onMounted(() => {
+  handleCallback()
+
+  providersStore.fetchOAuthProviders()
+})
+</script>