mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-16 23:25:26 +00:00
Add ST V3 copy to clipboard, default to is active
This commit is contained in:
Tuan Dang
+15
-5
@@ -163,12 +163,22 @@ export const IntegrationsSection = ({
|
||||
</div>
|
||||
)}
|
||||
{((integration.integration === "checkly") || (integration.integration === "github")) && (
|
||||
<div className="ml-2 flex flex-col">
|
||||
<FormLabel label="Secret Suffix" />
|
||||
<div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
|
||||
{integration?.metadata?.secretSuffix || "-"}
|
||||
<>
|
||||
{integration.targetService && (
|
||||
<div className="ml-2">
|
||||
<FormLabel label="Group" />
|
||||
<div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
|
||||
{integration.targetService}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="ml-2">
|
||||
<FormLabel label="Secret Suffix" />
|
||||
<div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
|
||||
{integration?.metadata?.secretSuffix || "-"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex cursor-default items-center">
|
||||
|
||||
@@ -0,0 +1,407 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
faArrowsSpin,
|
||||
faExclamationTriangle,
|
||||
faFolder,
|
||||
faInfoCircle,
|
||||
faRotate,
|
||||
faTrash
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { formatDistance } from "date-fns";
|
||||
|
||||
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
||||
import { ProjectPermissionCan } from "@app/components/permissions";
|
||||
import {
|
||||
Button,
|
||||
DeleteActionModal,
|
||||
EmptyState,
|
||||
IconButton,
|
||||
Modal,
|
||||
ModalContent,
|
||||
Skeleton,
|
||||
Spinner,
|
||||
Table,
|
||||
TableContainer,
|
||||
TableSkeleton,
|
||||
TBody,
|
||||
Td,
|
||||
Th,
|
||||
THead,
|
||||
Tooltip,
|
||||
Tr,
|
||||
UpgradePlanModal
|
||||
} from "@app/components/v2";
|
||||
import {
|
||||
ProjectPermissionActions,
|
||||
ProjectPermissionSub,
|
||||
useProjectPermission,
|
||||
useSubscription,
|
||||
useWorkspace
|
||||
} from "@app/context";
|
||||
import { withProjectPermission } from "@app/hoc";
|
||||
import { usePopUp } from "@app/hooks";
|
||||
import {
|
||||
useDeleteSecretRotation,
|
||||
useGetSecretRotationProviders,
|
||||
useGetSecretRotations,
|
||||
useGetUserWsKey,
|
||||
useGetWorkspaceBot,
|
||||
useRestartSecretRotation,
|
||||
useUpdateBotActiveStatus
|
||||
} from "@app/hooks/api";
|
||||
import { TSecretRotationProvider } from "@app/hooks/api/types";
|
||||
|
||||
import { CreateRotationForm } from "./components/CreateRotationForm";
|
||||
import { generateBotKey } from "./SecretRotationPage.utils";
|
||||
|
||||
export const SecretRotationPage = withProjectPermission(
|
||||
() => {
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { t } = useTranslation();
|
||||
const permission = useProjectPermission();
|
||||
const { createNotification } = useNotificationContext();
|
||||
const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
|
||||
"createRotation",
|
||||
"activeBot",
|
||||
"deleteRotation",
|
||||
"upgradePlan"
|
||||
] as const);
|
||||
const workspaceId = currentWorkspace?._id || "";
|
||||
const canCreateRotation = permission.can(
|
||||
ProjectPermissionActions.Create,
|
||||
ProjectPermissionSub.SecretRotation
|
||||
);
|
||||
const { subscription } = useSubscription();
|
||||
|
||||
const { data: userWsKey } = useGetUserWsKey(workspaceId);
|
||||
|
||||
const { data: secretRotationProviders, isLoading: isRotationProviderLoading } =
|
||||
useGetSecretRotationProviders({ workspaceId });
|
||||
const { data: secretRotations, isLoading: isRotationLoading } = useGetSecretRotations({
|
||||
workspaceId,
|
||||
decryptFileKey: userWsKey!
|
||||
});
|
||||
|
||||
const {
|
||||
mutateAsync: deleteSecretRotation,
|
||||
variables: deleteSecretRotationVars,
|
||||
isLoading: isDeletingRotation
|
||||
} = useDeleteSecretRotation();
|
||||
const {
|
||||
mutateAsync: restartSecretRotation,
|
||||
variables: restartSecretRotationVar,
|
||||
isLoading: isRestartingRotation
|
||||
} = useRestartSecretRotation();
|
||||
|
||||
const { data: bot } = useGetWorkspaceBot(workspaceId);
|
||||
const { mutateAsync: updateBotActiveStatus } = useUpdateBotActiveStatus();
|
||||
|
||||
const isBotActive = Boolean(bot?.isActive);
|
||||
|
||||
const handleDeleteRotation = async () => {
|
||||
const { id } = popUp.deleteRotation.data as { id: string };
|
||||
try {
|
||||
await deleteSecretRotation({
|
||||
id,
|
||||
workspaceId
|
||||
});
|
||||
handlePopUpClose("deleteRotation");
|
||||
createNotification({
|
||||
type: "success",
|
||||
text: "Successfully removed rotation"
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Failed to remove rotation"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestartRotation = async (id: string) => {
|
||||
try {
|
||||
await restartSecretRotation({
|
||||
id,
|
||||
workspaceId
|
||||
});
|
||||
createNotification({
|
||||
type: "success",
|
||||
text: "Secret rotation initiated"
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Failed to restart rotation"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleUserAcceptBotCondition = async () => {
|
||||
const provider = popUp.activeBot?.data as TSecretRotationProvider;
|
||||
try {
|
||||
if (bot?._id) {
|
||||
const botKey = generateBotKey(bot.publicKey, userWsKey!);
|
||||
await updateBotActiveStatus({
|
||||
isActive: true,
|
||||
botId: bot._id,
|
||||
workspaceId,
|
||||
botKey
|
||||
});
|
||||
}
|
||||
handlePopUpOpen("createRotation", provider);
|
||||
handlePopUpClose("activeBot");
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Failed to create bot"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateRotation = async (provider: TSecretRotationProvider) => {
|
||||
if (subscription && !subscription?.secretRotation) {
|
||||
handlePopUpOpen("upgradePlan");
|
||||
return;
|
||||
}
|
||||
if (!canCreateRotation) {
|
||||
createNotification({ type: "error", text: "Access permission denied!!" });
|
||||
return;
|
||||
}
|
||||
if (isBotActive) {
|
||||
handlePopUpOpen("createRotation", provider);
|
||||
} else {
|
||||
handlePopUpOpen("activeBot", provider);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto bg-bunker-800 text-white w-full h-full max-w-7xl px-6">
|
||||
<div className="my-6">
|
||||
<h2 className="text-3xl font-semibold text-gray-200">Secret Rotation</h2>
|
||||
<p className="text-bunker-300">Auto rotate secrets for better security</p>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<div className="text-xl font-semibold text-gray-200 mb-2">Rotated Secrets</div>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<THead>
|
||||
<Tr>
|
||||
<Th>Secret Name</Th>
|
||||
<Th>Environment</Th>
|
||||
<Th>Provider</Th>
|
||||
<Th>Status</Th>
|
||||
<Th>Last Rotation</Th>
|
||||
<Th className="text-right">Action</Th>
|
||||
</Tr>
|
||||
</THead>
|
||||
<TBody>
|
||||
{isRotationLoading && (
|
||||
<TableSkeleton
|
||||
innerKey="secret-rotation-loading"
|
||||
columns={6}
|
||||
className="bg-mineshaft-700"
|
||||
/>
|
||||
)}
|
||||
{!isRotationLoading && secretRotations?.length === 0 && (
|
||||
<Tr>
|
||||
<Td colSpan={6}>
|
||||
<EmptyState title="No rotation strategy found" icon={faArrowsSpin} />
|
||||
</Td>
|
||||
</Tr>
|
||||
)}
|
||||
{secretRotations?.map(
|
||||
({
|
||||
environment,
|
||||
secretPath,
|
||||
outputs,
|
||||
provider,
|
||||
_id,
|
||||
lastRotatedAt,
|
||||
status,
|
||||
statusMessage
|
||||
}) => {
|
||||
const isDeleting = deleteSecretRotationVars?.id === _id && isDeletingRotation;
|
||||
const isRestarting =
|
||||
restartSecretRotationVar?.id === _id && isRestartingRotation;
|
||||
return (
|
||||
<Tr key={_id}>
|
||||
<Td>
|
||||
{outputs
|
||||
.map(({ key }) => key)
|
||||
.join(",")
|
||||
.toUpperCase()}
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex items-center border border-bunker-400 rounded p-1 px-2 w-min">
|
||||
<div>{environment}</div>
|
||||
<div className="flex items-center border-l border-bunker-400 pl-1 ml-1 text-xs">
|
||||
<FontAwesomeIcon icon={faFolder} className="mr-1" />
|
||||
{secretPath}
|
||||
</div>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>{provider}</Td>
|
||||
<Td>
|
||||
<div className="flex items-center">
|
||||
{status}
|
||||
{status === "failed" && (
|
||||
<Tooltip content={statusMessage}>
|
||||
<FontAwesomeIcon
|
||||
icon={faExclamationTriangle}
|
||||
size="sm"
|
||||
className="ml-2 text-red"
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
{lastRotatedAt
|
||||
? formatDistance(new Date(lastRotatedAt), new Date())
|
||||
: "-"}
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex space-x-2 justify-end">
|
||||
<ProjectPermissionCan
|
||||
I={ProjectPermissionActions.Edit}
|
||||
a={ProjectPermissionSub.SecretRotation}
|
||||
allowedLabel="Rotate now"
|
||||
renderTooltip
|
||||
>
|
||||
{(isAllowed) => (
|
||||
<IconButton
|
||||
variant="plain"
|
||||
colorSchema="danger"
|
||||
ariaLabel="delete-rotation"
|
||||
isDisabled={isDeleting || !isAllowed}
|
||||
onClick={() => handleRestartRotation(_id)}
|
||||
>
|
||||
{isRestarting ? (
|
||||
<Spinner size="xs" />
|
||||
) : (
|
||||
<FontAwesomeIcon icon={faRotate} />
|
||||
)}
|
||||
</IconButton>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
<ProjectPermissionCan
|
||||
I={ProjectPermissionActions.Delete}
|
||||
a={ProjectPermissionSub.SecretRotation}
|
||||
allowedLabel="Rotate now"
|
||||
renderTooltip
|
||||
>
|
||||
{(isAllowed) => (
|
||||
<IconButton
|
||||
variant="plain"
|
||||
colorSchema="danger"
|
||||
ariaLabel="delete-rotation"
|
||||
isDisabled={isDeleting || !isAllowed}
|
||||
onClick={() => handlePopUpOpen("deleteRotation", { id: _id })}
|
||||
>
|
||||
{isDeleting ? (
|
||||
<Spinner size="xs" />
|
||||
) : (
|
||||
<FontAwesomeIcon icon={faTrash} />
|
||||
)}
|
||||
</IconButton>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
</div>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</TBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xl font-semibold text-gray-200 mb-2">Infisical Rotation Providers</div>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
|
||||
{isRotationProviderLoading &&
|
||||
Array.from({ length: 12 }).map((_, index) => (
|
||||
<Skeleton className="h-32" key={`rotation-provider-skeleton-${index + 1}`} />
|
||||
))}
|
||||
{!isRotationProviderLoading &&
|
||||
secretRotationProviders?.providers.map((provider) => (
|
||||
<div
|
||||
className="group relative cursor-pointer h-32 flex flex-row items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
|
||||
key={`infisical-rotation-provider-${provider.name}`}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onKeyDown={(evt) => {
|
||||
if (evt.key === "Enter") handlePopUpOpen("createRotation", provider);
|
||||
}}
|
||||
onClick={() => handleCreateRotation(provider)}
|
||||
>
|
||||
<img
|
||||
src={`/images/secretRotation/${provider.image}`}
|
||||
height={70}
|
||||
width={70}
|
||||
alt="rotation provider logo"
|
||||
/>
|
||||
<div className="ml-4 max-w-xs text-xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
|
||||
{provider.title}
|
||||
</div>
|
||||
<div className="group-hover:opacity-100 transition-all opacity-0 absolute top-1 right-1">
|
||||
<Tooltip content={provider.description} sideOffset={10}>
|
||||
<FontAwesomeIcon icon={faInfoCircle} className="text-bunker-300" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<CreateRotationForm
|
||||
isOpen={popUp.createRotation.isOpen}
|
||||
workspaceId={workspaceId}
|
||||
onToggle={(isOpen) => handlePopUpToggle("createRotation", isOpen)}
|
||||
provider={(popUp.createRotation.data as TSecretRotationProvider) || {}}
|
||||
/>
|
||||
<Modal
|
||||
isOpen={popUp.activeBot?.isOpen}
|
||||
onOpenChange={(isOpen) => handlePopUpToggle("activeBot", isOpen)}
|
||||
>
|
||||
<ModalContent
|
||||
title={t("integrations.grant-access-to-secrets") as string}
|
||||
footerContent={
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button onClick={() => handleUserAcceptBotCondition()}>
|
||||
{t("integrations.grant-access-button") as string}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handlePopUpClose("activeBot")}
|
||||
variant="outline_bg"
|
||||
colorSchema="secondary"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{t("integrations.why-infisical-needs-access")}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
<DeleteActionModal
|
||||
isOpen={popUp.deleteRotation.isOpen}
|
||||
title="Are you sure want to delete this rotation?"
|
||||
subTitle="This will stop the rotation from dynamically changing. Secret won't be deleted"
|
||||
onChange={(isOpen) => handlePopUpToggle("deleteRotation", isOpen)}
|
||||
deleteKey="delete"
|
||||
onDeleteApproved={handleDeleteRotation}
|
||||
/>
|
||||
<UpgradePlanModal
|
||||
isOpen={popUp.upgradePlan.isOpen}
|
||||
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
|
||||
text="You can add secret rotation if you switch to Infisical's Team plan."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
{ action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.SecretRotation }
|
||||
);
|
||||
@@ -0,0 +1,30 @@
|
||||
import { UserWsKeyPair } from "@app/hooks/api/types";
|
||||
|
||||
import {
|
||||
decryptAssymmetric,
|
||||
encryptAssymmetric
|
||||
} from "../../components/utilities/cryptography/crypto";
|
||||
|
||||
// refactor these to common function in frontend
|
||||
export const generateBotKey = (botPublicKey: string, latestKey: UserWsKeyPair) => {
|
||||
const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
|
||||
|
||||
if (!PRIVATE_KEY) {
|
||||
throw new Error("Private Key missing");
|
||||
}
|
||||
|
||||
const WORKSPACE_KEY = decryptAssymmetric({
|
||||
ciphertext: latestKey.encryptedKey,
|
||||
nonce: latestKey.nonce,
|
||||
publicKey: latestKey.sender.publicKey,
|
||||
privateKey: PRIVATE_KEY
|
||||
});
|
||||
|
||||
const { ciphertext, nonce } = encryptAssymmetric({
|
||||
plaintext: WORKSPACE_KEY,
|
||||
publicKey: botPublicKey,
|
||||
privateKey: PRIVATE_KEY
|
||||
});
|
||||
|
||||
return { encryptedKey: ciphertext, nonce };
|
||||
};
|
||||
+146
@@ -0,0 +1,146 @@
|
||||
import { useRef, useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
|
||||
import { Modal, ModalContent, Step, Stepper } from "@app/components/v2";
|
||||
import { useCreateSecretRotation } from "@app/hooks/api";
|
||||
import { TSecretRotationProvider } from "@app/hooks/api/types";
|
||||
|
||||
import { useNotificationContext } from "~/components/context/Notifications/NotificationProvider";
|
||||
|
||||
import { RotationInputForm } from "./steps/RotationInputForm";
|
||||
import {
|
||||
RotationOutputForm,
|
||||
TFormSchema as TRotationOutputSchema
|
||||
} from "./steps/RotationOutputForm";
|
||||
|
||||
const WIZARD_STEPS = [
|
||||
{
|
||||
title: "Inputs",
|
||||
description: "Provider secrets"
|
||||
},
|
||||
{
|
||||
title: "Outputs",
|
||||
description: "Map rotated secrets to keys"
|
||||
}
|
||||
];
|
||||
|
||||
type Props = {
|
||||
isOpen?: boolean;
|
||||
onToggle: (isOpen: boolean) => void;
|
||||
customProvider?: string;
|
||||
workspaceId: string;
|
||||
provider: TSecretRotationProvider;
|
||||
};
|
||||
|
||||
export const CreateRotationForm = ({
|
||||
isOpen,
|
||||
onToggle,
|
||||
provider,
|
||||
workspaceId,
|
||||
customProvider
|
||||
}: Props) => {
|
||||
const [wizardStep, setWizardStep] = useState(0);
|
||||
const wizardData = useRef<{
|
||||
input?: Record<string, string>;
|
||||
output?: TRotationOutputSchema;
|
||||
}>({});
|
||||
const { createNotification } = useNotificationContext();
|
||||
|
||||
const { mutateAsync: createSecretRotation } = useCreateSecretRotation();
|
||||
|
||||
const handleFormCancel = () => {
|
||||
onToggle(false);
|
||||
setWizardStep(0);
|
||||
wizardData.current = {};
|
||||
};
|
||||
|
||||
const handleFormSubmit = async () => {
|
||||
if (!wizardData.current.input || !wizardData.current.output) return;
|
||||
try {
|
||||
await createSecretRotation({
|
||||
workspaceId,
|
||||
provider: provider.name,
|
||||
customProvider,
|
||||
secretPath: wizardData.current.output.secretPath,
|
||||
environment: wizardData.current.output.environment,
|
||||
interval: wizardData.current.output.interval,
|
||||
inputs: wizardData.current.input,
|
||||
outputs: wizardData.current.output.secrets
|
||||
});
|
||||
setWizardStep(0);
|
||||
onToggle(false);
|
||||
wizardData.current = {};
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Failed to create secret rotation"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onOpenChange={(state) => {
|
||||
onToggle(state);
|
||||
setWizardStep(0);
|
||||
wizardData.current = {};
|
||||
}}
|
||||
>
|
||||
<ModalContent
|
||||
title={`Secret rotation for ${provider.name}`}
|
||||
subTitle="Provide the required inputs needed for the rotation"
|
||||
className="max-w-2xl"
|
||||
>
|
||||
<Stepper activeStep={wizardStep} direction="horizontal" className="mb-4">
|
||||
{WIZARD_STEPS.map(({ title, description }, index) => (
|
||||
<Step
|
||||
title={title}
|
||||
description={description}
|
||||
key={`wizard-stepper-rotation-${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</Stepper>
|
||||
<AnimatePresence exitBeforeEnter>
|
||||
{wizardStep === 0 && (
|
||||
<motion.div
|
||||
key="input-step"
|
||||
transition={{ duration: 0.1 }}
|
||||
initial={{ opacity: 0, translateX: 30 }}
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: -30 }}
|
||||
>
|
||||
<RotationInputForm
|
||||
onCancel={handleFormCancel}
|
||||
onSubmit={(data) => {
|
||||
wizardData.current.input = data;
|
||||
setWizardStep((state) => state + 1);
|
||||
}}
|
||||
inputSchema={provider.template?.inputs || {}}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
{wizardStep === 1 && (
|
||||
<motion.div
|
||||
key="output-step"
|
||||
transition={{ duration: 0.1 }}
|
||||
initial={{ opacity: 0, translateX: 30 }}
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: -30 }}
|
||||
>
|
||||
<RotationOutputForm
|
||||
outputSchema={provider.template?.outputs || {}}
|
||||
onCancel={handleFormCancel}
|
||||
onSubmit={async (data) => {
|
||||
wizardData.current.output = data;
|
||||
await handleFormSubmit();
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { CreateRotationForm } from "./CreateRotationForm";
|
||||
+78
@@ -0,0 +1,78 @@
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { Button, FormControl, FormLabel, SecretInput, Tooltip } from "@app/components/v2";
|
||||
|
||||
type Props = {
|
||||
onSubmit: (data: Record<string, string>) => void;
|
||||
onCancel: () => void;
|
||||
inputSchema: {
|
||||
properties: Record<string, { type: string; desc?: string; default?: string }>;
|
||||
required: string[];
|
||||
};
|
||||
};
|
||||
|
||||
const formSchema = z.record(z.string().trim().optional());
|
||||
|
||||
export const RotationInputForm = ({ onSubmit, onCancel, inputSchema }: Props) => {
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting }
|
||||
} = useForm<Record<string, string>>({
|
||||
resolver: zodResolver(formSchema)
|
||||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{Object.keys(inputSchema.properties || {}).map((inputName) => (
|
||||
<Controller
|
||||
control={control}
|
||||
name={inputName}
|
||||
key={`provider-input-${inputName}`}
|
||||
defaultValue={inputSchema.properties[inputName]?.default}
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
key={`provider-input-${inputName}`}
|
||||
label={
|
||||
<div className="flex items-center space-x-2">
|
||||
<FormLabel className="uppercase mb-0" label={inputName.replaceAll("_", " ")} />
|
||||
{Boolean(inputSchema.properties[inputName]?.desc) && (
|
||||
<Tooltip
|
||||
className="max-w-xs"
|
||||
content={inputSchema.properties[inputName]?.desc}
|
||||
position="right"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faQuestionCircle}
|
||||
size="xs"
|
||||
className="text-bunker-300"
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<SecretInput
|
||||
{...field}
|
||||
containerClassName="normal-case text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800 px-2 py-1.5"
|
||||
required={inputSchema.required.includes(inputName)}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
<div className="mt-8 flex items-center space-x-4">
|
||||
<Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
|
||||
Next
|
||||
</Button>
|
||||
<Button onClick={onCancel} colorSchema="secondary" variant="plain">
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { Button, FormControl, Input, Select, SelectItem, Spinner } from "@app/components/v2";
|
||||
import { useWorkspace } from "@app/context";
|
||||
import { useGetProjectSecrets, useGetUserWsKey } from "@app/hooks/api";
|
||||
|
||||
const formSchema = z.object({
|
||||
environment: z.string().trim(),
|
||||
secretPath: z.string().trim().default("/"),
|
||||
interval: z.number().min(1),
|
||||
secrets: z.record(z.string())
|
||||
});
|
||||
|
||||
export type TFormSchema = z.infer<typeof formSchema>;
|
||||
type Props = {
|
||||
outputSchema: Record<string, unknown>;
|
||||
onSubmit: (data: TFormSchema) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
export const RotationOutputForm = ({ onSubmit, onCancel, outputSchema = {} }: Props) => {
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const environments = currentWorkspace?.environments || [];
|
||||
const workspaceId = currentWorkspace?._id || "";
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
watch,
|
||||
formState: { isSubmitting }
|
||||
} = useForm<TFormSchema>({
|
||||
resolver: zodResolver(formSchema)
|
||||
});
|
||||
|
||||
const environment = watch("environment", environments?.[0]?.slug);
|
||||
const secretPath = watch("secretPath");
|
||||
const selectedSecrets = watch("secrets");
|
||||
|
||||
const { data: userWsKey } = useGetUserWsKey(workspaceId);
|
||||
const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
|
||||
workspaceId,
|
||||
environment,
|
||||
secretPath,
|
||||
decryptFileKey: userWsKey!
|
||||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="environment"
|
||||
defaultValue={environments?.[0]?.slug}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<FormControl label="Environment">
|
||||
<Select
|
||||
value={value}
|
||||
onValueChange={(val) => onChange(val)}
|
||||
className="w-full border border-mineshaft-500"
|
||||
defaultValue={environments?.[0]?.slug}
|
||||
position="popper"
|
||||
>
|
||||
{environments.map((sourceEnvironment) => (
|
||||
<SelectItem
|
||||
value={sourceEnvironment.slug}
|
||||
key={`source-environment-${sourceEnvironment.slug}`}
|
||||
>
|
||||
{sourceEnvironment.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="secretPath"
|
||||
defaultValue="/"
|
||||
render={({ field }) => (
|
||||
<FormControl className="capitalize" label="Secret path">
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="interval"
|
||||
defaultValue={15}
|
||||
render={({ field }) => (
|
||||
<FormControl className="capitalize" label="Rotation Interval (Days)">
|
||||
<Input
|
||||
{...field}
|
||||
min={1}
|
||||
type="number"
|
||||
onChange={(evt) => field.onChange(parseInt(evt.target.value, 10))}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col mt-4 pt-4 mb-2 border-t border-bunker-300/30">
|
||||
<div>Mapping</div>
|
||||
<div className="text-bunker-300 text-sm">Select keys for rotated value to get saved</div>
|
||||
</div>
|
||||
{Object.keys(outputSchema).map((outputName) => (
|
||||
<Controller
|
||||
key={`provider-output-${outputName}`}
|
||||
control={control}
|
||||
name={`secrets.${outputName}`}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<FormControl className="uppercase" label={outputName.replaceAll("_", " ")} isRequired>
|
||||
<Select
|
||||
value={value}
|
||||
onValueChange={(val) => onChange(val)}
|
||||
className="w-full border border-mineshaft-500"
|
||||
position="popper"
|
||||
>
|
||||
{!isSecretsLoading &&
|
||||
secrets
|
||||
?.filter(
|
||||
({ _id }) =>
|
||||
value === _id || !Object.values(selectedSecrets || {}).includes(_id)
|
||||
)
|
||||
?.map(({ key, _id }) => (
|
||||
<SelectItem value={_id} key={_id}>
|
||||
{key}
|
||||
</SelectItem>
|
||||
))}
|
||||
{isSecretsLoading && (
|
||||
<SelectItem value="Loading" isDisabled>
|
||||
<Spinner size="xs" />
|
||||
</SelectItem>
|
||||
)}
|
||||
{!isSecretsLoading && secrets?.length === 0 && (
|
||||
<SelectItem value="Empty" isDisabled>
|
||||
No secrets found
|
||||
</SelectItem>
|
||||
)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
<div className="mt-8 flex items-center space-x-4">
|
||||
<Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
|
||||
Submit
|
||||
</Button>
|
||||
<Button onClick={onCancel} colorSchema="secondary" variant="plain">
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { SecretRotationPage } from "./SecretRotationPage";
|
||||
+283
-241
@@ -1,12 +1,11 @@
|
||||
import { useEffect } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Controller, useFieldArray, useForm } from "react-hook-form";
|
||||
import { faPlus,faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faPlus, faXmark, faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import nacl from "tweetnacl";
|
||||
import { encodeBase64 } from "tweetnacl-util";
|
||||
import * as yup from "yup";
|
||||
|
||||
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
||||
import {
|
||||
decryptAssymmetric,
|
||||
@@ -28,6 +27,7 @@ import {
|
||||
useSubscription,
|
||||
useWorkspace
|
||||
} from "@app/context";
|
||||
import { useToggle } from "@app/hooks";
|
||||
import {
|
||||
useCreateServiceTokenV3,
|
||||
useGetUserWsKey,
|
||||
@@ -115,6 +115,9 @@ export const AddServiceTokenV3Modal = ({
|
||||
handlePopUpOpen,
|
||||
handlePopUpToggle
|
||||
}: Props) => {
|
||||
const [newServiceTokenJSON, setNewServiceTokenJSON] = useState("");
|
||||
const [isServiceTokenJSONCopied, setIsServiceTokenJSONCopied] = useToggle(false);
|
||||
|
||||
const { subscription } = useSubscription();
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
|
||||
@@ -142,6 +145,21 @@ export const AddServiceTokenV3Modal = ({
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
let timer: NodeJS.Timeout;
|
||||
|
||||
if (isServiceTokenJSONCopied) {
|
||||
timer = setTimeout(() => setIsServiceTokenJSONCopied.off(), 2000);
|
||||
}
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [setIsServiceTokenJSONCopied]);
|
||||
|
||||
const copyTokenToClipboard = () => {
|
||||
navigator.clipboard.writeText(newServiceTokenJSON);
|
||||
setIsServiceTokenJSONCopied.on();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const serviceTokenData = popUp?.serviceTokenV3?.data as {
|
||||
@@ -238,6 +256,8 @@ export const AddServiceTokenV3Modal = ({
|
||||
accessTokenTTL: Number(accessTokenTTL),
|
||||
isRefreshTokenRotationEnabled
|
||||
});
|
||||
|
||||
handlePopUpToggle("serviceTokenV3", false);
|
||||
} else {
|
||||
// create
|
||||
if (!currentWorkspace?._id) return;
|
||||
@@ -276,12 +296,15 @@ export const AddServiceTokenV3Modal = ({
|
||||
});
|
||||
|
||||
const downloadData = {
|
||||
publicKey,
|
||||
privateKey,
|
||||
refreshToken
|
||||
public_key: publicKey,
|
||||
private_key: privateKey,
|
||||
refresh_token: refreshToken
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(downloadData, null, 2)], { type: "application/json" });
|
||||
const serviceTokenJSON = JSON.stringify(downloadData, null, 2);
|
||||
setNewServiceTokenJSON(serviceTokenJSON);
|
||||
|
||||
const blob = new Blob([serviceTokenJSON], { type: "application/json" });
|
||||
const href = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = href;
|
||||
@@ -297,7 +320,6 @@ export const AddServiceTokenV3Modal = ({
|
||||
});
|
||||
|
||||
reset();
|
||||
handlePopUpToggle("serviceTokenV3", false);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
createNotification({
|
||||
@@ -306,6 +328,8 @@ export const AddServiceTokenV3Modal = ({
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const hasServiceTokenJSON = Boolean(newServiceTokenJSON);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
@@ -313,264 +337,282 @@ export const AddServiceTokenV3Modal = ({
|
||||
onOpenChange={(isOpen) => {
|
||||
handlePopUpToggle("serviceTokenV3", isOpen);
|
||||
reset();
|
||||
setNewServiceTokenJSON("");
|
||||
}}
|
||||
>
|
||||
<ModalContent title={`${popUp?.serviceTokenV3?.data ? "Update" : "Create"} Service Token V3`}>
|
||||
<form onSubmit={handleSubmit(onFormSubmit)}>
|
||||
<Controller
|
||||
control={control}
|
||||
defaultValue=""
|
||||
name="name"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Name"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="My ST V3"
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
{tokenScopes.map(({ id }, index) => (
|
||||
<div className="flex items-end space-x-2 mb-3" key={id}>
|
||||
<Controller
|
||||
control={control}
|
||||
name={`scopes.${index}.permission`}
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
className="mb-0"
|
||||
label={index === 0 ? "Permission" : undefined}
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-36"
|
||||
>
|
||||
<SelectItem value="read" key="st-v3-read">
|
||||
Read
|
||||
</SelectItem>
|
||||
<SelectItem value="readWrite" key="st-v3-write">
|
||||
Read & Write
|
||||
</SelectItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name={`scopes.${index}.environment`}
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
className="mb-0"
|
||||
label={index === 0 ? "Environment" : undefined}
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-36"
|
||||
>
|
||||
{currentWorkspace?.environments.map(({ name, slug }) => (
|
||||
<SelectItem value={slug} key={slug}>
|
||||
{name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name={`scopes.${index}.secretPath`}
|
||||
defaultValue="/"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
className="mb-0 flex-grow"
|
||||
label={index === 0 ? "Secrets Path" : undefined}
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Input {...field} placeholder="can be /, /nested/**, /**/deep" />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<IconButton
|
||||
onClick={() => remove(index)}
|
||||
size="lg"
|
||||
colorSchema="danger"
|
||||
variant="plain"
|
||||
ariaLabel="update"
|
||||
className="p-3"
|
||||
{!hasServiceTokenJSON ? (
|
||||
<form onSubmit={handleSubmit(onFormSubmit)}>
|
||||
<Controller
|
||||
control={control}
|
||||
defaultValue=""
|
||||
name="name"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Name"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} />
|
||||
</IconButton>
|
||||
</div>
|
||||
))}
|
||||
<div className="my-4 ml-1">
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
onClick={() =>
|
||||
append({
|
||||
permission: "read",
|
||||
environment: currentWorkspace?.environments?.[0]?.slug || "",
|
||||
secretPath: "/"
|
||||
})
|
||||
}
|
||||
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
||||
size="xs"
|
||||
>
|
||||
Add Scope
|
||||
</Button>
|
||||
</div>
|
||||
{tokenTrustedIps.map(({ id }, index) => (
|
||||
<div className="flex items-end space-x-2 mb-3" key={id}>
|
||||
<Controller
|
||||
control={control}
|
||||
name={`trustedIps.${index}.ipAddress`}
|
||||
defaultValue="0.0.0.0/0"
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="My ST V3"
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
{tokenScopes.map(({ id }, index) => (
|
||||
<div className="flex items-end space-x-2 mb-3" key={id}>
|
||||
<Controller
|
||||
control={control}
|
||||
name={`scopes.${index}.permission`}
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
className="mb-0"
|
||||
label={index === 0 ? "Permission" : undefined}
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-36"
|
||||
>
|
||||
<SelectItem value="read" key="st-v3-read">
|
||||
Read
|
||||
</SelectItem>
|
||||
<SelectItem value="readWrite" key="st-v3-write">
|
||||
Read & Write
|
||||
</SelectItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name={`scopes.${index}.environment`}
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
className="mb-0"
|
||||
label={index === 0 ? "Environment" : undefined}
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-36"
|
||||
>
|
||||
{currentWorkspace?.environments.map(({ name, slug }) => (
|
||||
<SelectItem value={slug} key={slug}>
|
||||
{name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name={`scopes.${index}.secretPath`}
|
||||
defaultValue="/"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
className="mb-0 flex-grow"
|
||||
label={index === 0 ? "Trusted IP" : undefined}
|
||||
label={index === 0 ? "Secrets Path" : undefined}
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Input
|
||||
value={field.value}
|
||||
onChange={(e) => {
|
||||
if (subscription?.ipAllowlisting) {
|
||||
field.onChange(e);
|
||||
return;
|
||||
}
|
||||
|
||||
handlePopUpOpen("upgradePlan");
|
||||
}}
|
||||
placeholder="123.456.789.0"
|
||||
/>
|
||||
<Input {...field} placeholder="can be /, /nested/**, /**/deep" />
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
)}
|
||||
/>
|
||||
<IconButton
|
||||
onClick={() => remove(index)}
|
||||
size="lg"
|
||||
colorSchema="danger"
|
||||
variant="plain"
|
||||
ariaLabel="update"
|
||||
className="p-3"
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} />
|
||||
</IconButton>
|
||||
</div>
|
||||
))}
|
||||
<div className="my-4 ml-1">
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
onClick={() =>
|
||||
append({
|
||||
permission: "read",
|
||||
environment: currentWorkspace?.environments?.[0]?.slug || "",
|
||||
secretPath: "/"
|
||||
})
|
||||
}
|
||||
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
||||
size="xs"
|
||||
>
|
||||
Add Scope
|
||||
</Button>
|
||||
</div>
|
||||
{tokenTrustedIps.map(({ id }, index) => (
|
||||
<div className="flex items-end space-x-2 mb-3" key={id}>
|
||||
<Controller
|
||||
control={control}
|
||||
name={`trustedIps.${index}.ipAddress`}
|
||||
defaultValue="0.0.0.0/0"
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<FormControl
|
||||
className="mb-0 flex-grow"
|
||||
label={index === 0 ? "Trusted IP" : undefined}
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Input
|
||||
value={field.value}
|
||||
onChange={(e) => {
|
||||
if (subscription?.ipAllowlisting) {
|
||||
field.onChange(e);
|
||||
return;
|
||||
}
|
||||
|
||||
handlePopUpOpen("upgradePlan");
|
||||
}}
|
||||
placeholder="123.456.789.0"
|
||||
/>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
if (subscription?.ipAllowlisting) {
|
||||
removeTrustedIp(index);
|
||||
return;
|
||||
}
|
||||
|
||||
handlePopUpOpen("upgradePlan");
|
||||
}}
|
||||
size="lg"
|
||||
colorSchema="danger"
|
||||
variant="plain"
|
||||
ariaLabel="update"
|
||||
className="p-3"
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} />
|
||||
</IconButton>
|
||||
</div>
|
||||
))}
|
||||
<div className="my-4 ml-1">
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
onClick={() => {
|
||||
if (subscription?.ipAllowlisting) {
|
||||
removeTrustedIp(index);
|
||||
appendTrustedIp({
|
||||
ipAddress: "0.0.0.0/0"
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
handlePopUpOpen("upgradePlan");
|
||||
}}
|
||||
size="lg"
|
||||
colorSchema="danger"
|
||||
variant="plain"
|
||||
ariaLabel="update"
|
||||
className="p-3"
|
||||
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
||||
size="xs"
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} />
|
||||
</IconButton>
|
||||
Add IP Address
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<div className="my-4 ml-1">
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
onClick={() => {
|
||||
if (subscription?.ipAllowlisting) {
|
||||
appendTrustedIp({
|
||||
ipAddress: "0.0.0.0/0"
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
handlePopUpOpen("upgradePlan");
|
||||
}}
|
||||
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
||||
size="xs"
|
||||
>
|
||||
Add IP Address
|
||||
</Button>
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="expiresIn"
|
||||
defaultValue=""
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label={`${popUp?.serviceTokenV3?.data ? "Update" : ""} Refresh Token Expires In`}
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
className="mt-4"
|
||||
>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-full"
|
||||
>
|
||||
{expirations.map(({ label, value }) => (
|
||||
<SelectItem value={String(value || "")} key={`api-key-expiration-${label}`}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
defaultValue="7200"
|
||||
name="accessTokenTTL"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Access Token TTL (seconds)"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="7200"
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<div className="mt-8 mb-[2.36rem]">
|
||||
<Controller
|
||||
control={control}
|
||||
name="isRefreshTokenRotationEnabled"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Switch
|
||||
id="label-refresh-token-rotation"
|
||||
onCheckedChange={(isChecked) => onChange(isChecked)}
|
||||
isChecked={value}
|
||||
name="expiresIn"
|
||||
defaultValue=""
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label={`${popUp?.serviceTokenV3?.data ? "Update" : ""} Refresh Token Expires In`}
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
className="mt-4"
|
||||
>
|
||||
Refresh Token Rotation
|
||||
</Switch>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-full"
|
||||
>
|
||||
{expirations.map(({ label, value }) => (
|
||||
<SelectItem value={String(value || "")} key={`api-key-expiration-${label}`}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-8 flex items-center">
|
||||
<Button
|
||||
className="mr-4"
|
||||
size="sm"
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
isDisabled={isSubmitting}
|
||||
<Controller
|
||||
control={control}
|
||||
defaultValue="7200"
|
||||
name="accessTokenTTL"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Access Token TTL (seconds)"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="7200"
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<div className="mt-8 mb-[2.36rem]">
|
||||
<Controller
|
||||
control={control}
|
||||
name="isRefreshTokenRotationEnabled"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Switch
|
||||
id="label-refresh-token-rotation"
|
||||
onCheckedChange={(isChecked) => onChange(isChecked)}
|
||||
isChecked={value}
|
||||
>
|
||||
Refresh Token Rotation
|
||||
</Switch>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-8 flex items-center">
|
||||
<Button
|
||||
className="mr-4"
|
||||
size="sm"
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
isDisabled={isSubmitting}
|
||||
>
|
||||
{popUp?.serviceTokenV3?.data ? "Update" : "Create"}
|
||||
</Button>
|
||||
<Button colorSchema="secondary" variant="plain">
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
|
||||
<p className="mr-4 break-all">{newServiceTokenJSON}</p>
|
||||
<IconButton
|
||||
ariaLabel="copy icon"
|
||||
colorSchema="secondary"
|
||||
className="group relative"
|
||||
onClick={copyTokenToClipboard}
|
||||
>
|
||||
{popUp?.serviceTokenV3?.data ? "Update" : "Create"}
|
||||
</Button>
|
||||
<Button colorSchema="secondary" variant="plain">
|
||||
Cancel
|
||||
</Button>
|
||||
<FontAwesomeIcon icon={isServiceTokenJSONCopied ? faCheck : faCopy} />
|
||||
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
|
||||
Click to copy
|
||||
</span>
|
||||
</IconButton>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
<UpgradePlanModal
|
||||
isOpen={popUp?.upgradePlan?.isOpen}
|
||||
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
|
||||
|
||||
Reference in New Issue
Block a user