From 36300cd19dfb3636a4397b2542bde7f21f4e1c9c Mon Sep 17 00:00:00 2001 From: Tuan Dang Date: Fri, 16 Dec 2022 15:44:50 -0500 Subject: [PATCH] Begin personal access token-based integrations --- .../dialog/IntegrationAccessTokenDialog.js | 100 ++++++++++++++++++ frontend/pages/integrations/[id].js | 21 +++- frontend/public/json/cloudIntegrations.json | 33 ++++-- 3 files changed, 143 insertions(+), 11 deletions(-) create mode 100644 frontend/components/basic/dialog/IntegrationAccessTokenDialog.js diff --git a/frontend/components/basic/dialog/IntegrationAccessTokenDialog.js b/frontend/components/basic/dialog/IntegrationAccessTokenDialog.js new file mode 100644 index 0000000000..dca8d672bc --- /dev/null +++ b/frontend/components/basic/dialog/IntegrationAccessTokenDialog.js @@ -0,0 +1,100 @@ +import { Fragment } from "react"; +import { Dialog, Transition } from "@headlessui/react"; +import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey"; +import setBotActiveStatus from "../../../pages/api/bot/setBotActiveStatus"; +import { + decryptAssymmetric, + encryptAssymmetric +} from "../../utilities/cryptography/crypto"; +import Button from "../buttons/Button"; +import InputField from "../InputField"; + +const IntegrationAccessTokenDialog = ({ + isOpen, + closeModal, + selectedIntegrationOption, + handleBotActivate, + handleIntegrationOption +}) => { + + const submit = async () => { + try { + // 1. activate bot + await handleBotActivate(); + + // 2. start integration + await handleIntegrationOption({ + integrationOption: selectedIntegrationOption + }); + } catch (err) { + console.log(err); + } + + closeModal(); + } + + return ( +
+ + + +
+ +
+
+ + + + Grant Infisical access to your secrets + +
+

+ Most cloud integrations require Infisical to be able to decrypt your secrets so they can be forwarded over. +

+
+
+ {/*
+ + +
+
+
+ +
+ ); +} + +export default IntegrationAccessTokenDialog; \ No newline at end of file diff --git a/frontend/pages/integrations/[id].js b/frontend/pages/integrations/[id].js index 6ebf3888eb..46aec22204 100644 --- a/frontend/pages/integrations/[id].js +++ b/frontend/pages/integrations/[id].js @@ -15,6 +15,7 @@ import getBot from "../api/bot/getBot"; import setBotActiveStatus from "../api/bot/setBotActiveStatus"; import getLatestFileKey from "../api/workspace/getLatestFileKey"; import ActivateBotDialog from "~/components/basic/dialog/ActivateBotDialog"; +import IntegrationAccessTokenDialog from "~/components/basic/dialog/IntegrationAccessTokenDialog"; const { decryptAssymmetric, encryptAssymmetric @@ -27,7 +28,8 @@ export default function Integrations() { const [integrationAuths, setIntegrationAuths] = useState([]); const [integrations, setIntegrations] = useState([]); const [bot, setBot] = useState(null); - const [isActivateBotOpen, setIsActivateBotOpen] = useState(false); + const [isActivateBotDialogOpen, setIsActivateBotDialogOpen] = useState(false); + const [isIntegrationAccessTokenDialogOpen, setIntegrationAccessTokenDialogOpen] = useState(true); const [selectedIntegrationOption, setSelectedIntegrationOption] = useState(null); const router = useRouter(); @@ -120,6 +122,8 @@ export default function Integrations() { const state = crypto.randomBytes(16).toString("hex"); localStorage.setItem('latestCSRFToken', state); + // TODO: Add CircleCI, Render, Fly.io + switch (integrationOption.name) { case 'Heroku': window.location = `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`; @@ -130,6 +134,10 @@ export default function Integrations() { case 'Netlify': window.location = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${integrationOption.redirectURL}&state=${state}`; break; + case 'Fly.io': + console.log('fly.io'); + setIntegrationAccessTokenDialogOpen(true); + break; } } catch (err) { console.log(err); @@ -179,8 +187,15 @@ export default function Integrations() { isProjectRelated={true} /> setIsActivateBotOpen(false)} + isOpen={isActivateBotDialogOpen} + closeModal={() => setIsActivateBotDialogOpen(false)} + selectedIntegrationOption={selectedIntegrationOption} + handleBotActivate={handleBotActivate} + handleIntegrationOption={handleIntegrationOption} + /> + setIntegrationAccessTokenDialogOpen(false)} selectedIntegrationOption={selectedIntegrationOption} handleBotActivate={handleBotActivate} handleIntegrationOption={handleIntegrationOption} diff --git a/frontend/public/json/cloudIntegrations.json b/frontend/public/json/cloudIntegrations.json index aa988fb5f5..26ff79fc57 100644 --- a/frontend/public/json/cloudIntegrations.json +++ b/frontend/public/json/cloudIntegrations.json @@ -5,7 +5,8 @@ "image": "Heroku", "isAvailable": true, "type": "oauth2", - "clientId": "7b1311a1-1cb2-4938-8adf-f37a399ec41b" + "clientId": "7b1311a1-1cb2-4938-8adf-f37a399ec41b", + "docsLink": "" }, { "name": "Vercel", @@ -13,7 +14,8 @@ "image": "Vercel", "isAvailable": true, "type": "vercel", - "clientId": "" + "clientId": "", + "docsLink": "" }, { "name": "Netlify", @@ -22,7 +24,17 @@ "isAvailable": true, "type": "oauth2", "clientId": "fYWBhD3gt0pT62UIwYrlGRcy--pPVLYIQad6ORrES9o", - "redirectURL": "http://localhost:8080/netlify" + "redirectURL": "http://localhost:8080/netlify", + "docsLink": "" + }, + { + "name": "Fly.io", + "slug": "flyio", + "image": "Google Cloud Platform", + "isAvailable": true, + "type": "accessToken", + "clientId": "", + "docsLink": "" }, { "name": "Google Cloud Platform", @@ -30,7 +42,8 @@ "image": "Google Cloud Platform", "isAvailable": false, "type": "", - "clientId": "" + "clientId": "", + "docsLink": "" }, { "name": "Amazon Web Services", @@ -38,7 +51,8 @@ "image": "Amazon Web Services", "isAvailable": false, "type": "", - "clientId": "" + "clientId": "", + "docsLink": "" }, { "name": "Microsoft Azure", @@ -46,7 +60,8 @@ "image": "Microsoft Azure", "isAvailable": false, "type": "", - "clientId": "" + "clientId": "", + "docsLink": "" }, { "name": "Travis CI", @@ -54,7 +69,8 @@ "image": "Travis CI", "isAvailable": false, "type": "", - "clientId": "" + "clientId": "", + "docsLink": "" }, { "name": "Circle CI", @@ -62,6 +78,7 @@ "image": "Circle CI", "isAvailable": false, "type": "", - "clientId": "" + "clientId": "", + "docsLink": "" } ] \ No newline at end of file