diff --git a/packages/backend/src/apps/trello/assets/favicon.svg b/packages/backend/src/apps/trello/assets/favicon.svg new file mode 100644 index 00000000..7c63adb9 --- /dev/null +++ b/packages/backend/src/apps/trello/assets/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/backend/src/apps/trello/auth/generate-auth-url.ts b/packages/backend/src/apps/trello/auth/generate-auth-url.ts new file mode 100644 index 00000000..9443c608 --- /dev/null +++ b/packages/backend/src/apps/trello/auth/generate-auth-url.ts @@ -0,0 +1,23 @@ +import { IField, IGlobalVariable } from '@automatisch/types'; +import { URLSearchParams } from 'url'; +import authScope from '../common/auth-scope'; + +export default async function generateAuthUrl($: IGlobalVariable) { + const oauthRedirectUrlField = $.app.auth.fields.find( + (field: IField) => field.key == 'oAuthRedirectUrl' + ); + const redirectUri = oauthRedirectUrlField.value as string; + const searchParams = new URLSearchParams({ + return_url: redirectUri, + scope: authScope.join(','), + expiration: 'never', + key: $.auth.data.apiKey as string, + response_type: 'token', + }); + + const url = `https://trello.com/1/authorize?${searchParams.toString()}`; + + await $.auth.set({ + url, + }); +} diff --git a/packages/backend/src/apps/trello/auth/index.ts b/packages/backend/src/apps/trello/auth/index.ts new file mode 100644 index 00000000..e5dd68d3 --- /dev/null +++ b/packages/backend/src/apps/trello/auth/index.ts @@ -0,0 +1,34 @@ +import generateAuthUrl from './generate-auth-url'; +import verifyCredentials from './verify-credentials'; +import isStillVerified from './is-still-verified'; + +export default { + fields: [ + { + key: 'oAuthRedirectUrl', + label: 'OAuth Redirect URL', + type: 'string' as const, + required: true, + readOnly: true, + value: '{WEB_APP_URL}/app/trello/connections/add', + placeholder: null, + description: '', + clickToCopy: true, + }, + { + key: 'apiKey', + label: 'API Key', + type: 'string' as const, + required: true, + readOnly: false, + value: null, + placeholder: null, + description: 'API Key for your Trello account', + clickToCopy: false, + }, + ], + + generateAuthUrl, + verifyCredentials, + isStillVerified, +}; diff --git a/packages/backend/src/apps/trello/auth/is-still-verified.ts b/packages/backend/src/apps/trello/auth/is-still-verified.ts new file mode 100644 index 00000000..66bb963e --- /dev/null +++ b/packages/backend/src/apps/trello/auth/is-still-verified.ts @@ -0,0 +1,9 @@ +import { IGlobalVariable } from '@automatisch/types'; +import verifyCredentials from './verify-credentials'; + +const isStillVerified = async ($: IGlobalVariable) => { + await verifyCredentials($); + return true; +}; + +export default isStillVerified; diff --git a/packages/backend/src/apps/trello/auth/verify-credentials.ts b/packages/backend/src/apps/trello/auth/verify-credentials.ts new file mode 100644 index 00000000..eb463523 --- /dev/null +++ b/packages/backend/src/apps/trello/auth/verify-credentials.ts @@ -0,0 +1,15 @@ +import { IGlobalVariable } from '@automatisch/types'; +import getCurrentUser from '../common/get-current-user'; + +const verifyCredentials = async ($: IGlobalVariable) => { + const currentUser = await getCurrentUser($); + const screenName = [currentUser.username, currentUser.email] + .filter(Boolean) + .join(' @ '); + + await $.auth.set({ + screenName, + }); +}; + +export default verifyCredentials; diff --git a/packages/backend/src/apps/trello/common/add-auth-header.ts b/packages/backend/src/apps/trello/common/add-auth-header.ts new file mode 100644 index 00000000..95cce958 --- /dev/null +++ b/packages/backend/src/apps/trello/common/add-auth-header.ts @@ -0,0 +1,11 @@ +import { TBeforeRequest } from '@automatisch/types'; + +const addAuthHeader: TBeforeRequest = ($, requestConfig) => { + if ($.auth.data?.token) { + requestConfig.headers.Authorization = `OAuth oauth_consumer_key="${$.auth.data.apiKey}", oauth_token="${$.auth.data.token}"`; + } + + return requestConfig; +}; + +export default addAuthHeader; diff --git a/packages/backend/src/apps/trello/common/auth-scope.ts b/packages/backend/src/apps/trello/common/auth-scope.ts new file mode 100644 index 00000000..785ad4ea --- /dev/null +++ b/packages/backend/src/apps/trello/common/auth-scope.ts @@ -0,0 +1,3 @@ +const authScope: string[] = ['read', 'write', 'account']; + +export default authScope; diff --git a/packages/backend/src/apps/trello/common/get-current-user.ts b/packages/backend/src/apps/trello/common/get-current-user.ts new file mode 100644 index 00000000..64b0daa1 --- /dev/null +++ b/packages/backend/src/apps/trello/common/get-current-user.ts @@ -0,0 +1,10 @@ +import { IGlobalVariable, IJSONObject } from '@automatisch/types'; + +const getCurrentUser = async ($: IGlobalVariable): Promise => { + const response = await $.http.get('/1/members/me/'); + const currentUser = response.data; + + return currentUser; +}; + +export default getCurrentUser; diff --git a/packages/backend/src/apps/trello/index.d.ts b/packages/backend/src/apps/trello/index.d.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/backend/src/apps/trello/index.ts b/packages/backend/src/apps/trello/index.ts new file mode 100644 index 00000000..e6b54d85 --- /dev/null +++ b/packages/backend/src/apps/trello/index.ts @@ -0,0 +1,16 @@ +import defineApp from '../../helpers/define-app'; +import addAuthHeader from './common/add-auth-header'; +import auth from './auth'; + +export default defineApp({ + name: 'Trello', + key: 'trello', + baseUrl: 'https://trello.com/', + apiBaseUrl: 'https://api.trello.com', + iconUrl: '{BASE_URL}/apps/trello/assets/favicon.svg', + authDocUrl: 'https://automatisch.io/docs/apps/trello/connection', + supportsConnections: true, + primaryColor: '0079bf', + beforeRequest: [addAuthHeader], + auth, +}); diff --git a/packages/docs/pages/.vitepress/config.js b/packages/docs/pages/.vitepress/config.js index 8fe263df..29b9b2fb 100644 --- a/packages/docs/pages/.vitepress/config.js +++ b/packages/docs/pages/.vitepress/config.js @@ -373,6 +373,12 @@ export default defineConfig({ { text: 'Connection', link: '/apps/todoist/connection' }, ], }, + { + text: 'Trello', + collapsible: true, + collapsed: true, + items: [{ text: 'Connection', link: '/apps/trello/connection' }], + }, { text: 'Twilio', collapsible: true, diff --git a/packages/docs/pages/apps/trello/connection.md b/packages/docs/pages/apps/trello/connection.md new file mode 100644 index 00000000..8a60acc9 --- /dev/null +++ b/packages/docs/pages/apps/trello/connection.md @@ -0,0 +1,16 @@ +# Trello + +:::info +This page explains the steps you need to follow to set up the Trello +connection in Automatisch. If any of the steps are outdated, please let us know! +::: + +1. Go to the [link](https://trello.com/power-ups/admin) in order to create a Trello Power-Up. +2. Click on the **New** button. +3. Fill the form fields and click the **Create** button. +4. Click on the **Generate a new API key** button. +5. A popup will open. Click the **Generate a new API key** button again. +6. Copy **OAuth Redirect URL** from Automatisch and paste it in **Allowed origins** and click on the **Add** button. +7. Copy the **API key** value to the **API key** field on Automatisch. +8. Click **Submit** button on Automatisch. +9. Congrats! Start using your new Trello connection within the flows. diff --git a/packages/docs/pages/public/favicons/trello.svg b/packages/docs/pages/public/favicons/trello.svg new file mode 100644 index 00000000..7c63adb9 --- /dev/null +++ b/packages/docs/pages/public/favicons/trello.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web/src/components/AddAppConnection/index.tsx b/packages/web/src/components/AddAppConnection/index.tsx index 2a9e64e0..6908c7e3 100644 --- a/packages/web/src/components/AddAppConnection/index.tsx +++ b/packages/web/src/components/AddAppConnection/index.tsx @@ -47,7 +47,7 @@ export default function AddAppConnection( if (window.opener) { window.opener.postMessage({ source: 'automatisch', - payload: window.location.search, + payload: { search: window.location.search, hash: window.location.hash }, }); window.close(); } diff --git a/packages/web/src/helpers/authenticationSteps.ts b/packages/web/src/helpers/authenticationSteps.ts index ef1a1207..31f57023 100644 --- a/packages/web/src/helpers/authenticationSteps.ts +++ b/packages/web/src/helpers/authenticationSteps.ts @@ -25,9 +25,16 @@ const processMutation = async ( }; const parseUrlSearchParams = (event: any) => { - const searchParams = new URLSearchParams(event.data.payload); + const searchParams = new URLSearchParams(event.data.payload.search); + const hashParams = new URLSearchParams(event.data.payload.hash.substring(1)); - return getObjectOfEntries(searchParams.entries()); + const searchParamsObject = getObjectOfEntries(searchParams.entries()); + const hashParamsObject = getObjectOfEntries(hashParams.entries()); + + return { + ...hashParamsObject, + ...searchParamsObject, + }; }; function getObjectOfEntries(iterator: any) {