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>
This commit is contained in:
Boris Lepikhin
GitHub
@@ -5,7 +5,39 @@
|
||||
:form="form"
|
||||
>
|
||||
<div class="my-5">
|
||||
Coming Soon...
|
||||
<select-input
|
||||
v-if="providers.length"
|
||||
v-model="integrationData.oauth_id"
|
||||
name="provider"
|
||||
:options="providers"
|
||||
option-key="id"
|
||||
emit-key="id"
|
||||
:required="true"
|
||||
label="Select Google Account"
|
||||
>
|
||||
<template #help>
|
||||
<InputHelp>
|
||||
<span>
|
||||
Add an entry to spreadsheets on each form submission.
|
||||
<NuxtLink
|
||||
:to="{ name: 'settings-connections' }"
|
||||
>
|
||||
Click here
|
||||
</NuxtLink>
|
||||
to connect another account.
|
||||
</span>
|
||||
</InputHelp>
|
||||
</template>
|
||||
</select-input>
|
||||
|
||||
<v-button
|
||||
v-else
|
||||
color="white"
|
||||
:loading="providersStore.loading"
|
||||
@click.prevent="connect"
|
||||
>
|
||||
Connect Google account
|
||||
</v-button>
|
||||
</div>
|
||||
</IntegrationWrapper>
|
||||
</template>
|
||||
@@ -19,4 +51,11 @@ const props = defineProps({
|
||||
integrationData: { type: Object, required: true },
|
||||
formIntegrationId: { type: Number, required: false, default: null },
|
||||
})
|
||||
|
||||
const providersStore = useOAuthProvidersStore()
|
||||
const providers = computed(() => providersStore.getAll.filter(provider => provider.provider == 'google'))
|
||||
|
||||
function connect() {
|
||||
providersStore.connect('google', true)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="flex flex-1 items-center">
|
||||
<div class="space-y-1">
|
||||
<div class="font-medium mr-2">
|
||||
{{ integration.provider.user.name }}
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
{{ integration.provider.user.email }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto">
|
||||
<v-button
|
||||
:href="integration.data.url"
|
||||
target="_blank"
|
||||
color="white"
|
||||
>
|
||||
Open spreadsheet
|
||||
</v-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
integration: Object,
|
||||
})
|
||||
</script>
|
||||
@@ -2,7 +2,7 @@
|
||||
<div
|
||||
class="text-gray-500 border shadow rounded-md p-5 mt-4 relative flex items-center"
|
||||
>
|
||||
<div class="flex-grow flex items-center">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="mr-4"
|
||||
:class="{
|
||||
@@ -32,97 +32,106 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="loadingDelete"
|
||||
class="pr-4 pt-2"
|
||||
>
|
||||
<Loader class="h-6 w-6 mx-auto" />
|
||||
</div>
|
||||
<dropdown
|
||||
v-else
|
||||
class="inline"
|
||||
>
|
||||
<template #trigger="{ toggle }">
|
||||
<v-button
|
||||
color="white"
|
||||
@click="toggle"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 inline -mt-1"
|
||||
viewBox="0 0 16 4"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.00016 2.83366C8.4604 2.83366 8.8335 2.46056 8.8335 2.00033C8.8335 1.54009 8.4604 1.16699 8.00016 1.16699C7.53993 1.16699 7.16683 1.54009 7.16683 2.00033C7.16683 2.46056 7.53993 2.83366 8.00016 2.83366Z"
|
||||
stroke="#344054"
|
||||
stroke-width="1.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.8335 2.83366C14.2937 2.83366 14.6668 2.46056 14.6668 2.00033C14.6668 1.54009 14.2937 1.16699 13.8335 1.16699C13.3733 1.16699 13.0002 1.54009 13.0002 2.00033C13.0002 2.46056 13.3733 2.83366 13.8335 2.83366Z"
|
||||
stroke="#344054"
|
||||
stroke-width="1.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2.16683 2.83366C2.62707 2.83366 3.00016 2.46056 3.00016 2.00033C3.00016 1.54009 2.62707 1.16699 2.16683 1.16699C1.70659 1.16699 1.3335 1.54009 1.3335 2.00033C1.3335 2.46056 1.70659 2.83366 2.16683 2.83366Z"
|
||||
stroke="#344054"
|
||||
stroke-width="1.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</v-button>
|
||||
</template>
|
||||
<a
|
||||
v-track.edit_form_integration_click="{
|
||||
form_slug: form.slug,
|
||||
form_integration_id: integration.id,
|
||||
}"
|
||||
href="#"
|
||||
class="flex px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:no-underline hover:text-gray-900 items-center"
|
||||
@click.prevent="showIntegrationModal = true"
|
||||
>
|
||||
<Icon
|
||||
name="heroicons:pencil"
|
||||
class="w-5 h-5 mr-2"
|
||||
/>
|
||||
Edit
|
||||
</a>
|
||||
<a
|
||||
v-track.past_events_form_integration_click="{
|
||||
form_slug: form.slug,
|
||||
form_integration_id: integration.id,
|
||||
}"
|
||||
href="#"
|
||||
class="flex px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:no-underline hover:text-gray-900 items-center"
|
||||
@click.prevent="showIntegrationEventsModal = true"
|
||||
>
|
||||
<Icon
|
||||
name="heroicons:clock"
|
||||
class="w-5 h-5 mr-2"
|
||||
/>
|
||||
Past Events
|
||||
</a>
|
||||
<a
|
||||
v-track.delete_form_integration_click="{
|
||||
form_integration_id: integration.id,
|
||||
}"
|
||||
href="#"
|
||||
class="flex px-4 py-2 text-md text-red-600 hover:bg-red-50 hover:no-underline items-center"
|
||||
@click.prevent="deleteFormIntegration(integration.id)"
|
||||
>
|
||||
<Icon
|
||||
name="heroicons:trash"
|
||||
class="w-5 h-5 mr-2"
|
||||
/>
|
||||
<div class="grow flex items-center gap-4 pl-4">
|
||||
<component
|
||||
:is="actionsComponent"
|
||||
v-if="actionsComponent"
|
||||
:integration="integration"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="loadingDelete"
|
||||
class="pr-4 pt-2 ml-auto"
|
||||
>
|
||||
<Loader class="h-6 w-6 mx-auto" />
|
||||
</div>
|
||||
<dropdown
|
||||
v-else
|
||||
class="inline"
|
||||
>
|
||||
<template #trigger="{ toggle }">
|
||||
<v-button
|
||||
color="white"
|
||||
@click="toggle"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 inline -mt-1"
|
||||
viewBox="0 0 16 4"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.00016 2.83366C8.4604 2.83366 8.8335 2.46056 8.8335 2.00033C8.8335 1.54009 8.4604 1.16699 8.00016 1.16699C7.53993 1.16699 7.16683 1.54009 7.16683 2.00033C7.16683 2.46056 7.53993 2.83366 8.00016 2.83366Z"
|
||||
stroke="#344054"
|
||||
stroke-width="1.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.8335 2.83366C14.2937 2.83366 14.6668 2.46056 14.6668 2.00033C14.6668 1.54009 14.2937 1.16699 13.8335 1.16699C13.3733 1.16699 13.0002 1.54009 13.0002 2.00033C13.0002 2.46056 13.3733 2.83366 13.8335 2.83366Z"
|
||||
stroke="#344054"
|
||||
stroke-width="1.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2.16683 2.83366C2.62707 2.83366 3.00016 2.46056 3.00016 2.00033C3.00016 1.54009 2.62707 1.16699 2.16683 1.16699C1.70659 1.16699 1.3335 1.54009 1.3335 2.00033C1.3335 2.46056 1.70659 2.83366 2.16683 2.83366Z"
|
||||
stroke="#344054"
|
||||
stroke-width="1.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</v-button>
|
||||
</template>
|
||||
<a
|
||||
v-track.edit_form_integration_click="{
|
||||
form_slug: form.slug,
|
||||
form_integration_id: integration.id,
|
||||
}"
|
||||
href="#"
|
||||
class="flex px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:no-underline hover:text-gray-900 items-center"
|
||||
@click.prevent="showIntegrationModal = true"
|
||||
>
|
||||
<Icon
|
||||
name="heroicons:pencil"
|
||||
class="w-5 h-5 mr-2"
|
||||
/>
|
||||
Edit
|
||||
</a>
|
||||
<a
|
||||
v-track.past_events_form_integration_click="{
|
||||
form_slug: form.slug,
|
||||
form_integration_id: integration.id,
|
||||
}"
|
||||
href="#"
|
||||
class="flex px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:no-underline hover:text-gray-900 items-center"
|
||||
@click.prevent="showIntegrationEventsModal = true"
|
||||
>
|
||||
<Icon
|
||||
name="heroicons:clock"
|
||||
class="w-5 h-5 mr-2"
|
||||
/>
|
||||
Past Events
|
||||
</a>
|
||||
<a
|
||||
v-track.delete_form_integration_click="{
|
||||
form_integration_id: integration.id,
|
||||
}"
|
||||
href="#"
|
||||
class="flex px-4 py-2 text-md text-red-600 hover:bg-red-50 hover:no-underline items-center"
|
||||
@click.prevent="deleteFormIntegration(integration.id)"
|
||||
>
|
||||
<Icon
|
||||
name="heroicons:trash"
|
||||
class="w-5 h-5 mr-2"
|
||||
/>
|
||||
|
||||
Delete Integration
|
||||
</a>
|
||||
</dropdown>
|
||||
</div>
|
||||
|
||||
Delete Integration
|
||||
</a>
|
||||
</dropdown>
|
||||
<IntegrationModal
|
||||
v-if="form && integration && integrationTypeInfo"
|
||||
:form="form"
|
||||
@@ -170,6 +179,14 @@ const showIntegrationModal = ref(false)
|
||||
const showIntegrationEventsModal = ref(false)
|
||||
const loadingDelete = ref(false)
|
||||
|
||||
const actionsComponent = computed(() => {
|
||||
if(integrationTypeInfo.value.actions_file_name) {
|
||||
return resolveComponent(integrationTypeInfo.value.actions_file_name)
|
||||
}
|
||||
|
||||
return null
|
||||
})
|
||||
|
||||
const deleteFormIntegration = (integrationid) => {
|
||||
alert.confirm("Do you really want to delete this form integration?", () => {
|
||||
opnFetch(
|
||||
|
||||
@@ -51,6 +51,7 @@ const props = defineProps({
|
||||
integrationKey: { type: String, required: true },
|
||||
integration: { type: Object, required: true },
|
||||
formIntegrationId: { type: Number, required: false, default: null },
|
||||
providers: { type: Array, required: true }
|
||||
})
|
||||
|
||||
const alert = useAlert()
|
||||
@@ -92,6 +93,7 @@ const initIntegrationData = () => {
|
||||
? formIntegration.value.logic
|
||||
: null
|
||||
: null,
|
||||
oauth_id: formIntegration.value?.oauth_id ?? null,
|
||||
})
|
||||
}
|
||||
initIntegrationData()
|
||||
|
||||
109
client/components/settings/ProviderCard.vue
Normal file
109
client/components/settings/ProviderCard.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div
|
||||
class="text-gray-500 border shadow rounded-md p-5 mt-4 relative flex items-center"
|
||||
>
|
||||
<div class="flex-grow flex items-center">
|
||||
<div
|
||||
class="mr-4 text-blue-500"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:google"
|
||||
size="32px"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex space-x-3 font-semibold mr-2">
|
||||
{{ provider.name }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ provider.email }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<dropdown
|
||||
class="inline"
|
||||
>
|
||||
<template #trigger="{ toggle }">
|
||||
<v-button
|
||||
color="white"
|
||||
@click="toggle"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 inline -mt-1"
|
||||
viewBox="0 0 16 4"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.00016 2.83366C8.4604 2.83366 8.8335 2.46056 8.8335 2.00033C8.8335 1.54009 8.4604 1.16699 8.00016 1.16699C7.53993 1.16699 7.16683 1.54009 7.16683 2.00033C7.16683 2.46056 7.53993 2.83366 8.00016 2.83366Z"
|
||||
stroke="#344054"
|
||||
stroke-width="1.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.8335 2.83366C14.2937 2.83366 14.6668 2.46056 14.6668 2.00033C14.6668 1.54009 14.2937 1.16699 13.8335 1.16699C13.3733 1.16699 13.0002 1.54009 13.0002 2.00033C13.0002 2.46056 13.3733 2.83366 13.8335 2.83366Z"
|
||||
stroke="#344054"
|
||||
stroke-width="1.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2.16683 2.83366C2.62707 2.83366 3.00016 2.46056 3.00016 2.00033C3.00016 1.54009 2.62707 1.16699 2.16683 1.16699C1.70659 1.16699 1.3335 1.54009 1.3335 2.00033C1.3335 2.46056 1.70659 2.83366 2.16683 2.83366Z"
|
||||
stroke="#344054"
|
||||
stroke-width="1.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</v-button>
|
||||
</template>
|
||||
<a
|
||||
v-track.delete_provider_click="{
|
||||
provider_id: provider.id,
|
||||
}"
|
||||
href="#"
|
||||
class="flex px-4 py-2 text-md text-red-600 hover:bg-red-50 hover:no-underline items-center"
|
||||
@click.prevent="disconnect"
|
||||
>
|
||||
<Icon
|
||||
name="heroicons:trash"
|
||||
class="w-5 h-5 mr-2"
|
||||
/>
|
||||
|
||||
Disconnect
|
||||
</a>
|
||||
</dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
provider: Object
|
||||
})
|
||||
|
||||
const providersStore = useOAuthProvidersStore()
|
||||
const alert = useAlert()
|
||||
|
||||
function disconnect() {
|
||||
alert.confirm("Do you really want to disconnect this account?", () => {
|
||||
opnFetch(`/settings/providers/${props.provider.id}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
.then(() => {
|
||||
providersStore.remove(props.provider.id)
|
||||
})
|
||||
.catch((error) => {
|
||||
try {
|
||||
alert.error(error.data.message)
|
||||
} catch (e) {
|
||||
alert.error("An error occurred while disconnecting an account")
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
81
client/components/settings/ProviderModal.vue
Normal file
81
client/components/settings/ProviderModal.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<modal
|
||||
:show="show"
|
||||
max-width="lg"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<template #icon>
|
||||
<svg
|
||||
class="w-8 h-8"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 8V16M8 12H16M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<template #title>
|
||||
Connect account
|
||||
</template>
|
||||
|
||||
<div class="px-4">
|
||||
<div
|
||||
v-for="service in services"
|
||||
:key="service.name"
|
||||
role="button"
|
||||
class="bg-gray-50 border border-gray-200 rounded-md transition-colors p-4 pb-2 items-center justify-center w-[170px] h-[110px] flex flex-col relative"
|
||||
:class="{
|
||||
'hover:bg-blue-50 group cursor-pointer': service.enabled,
|
||||
'cursor-not-allowed': !service.enabled,
|
||||
}"
|
||||
@click="connect(service)"
|
||||
>
|
||||
<div class="flex justify-center">
|
||||
<div class="h-10 w-10 text-gray-500 group-hover:text-blue-500 transition-colors flex items-center">
|
||||
<Icon
|
||||
:name="service.icon"
|
||||
class=""
|
||||
size="40px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow flex items-center">
|
||||
<div class="text-gray-400 font-medium text-sm text-center">
|
||||
{{ service.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
show: Boolean
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const providersStore = useOAuthProvidersStore()
|
||||
|
||||
const services = [
|
||||
{
|
||||
name: 'google',
|
||||
title: 'Google',
|
||||
icon: 'mdi:google',
|
||||
enabled: true
|
||||
},
|
||||
]
|
||||
|
||||
function connect(service) {
|
||||
providersStore.connect(service.name)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user