mirror of
https://github.com/Infisical/infisical.git
synced 2025-03-25 14:05:03 +00:00
Begin personal access token-based integrations
This commit is contained in:
Tuan Dang
100
frontend/components/basic/dialog/IntegrationAccessTokenDialog.js
Normal file
100
frontend/components/basic/dialog/IntegrationAccessTokenDialog.js
Normal file
@ -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 (
|
||||
<div>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={closeModal}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-70" />
|
||||
</Transition.Child>
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-gray-400"
|
||||
>
|
||||
Grant Infisical access to your secrets
|
||||
</Dialog.Title>
|
||||
<div className="mt-2 mb-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
Most cloud integrations require Infisical to be able to decrypt your secrets so they can be forwarded over.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-6 max-w-max">
|
||||
{/* <Button
|
||||
onButtonPressed={submit}
|
||||
color="mineshaft"
|
||||
text="Grant access"
|
||||
size="md"
|
||||
/> */}
|
||||
<InputField
|
||||
label="Access token"
|
||||
onChangeHandler={() => {}}
|
||||
type="varName"
|
||||
value={"Hello"}
|
||||
placeholder=""
|
||||
isRequired
|
||||
/>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IntegrationAccessTokenDialog;
|
||||
@ -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}
|
||||
/>
|
||||
<ActivateBotDialog
|
||||
isOpen={isActivateBotOpen}
|
||||
closeModal={() => setIsActivateBotOpen(false)}
|
||||
isOpen={isActivateBotDialogOpen}
|
||||
closeModal={() => setIsActivateBotDialogOpen(false)}
|
||||
selectedIntegrationOption={selectedIntegrationOption}
|
||||
handleBotActivate={handleBotActivate}
|
||||
handleIntegrationOption={handleIntegrationOption}
|
||||
/>
|
||||
<IntegrationAccessTokenDialog
|
||||
isOpen={isIntegrationAccessTokenDialogOpen}
|
||||
closeModal={() => setIntegrationAccessTokenDialogOpen(false)}
|
||||
selectedIntegrationOption={selectedIntegrationOption}
|
||||
handleBotActivate={handleBotActivate}
|
||||
handleIntegrationOption={handleIntegrationOption}
|
||||
|
||||
@ -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": ""
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user